학습 목표
이번 학습은 Figma를 처음 켜는 단계에서 시작해서, UX/UI 기본 원칙을 보고, 사용자 여정 맵과 서비스 여정 맵까지 직접 만들어보는 흐름으로 잡았다. 단순히 영상을 보는 것이 아니라, 매일 작은 산출물을 하나씩 만들면서 마지막에는 내 서비스 기준의 화면과 여정 맵을 남기는 것이 목표다.
최종 산출물은 페르소나 1명, 사용자 여정 맵 1장, 개선 기능 3개, Figma 화면 2개로 정했다.
전체 학습 흐름
| 순서 | 학습 주제 | 실습 과제 |
|---|---|---|
| 1 | Figma 기초 입문 | 프레임, 텍스트, 도형으로 첫 화면 만들기 |
| 2 | Figma 기본 사용법 체계화 | 모바일 앱 첫 화면 1개 따라 만들기 |
| 3 | 앱 UI 따라 만들기 | 로그인 화면과 홈 화면 만들기 |
| 4 | 스타일 가이드 만들기 | 색상, 폰트, 버튼 규칙 정리하기 |
| 5 | UX/UI 원칙 점검 | 내가 만든 화면의 불편한 부분 5개 찾기 |
| 6 | 고객 여정 지도 이해 | 서비스 사용자 1명의 행동 흐름 적기 |
| 7 | 유저 저니 맵으로 기회 찾기 | 단계, 행동, 감정, 문제점, 개선 아이디어 표 작성 |
| 8 | 디자인 씽킹과 여정지도 | 실제 서비스 하나를 골라 고객 여정 맵 완성 |
| 9 | 페르소나와 저니맵으로 핵심 기능 도출 | 페르소나 → 여정맵 → 핵심 기능 3개 도출 |
| 10 | Journey Map 툴 선택 | Figma 또는 FigJam으로 여정 맵 템플릿 만들기 |
1. Figma 기초부터 시작하기
처음에는 Figma 화면 구성과 기본 도구를 익히는 것이 먼저다. 프레임, 텍스트, 도형, 정렬만 익혀도 간단한 앱 화면은 만들 수 있다. 이 단계에서는 예쁘게 만드는 것보다 도구를 겁내지 않는 것이 중요하다.
실습: Figma 계정을 만들고, 모바일 프레임 하나를 만든 뒤 텍스트와 사각형, 버튼 형태를 배치해 첫 화면을 만든다.
실습: 모바일 앱 첫 화면 1개를 따라 만들면서 오토 레이아웃, 정렬, 간격 감각을 익힌다.
실습: 로그인 화면과 홈 화면을 하나씩 만든다. 처음부터 내 서비스를 만들려고 하기보다, 먼저 잘 만들어진 앱 UI를 따라 하면서 손을 익힌다.
2. 스타일과 UX 원칙 잡기
기본 화면을 만들었다면 이제 일관성을 잡아야 한다. 같은 서비스 안에서 색상, 폰트, 버튼 모양이 계속 바뀌면 사용자는 화면을 불안하게 느낀다. 스타일 가이드는 디자인을 예쁘게 꾸미는 자료가 아니라, 반복해서 사용할 규칙을 만드는 과정이다.
실습: 메인 컬러, 보조 컬러, 기본 폰트, 제목 폰트, 기본 버튼과 보조 버튼을 하나의 스타일 가이드로 정리한다.
실습: 내가 만든 로그인 화면과 홈 화면을 다시 보고, 사용자가 헷갈릴 만한 부분 5개를 찾는다. 버튼이 작지는 않은지, 문구가 모호하지 않은지, 화면 흐름이 자연스러운지 확인한다.
3. 사용자 여정 맵 이해하기
화면을 만들기 시작하면 자꾸 UI부터 보게 된다. 하지만 UX는 화면 하나가 아니라 사용자가 서비스를 만나고, 사용하고, 문제를 해결하고, 떠나는 전체 흐름이다. 고객 여정 지도는 이 흐름을 눈에 보이게 만드는 도구다.
실습: 내가 만들 서비스의 사용자 1명을 정한다. 예를 들어 “동네 맛집을 찾는 직장인”, “퀵오더를 빠르게 잡고 싶은 기사”, “AI 강의를 신청하려는 수강생”처럼 구체적으로 잡는다.
유저 저니 맵으로 기회를 찾는 과정은 공개 YouTube 영상 대신 디자인베이스 강의 페이지로 확인했다. 같은 주제를 실습할 때는 아래 자료를 참고해 단계, 행동, 감정, 문제점, 개선 아이디어를 표로 정리하면 된다.
유저 저니 맵(User Journey Map)으로 기회 찾는 방법 – 디자인베이스
실습: 실제 서비스 하나를 골라 사용자가 처음 알게 되는 순간부터 사용 후 평가하는 순간까지 흐름을 적는다.
4. 페르소나에서 핵심 기능까지 연결하기
여정 맵을 그리는 이유는 예쁜 표를 만들기 위해서가 아니다. 사용자가 어느 단계에서 막히는지 보고, 그 문제를 줄일 수 있는 핵심 기능을 찾기 위해서다. 그래서 페르소나, 여정 맵, 핵심 기능은 따로 떨어진 작업이 아니라 하나의 흐름으로 이어져야 한다.
실습: 페르소나 1명을 만들고, 그 사람이 겪는 여정을 단계별로 정리한 뒤, 가장 먼저 해결해야 할 핵심 기능 3개를 뽑는다.
실습: Figma 또는 FigJam에서 여정 맵 템플릿을 직접 만든다. 처음부터 복잡하게 만들지 말고 단계, 행동, 감정, 문제점, 개선 아이디어 다섯 줄만 있어도 충분하다.
4일 실습 계획
| 일차 | 볼 영상 | 해야 할 일 |
|---|---|---|
| 1일차 | 1~3번 | Figma 기본 화면 만들기. 프레임, 텍스트, 버튼을 써서 모바일 첫 화면과 로그인 화면을 만든다. |
| 2일차 | 4~5번 | 스타일 가이드를 만들고, 내가 만든 화면에서 UX/UI 불편점 5개를 찾는다. |
| 3일차 | 6~8번 | 사용자 1명을 정하고, 행동 흐름과 감정 변화를 여정 맵으로 정리한다. |
| 4일차 | 9~10번 | 페르소나, 여정 맵, 핵심 기능 3개, Figma 화면 2개를 최종 산출물로 정리한다. |
실습 주제 후보
- 동네 맛집 추천 앱
- 퀵오더 잡는 앱
- AI 강의 신청 서비스
- AI 학습 기록 도우미
나는 이 중에서 먼저 “AI 강의 신청 서비스”나 “AI 학습 기록 도우미”로 실습해보면 좋을 것 같다. 지금 블로그에 학습 기록을 계속 쌓고 있기 때문에, 실제로 내가 겪는 문제와 연결하기 쉽기 때문이다.
최종 산출물 체크리스트
- 페르소나 1명
- 사용자 여정 맵 1장
- 개선 기능 3개
- Figma 화면 2개
- 색상, 폰트, 버튼 스타일 가이드
정리하며
이번 학습 흐름은 Figma 사용법만 배우는 과정이 아니다. 화면을 만드는 기술에서 시작해서, 사용자가 어떤 흐름으로 서비스를 경험하는지 보고, 그 안에서 개선 기회를 찾는 연습까지 이어진다.
Figma는 화면을 그리는 도구이고, 여정 맵은 사용자의 문제를 보는 도구다. 둘을 같이 연습해야 단순히 예쁜 화면이 아니라 실제로 쓸 만한 서비스를 기획할 수 있을 것 같다.