STEP 03. 찐망고 사례로 배우는 Figma AI & MVP 설계

 

STEP 02. AI 데이터 UX 리서치 — 정책서 없이 만들었더니 생긴 일

 

이전 글에서 리서치는 안하면 결국 나중에 두번일하는 것이라고 정의했는데

그 다음은 화면을 그리는 단계다

정석대로라면 Figma에서 와이어프레임을 잡고, Hi-Fi로 올리고,

프로토타입으로 흐름을 검증한 다음에 개발로 들어간다.

화면설계없이 코드를 치면 중간에 구조를 뜯어고치게 될 수 밖에 없다.

하지만 찐망고 사주는 피그마를 안썼..

입력폼하나, 결과화면하나, 마이페이지하나 

홤녀이 세게인 서비스가 이미 머릿속에 있었다. 머리속에 있는 걸 바로 코드로 옮기는게 빨랐다.

AI랑 함께하니 화면을 보고 바로 CSS를 수정했다.

그런데 이건 화면이 단순할 때만 통하는 방식이다.

 

화면이 여러개면 머리속으로는 불가하다.

화면 간 흐름이 꼬이기 시작한다. 입력 -> 결과 -> 공유까지는 한 줄인데

여기에 결제가 붙고, 마이페이지에 기록관리가 붙고, 설정화면이 붙으면 흐름을 한눈에 봐야한다.

그게 와이어 프레임이다.

팀이 생기면 이건 화면 갯수와 상관없이 무조건 필수다.

혼자 만들때는 내 머릿속이 곧 기획서였지만, 디자이너와 개발자가 나뉘는 순간

이화면이 이렇게 생겼다를 공유할 수단이 필요하다. 

피그마 파일은 그 역할을 한다.

디자인 시스템이 필요한 규모가 되면 얘기가 또 달라진다.

버튼 하나, 인풋하나를 매번 새로 만든다는 생각을 하는건 말도 안되는거다.

컴포넌트로 묶고, Variables로 컬러와 간격을 토큰화하면

한 곳만 바꿔도 전체가 바뀐다. 유지보수가 완전히 달라지는 지점이 여기다.

 

수업할 때는 실제 운영중인 사이트를 카피캣으로 만든다.

꾸블랙치킨 랜딩페이지를 피그마로 작업한 적이있는데

이파일 하나로 오토레이아웃, 컴포넌트 프로퍼티, Variables 시스템을 전부 가르칠 수있다.

오토레이아웃은 CSS의 Flex와 같다 Hug는 fit-content이고, fill은 flex:1이다 

이걸 이렇게 설명하면 프론트엔드를 아는 사람은 바로 이해한다.

디자이너한테는 반대로, CSS Flex를 오토레이아웃으로 설명하면 개발자랑 대화가 달라진다.

컴포넌트 프로퍼티로 버튼의 상태를 관리하고,

Variables로 컬러시스템을 만들면 파일이 가벼워 지고 수정이 한번에 끝난다.

이구조를 수업에서 직접 만들어보게하면,

왜 디자인 시스템이 필요한지를 설명없이도 체감하게 된다.

 

아래 링크는 실제 피그마 커뮤니티에 공유한 자료이다 

찐망고 피그마 클래스 렌딩페이지 예시만들기

 

 

최근에는  Claude Design 같은 AI도구로 시안을 빠르게 뽑을 수 있다.

폰트, 컬러, 반응형 조건을 프롬프트에 넣으면 레이아웃 안을 여러개 제안해준다.

선형스텝, 지그재그패턴, 인터렉티브 슬라이드 같은 시안을 한번에 비교할 수 있다.

Claude Design 단독으로는 피그마 파일로 바로 내보내는 게 안 됐었다.

하지만 2026년 3월부터 Figma MCP가 열리면서 Claude Code나 Cursor 같은 에이전트에서

피그마 캔버스에 직접 컴포넌트를 만들고, Variables를 정의하고, 오토레이아웃을 설정할 수 있다.

AI가 만든 시안을 피그마로 수작업 옮기던 단계가 사라지고 있는 거다.

Config 2026에서는 코드 레이어까지 발표됐다.

디자인 프레임을 코드 레이어로 전환하고, 코드에서 다시 디자인으로 돌아오는 양방향 워크플로우다.

설계 과정에서 AI의 역할이 초안 제안에서 직접 제작으로 넘어가는 중이다.

 

찐망고 사주가 피그마 없이 3주 만에 런칭할 수 있었던 건,

MVP에서 "예쁘게 만드는 것"을 빼버렸기 때문이다.

핵심 기능만 돌아가게 만들고, 나머지는 피드백 보면서 붙였다.

매거진 스타일 리디자인도 런칭 후에 한 거다.

피그마를 쓰든 안 쓰든, MVP 단계에서 중요한 건 이 서비스가 작동하는가를 빠르게 확인하는 거다.

화면이 단순하면 바로 코드로 가도 된다.

복잡하면 피그마로 먼저 잡는 게 결과적으로 더 빠르다.

이 판단을 할 줄 아는 게 설계 능력이다.

 

 

찐망고 사주풀이 | 달콤한 운명 리포트

 

화면이 잡히면 다음은 시스템이다.

다음 글에서는 Figma Variables로 컬러, 간격, 타이포를 토큰화하고,

디자인과 코드가 같은 언어를 쓰게 만드는 과정을 다룰 예정

 

이 시리즈는 실제 운영 중인 서비스 찐망고 사주를 사례로 AI 서비스 기획부터 배포까지를 다루는 강의 노트입니다.
📌출강 및 커리큘럼 문의: spacejh72@gmail.com