UI/UX 디자인 완전 초보자 가이드 | Figma 실전까지
UI/UX는 뭐가 다를까?
많은 사람들이 UI와 UX를 같은 것으로 생각합니다. 틀렸습니다.
UI (User Interface): 사용자가 보는 것
- 버튼, 색깔, 글꼴, 아이콘 등
- 시각 디자인
- 사용성, 흐름, 감정, 편의성
- 전략 + 리서치 + 디자인
- UI = 책의 표지와 레이아웃
- UX = 책을 읽으면서 느끼는 경험
UI/UX 디자이너가 하는 일
1. 리서치: 사용자를 이해한다
↓
2. 와이어프레임: 구조를 그린다 (흑백 스케치)
↓
3. 디자인: 시각화한다 (색상, 글꼴, 이미지)
↓
4. 프로토타입: 상호작용을 만든다 (클릭했을 때 어떻게 될까?)
↓
5. 사용자 테스트: 실제 사용자에게 보여준다
↓
6. 개선: 피드백을 반영한다디자인의 기본 원칙 5가지
1. 강조 (Emphasis)
사용자의 눈이 먼저 가야 할 곳에 눈길을 끈다
방법:
- 크기: 중요한 것을 크게
- 색상: 다른 색으로 돋보이게
- 위치: 화면 상단에 배치
- 공백: 주변 공간을 비워둔다2. 계층 (Hierarchy)
정보를 중요도 순서대로 배열한다
H1(제목) > H2(소제목) > 본문3. 반복 (Repetition)
같은 스타일을 반복 사용하면 일관성이 생긴다
예: 모든 버튼이 같은 스타일4. 정렬 (Alignment)
요소들을 깔끔하게 정렬하면 전문적으로 보인다
- 왼쪽 정렬
- 중앙 정렬
- 오른쪽 정렬
- 그리드 기반 정렬 (추천)5. 공백 (Whitespace)
여백도 디자인의 일부다
너무 촘촘하면 읽기 힘들다Figma 기초부터 실전까지
설치 및 첫 설정
1. figma.com 접속
2. 무료 계정 가입
3. "New project" 클릭
4. 1200x800px 프레임 생성Figma 기본 도구
| 도구 | 기능 | 단축키 |
| Frame | 화면 크기 정의 | F |
| Rectangle | 사각형 그리기 | R |
| Text | 글자 입력 | T |
| Component | 재사용 가능한 요소 | Ctrl+Alt+K |
| Export | PNG/SVG로 저장 | - |
실전 예제: 간단한 로그인 화면 만들기
1단계: 프레임 생성 (375x812 - 휴대폰 크기)
2단계: 배경색 설정 (하얀색)
3단계: 텍스트 추가
- "로그인" 제목 (24px, 굵음)
- "이메일" 라벨 (14px)
4단계: 입력창 만들기
- 사각형으로 배경 (너비 300px)
- 테두리 추가 (1px, 회색)
5단계: 버튼 만들기
- "로그인" 버튼 (파란색, 흰 글자)
6단계: 정렬 및 정리
- 모든 요소 중앙 정렬
- 간격 조정 (세로 20px)디자인 시스템 이해
디자인 시스템: 재사용 가능한 컴포넌트의 모음
필요한 요소:
- 컬러 팔레트: 주색상 3개, 서포트 색상 5개
- 타이포그래피: 제목용, 본문용, 작은 글자용
- 버튼 스타일: Primary, Secondary, Danger 등
- 아이콘: 일관된 스타일의 아이콘 세트
- 간격: 4px, 8px, 16px, 24px 등 규칙적 간격
주색상(Primary): #007AFF (파란색)
배경(Background): #FFFFFF (흰색)
텍스트(Text): #333333 (검은색)
경계선(Border): #E0E0E0 (연회색)
에러(Error): #FF3B30 (빨간색)12주 UI/UX 마스터 계획
1~2주: 기초 개념
- 디자인 원칙 5가지 숙달
- Figma 기본 조작 학습
3주: 첫 프로젝트 (로그인 화면)
- Figma에서 로그인 화면 3개 버전 디자인
- 다양한 색상/레이아웃 실험
4~5주: 와이어프레임 연습
- 3개 상품의 랜딩 페이지 와이어프레임
- 정보 계층 구조 정리
6~7주: 실제 디자인
- 와이어프레임을 Figma에서 실제 디자인으로
- 컬러, 타이포그래피 적용
8~9주: 디자인 시스템 구축
- 프로젝트를 위한 컬러 팔레트 정의
- 재사용 가능한 컴포넌트 만들기
10~11주: 프로토타입 제작
- Figma의 프로토타입 기능으로 상호작용 추가
- "클릭했을 때 이 화면으로 이동" 등 설정
12주: 사용자 테스트
- 3~5명의 사용자에게 테스트 받기
- 피드백 수집 및 개선
자주 묻는 질문 (FAQ)
Q. 미술 실력이 없어도 되나요?
A. 미술 실력은 필요 없습니다. UI/UX는 논리와 사용성입니다. 색감은 배울 수 있습니다.Q. 코딩도 배워야 하나요?
A. 필수는 아니지만, 개발자와의 소통을 위해 HTML/CSS 기초를 알면 큰 도움이 됩니다.Q. 일반 디자인과 UI/UX 디자인의 차이는?
A. 일반 디자인은 "아름다움"에 집중하고, UI/UX는 "사용성"에 집중합니다.Q. 포트폴리오는 몇 개 프로젝트가 필요한가요?
A. 최소 3~5개. 단, 깊이 있는 프로젝트(리서치부터 완성까지)가 3개보다 낫습니다.Q. 디자인 감각은 타고나야 하지 않나요?
A. 아니요. 다량의 좋은 디자인을 관찰하고 따라 만들다 보면, 감각은 자동으로 늘어납니다.추천 학습 자료
마치며
UI/UX 디자인은 "만드는 것"이 아니라 "사람을 이해하고 문제를 푸는 것"입니다. 작은 프로젝트부터 시작해 점진적으로 복잡한 설계에 도전하세요!
관련 글: