피그마로 프로토타이핑 교육
Figma Design to Code로 이어지는 워크플로우 — 피그마튜터 × GS리테일
교육 개요
디자인 툴로 그냥 쓰던 피그마를, 코드와 연결하는 워크플로우 도구로 업그레이드하는 하루
요리사가 레시피 노트만 쓰다가 처음으로 주방 전체 시스템을 배우는 날이라고 생각해보세요. 재료(토큰), 조리법(컴포넌트), 자동화(MCP) — 각각은 알고 있었지만 한데 연결하면 어떻게 되는지, 오늘 직접 경험합니다.
진행 완료
2026년 5월 15일 (금) 교육이 완료된 세션입니다.
외부 — 피그마튜터
Figma 실무 전문 교육 채널. 실습 파일 및 핸즈온 교육 제공.
AX본부
UX/UI 디자이너 및 디자인 시스템 관련 직군 전체.
일정 한눈에 보기
5월 15일(금) 하루 일정 — 오전은 배우고, 오후는 나눕니다
| 시간 | 내용 | 주체 |
|---|---|---|
| 9:00 – 13:00 | 피그마 실무 심화 강연 (4시간, 5세션) 실무 꿀팁 위주 · 사례 중심 · 실습 파일 제공 | 피그마튜터 (외부강사) |
| 13:00 – 14:00 | 점심 식사 | — |
| 14:00 – 14:50 | GS리테일 3개 팀 디자인시스템 현황 발표 | 우리동네GS / GSSHOP / GS리테일 B2B |
| 15:00 – 16:00 | 여기어때 디자인시스템 & AI 활용 사례 발표 | 여기어때 |
오전 세션 — 피그마튜터 강연
9:00 – 13:00 · 4시간 · 5세션 · 핸즈온 실습 포함
커리큘럼 전체 — GS리테일 × 피그마튜터
핵심 주제: Figma Design to Code로 이어지는 워크 플로우
대상: UX/UI 디자이너 및 관련 직군 · 시간: 4시간 (5세션)
| # | 주제 | 실습 | 산출물 |
|---|---|---|---|
| 1 | Figma 베리어블 + MCP 활용 사례 소개 0.5h |
|
|
| 2 | 디자인 시스템 셋업 및 환경 구축 실습 1h |
|
|
| 3 | 페이지 확장 및 컴포넌트 조합 1h |
|
|
| 4 | 디자인 QA 프로세스 1h |
|
|
| 5 | 효율 향상에 필요한 AI 툴 동향 0.5h |
|
실습 없음 · 별도 산출물 없음 |
세션 1 — Figma 베리어블 + MCP 활용 사례 소개 (0.5h)
Figma Make로 프로토타이핑 화면 구현
피그마에서 디자인한 화면을 Figma Make와 연동하면, 클릭 가능한 프로토타입을 넘어 실제 작동하는 화면을 몇 분 만에 만들 수 있습니다. 음식 주문서(피그마 디자인)를 주방 기계(Figma Make)에 꽂으면 실제 요리가 나오는 것처럼요.
프로토타이핑 화면 만들기
Figma 디자인 파일 + Figma Make 연동으로 프로토타이핑 화면 구현. 실제 작업 중인 파일을 기반으로 랜딩 페이지 생성.
프로토타이핑 + 랜딩페이지 아웃풋
Figma Make로 만든 프로토타이핑 결과물과 피그마 화면 기반 랜딩 페이지 파일.
세션 2 — 디자인 시스템 셋업 및 환경 구축 실습 (1h)
디자인 토큰 → CSS 변수 자동 변환
피그마의 베리어블(색상, 타이포그래피, 간격 등)을 코드의 CSS 변수로 자동으로 변환하는 환경을 구축합니다. 레시피 북(디자인 토큰)을 한 번만 정리해두면 모든 요리(화면)에 일관성이 자동으로 적용되는 것과 같습니다.
| 단계 | 내용 | 도구 |
|---|---|---|
| 1단계 | Figma 디자인 시스템 구조 이해 및 환경 세팅 | Figma Variables |
| 2단계 | 바이브코딩 도구 셋팅 (Figma MCP 활용) | Figma MCP + Claude |
| 3단계 | 디자인 토큰 → CSS 변수 자동 변환 | Style Dictionary / MCP |
| 4단계 | 네이밍 컨벤션 유지를 위한 Claude.md 및 하네스 설정 | Claude Code Harness |
--color-primary 같은 CSS 변수로 자동 동기화됩니다.세션 3 — 페이지 확장 및 컴포넌트 조합 (1h)
컴포넌트 조합으로 완성 페이지 구성
레고 블록처럼 컴포넌트를 조합해 완성 페이지를 만들고, 코드 커넥트로 연결한 뒤 반응형으로 웹에 발행하는 전체 흐름을 실습합니다.
Code Connect
피그마 컴포넌트와 실제 코드 컴포넌트를 연결하는 Figma 기능. Dev Mode에서 개발자가 피그마를 열면 실제 코드 스니펫이 자동으로 표시됩니다.
반응형 웹 페이지
모바일 / 태블릿 / 데스크톱 3가지 뷰포트를 모두 지원하는 완성 페이지. 바이브코딩으로 레이아웃 자동 생성.
세션 4 — 디자인 QA 프로세스 (1h)
Figma 원본 vs 코드 결과물 비주얼 비교
만들었으면 검수해야 합니다. 납품받은 가구가 카탈로그와 같은지 비교하는 것처럼 — 피그마 원본 디자인과 실제 코드 결과물을 체계적으로 비교하는 방법을 배웁니다.
| QA 항목 | 확인 방법 | 도구 |
|---|---|---|
| 비주얼 비교 | Figma 원본 vs 코드 결과물 나란히 비교 | Figma Dev Mode |
| 간격 검수 | padding, margin, gap 수치 일치 여부 | 브라우저 DevTools |
| 색상 검수 | HEX/RGBA 값 토큰과 일치 여부 | Dev Mode + DevTools |
| 타이포그래피 | font-size, font-weight, line-height 일치 여부 | DevTools Computed |
| Flutter 변환 | 베리어블 코드를 Flutter 형식으로 변환 | Figma → Flutter 플러그인 |
심화: 바이브 코딩 툴 효율 팁 (토큰 절약 + 모델 비교)
AI 코딩 도구를 쓸 때 Context(토큰)를 얼마나 효율적으로 쓰느냐가 속도와 비용에 직결됩니다. 강사가 실무에서 사용하는 토큰 절약 팁과 주요 모델(Claude / GPT-4o / Gemini) 간 장단점 비교도 이 세션에서 다룹니다.
세션 5 — 효율 향상에 필요한 AI 툴 동향 (0.5h)
Design to Code AI 툴 리뷰
강의 없이 살아남으려면 트렌드를 알아야 합니다. 이 세션은 실습 없이 최근 주목받는 AI 디자인→코드 툴들을 훑어보고 장단점을 비교합니다.
Locofy.ai
피그마 디자인을 React/Next.js 코드로 변환. 컴포넌트 분리와 반응형 처리가 강점.
Builder.io
Visual CMS + 코드 생성. 피그마 플러그인으로 디자인을 바로 퍼블리시 가능.
Lovable
자연어 프롬프트로 풀스택 앱 생성. 피그마 디자인 import 후 즉시 배포까지 가능.
오후 세션 — 디자인시스템 현황 공유
14:00 – 16:00 · GS리테일 3팀 + 여기어때 — 서로의 경험을 나눕니다
오후 세션은 강의가 아니라 상호 공유입니다. GS리테일 내 3개 팀과 협력사 여기어때가 각자의 디자인 시스템 운영 현황과 AI 활용 경험을 발표합니다.
GS리테일 발표 — 3개 팀 현황
디자인 시스템 재정비 및 AI 활용 실험 현황
발표: 박선민, 표윤주
기존 디자인 시스템을 어떻게 정리하고, AI 도구를 어떤 방식으로 실험하고 있는지 공유합니다.
AI를 활용한 디자인 토큰 고도화
발표: 최철호, 김벼리, 김참이
디자인 토큰 구조를 AI와 함께 어떻게 발전시켰는지, 구체적인 토큰 아키텍처와 자동화 경험을 공유합니다.
디자인 시스템 구조 및 현황
발표: 구미금, 박영진
B2B 제품 특성에 맞는 디자인 시스템 구조와 현재 운영 상황을 공유합니다.
여기어때 발표 — AI-Ready 디자인 시스템
AI-Ready Design System: 자연어+컨텍스트만으로 일관된 UI 생성 환경 구축
자연어 프롬프트와 컨텍스트만으로 디자인 시스템에 맞는 UI를 생성할 수 있도록 환경을 어떻게 구축했는지 공유합니다.
코드에서 시작하는 디자인: 피그마를 거치지 않고 코드부터 디자인
전통적인 "피그마 → 코드" 방향을 뒤집어, 코드를 먼저 작성하고 피그마로 역으로 동기화하는 새로운 워크플로우를 소개합니다.
조직의 AI 리터러시 끌어올리기
디자이너 조직 전체가 AI 도구를 효과적으로 사용할 수 있도록 리터러시를 높이는 과정과 방법을 공유합니다.
주목할 포인트: "코드에서 시작하는 디자인"
피그마 → 코드 방향이 아닌, 코드 → 피그마 방향. 오전에 배운 내용과 완전히 반대 방향처럼 보이지만, 사실 이 두 방향이 어떻게 하나의 싱크 시스템으로 연결될 수 있는지가 핵심입니다.
외부강사 선정 기준
피그마튜터를 선택한 이유 — GPT + NotebookLM 평가 반영
외부 강사 선정에 앞서 GPT와 NotebookLM을 활용한 객관적 평가 프레임을 적용했습니다. 마치 입사 지원자를 여러 기준으로 채점하듯이, 교육 목적에 맞는 강사인지 다각도로 검토했습니다.
| 평가 기준 | 구체적 내용 |
|---|---|
| 최신 Figma 기능 실무 적용 | MCP 활용, AI 연동, Figma Make(버즈 자동화) 등 2024–2025년 신기능을 실무에 적용한 사례를 보유하고 있는가 |
| 영업 톤 없는 실무 위주 강연 | 도구 홍보나 과장 없이 실제 꿀팁과 사례 중심으로 강의하는가. 수강 후기와 샘플 강의 분석. |
| 핸즈온 실습 가능 형태 | 단순 시청이 아닌 따라하며 결과물이 나오는 실습 파일 제공 여부 |
| GS리테일 시나리오 커스텀 가능 | 우리동네GS / GSSHOP 업무 시나리오에 맞게 예시와 실습을 커스텀할 수 있는가 |
오늘 교육에서 가져가야 할 것
피그마에서 디자인 완성
→ 개발자에게 전달
→ 스펙 오해 발생
→ QA에서 뒤늦게 발견
→ 재작업 반복
피그마 베리어블 = CSS 변수 자동 동기화
→ Code Connect로 컴포넌트 연결
→ Figma MCP로 바이브코딩
→ AI QA 프로세스로 빠른 검수
→ 디자인·코드 항상 일치
체크리스트 — 이것만 기억하세요
- Figma Make로 피그마 화면을 바로 프로토타이핑할 수 있다
- 디자인 토큰 → CSS 변수 자동 변환 파이프라인을 이해했다
- Figma MCP + Claude로 바이브코딩 환경을 셋팅할 수 있다
- Code Connect로 피그마 컴포넌트와 코드를 연결할 수 있다
- 디자인 QA를 Dev Mode + DevTools로 체계적으로 할 수 있다
- Locofy.ai, Builder.io, Lovable의 차이를 설명할 수 있다
- 각 팀의 디자인시스템 현황을 파악하고 벤치마킹 포인트를 찾았다
- 우리 팀에 적용할 다음 액션 아이템이 하나 이상 생겼다
용어 사전 — 오늘 나온 낯선 단어들
| 용어 | 쉬운 설명 |
|---|---|
| Figma Variables (베리어블) | 피그마에서 색상, 숫자, 텍스트 값을 변수처럼 저장하는 기능. 한 번 바꾸면 모든 곳에 반영됨. |
| Design Token (디자인 토큰) | 디자인 결정(색상, 간격, 폰트 크기 등)을 변수 형태로 저장한 것. 코드와 디자인이 같은 값을 공유하는 언어. |
| Figma MCP | 피그마와 AI 코딩 도구를 연결하는 프로토콜. Claude 같은 AI가 피그마 파일을 직접 읽고 코드를 생성할 수 있게 해줌. |
| Figma Make | 피그마 디자인을 AI가 분석해 실제 코드(React/HTML)로 변환해주는 Figma 내장 기능. |
| Code Connect | 피그마 컴포넌트와 실제 코드 컴포넌트를 연결하는 Figma 기능. Dev Mode에서 코드 스니펫 자동 표시. |
| 바이브코딩 | 코드를 직접 쓰지 않고 AI에게 말로 지시해 프로그램을 만드는 방식. '입코딩'이라고도 함. |
| Locofy.ai | 피그마 디자인을 React/Next.js 코드로 자동 변환해주는 외부 AI 툴. |
| Builder.io | 피그마 플러그인으로 디자인을 바로 웹에 퍼블리시하고 CMS로 관리할 수 있는 툴. |
| Lovable | 자연어 프롬프트로 풀스택 앱을 생성하고 배포까지 연결해주는 AI 개발 플랫폼. |