4화: AI로 UX를 하기 위한 프롬프트 가이드
2달 안에 AI 프로토타이핑 마스터하기
Figma MCP를 마쳤으면, 이제 Figma 디자인을 AI 프로토타이핑 툴인 Claude Code나 Cursor에 연결해서 구현할 차례입니다. 기존에 있는 Figma 디자인을 AI 프로토타이핑 툴에 넣어서 구현을 하면, 그때부터는 Figma와 AI 프로토타이핑 툴 둘 다 사용해서 빠르고 효율적으로 디자인도 하고, 디자인 자체를 코드로 구현하는 디자인 엔지니어링을 할 수 있습니다.
AI 프로토타이핑 툴을 사용할 때 프롬프트를 길고 복잡하게 작성할 필요는 없습니다. AI 프로토타이핑 툴은 주니어 디자인 엔지니어나 주니어 프로토타이퍼와 일하는 것과 비슷해서, 맥락(Context)을 주고 “뭐 해줘”라고 간단하게 요청하면 됩니다.
주니어 디자인 엔지니어와 일할 때 처음에 온보딩을 잘해야 나중에 간단하게만 말해도 이미 온보딩이 잘 되어있기 때문에 대충 얘기해도 디자인 아웃풋이 좋습니다. AI 프로토타이핑 툴도 마찬가지입니다. 그래서 첫 프롬프트가 정말 중요합니다. 디자인을 구현할 때 첫 프롬프트는 “베이스(base)”를 만드는 순간이고, 그 베이스의 품질이 이후 결과를 거의 결정합니다. 프로덕션에 가까운 결과물을 원한다면, 베이스는 Figma에서(디자인 시스템 컴포넌트를 사용해서) 먼저 제대로 만들어두고, 그 베이스를 AI 프로토타이핑 툴에서 구현한 다음, 그 위에서 아웃풋을 반복 개선하는 방식이 가장 안정적입니다.
베이킹으로 비유하면 이해하기 쉽습니다. 케이크 시트(베이스)가 견고하게 잘 만들어져 있다면, 위에 크림과 데코는 마음껏 실험해도 전체가 버텨줍니다. 하지만 시트가 울퉁불퉁하고 무너지기 쉬우면, 데코가 아무리 예뻐도 나중에 결국 케이크가 무너집니다. 그래서 기존 디자인 시스템 컴포넌트로 Figma에서 베이스를 잘 만들고, 그 위에서 실험하는 게 정석입니다. 결국 질문은 하나로 수렴합니다. “좋은 베이스를 어떻게 만들까?” 그리고 그 해답 중 하나가 좋은 첫 프롬프트입니다.
주말 뉴욕 거리에서 찍은 광고판. 업계 불문하고 부동산 회사에서도 AI를 적극적으로 도입하는 요즘입니다.
포도라는 스타트업에서 디자인 매니저가 말합니다.
세상이 너무 빠르게 변화하고 있어. AI 프로토타이핑 툴은 이제 필수야. 모든 디자이너는 이제 디자인을 AI 프로토타이핑을 결합하자.
Figma MCP + Cursor/Claude Code의 연결을 마쳤기 때문에, 이제는 직접 AI 프로토타이핑 툴을 실행하는 일만 남았습니다. 다음 단계를 거치면 기존에 있는 Figma 디자인을 AI 프로토타이핑 툴로 실행한 다음에 그 이후의 작업을 Figma와 AI 프로토타이핑을 통해 작업할 수 있습니다.
Figma Design을 AI 프로토타이핑 툴에 구현하기 위한 플로우Step 1. AI 프로토타이핑할 Figma 디자인 선택하기
Figma Desktop에서 베이스로 사용할 디자인을 엽니다.
구현할 Frame을 선택합니다.
Dev Mode를 선택합니다.
원하는 Frame의 링크를 복사합니다.
Step 2. 폴더 생성하고 Claude/Cursor에 프롬프트 입력하기
데스크탑에 프로젝트 폴더를 생성합니다.
Claude 또는 Cursor에서 프로젝트 폴더를 엽니다.
아래 프롬프트를 입력하고, 프롬프트 아래에 @ + Figma 링크를 포함합니다.
Figma의 이 디자인을 React JS로 구현해줘. 디테일과 파일에서 사용된 변수/값을 정확히 반영해줘. 향후 디자인 일관성을 위해 JSON 형식의 디자인 시스템 파일도 만들어줘. 프로젝트 폴더에 있는 [디자인 시스템 토큰 파일 이름].json을 디자인 토큰 참고용으로 사용하고, 가능하면 디자인의 요소들을 디자인 토큰과 assets 폴더의 아이콘에 매핑해줘. @ + [Figma 링크]
해당 프롬프트는 영어로 입력하는 것이 더 좋은데, 영문 프롬프트는 다음과 같습니다.
브런치가 복사가 안 되서 프롬프트 필요하시면 댓글 남겨주세요.Step 3. AI 프로토타이핑 아웃풋 확인하기
프로젝트 폴더를 Terminal에서 엽니다. (폴더 우클릭 → Open in Terminal)
Terminal에서 다음 명령어를 입력 후 엔터 누릅니다: npm run dev
브라우저에서 localhost로 접속해 구현된 디자인 상태를 확인합니다.
뉴욕 테크 실무에서 실제로 적용하며 배운 팁입니다.
1. 모든 Figma Frame은 간단하게라도 전처리가 되어있어야 합니다.
선택한 Figma Frame이 레이어 네이밍이 되어 있고, auto-layout이 정리되어 있고, 디자인 시스템 컴포넌트를 최대한 사용한 상태여야지 아웃풋의 정확도와 퀄리티가 올라갑니다.
세세한 요소까지 레이어 네이밍이 되어있을 필요는 없지만, 화면에서 가장 중요한 요소들이랑 여러 페이지에서 여러번 사용되는 요소는 레이어 네이밍이랑 auto-layout은 필수입니다. 예를 들어서 데이터가 담긴 테이블이 중요한 페이지고 그 데이터 테이블이 다른 페이지에서도 사용되는 요소라면, 그 데이터 테이블의 주요 요소에 대한 레이어 네이밍 및 auto-layout이 되어있어야 전반적인 AI 프로토타이핑 시간을 아낍니다.
전처리를 안하면 오류가 너무 많이 생기고 그 오류를 고치는데 하루종일 걸릴 수 있습니다. 그럴 때는 차라리 Figma로 돌아가서 Figma Frame 전처리를 마친 다음에 다시 AI 프로토타이핑 툴을 실행하는 것이 좋습니다.
2. 선택한 Frame은 Frame 자체가 auto-layout이면 안 됩니다.
화면 전체가 auto-layout로 구성돼 있다면, 그 auto-layout 덩어리를 Frame 안에 “담아서” 구조를 만드세요. 저희 팀의 AI 프로토타이핑 전처리 과정을 도와주는 인턴이 얼마 전에 저한테 와서 Figma MCP 및 Cursor 셋업을 마쳤는데도 디자인이 생성 안 된다고 찾아왔습니다. 이슈는 두가지였습니다. 주요 요소에 대한 전처리가 안 되어있었고, Figma MCP를 통해 Cursor에 준 Figma Frame의 링크가 auto-layout frame안에 담겨있었습니다. Auto-layout frame을 다시 Auto-layout이 안 된 그냥 frame에 옮겨 담은 다음에 Claude/Cursor에 MCP로 제공해야 정확한 아웃풋이 생성됩니다.
3. 전반적인 폴더 구조를 하면서 익히세요
AI 프로토타이핑을 하며 생소한 개념이 여러번 출현할 것입니다. 그 때 여러번 등장해서 생소하지만 낯이 익어가는 개념들을 AI 프로토타이핑 아웃풋이 생성되는 것을 기다릴 때 Gemini/ChatGPT/Claude Chat등에 개념 관련 설명을 해달라고 프롬프트해보세요.
배우면서 익히는게 이해가 더 잘 될 것입니다. 그렇게 AI 프로토타이핑 플로우의 구조를 천천히 이해해가면 됩니다.
다음 글에서는 Figma 디자인을 AI 프로토타이핑 툴에 구현하기 위한 프롬프트 가이드 및 플로우에 대해서 다룰 예정입니다.
MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.
예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.