Mockups vs Figma

Mockup은 제품의 정적인 표현으로, 제품 디자인과 개발에서 최종 제품이 어떻게 보이고 사용될지 보여주는 데 자주 사용됩니다.

최종 사용자 경험의 일부인 타이포그래피, 로고, 이미지, 색상 구성표 및 탐색 시각 요소를 포함합니다.

Mockup은 디자인 개념, UI 및 UX를 제시하고 평가하기 위해 사용되며, 제품이 완전히 개발되기 전에 피드백과 반복을 위해 사용됩니다.

Figma(피그마) 는 웹 브라우저에서 실행되는 클라우드 기반의 UI/UX 디자인 및 프로토타이핑 도구입니다. 2016년 Dylan Field와 Evan Wallace가 출시한 이후, 전 세계 디자이너와 개발자에게 가장 널리 사용되는 디자인 도구로 자리 잡았습니다.

Figma의 핵심 차별점은 실시간 협업(Real-time Collaboration) 입니다. Google Docs처럼 여러 사람이 동시에 하나의 디자인 파일에서 작업할 수 있어, 디자이너 간 협업은 물론 개발자, Product Owner, 이해관계자와의 소통이 원활합니다.

디자인 도구

• 벡터 편집: 펜 도구, 불리언 연산, 마스킹
• 오토 레이아웃(Auto Layout): CSS Flexbox와 유사한 반응형 레이아웃
• 컴포넌트(Components): 재사용 가능한 디자인 요소
• 스타일(Styles): 색상, 텍스트, 효과의 일관된 관리
• 변수(Variables): 디자인 토큰 기반 다크 모드, 테마 관리

프로토타이핑

• 인터랙티브 프로토타입: 화면 전환, 애니메이션, 오버레이
• 스마트 애니메이트: 프레임 간 자동 트윈 애니메이션
• 플로우 시작점: 여러 사용자 흐름 정의 가능
• 디바이스 프리뷰: 모바일 기기에서 실시간 프로토타입 확인

협업 기능

• 실시간 편집: 여러 사용자가 동시에 디자인 작업
• 코멘트: 디자인에 직접 피드백 남기기
• 버전 히스토리: 변경 이력 추적 및 복원
• 공유 링크: 팀원이나 이해관계자에게 브라우저로 바로 공유

개발자 핸드오프 (Dev Mode)

Figma의 Dev Mode는 디자인-개발 간 협업을 위한 전용 모드입니다:

• CSS/iOS/Android 코드 자동 생성: 속성값을 코드로 변환
• 레드라인(Redline): 요소 간 간격, 크기 자동 측정
• 에셋 내보내기: SVG, PNG 등 다양한 포맷으로 에셋 추출
• 디자인 토큰: 변수 기반 디자인 값을 코드와 동기화

디자인 시스템이란?

디자인 시스템은 제품의 일관된 UI를 만들기 위한 컴포넌트, 패턴, 가이드라인의 집합입니다. Figma는 디자인 시스템 구축과 관리에 최적화되어 있습니다.

Figma에서 디자인 시스템 구축

1. 디자인 토큰 정의:

• 색상 팔레트 (Primary, Secondary, Neutral)
• 타이포그래피 (Font Family, Size, Weight, Line Height)
• 간격 (Spacing: 4px, 8px, 12px, 16px, 24px, 32px)
• 그림자 (Shadow Elevation)

2. 기본 컴포넌트 설계:

• 버튼 (Primary, Secondary, Ghost, Danger)
• 입력 필드 (Text, Password, Search, Select)
• 카드, 모달, 토스트 메시지
• 네비게이션, 탭, 브레드크럼

3. 패턴 라이브러리:

• 로그인/회원가입 플로우
• 검색 결과 페이지
• 대시보드 레이아웃
• 에러 처리 패턴

한국 기업의 디자인 시스템

네이버: 네이버는 "Whale Design System"과 같은 자체 디자인 시스템을 Figma 기반으로 운영합니다. 네이버의 다양한 서비스(검색, 쇼핑, 블로그, 웹툰)에 일관된 UI를 제공합니다.

카카오: 카카오는 "Kakao Design System"을 통해 카카오톡, 카카오페이, 카카오맵 등의 서비스 간 디자인 일관성을 유지합니다. Figma의 컴포넌트 라이브러리로 관리됩니다.

토스(Toss): 토스는 한국 핀테크 업계에서 가장 주목받는 디자인 시스템 중 하나인 "TDS(Toss Design System)"를 운영하며, Figma와 코드 레벨의 완벽한 동기화를 추구합니다.

디자인-개발 협업 프로세스

[디자인 스프린트] → [Figma 디자인] → [리뷰/피드백] → [Dev Mode 핸드오프] → [개발] → [QA]

1. 디자인 스프린트: 문제 정의 및 솔루션 프로토타이핑
2. Figma 디자인: 상세 UI/UX 디자인 작업
3. 리뷰: 이해관계자와 디자인 리뷰
4. 개발자 핸드오프: Dev Mode로 디자인 스펙 전달
5. 개발: 디자인을 코드로 구현
6. QA: 디자인과 구현의 일치도 검증

Figma 플러그인 생태계

• Figma to Code: React, Vue, Flutter 코드 자동 생성
• Iconify: 수천 개의 아이콘 라이브러리
• Unsplash: 무료 이미지 직접 삽입
• Contrast Checker: 접근성 색상 대비 검사
• Autoflow: 유저 플로우 화살표 자동 생성
• Tokens Studio: 디자인 토큰 관리 및 코드 동기화

한국 디자인 업계에서는 Figma가 압도적인 점유율을 차지하고 있으며, 대부분의 채용 공고에서 Figma 활용 능력을 필수로 요구합니다.

디자인 스프린트

디자인 스프린트에서 Figma는 핵심 도구입니다:

• Day 1-2 (이해/발산): FigJam으로 브레인스토밍, 마인드맵
• Day 3 (결정): 아이디어 투표 및 선택
• Day 4 (프로토타입): Figma로 고충실도 프로토타입 제작
• Day 5 (테스트): 프로토타입으로 사용자 테스트

스크럼에서의 Figma

• 백로그 리파인먼트: Figma 링크를 사용자 스토리에 첨부
• 스프린트 플래닝: 디자인 완성도가 DoR의 일부
• 개발: Dev Mode로 디자인 스펙 참조
• 스프린트 리뷰: 디자인 vs 구현 비교

FigJam

Figma의 화이트보드 도구인 FigJam은 애자일 팀의 다양한 활동에 활용됩니다:

• 스프린트 회고: 포스트잇 기반 회고
• 브레인스토밍: 아이디어 발산과 수렴
• 플로우 다이어그램: 사용자 여정 맵, 시스템 흐름도
• 투표: 우선순위 결정을 위한 도트 투표

효율적인 파일 구조

프로젝트/ ├── 📄 디자인 시스템 │ ├── 컴포넌트 라이브러리 │ ├── 아이콘 라이브러리 │ └── 스타일 가이드 ├── 📄 프로덕트 디자인 │ ├── 페이지별 디자인 │ ├── 프로토타입 │ └── 사용자 플로우 └── 📄 리서치/워크숍 ├── 와이어프레임 └── FigJam 보드

네이밍 컨벤션

일관된 네이밍으로 협업 효율성을 높입니다:

• 페이지: 01_Login, 02_Dashboard, 03_Settings
• 컴포넌트: Button/Primary/Default, Button/Primary/Hover
• 레이어: Container, Header, Content, Footer

Figma는 무료인가요?

개인 사용자에게 무료 플랜(Starter)을 제공합니다. 팀 기능이 필요하면 Professional(팀당 월 $15/편집자) 또는 Organization 플랜을 사용합니다.

디자이너가 아니어도 Figma를 사용해야 하나요?

개발자, PM, PO도 Figma를 활용하면 협업이 원활해집니다. Dev Mode로 디자인 스펙을 확인하고, 코멘트로 피드백을 남기고, 프로토타입으로 사용자 플로우를 이해할 수 있습니다.

Figma와 Framer의 차이는?

Figma는 UI/UX 디자인과 프로토타이핑 도구이고, Framer는 디자인과 실제 웹 퍼블리싱이 결합된 도구입니다. Figma는 디자인에 특화, Framer는 디자인+배포에 특화됩니다.

Figma 파일을 버전 관리할 수 있나요?

Figma는 자체 버전 히스토리를 제공합니다. 30분 간격으로 자동 저장되며, 유료 플랜에서는 무제한 히스토리에 접근할 수 있습니다. 명시적으로 버전을 저장하여 중요한 마일스톤을 기록할 수도 있습니다.

• UI - 사용자 인터페이스
• UX - 사용자 경험
• 와이어프레임 - 와이어프레임
• 목업 - 목업
• 디자인 스프린트 - 디자인 스프린트
• 디자인 싱킹 - 디자인 사고