지난 이야기: 큰 기획에서 '시간 가계부'까지
이전 사례글에서는 거창했던 제 두 가지 프로젝트 아이디어를 잠시 내려놓는 과정을 공유했었어요.
기획자-디자이너 협업 툴, 그리고 시간-일정-프로젝트 통합 관리 서비스였죠.
의욕만 앞서다 보니 백엔드나 데이터 구조처럼 제가 잘 모르는 영역에서 길을 잃고 헤매기 일쑤였습니다.
"내가 뭘 모르는지도 모르겠다"는 불안감만 커졌어요. 😵💫
스터디 피드백을 통해 방향을 틀어, 통합 관리 서비스의 핵심 기능 하나만 떼어내
'시간 가계부'라는 작은 서비스로 다시 시작했습니다.
시간을 자산처럼 관리한다는 컨셉으로, 제가 감당할 수 있는 작은 단위부터 만들어보기로 한 거죠.
배포 실패가 가져다준 디자인 리뉴얼 기회
그렇게 차근차근 만들어가던 중, Vercel 배포에서 예상치 못한 에러가 발생했습니다.
해결 방법을 찾다가 문득 이런 생각이 들었어요.
"어 차피 막힌 거, 이참에 제대로 디자인부터 다시 만져보자!"
개발자 없이 혼자 모든 걸 해야 하는 상황에서, 디자인은 늘 뒷전이었거든요.
이번 기회에 피그마(Figma)와 AI를 활용해 디자인을 갈아엎어 보기로 했습니다.
AI와 피그마로 시도해본 3가지 방법
방법 1: 마음에 드는 예제 디자인 뜯어고치기
피그마가 제공하는 예제 중에서 마음에 드는 걸 하나 선택
AI로 한글 번역: 모르는 언어라 전체 번역 요청
내용 채우기: point and edit 기능으로 각 영역을 제 서비스에 맞게 수정
예: 좌측 메뉴 → '타이머', '오늘의 정산'더미 데이터 생성: Cursor에게 .md 파일로 정리 요청 후 복붙
방법 2: 디자인 가이드 문서를 AI로 시각화하기
이전에 Vooster AI로 만든 디자인 가이드를 활용
Gemini에게 레퍼런스 이미지와 함께 가이드 문서를 주고, 더 세련된 디자인 시스템 요청
결과물을 피그마 파일로 시각화
방법 3: 깃허브 + 피그마 연결해서 랜덤 플레이!
피그마의 make 기능으로 깃허브 리포지토리 연결
처음엔 point and edit → 나중엔 "가이드 무시하고 네 마음대로 해봐!" 😎
AI의 창의력 실험으로 의외의 결과물 얻음
그래서 뭘 배웠냐면요 🧐
point and edit 기능은 단순한 수정이 아님
CSS 수정처럼 추상적인 요청도 가능!
copy design 버튼으로 레이어가 살아있는 상태 복사 가능
그대로 제 작업 파일로 옮겨 쓸 수 있음
스터디장님이 왜 "개발 전에 피그마로 먼저 디자인을 구성하는 게 좋다"고 하셨는지 온몸으로 이해되는 순간이었습니다.
저만의 '바이브 코딩' 초반 작업 흐름도
만들고 싶은 디자인이 명확할 때 (Vooster AI 유료 구독 시 추천)
Vooster AI로 기획/설계 문서 생성
레퍼런스 이미지 + 디자인 가이드를 Gemini에게 전달
결과물 → 피그마 make로 시각화
Vooster 코드 → GitHub 업로드
GitHub 연동된 새 피그마 캔버스에 디자인 복사 붙여넣기
그 외 팁! 아이디어만 있고, 디자인은 막막할 때
피그마 샘플 디자인 적극 활용!
예제를 내 내용에 맞게 수정 → 퀄리티 상승피그마 커뮤니티 탐색
다양한 디자인 파일 참고 + 라이선스 확인 필수
결론, 스터디장님의 꿀팁을 흘려듣지 말자!
