[쉽길] 피그마랑 친해지기
프론트엔드 개발을 위해 Figma 플러그인과 MCP 활용법을 익히고, UI 디자인 워크플로우를 기획하는 과정을 기록했습니다.
이번 쉽길 프로젝트는 ‘전문가 제도’를 기반으로 진행한다. PM님의 지도 하에, 각자 한 분야씩 전문가가 되어 그 분야를 공부하고 팀원들을 이끌어가는 협업 방법을 구축했다.
그리고 나는 프론트엔드 전문가가 되었다.
백엔드를 하기엔 아직 아는 게 없고 배운 HTML, CSS를 적용해보고자 하는 마음에 지원했다. 무엇보다 프론트를 지원하는 이가 없어서 내가 하겠다고 했다.
Figma… 넌 누구냐
프론트는 사용자가 서비스를 접하는 화면을 담당하는 사람이다. 그 화면의 모습을 스케치하고 작업할 수 있는 프로그램이 Figma(피그마)이다.
PPT, Photoshop처럼 도형, 텍스트 등의 요소를 활용해서 화면을 구성하고 디자인할 수 있다. 팀원들과 실시간으로 공유하면서 작업할 수 있기 때문에 협업하는 데 유용하게 사용한다고 한다. 특히 피그마에서는 사용자들이 여러 가지 다양한 플러그인, 리소스 등을 공유하고 유용한 기능들을 지원한다고 한다.
한다고 하긴 했는데… 어떻게 할까 고민하다가 피그마 MCP를 써보고 싶어서 이것저것 알아봤다.
피그마 플러그인?!
약간 VScode에서 extensions 다운받아서 쓰듯이, 피그마에는 플러그인이라는 기능이 있다.
플러그인이 엄청 다양하게 많기 때문에 찾아서 쓰면 될 것 같다.
Figma Plugin
Figma Library
혹은 피그마에서 제공하는 AI기능도 있다. GPT 기반이라 Dalle 모델로 이미지를 생성한다. 대신 토큰 수가 정해져있어서 신중하게 사용해야 한다.
피그마 MCP 사용?!
우리가 작성한 기능정의서와 화면정의서, 스타일 가이드를 주고 피그마의 MCP를 활용해서 작업하는 방식도 고려해봤다. 왜냐하면 우리는 개발기술을 배우고 적용하는 것이 우선이었기 때문이기도 하고, 무엇보다 디자인은 AI가 더 잘할 것이라는 판단에서였다.
‼️피그마 MCP는 유료 결제가 필요하다!
Tip
- Auto layout은 필수. Flexbox 형태로 구조화되기 때문에 정렬이나 간격 반영 정확도에 큰 영향을 미친다.
- 레이어그룹은 단순하게 구성해야 한다. 불필요한 그룹이 많아질수록 class 이름이 복잡해지고 구조 파악이 어려워진다.
- 색상은 단일 값으로 지정. 여러 색상이 혼합된 경우나 블렌드 모드가 적용된 경우 정확도가 떨어진다.
- 이미지는 반드시 이미지 레이어로 지정한다. 프레임의 배경으로 설정된 이미지는 코드에 반영되지 않는다.
피그마 작업 단계
피그마에서 보통 어떤 식으로 작업하는지 GPT한테 물어봤다. 아래와 같은 순서로 작업한다고 한다.
- 필수 화면 목록 만들기
- 홈 (경로 입력): 출발역, 도착역 텍스트 입력
- 경로 안내 (스토리 카드): 이동 단계별 안내 카드 (e.g., “5번 출구로 이동”, “에스컬레이터 탑승”, “2호선 환승”)
- 로그인/회원가입
- 마이페이지 (최근 경로/즐겨찾기)
- 사용자 흐름(User Flow) 그리기
- 홈에서 역 입력 → 길찾기 버튼 클릭 → 경로 안내 화면으로 이동 → 이전, 다음 버튼으로 스토리 카드를 넘기며 경로 확인
- 화면 구조/배치를 중심으로 피그마 작업하기
- 컴포넌트 정의하기
- 컴포넌트 예시: 반복되는 요소
버튼(길찾기, 음성입력)입력창(출발역, 도착역)경로 안내 카드(가장 중요!)
- 피그마의 컴포넌트 생성 기능(
Ctrl+Alt+K)으로 만들어두고, 필요할 때마다 복사해서 사용
- 컴포넌트 예시: 반복되는 요소
- 프로토타입 연결 (화면 간 연결, 흐름 검증)
- ‘홈’ 화면의 ‘길찾기’ 버튼을 클릭했을 때 ‘경로 안내’ 화면으로 이동하도록 연결합니다.
- 뒤로가기 버튼, 탭 바 등 주요 인터랙션을 모두 연결하여 실제 사용자가 겪을 흐름을 시뮬레이션합니다.
- 프론트엔드 코딩 준비 [→ MCP 본격 활용]
- 스타일 가이드 정리: 개발에 필요한 디자인 규칙을 간단하게 정리합니다.
- 색상: 주요 색상(Primary, Secondary, Text 등)의 헥사 코드(#000000)
- 폰트: 본문, 제목 등의 글씨 크기, 굵기, 행간
- 간격(Spacing): 컴포넌트 사이의 여백 규칙 (e.g., 8px, 16px, 24px)
- Vue.js 컴포넌트와 매핑: 피그마 컴포넌트를 Vue.js 컴포넌트와 1:1로 대응시킵니다.
- 피그마의
경로 안내 카드컴포넌트 → Vue에서<PathStepCard.vue>컴포넌트 - 이렇게 하면 개발자가 어떤 단위로 파일을 쪼개고 작업해야 할지 명확하게 알 수 있습니다.
- 피그마의
- Figma Dev Mode 활용: 피그마의 Dev Mode를 켜면, 개발자들이 디자인 요소의 CSS 속성(크기, 색상, 폰트, 여백 등)을 바로 확인하고 코드로 복사할 수 있습니다. 이걸 활용하면 HTML/CSS 작업 속도가 훨씬 빨라집니다.
- Bootstrap 그리드 활용: 우리는 Bootstrap을 사용하죠. 피그마에서 설계한 레이아웃을 Bootstrap의 12컬럼 그리드 시스템에 맞춰 생각하면 반응형 웹을 구현하기 훨씬 수월합니다. 개발 전에 “이 부분은
col-md-6으로 잡으면 되겠다” 와 같이 미리 소통하면 좋습니다.
- 스타일 가이드 정리: 개발에 필요한 디자인 규칙을 간단하게 정리합니다.
UI/UX 원칙
작업하기 전, 우리가 토스처럼 직관적이고 깔끔한 화면을 구성하기로 했기 때문에, 다음과 같은 UI/UX 원칙을 세웠다.
- 하나의 화면, 하나의 기능
- 사용자가 피로하지 않도록 직관적인 설계
(근데 이러면 서브페이지가 필수겠는걸요..? 원래 얘기하기로는 메인페이지에서 길찾기와 역 정보를 모두 제공하는 거였는데 이부분 다시 얘기해봐야겠어요)
다음은 Gemini의 조언이다.
- API를 기다리지 마세요: 백엔드 API가 완성될 때까지 기다리지 말고, 가짜 데이터(Mock Data)를 적극적으로 활용하세요
- 컴포넌트 중심으로 생각하세요: 입력창, 버튼, 스토리 카드 등 모든 UI 요소를 재사용 가능한 Vue 컴포넌트로 만드세요.
- 완벽보다는 완성을: 1주일 안에 모든 기능을 완벽하게 만들 수는 없습니다. 우선순위가 높은 기능의 ‘동작하는’ 버전을 만드는 데 집중하고, 세부적인 디자인이나 애니메이션은 추후에 다듬어도 좋습니다.
프론트 작업 과정을 계획해보았습니다.
피그마를 사용해보긴 할텐데, 디자인에 너무 많은 시간을 투자하고 싶지는 않다.
특히나 프론트의 최신 트렌드는 AI를 활용하는 바이브 코딩이나, MCP를 활용한 생산성 향상 부분이라고 한다.
그래서 프로젝트 전체에서 프론트의 비중을 줄이는 대신, “프론트의 작업 과정 흐름은 경험해보는 것”을 목표로 정했다. 그리고 “피그마 MCP를 사용해보는 것”을 기술적인 목표로 설정했다.
우리의 목표는 “피그마 MCP 사용해보기”
그래도 프론트의 작업 과정 흐름을 경험해보자는 목표를 가지고 아래와 같은 프론트 작업 과정 계획은 세워봤다.
큰 작업 흐름은 [기능정의-디자인-코드 구현-화면정의서 작성] 이다.
- 피그마 작업 → 필요한 화면 정의, 페이지 레이아웃 구성
- 스타일 가이드 작성 (AI)
- 코드 구현 (피그마 MCP)
- 화면 정의서 작성 → 포트폴리오 및 작업기준 용도
최대한 번잡하고 단순 반복인 작업들은 생략하고, 핵심적인 기술만 활용해보기로 방향을 잡았다.
메인페이지 구현 우선순위
우리의 MVP (Minimum Viable Product) 개발을 위해 다음과 같은 작업 우선순위를 설정했다.
1순위: 길찾기(텍스트), 역 정보 검색창
- 텍스트 입력
- 자동완성 기능
- 음성 입력 버튼
2순위: 경로 안내 스토리 카드
- 상단바: 출발역/환승역/도착역, 소요 시간, 현위치
- 호선별 색깔 맞춰서
- (메인) 스토리 카드
- (버튼) 이전, 다음, 음성 재생, 역 정보 확인
3순위: 회원가입/로그인, 마이페이지
- 아이디, 비번 입력
- 중복 확인
- 경로 우선순위 설정: 에스컬레이터 우선, 엘리베이터 우선, 최소 거리, 최단 시간, 최소 환승
레퍼런스
피그마 플러그인
디자이너의 피그마 플러그인 제작기: Cursor AI를 활용해