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

온보딩 화면

LOG-007 · 2026. 03. 04

화면 이름 온보딩 화면
화면 위치 기능 클릭 > 로그인 진입 화면 > 최초 로그인 성공 > 온보딩
화면 ID LOG-007
작성일 2026. 03. 04
9:41
건너뛰기

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

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

다음
1-1
1-2
1-3
9:41
건너뛰기

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

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

다음
2-1
2-2
2-3
9:41

차트에 오신 걸 환영해요

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

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

Design Output

UI 디자인 산출물

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

9:41
건너뛰기
Market

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

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

다음
9:41
건너뛰기
Private Sale

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

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

다음
9:41

차트에 오신 걸 환영해요

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

Welcome
작품 둘러보기
Applied Design Tokens
요소Token값
배경 --bg #FAFAF8 — 전체 화면
건너뛰기 ❶❷ --mono · 13px · 500 TASA Orbiter, --text-muted, uppercase
이미지 영역 --paper + linen Paper-Catalog 메타포, CHRT 모노그램
타이틀 ❶❷ --sans · 20px · 700 Pretendard, --charcoal, center
서브타이틀 ❶❷ --sans · 14px · 400 · --text-muted #888888, center
환영 타이틀 ❸ --sans · 24px · 700 Pretendard, --charcoal, left-align
환영 서브타이틀 ❸ --sans · 15px · 400 · --text-secondary #6B6B6B, left-align
CTA 버튼 --charcoal bg · 50px 직각, 15px, 600 weight
좌우 패딩 24px 전체 콘텐츠 마진
CTA 하단 여백 48px bottom Home Indicator 고려한 하단 안전 영역
Design Description

Update History

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