사용자 화면 · 회원가입/로그인

온보딩 화면

LOG-007 · 2026. 01. 29

화면 이름 온보딩 화면
화면 위치 기능 클릭 > 로그인 진입 화면 > 최초 로그인 성공 > 온보딩
화면 ID LOG-007
작성일 2026. 01. 29
LOG-007 LOG-007 LOG-007
Description
0 공통 정의
  • 노출 대상
    • 최초 소셜 로그인 또는 회원가입 완료 사용자에게 1회 노출
    • 이후 로그인 시 재노출되지 않음
    • 총 3단계 온보딩/환영 화면으로 구성
    • 단계별 순차 이동 구조
1 온보딩 - 마켓 안내
  • 온보딩 1단계 - 마켓 안내 화면
1-1 상단 영역 (건너뛰기)
  • 상단 영역 (건너뛰기)
    • 우측 상단 텍스트 버튼 형태로 노출
    • 클릭 시 온보딩 전체 스킵
    • 즉시 환영 화면(3단계)으로 이동
1-2 콘텐츠 영역
  • 콘텐츠 영역
    • 이미지 영역
      • 마켓 관련 대표 이미지 노출
      • 이미지 미확정 시 기본 플레이스홀더 사용
      • 마켓에서 작품을 둘러보세요
    • 설명 문구
      • 차트의 마켓에서 다양한 작품을 만나보세요
1-3 CTA 버튼
  • 다음 버튼
    • 클릭 시 2단계 온보딩 화면으로 이동
2 온보딩 - PS 안내
  • 온보딩 2단계 - 프라이빗 세일 안내 화면
2-1 상단 영역 (건너뛰기)
  • 상단 영역 (건너뛰기)
    • 우측 상단 텍스트 버튼 형태로 노출
    • 클릭 시 온보딩 전체 스킵
    • 즉시 환영 화면(3단계)으로 이동
2-2 콘텐츠 영역
  • 콘텐츠 영역
    • 이미지 영역
      • 프라이빗 세일 관련 대표 이미지 노출
      • 이미지 미확정 시 기본 플레이스홀더 사용
      • 프라이빗 세일에서 작품을 요청해보세요
    • 설명 문구
      • 공개가 어려운 작품은 프라이빗 세일로만 안내됩니다
2-3 CTA 버튼
  • 다음 버튼
    • 클릭 시 환영 화면(3단계)으로 이동
3 환영 화면
  • 환영 화면 - 서비스 진입
3-1 콘텐츠 영역
  • 타이틀 문구
    • 차트에 오신 걸 환영해요
    • 이제 차트에서 본격적으로 작품을 둘러볼 시간이에요
  • 이미지 영역
    • 브랜드 또는 서비스 대표 이미지 노출
    • 이미지 미확정 시 기본 플레이스홀더 사용
3-2 CTA 버튼
  • 작품 둘러보기 버튼
    • 클릭 시 메인 홈 또는 마켓 화면으로 이동
    • 온보딩 종료 처리
비고 규칙
  • 온보딩 종료 및 재노출 규칙
    • 온보딩 종료 조건
      • 3단계 환영 화면에서 CTA 버튼 클릭
      • 또는 1·2단계에서 건너뛰기 버튼 클릭
      • 온보딩 화면은 재노출되지 않음
      • 이후 로그인 시 바로 메인 서비스 진입

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
건너뛰기
Image Area

마켓에서 작품을 둘러보세요

차트의 마켓에서 다양한 작품을 만나보세요

다음
9:41
건너뛰기
Image Area

프라이빗 세일에서 작품을
요청해보세요

공개가 어려운 작품은 프라이빗 세일로만 안내됩니다

다음
9:41

차트에 오신 걸 환영해요

이제 차트에서 본격적으로 작품을 둘러볼 시간이에요

Image Area
작품 둘러보기
개발 구현 가이드 — LOG-007 온보딩 화면
디자인 상태
완료
최종 승인
류우상 ✅
승인일
2026-03-27

Update History

2026.03.26구현 가이드 최신화 검증 — Description 전수 대조 누락 0건, 카피 영역 클래스 전환(sb-dp-onboard-copy) 반영 확인, 디자인 산출물 동기화 완료
2026.03.25이미지 영역 플레이스홀더로 통일 반영 — ❶ 2x2 그리드, ❷ 히어로, ❸ 콜라주 → 전부 300/340px 플레이스홀더 박스로 교체 (실제 이미지 미확정). 섹션 1·2·4 설명 업데이트, Update History 추가
2026.03.16구현 가이드 8섹션 최신화 (화면구조, 레이어구조+치수, 핵심인터랙션, 상태변화, 네비게이션플로우, 에러/예외, 모션스펙, 여백·간격 요약)
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 이미지레이아웃, 타이포그래피, 건너뛰기, CTA, 전환애니메이션, 에러처리), CTA 레드 그라디언트 적용
2026.03.10디자인 산출물 최신화
2026.03.04초기 디자인 작성
Implementation Specification

1. 화면 구조 개요

※ LOG-007은 최초 소셜 로그인 또는 회원가입 완료 직후 1회만 노출되는 3단계 순차 온보딩이다.

  • 화면 유형: 전체 화면 (full screen, 393x852px) x 3 스텝
  • ❶ 마켓 안내 — 이미지 플레이스홀더(300px) + "마켓에서 작품을 둘러보세요" — 실제 이미지(2x2 아트워크 그리드) 교체 예정
  • ❷ 프라이빗 세일 안내 — 이미지 플레이스홀더(300px) + "프라이빗 세일에서 작품을 요청해보세요" — 실제 이미지(단일 히어로 + 그라데이션 오버레이) 교체 예정
  • ❸ 환영 화면 — 이미지 플레이스홀더(340px) + "차트에 오신 걸 환영해요" — 실제 이미지(3열 콜라주 + 브랜드 오버레이) 교체 예정
  • 배경: var(--bg) #FAFAF8 — 전체 화면 공통
  • 완료 후 localStorage에 온보딩 완료 플래그 저장 → 이후 재노출 없음

2. 레이어 구조 + 치수

# 영역 높이/위치 상세
1 상태바 44px, top:0 iOS 시스템 제공 (시간, 배터리 등)
2 건너뛰기 (❶❷만) padding:12px 24px, 우측 정렬 var(--mono) TASA Orbiter 13px/500, var(--text-muted) #888888, uppercase, ls:0.02em
3 이미지 영역 ❶ height:300px, margin:40px 24px 24px [현재] 플레이스홀더: background:var(--alpha-4), border:1px dashed var(--border), "Image Area" 라벨 (var(--mono) var(--text-xs) uppercase var(--ls-wide)) — 교체 예정: 2x2 grid, columns:1fr 1fr, rows:1fr 1fr, gap:3px, object-fit:cover
4 이미지 영역 ❷ height:300px, margin:40px 24px 24px [현재] 플레이스홀더: background:var(--alpha-4), border:1px dashed var(--border), "Image Area" 라벨 — 교체 예정: 단일 hero, 하단 gradient overlay height:80px (rgba(0,0,0,0.45)→transparent), PS 라벨: var(--mono) 11px/600 uppercase ls:0.06em rgba(255,255,255,0.85)
5 이미지 영역 ❸ height:340px, margin:24px 24px [현재] 플레이스홀더: background:var(--alpha-4), border:1px dashed var(--border), "Image Area" 라벨 — 교체 예정: 3col mosaic (1fr 1fr 1fr, rows:1fr 1fr, gap:3px), 좌측 col grid-row:1/3 span, 브랜드 overlay: gradient(to bottom, rgba(0,0,0,0.05)→rgba(0,0,0,0.25)), CHRT. SVG width:60px opacity:0.9 #fff
6 카피 ❶❷ padding:0 24px, center 타이틀: var(--sans) 20px/700, var(--charcoal) #1A1A1A, ls:-0.02em, mb:8px / 서브: 14px/400, var(--text-muted) #888888, ls:-0.005em
7 카피 ❸ padding:32px 24px 0, left 타이틀: var(--sans) 24px/700, var(--charcoal) #1A1A1A, ls:-0.03em, lh:1.3, mb:10px / 서브: 15px/400, var(--text-secondary) #6B6B6B, ls:-0.005em, lh:1.5
8 CTA 버튼 height:50px, absolute, bottom:48px, left/right:24px var(--cta-gradient) linear-gradient(135deg, #961E23→#B22A30), var(--sans) 15px/600, #fff, ls:-0.01em, R=0
9 Home Indicator height:34px, bottom:0 iOS 하단 안전 영역

3. 핵심 인터랙션

  • 건너뛰기 (❶❷): 우측 상단 텍스트 버튼. 터치 타겟 최소 44x44px (padding 확장). 클릭 시 ❸ 환영화면으로 수평 슬라이드 전환
  • CTA "다음" (❶→❷): ❷ 프라이빗 세일 안내로 수평 슬라이드 전환
  • CTA "다음" (❷→❸): ❸ 환영화면으로 수평 슬라이드 전환
  • CTA "작품 둘러보기" (❸): 온보딩 완료 플래그 localStorage 저장 → HOM-001 메인 홈으로 수직 슬라이드 업 전환
  • 이미지 프리로드: ❶ 진입 시 ❷❸ 이미지 비동기 선행 로드 → 전환 시 깜박임 방지

4. 상태 변화

상태 조건 시각적 변화
❶ 마켓 안내 (초기) 온보딩 최초 진입 이미지 플레이스홀더(300px) + 건너뛰기 노출 + CTA "다음" — 실제 이미지 확정 후 2x2 그리드로 교체
❷ PS 안내 ❶에서 "다음" 클릭 이미지 플레이스홀더(300px) + 건너뛰기 + CTA "다음" — 실제 이미지 확정 후 단일 히어로 + gradient overlay + PS 라벨로 교체
❸ 환영 ❷에서 "다음" 또는 건너뛰기 이미지 플레이스홀더(340px) + 건너뛰기 없음 + CTA "작품 둘러보기" — 실제 이미지 확정 후 3열 콜라주 + 브랜드 오버레이로 교체
이미지 로드 실패 네트워크 오류 등 background:#d9d9d9 플레이스홀더 + SVG 아이콘(24px, stroke:var(--text-muted) #888888, stroke-width:1)

5. 네비게이션 플로우

  • 진입: 최초 소셜 로그인/회원가입 완료 → 자동 진입 (LOG-002 약관 동의 → LOG-007)
  • ❶→❷: CTA "다음" → 수평 슬라이드 → LOG-007 ❷ PS 안내
  • ❷→❸: CTA "다음" → 수평 슬라이드 → LOG-007 ❸ 환영 화면
  • 건너뛰기 (❶ or ❷): → 수평 슬라이드 → LOG-007 ❸ 환영 화면
  • ❸ CTA "작품 둘러보기": 온보딩 종료 → 수직 슬라이드 업 → HOM-001 메인 홈
  • 이후 로그인: 온보딩 플래그 확인 → 이 화면 건너뛰고 바로 HOM-001 진입

6. 에러/예외 처리

  • 이미지 로딩 실패: 회색 플레이스홀더 #d9d9d9 + SVG 이미지 아이콘(24px) 표시. CTA 동작은 정상 유지
  • 온보딩 완료 플래그 저장 실패: 앱 재시작 시 온보딩 재노출 허용 (UX 손실 최소화 우선)
  • 앱 중간 종료/재시작: ❶부터 다시 시작 (중간 진행 상태 미저장)
  • 네트워크 단절 중 진입: 이미지 플레이스홀더 표시. 화면 진입 및 CTA 동작은 오프라인에서도 정상 작동

7. 모션 스펙

동작 속성 duration easing
❶→❷, ❷→❸ 수평 전환 현재: translateX(0→-100%), 다음: translateX(100%→0) 300ms var(--ease-ios-spring)
건너뛰기 → ❸ 동일 수평 푸시 (❶→❸ 또는 ❷→❸) 300ms var(--ease-ios-spring)
❸ → HOM-001 translateY(0→-100%) — 수직 슬라이드 업 400ms var(--ease-ios-spring)

8. 여백·간격 요약

항목 값 비고
콘텐츠 좌우 padding 24px 전체 화면 공통
건너뛰기 영역 padding: 12px 24px 상태바 아래, 우측 정렬
이미지 margin (❶❷) 40px 24px 24px top:40px, left/right:24px, bottom:24px
이미지 margin (❸) 24px 24px 카피 아래, 동일 좌우 24px
이미지 그리드 gap 3px ❶❷❸ 모두 동일
카피 padding (❶❷) 0 24px 이미지 아래, center 정렬
카피 padding (❸) 32px 24px 0 이미지 위, left 정렬
타이틀→서브 gap 8px (❶❷), 10px (❸) margin-bottom
CTA bottom 48px Home Indicator 안전 영역
CTA left/right 24px absolute 화면 하단 고정
PS overlay padding (❷) 0 16px 14px 하단 gradient 내부 라벨 위치

9. 적용 디자인 토큰

  • [색상]
  • --charcoal: #1A1A1A
  • --cta-gradient: linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%)
  • --text-muted: #888888
  • [타이포그래피]
  • --mono: TASA Orbiter
  • --sans: Pretendard Variable
← 이전 화면: LOG-006 다음 화면: LOG-008 →