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

온보딩 화면(기존 사용자)

LOG-008 · 2026. 03. 06

화면 이름 온보딩 화면(기존 사용자)

화면 위치 기능 클릭 > 로그인 진입 화면 > 최초 로그인 성공 > 온보딩

화면 ID LOG-008

작성일 2026. 03. 06

9:41

차트 공식 버전 출시

기존 베타 버전을 종료하고 새롭게 태어난 차트를 만나보세요

새로운 차트 만나기

Description

0	공통 정의	노출 대상 기존 사용자(이메일 로그인)에게 최초 1회 노출 이후 로그인 시 재노출되지 않음 화면 구성 차트 업데이트에 대한 안내
1	카피	타이틀 문구 차트 정식 버전 출시 설명 문구 기존 베타 버전을 종료하고 새롭게 태어난 차트를 만나보세요
2	이미지	이미지 영역 브랜드 또는 서비스 대표 이미지 노출 이미지 미확정 시 기본 플레이스홀더 사용
3	CTA 버튼	CTA 버튼 클릭 시 메인 홈 화면으로 이동 온보딩 종료 처리
—	규칙	온보딩 화면은 재노출되지 않음 이후 로그인 시 바로 "홈" 화면 진입

Design Output

UI 디자인 산출물

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

9:41

차트 공식 버전 출시

기존 베타 버전을 종료하고 새롭게 태어난 차트를 만나보세요

Welcome

새로운 차트 만나기

Applied Design Tokens

요소	Token	값
배경	`--bg`	#FAFAF8 — 전체 화면
타이틀	`--sans` · 18px · 700	Pretendard, `--charcoal`, left-align
설명 문구	`--sans` · 14px · 500	Pretendard, `--charcoal`, left-align
이미지 영역	`--paper` + linen	Paper-Catalog 메타포, CHRT 모노그램, 542px height
CTA 버튼	`--charcoal` bg · 50px	직각(R=0), 14px, 600 weight
CTA 문구	`--sans` · 14px · 600 · white	"새로운 차트 만나기"
좌우 패딩	24px	전체 콘텐츠 마진
CTA 하단 여백	48px bottom	Home Indicator 고려한 하단 안전 영역
네비 영역	48px height	상단 여백 (이전/닫기 버튼 없음)

Design Description

Update History

2026.03.06초기 디자인 작성

0	공통 정의	노출 대상 기존 사용자(이메일 로그인)에게 최초 1회 노출 이후 로그인 시 재노출되지 않음 화면 구성 차트 업데이트에 대한 안내
1	카피	타이틀 문구 차트 정식 버전 출시 설명 문구 기존 베타 버전을 종료하고 새롭게 태어난 차트를 만나보세요
2	이미지	이미지 영역 브랜드 또는 서비스 대표 이미지 노출 이미지 미확정 시 기본 플레이스홀더 사용
3	CTA 버튼	CTA 버튼 클릭 시 메인 홈 화면으로 이동 온보딩 종료 처리
—	규칙	온보딩 화면은 재노출되지 않음 이후 로그인 시 바로 "홈" 화면 진입