1. 소개
이번 3주차 스터디의 목표는 피그마 메이크에서 작업한 디자인 결과물을 바이브 코딩 툴과 연동하여, 바이브 코딩 및 배포 환경을 구축하는 것입니다. (레플릿, 커서..)
2. 진행 방법
▶ 레플릿(Replit)
피그마 메이크 결과물 코드 추출
피그마 메이크와 레플릿 간에는 호환성에 한계가 있었습니다.
일반 피그마 디자인은 임포트가 가능하지만, 피그마 메이크는 자동 임포트가 불가하여 소스를 직접 복사하여 등록해야 했습니다.
레플릿 프로젝트 생성 및 정리
메이크에서 추출한 소스를 레플릿에 수동 등록한 뒤, 레플릿 환경에 맞게 정리하도록 요청.
그러나 디자인 반영 및 미리보기 과정에서 반복적으로 오류 발생.
피그마 메이크로 생성된 소스를 임포트 하며 발생한 경로, 버전 이슈
▶ 커서(Cursor) 연동
피그마 컴포넌트 내의 CSS 경로 및 구조 오류 확인
레플릿과 유사하게 경로 오류가 지속적으로 발생, 복잡한 구조의 컴포넌트일수록 에러가 반복되었습니다.
오류 화면을 캡쳐하고 수정을 요청하면, '완벽' 하게 수정되었다고 하나 표시가 안되는 문제가 반복.
반복적인 오류 수정 요청, 조금씩 모습을 갖춰 가는 듯 싶지만 피그마 메이크에서 생성된 디자인, 스타일과는 차이가 큼
▶ 디자인 테마 추가 (iOS26 liquid glass 테마)
피그마 메이크의 디자인 베리에이션 기능 체크를 위한 디자인 수정 진행
iOS26 liquid glass 스타일 가이드를 지정하여 현재 메뉴, 디자인, 기능 유지하며 디자인 스타일 변경 요청
명확한 디자인 가이드가 제공되는 경우 변경에 용이함
3. 결과 및 배운 점
피그마 메이크에서 생성된 복잡한 소스 코드에 대한 경로, 버전 기재 오류 등의 반복적인 문제 발생 (레플릿, 커서 동일)
피그마 메이크의 디자인 스타일을 그대로 바이브 코딩 툴로 적용시키기 위한 방법 체크 필요
피그마 메이크 자체 배포 방안 체크
DB 연동, 배포는 코딩 지식과 경험이 있으면 유리하다.
피그마는 좋은 디자인 도구이자, 최종 IT 결과물을 만들어 낼 수 있는 도구가 될 것 같다.
개발팀 피드백
피그마 디자인으로 가이드를 만들고, 피그마 메이크 임포트 하여 요청시, 의도한 디자인대로 구현 해줌 (디자인 파트 의견)
피그마 메이크와 외부 AI 에이전트의 연결이 확장 된다면 IT 협업 프로세스에 많은 개선과 변화가 있을것 같습니다.
