피그마는 협업 기반의 클라우드 디자인 도구로, 포트폴리오와 실무에서 모두 사용됩니다. 이 글에서는 완전 초보자도 2주 안에 피그마의 핵심 기능을 마스터할 수 있는 로드맵을 제시합니다.
피그마 vs 다른 디자인 도구
| 피그마 | 무료/월 $12 | 최고 | 쉬움 | 웹/앱 디자인 ⭐ |
| Adobe XD | 월 $9.99 | 좋음 | 중간 | 에도비 생태계 |
| Sketch | 년 $99 | 좋음 | 중간 | 맥 전용 |
| Webflow | 월 $12~ | 없음 | 어려움 | 코딩 기반 |
추천: 웹디자인 배우는 학생이라면 피그마 무료 버전으로 시작하세요.
1주차: 인터페이스와 기본 도형
피그마 가입 및 시작
figma.com 접속
무료 계정 생성
새 파일 생성 (File > New > New design file)
팀 생성 (선택) - 협업할 경우핵심 패널 이해
| Toolbar | 도형, 텍스트, 펜 등 도구 |
| Canvas | 실제 디자인 작업 화면 |
| Assets | 컴포넌트, 아이콘 라이브러리 |
| Design | 선택한 요소의 속성 (색, 크기 등) |
| Prototype | 상호작용 설정 (클릭, 애니메이션) |
기본 도형 그리기
1. Toolbar에서 Rectangle 선택 (R)
2. Canvas에서 드래그하여 직사각형 생성
3. Design 패널에서 색상, 크기, 회전 조정
4. 다른 도형: 원(O), 라인(L), 펜(P) 선택
텍스트 추가
- Toolbar > Text (T) 클릭
- Canvas에서 클릭 후 텍스트 입력
- Design 패널에서 폰트, 크기, 색상 조정
1주차 프로젝트: 랜딩페이지 와이어프레임
- 헤더(로고 + 네비게이션)
- 메인 배너(제목 + 설명)
- 콘텐츠 섹션 3개
- 푸터(링크)
2주차: 컴포넌트와 컬러 시스템
컴포넌트 만들기 (재사용 가능한 요소)
버튼 컴포넌트 만들기
- 텍스트 + 배경 사각형으로 버튼 구성
- 그룹화 (Ctrl+G)
- 우측클릭 > Create component
- 이름 지정 (Buttons/Primary)
카드 컴포넌트
- 이미지 + 제목 + 설명을 포함한 카드 구성
- Component로 지정
- 여러 페이지에서 재사용
컴포넌트 변형(Variant)
- Primary/Secondary 버튼
- Hover/Active 상태
- Size: Small/Medium/Large
컬러 시스템 구축
Design System 페이지 생성:
- Primary Color: #007AFF (주요 색상)
- Secondary Color: #5AC8FA
- Success: #34C759
- Warning: #FF9500
- Error: #FF3B30
색상을 컴포넌트처럼 관리 (Assets > Colors)
타이포그래피 정리
| Display | 폰트 크기 32px, 굵기 Bold |
| Heading | 폰트 크기 24px, 굵기 Semi-bold |
| Body | 폰트 크기 16px, 굵기 Regular |
| Caption | 폰트 크기 12px, 굵기 Regular, 회색 |
3주차: 프로토타입과 상호작용
프로토타입 기본
페이지 생성
- 하단의 "+ Page" 클릭
- 여러 화면 추가 (홈, 상세, 검색 등)
상호작용 설정
- 버튼 선택 > Prototype 패널
- "+" 클릭 > 연결할 페이지 선택
- 트리거: On Click → 액션: Navigate → 목표 페이지 선택
애니메이션 추가 (선택)
- Animate: Dissolve, Move in, Push 등
- Duration: 300ms 권장
프로토타입 재생 확인
- 우측 상단 "Play" 버튼 클릭
- 설정한 상호작용 미리보기
- 문제 있으면 다시 편집
고급 팁: 협업 및 공유
파일 공유
우측 상단 "Share" 클릭
초대할 이메일 입력
권한: View, Edit, Own 선택주석 달기
- Ctrl+Alt+C로 주석 도구 활성화
- 해당 요소에 피드백 추가
- 팀원이 볼 수 있음
개발자와의 협업
- 개발자에게 설계 파일 공유
- 개발자가 요소의 치수, 색상, 폰트 정보 확인 가능
- CSS 코드 자동 생성 기능 (플러그인)
자주 묻는 질문
Q. 피그마가 정말 무료인가요?
A. 네, 기본 기능은 무료입니다. 무제한 프로젝트 생성 가능하며, 팀 협업이 필요하면 유료 플랜을 구매하면 됩니다.
Q. 디자인 감각이 없으면 할 수 있나요?
A. 피그마는 도구일 뿐입니다. 좋은 디자인은 레퍼런스를 보고 모방하면서 배웁니다. Dribbble, Behance에서 레퍼런스를 찾으세요.
Q. 포트폴리오에 피그마 파일을 보여도 되나요?
A. 네, 오히려 권장됩니다. 피그마 파일 링크를 공유하면 면접관이 상호작용을 직접 테스트할 수 있습니다.
Q. 모바일 앱도 피그마로 디자인하나요?
A. 네, 웹, 모바일(iOS/Android), 데스크톱 앱 등 모두 가능합니다. 도구와 원리는 동일합니다.
Q. 디자인 시스템은 왜 중요한가요?
A. 일관된 UI/UX를 유지할 수 있고, 수정 시 모든 컴포넌트에 한 번에 반영됩니다. 협업도 쉬워집니다.
Q. 피그마에서 프로토타입을 이미지/비디오로 내보낼 수 있나요?
A. 네, 우측 상단 "Share" > "Prototype" 링크를 생성하거나, 비디오 녹화(외부 도구 필요)로 공유할 수 있습니다.
2주 완성 최종 로드맵
| 1주 | 기본 도형과 텍스트 | 랜딩페이지 와이어프레임 |
| 1.5주 | 컴포넌트와 컬러 시스템 | 디자인 시스템 페이지 |
| 2주 | 프로토타입 상호작용 | 완성된 프로토타입 |
피그마는 웹/앱 디자인의 표준 도구입니다. 지금 시작하면 포트폴리오 경쟁력을 크게 높일 수 있습니다.
관련 글: 포트폴리오 빌딩 가이드, 파워포인트 디자인 팁