[쉽길] 프로토타입 제작기 (feat. 피그마 MCP, gemini-CLI)
Figma MCP, Gemini CLI, Cursor 등을 활용하여 쉽길 프로젝트의 초기 프로토타입을 제작하고 스타일 가이드를 수립한 과정입니다.
이전 게시글 보고오기 »
계획이 좀 바뀌었다.
원래 계획은 팀원들과 각자 페이지를 맡아 피그마 작업 후에 톤앤매너를 맞추고 코드화하려고 했었다. 그러나 피그마를 다들 처음 써보기도 하고, 다들 각자의 작업이 바쁘기 때문에 내가 초안을 작성하기로 했다.
프로토타입 제작기
우선 AI와 MCP를 적극 활용하기로 했기 때문에, 가장 먼저 피그마의 MCP를 써보기로 했다. 피그마의 MCP가 유료 기능이어서, 대신 MCP를 제공하는 플러그인을 찾았다.
1. 피그마 플러그인 cursor-talk-to-figma MCP
Cursor에서 사용하는 피그마의 플러그인이다. 기능 정의서의 ver1의 기능만 구현하는 페이지를 만들어 달라고 자연어로 요청했고, 몇 분이 지나자 html, css, js 파일로 구성된 프로토타입을 뚝딱 만들어냈다.
- 기능 정의서 csv로 제공했더니 반영해줌
- html, css, js 파일로 만들어줌
- 작동 방식은 gemini-cli MCP 혹은 copilot과 유사함
- 프롬프트를 입력하면 agent 모드로 코드를 작성해줌
- 커서에서 내가 코드를 수정할 수 있음
메인페이지
경로 안내 스토리 카드
경로 안내 중 편의 시설 조회
로그인 팝업
2. 피그마 AI
피그마 MCP를 사용하지 못해서, 아쉬운대로 피그마의 자체 AI 기능을 활용해보았다.
원래 AI를 활용하고자 했던 부분이 “기능정의서의 text 내용을 피그마에 visualization하는 과정”이었는데,
수많은 플러그인과 기능들 중에 대부분이 피그마 레이아웃 디자인을 코드화하는 것이었다.
(내가 못 찾은 걸 수도…)
현재 피그마 AI는 배타버전으로 무료 사용자는 제한된 토큰 내에서 사용할 수 있다.
- 피그마 프로토타입만 만드려고 했는데, .tsx 과 .css 파일까지 만들어줌
- 요소 하나를 수정하고 싶은데 내가 직접 삭제/수정할 수 없고, 자연어 프롬프트로 요구해야 한다.
- 요소 선택해서 수정 요구할 수 있는데, 프롬프트 하나에 요소 하나만 선택할 수 있다.
메인페이지
길찾기 검색
길찾기 결과
역 정보
문제 상황
위의 2번까지 작업해보면서 피그마 플러그인과 AI를 활용해봤는데,
원래 정했던 작업 순서와는 다르게, 피그마 레이아웃을 그려주는 플러그인을 찾지 못했다.
대부분의 플러그인이나 AI는 코드를 구현하고 html, tsx, css 파일 등을 만들어서 페이지를 보여주더라.
그래서 피그마 작업에 집착하지 않고 MCP를 사용하는 것에 의의를 두기로 하고, 작업 과정을 아래와 같이 수정했다.
- cursor-talk-to-figma MCP를 활용해서 초안을 만들고, 직접 코드 뜯어보면서 기능 정의서에 맞게 수정하기
- 어느 정도 기능 구현을 마치면 디자인은 GPT에게 맡기기
- 데이터 연결되는 부분은 fake data 로 채우기
그렇게 해서 만든 프로토타입이 3번(Gemini-CLI) 작업물이다.
3. Gemini-CLI
Cursor 토큰 만료 이슈로 gemini-CLI로 갈아탔다.
cursor-talk-to-figma MCP와 동일한 프롬프트를 입력하고, 원하는 방향으로 추가 프롬프트를 주면서 완성도를 높여갔다.
- 기능정의서에 입력된 기능을 토대로 기능을 구현함
- 색상은 온라인실습실 컬러를 추출해 색상표를 구성했고,
- 길찾기에서의 출발역, 도착역 입력과 역 정보에서의 역 이름 입력 프로세스를 통일함
- 만들어진 페이지를 바탕으로 스타일 가이드를 작성함
메인페이지
구글 로그인
마이페이지 (경로 안내 우선순위 설정)
길 찾기 검색
길 찾기 검색 - 자동 추천
역 정보 검색 - 역명 불일치
경로 안내 스토리 카드
경로 안내 스토리 카드
경로 안내 중 편의시설 정보 확인
역 정보 - 호선 정보
역 정보 - 시설 정보
역 정보 - 실시간 정보
사용한 Prompt 예시
프롬프트는 최대한 자세하고 명확하게 작성하고자 했다.
그러기 위해서 PRD의 역할을 하게 될 기능정의서 역시 구체적으로 작성했다. 아래는 길찾기 페이지에서 사용자가 역 이름을 입력할 때 자동완성 및 입력 처리하는 기능에 대한 기능정의서 내용이다.
| 항목 | 내용 |
|---|---|
| 화면 구성 | 길찾기 (출발역/도착역) |
| 기능명 | 텍스트 입력 정보 후처리 |
| 기능 요구사항 | 입력값과 유사한 역 이름을 노출하여, 사용자가 역을 선택하고 확정할 수 있도록 합니다. |
| 설명 | 사용자 입력을 기반으로 유사한 역을 추천(검색 자동완성으로)해주면 사용자가 역을 선택하여 확정할 수 있도록 유도. 유효한 역을 입력받기 위함. |
| 사용할 데이터 | 역 이름 DB (static data) |
| 레퍼런스 |  |
이렇게 정의된 기능정의서를 디렉토리 안에 저장하고, 아래와 같은 프롬프트를 작성했다.
1
2
@기능정의서 에서 ver1에 YES 표시되어 있는 기능만 구성해줘.
메인 페이지는 첨부한 이미지를 참고해서, 길찾기와 역 정보 검색 두 개의 버튼으로 구성해줘.
1
2
3
역 정보 검색과 길찾기에서의 출발역, 도착역 입력은 같은 방식으로 진행되도록 해줘.
사용자가 입력한 텍스트에서 접두(prefix) 검색으로 자동 완성을 제안하고,
사용자가 자동 완성 중에 클릭하면 입력칸에 해당 역이 입력되도록 수정해줘.
1
2
3
4
5
6
7
8
9
10
경로 안내 페이지에서 헤더부분은 출발역과 도착역을 마커표시하고,
환승역이 포함된다면 환승역도 마커로 추가해서 보여줘.
각 역의 호선 색깔과 일치하는 색으로 마커 색깔을 지정하고,
진행선 하단에는 소요 시간을 표시해줘.
중앙에는 경로 안내 텍스트를 보여주는데, 중요한 정보(0-0 플랫폼, 0호선, 에스컬레이터 등)에는
포인트 컬러를 사용하고 각 텍스트와 어울리는 이모지를 추가해줘.
‘이전’, ‘다음’ 버튼은 텍스트를 가리지 않게 현재보다 70% 크기로 수정해줘.
1
2
역 이름 입력이 끝나고 ‘역 정보 검색’ 버튼을 누르면,
입력창은 화면에서 보이지 않고 역 상세 정보 페이지만 보이도록 해줘.
Prompt를 최대한 자세하고 명확하게 작성할수록 내가 원하는 그림과 가까운 결과를 만들어냈다.
AI를 활용하는 것도 좋지만, 무작정 ‘딸깍’이 아니라
내가 원하는 바를 그려놓고 사용하는 언어, 기술, 기능, 스타일 등을 명확하게 전달함으로써
“구현” 정도에만 활용하는 게 현명하게 사용하는 방법인 것 같다.
그렇지 않으면, AI를 쓰다가 더 꼬이게 되고 코드도 알아보기 힘들고 시간 낭비만 하게 될 것 같다.