프로토타입_온보딩 화면만들기

온보딩 화면(Onboarding Screen)은 사용자가 앱을 처음 실행할 때 앱의 목적, 주요 기능 또는 브랜드 메시지를 소개하는 첫 진입 경험이다. 이 실습에서는 피그마를 활용하여 3장의 온보딩 화면을 만들고, 이후 프로토타이핑으로 자연스러운 좌·우 스와이프(또는 버튼 클릭) 흐름을 구성하는 것을 목표로 한다.

Ⅰ. 실습 목표

1. 모바일 프레임을 생성하여 온보딩 UI를 구성할 수 있다.
2. 일관된 타이포그래피와 컬러 스타일을 적용할 수 있다.
3. 온보딩 화면 3장을 구성하여 기본적인 앱 첫 화면 구조를 완성할 수 있다.
4. 다음 단계에서 프로토타입 연결을 할 수 있도록 깔끔한 구조를 만든다.

Ⅱ. 온보딩 화면 구성 원칙

1. 앱 소개 이미지 또는 일러스트
2. 핵심 메시지(Headline)
3. 부가 설명(Body Text)
4. 페이지 인디케이터 (● ○ ○)
5. 다음으로 넘어가기 버튼(Next / Skip)

이 다섯 요소가 갖춰지면 기본적인 온보딩 구성이 완성된다.

---

Ⅲ. 피그마 실습 절차

1단계: 프레임 생성

1. Figma → Frame(F)
2. Device → iPhone 15 Pro 선택
3. 프레임 이름 변경
   • Onboarding_01
   • Onboarding_02
   • Onboarding_03

프레임 이름은 이후 프로토타입 연결 시 매우 중요하므로 명확하게 작성하여야 한다.

2단계: 온보딩 기본 레이아웃 구성

① 상단 이미지 배치

• Unsplash, lottie files, Figma Community Illustration 등 무료 리소스를 사용하여 온보딩에 적합한 일러스트 선택
• 아이콘은 컴포넌트로 생성하자.

크기는 화면 높이의 약 40~50%로 설정하면 시각적 균형이 좋다.

② 헤드라인 텍스트: 스타일로 저장 해 본다.

폰트 스타일 가이드:

• Headline: 24~32pt 사이
• Weight: Bold
• font :  Noto Sans KR

③ 설명 텍스트

• Body: 14–16pt
• Line height: 140%

④ 페이지 인디케이터 생성

• 원(circle) 3개를 만들고 각각 8~10px
• 첫 번째 화면은 ●○○
• 두 번째 화면은 ○●○
• 세 번째 화면은 ○○●
• 컴포넌트로 만들어두면 이후 유지보수에 용이하다.

⑤ 이동 버튼: 버튼 컴포넌트 생성하자.

• 우측 하단: “Next” 또는 화살표 버튼
• 좌측 상단 또는 우측 상단: “Skip” 버튼

버튼은 자동 레이아웃(Auto Layout)을 적용하여 패딩과 정렬이 유지되도록 설계하여야 한다.

3단계: 나머지 온보딩 화면 3장 구성

각 화면은 아래 한 가지 요소만 변경하도록 구성한다.

• Onboarding_01: 브랜드 소개
• Onboarding_02: 서비스 핵심 기능
• Onboarding_03: 사용자가 얻는 가치(Value Proposition)

일러스트와 헤드라인을 각각 다르게 구성하여야 하지만, 레이아웃 구조는 동일하게 유지하여 온보딩의 일관성을 확보한다.

---

4단계: 프로토타입: 페이지 이동 설정

*프로토타입 패널 열기

1단계: 요소 선택

• 예: “Next” 버튼을 클릭할 수 있는 상태로 만든다.

2단계: Interaction 추가- Prototype 패널 → + Add interaction

• Trigger(트리거): On Tap
• Action(동작): Navigate to
• Destination(이동할 화면): Onboarding_02(또는 연결할 프레임 선택)

이 설정이 프로토타입의 핵심이다.

---

Transition(화면 전환 효과) 설정

1. Instant

• 즉시 다음 화면으로 이동
• 빠르지만 앱 느낌이 덜 자연스럽다.

2. Dissolve

• 부드럽게 페이드 인/아웃하는 방식
• 온보딩이나 팝업 화면에서 자주 사용된다.

3. Smart Animate

• 두 화면의 동일 레이어 이름을 인식하여 애니메이션을 자동 생성
• 버튼 색 변화, 이미지의 크기 변화 등 자연스러운 화면 이동이 가능

4. Move In / Move Out / Push / Slide

• 좌우 스와이프 느낌을 주어 온보딩 화면에 적합하다.
• 예: Slide Left (왼쪽으로 밀리며 다음 화면 등장)

---

페이지 이동 설정 예시 (온보딩 흐름 예)

① Onboarding_01 → Onboarding_02

• Trigger: On Tap
• Action: Navigate to
• Destination: Onboarding_02
• Animation: Slide Left / Dissolve / Smart Animate 중 선택
• Duration: 300ms

---

프로토타입 연결 시 꼭 알아야 하는 핵심 규칙

1. 요소를 드래그하여 직접 연결할 수 있다

• 요소 클릭 → 푸른색 노드(동그라미) → 다음 화면으로 드래그
• 자동으로 Navigate to가 설정된다.

2. 프레임 이름이 매우 중요하다

• Destination 목록에서 프레임명이 그대로 보이므로
  ‘Onboarding_01’, ‘Home’, ‘Login’ 등 의미 있게 작성해야 한다.

3. Smart Animate는 레이어 이름이 같아야 동작한다

• 예: “indicator”라는 레이어는 두 화면 모두 동일한 이름이어야 한다.
• 이름이 다르면 Smart Animate가 적용되지 않는다.

4. Prototype 시작 화면 설정

• 시작할 프레임 선택 → 우측 Prototype → “Set as Starting Frame” 클릭
• 이 설정이 없으면 Preview에서 첫 화면이 지정되지 않는다.

---

프로토타입 미리보기(Preview)

1. 상단의 ▶︎ Play 버튼 클릭
2. 새 창이 열리며 실제 앱처럼 테스트 가능
3. On Tap 영역을 클릭해 이동 여부 확인
4. 모바일 환경으로 보고 싶으면 Figma Mirror 앱 사용 가능

---