지난 이야기: 큰 기획에서 '시간 가계부'까지
이전 사례글에서는 거창했던 제 두 가지 프로젝트 아이디어를 잠시 내려놓는 과정을 공유했었어요.
기획자-디자이너 협업 툴, 그리고 시간-일정-프로젝트 통합 관리 서비스였죠.
의욕만 앞서다 보니 백엔드나 데이터 구조처럼 제가 잘 모르는 영역에서 길을 잃고 헤매기 일쑤였습니다.
"내가 뭘 모르는지도 모르겠다"는 불안감만 커졌어요. 😵💫
스터디 피드백을 통해 방향을 틀어, 통합 관리 서비스의 핵심 기능 하나만 떼어내
'시간 가계부'라는 작은 서비스로 다시 시작했습니다.
시간을 자산처럼 관리한다는 컨셉으로, 제가 감당할 수 있는 작은 단위부터 만들어보기로 한 거죠.
배포 실패가 가져다준 디자인 리뉴얼 기회
그렇게 차근차근 만들어가던 중, 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 연동된 새 피그마 캔버스에 디자인 복사 붙여넣기
그 외 팁! 아이디어만 있고, 디자인은 막막할 때
피그마 샘플 디자인 적극 활용!
예제를 내 내용에 맞게 수정 → 퀄리티 상승피그마 커뮤니티 탐색
다양한 디자인 파일 참고 + 라이선스 확인 필수
결론, 스터디장님의 꿀팁을 흘려듣지 말자!
