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

약관동의 바텀시트

LOG-002 · 2026. 03. 04

화면 이름 약관동의 바텀시트

화면 위치 기능 클릭 > 로그인 진입 화면 > 소셜 로그인 > 바텀시트

화면 ID LOG-002

작성일 2026. 03. 04

9:41

차트로 로그인하기

차트는 필요한 순간에만 로그인을 요청합니다

약관 전체 동의

만 14세 이상입니다 (필수)

서비스 이용약관 동의 (필수)

내용보기

개인정보 수집 및 이용 동의 (필수)

내용보기

마케팅 수신 동의 (선택)

내용보기

가입하기

Description

약관동의 바텀시트

노출 방식
- 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
- 로그인(소셜 로그인) 최초 시도 시 자동 노출
닫기
- 우측 상단 닫기(X) 버튼 클릭 시 바텀시트 닫힘
- 바텀시트 닫힘 시 로그인/회원가입 프로세스 중단
약관 동의 리스트
- 약관 동의 항목 구성
  - 약관 전체 동의 (체크박스)
    - 클릭 시 하위 약관 항목 전체 선택/해제
  - 만 14세 이상입니다 (필수)
  - 서비스 이용약관 동의 (필수)
    - '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출
  - 개인정보 수집 및 이용 동의 (필수)
    - '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출
  - 마케팅 수신 동의 (선택)
    - '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출
  - 개별 약관 선택 할 경우
    - 필수 약관 3개 모두 선택 시에만 가입하기 버튼 활성화
    - 선택 약관은 가입 필수 조건에 포함되지 않음
가입하기 버튼
- 기본 상태: 비활성화
- 활성화 조건
  - 만 14세 이상
  - 서비스 이용약관 동의
  - 개인정보 수집 및 이용 동의
  - 위 3개 필수 항목 모두 체크 시 활성화
- 클릭할 경우
  - 약관 동의 정보 저장
  - 회원가입 처리 진행
  - 로그인 성공 후 서비스 진입
예외 및 차단 케이스
- 필수 약관 미동의 상태에서 가입하기 클릭 시
  - 가입 불가, "필수 약관에 동의해주세요" 토스트 메시지 노출
바텀시트 닫기(X) 클릭할 경우
- 회원가입 및 로그인 프로세스 종료
- 이전 화면(LOG-001)으로 복귀

Design Output

UI 디자인 산출물

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

9:41

차트로 시작하기.

나를 위한 단 하나의 차트.
지금 바로 로그인하고 시작해 보세요.

약관 전체 동의

만 14세 이상입니다 (필수)

서비스 이용약관 동의 (필수)

내용보기

개인정보 수집 및 이용 동의 (필수)

내용보기

마케팅 수신 동의 (선택)

내용보기

가입하기

서비스 이용약관

서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다.

개인정보 처리방침

개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다.

마케팅 수신 동의

마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다.

Applied Design Tokens

요소	Token	값
바텀시트 배경	`--bg`	#FAFAF8 — 직각, border-radius: 0
딤 오버레이	`--charcoal` 45%	rgba(26,26,26,0.45)
핸들 바	`--charcoal` 12%	36×4px, rgba(26,26,26,0.12)
"약관 전체 동의" 타이틀	`--sans` · 16px · 700	Pretendard Variable, Bold, ls: -0.02em
전체 동의 체크박스	22×22px · `--charcoal` 1.5px border	직각 (R=0), check: stroke-linecap="square"
개별 항목 체크박스	18×18px · `--charcoal` 25%	직각 (R=0), 미체크 상태
항목 텍스트	`--sans` · 14px · 400	Pretendard, ls: -0.005em
(필수)/(선택) 라벨	`--text-muted` · 12px	#888888 — 항목 텍스트 뒤 인라인
"내용보기" 링크	`--mono` · 12px · `--text-muted`	TASA Orbiter, ls: 0.04em, uppercase
닫기(X) 아이콘	22×22 · `--text-muted`	stroke-linecap="square", stroke-linejoin="miter"
구분선	`--charcoal` 7%	rgba(26,26,26,0.07) — 1px solid
가입하기 버튼	`--red-brand` gradient · 50px height	직각, 15px font, 600 weight, 135° gradient
좌우 패딩	24px	바텀시트 내부 콘텐츠 마진
항목 간격	10px vertical padding	각 약관 항목 사이 간격

Exception Case Test

Interactive Case Demo — 각 케이스 버튼 클릭 시 위 폰 목업에서 시뮬레이션됩니다

Design Description

Update History

2026.03.04초기 디자인 작성

2026.03.09가입하기 버튼 레드 그라디언트 적용 · 바텀시트 인터랙티브 데모 추가 · 배경 LOG-001 동기화

2026.03.09내용보기 → MYP-015 약관 상세 iOS push navigation 연동 · Exception Case A~F 인터랙티브 테스트 패널 추가

2026.03.09히어로 이미지 영역 삭제 · 타이틀 카피 변경 ("차트로 시작하기.") · 폰트 사이즈 조정

0	배경 화면 (LOG-001 공유)	타이틀: "차트로 시작하기." — "차트" `--red-brand` 컬러 `--sans` · 30px · Extra Bold(800) `letter-spacing: -0.02em` 서브타이틀: "나를 위한 단 하나의 차트. 지금 바로 로그인하고 시작해 보세요." `--text-secondary` #6B6B6B · 17px · line-height 1.6 히어로 이미지 — 삭제됨 (2026.03.09) 딤 오버레이 위로 배경이 보임: `rgba(26,26,26,0.45)` · 상태바(48px) 아래부터
1	바텀시트 노출	노출 방식 화면 하단에서 슬라이드 업 형태로 노출 애니메이션: `500ms cubic-bezier(0.32, 0.72, 0, 1)` — iOS 네이티브 스프링 딤 오버레이: 상태바 아래(48px)부터 `rgba(26,26,26,0.45)` · 400ms fade-in 트리거 조건 로그인(소셜 로그인) 최초 시도 시 자동 노출 기존 로그인 사용자(캐싱 O)는 노출하지 않음 → 바로 로그인 처리
2	약관 동의 리스트	약관 동의 항목 구성 약관 전체 동의 (체크박스 22×22, 진한 보더) 클릭 시 하위 약관 항목 전체 선택/해제 만 14세 이상입니다 (필수) 서비스 이용약관 동의 (필수) '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출 개인정보 수집 및 이용 동의 (필수) '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출 마케팅 수신 동의 (선택) '내용보기' 클릭 시 약관 상세 화면/웹뷰 노출 체크박스 동작 개별 항목 클릭 → 해당 체크박스만 토글 개별 항목 전체 선택 시 → '전체 동의' 자동 체크 개별 항목 하나라도 해제 시 → '전체 동의' 자동 해제 체크박스 스타일: 직각(R=0), `stroke-linecap="square"`
3	가입하기 버튼	버튼 상태 비활성(기본): `rgba(26,26,26,0.12)` 배경 · `rgba(26,26,26,0.3)` 텍스트 · 터치 비활성 활성: `--red-brand` 그라디언트(135°) · 흰색 텍스트 · 400ms 전환 활성화 조건 (필수 3개 모두 체크) 만 14세 이상 ✓ 서비스 이용약관 동의 ✓ 개인정보 수집 및 이용 동의 ✓ 선택 약관(마케팅)은 가입 필수 조건에 포함되지 않음 클릭 시 동작 (활성 상태) 약관 동의 정보 서버 저장 회원가입 처리 진행 로그인 성공 후 서비스 진입 "로그인되었습니다" 토스트 메시지 노출
4	닫기 동작	닫기(X) 버튼 클릭 바텀시트 슬라이드 다운 (`translateY(100%)` · 500ms) 딤 오버레이 페이드 아웃 (400ms) 회원가입 및 로그인 프로세스 종료 이전 화면(LOG-001 로그인 진입 화면)으로 복귀 딤 영역 탭 닫기(X) 버튼과 동일한 동작 스와이프 다운 (향후 구현) 바텀시트를 아래로 드래그 시 닫힘 velocity 기반: 빠르게 스와이프 시 즉시 닫힘, 느리게 드래그 시 50% 이상 내려야 닫힘
5	예외 및 차단 케이스	Case A — 필수 약관 미동의 상태에서 가입하기 클릭 가입 불가 버튼이 비활성 상태이므로 터치 이벤트 무시 만약 활성 상태 우회 시: "필수 약관에 동의해주세요" 토스트 메시지 노출 Case B — 바텀시트 닫기(X) 후 재시도 LOG-001 화면으로 복귀 다시 소셜 로그인 버튼 클릭 시 바텀시트 재노출 이전 체크 상태는 초기화됨 (모두 미체크 상태) Case C — 네트워크 오류 시 가입하기 클릭 후 서버 통신 실패 "네트워크 연결을 확인해주세요" 토스트 메시지 노출 바텀시트는 유지, 재시도 가능 Case D — 이미 가입된 계정 (중복 가입) 소셜 인증 완료 후 기존 계정 확인 "이미 가입된 계정입니다" 토스트 메시지 노출 기존 계정으로 로그인 처리 후 서비스 진입 Case E — 약관 상세(내용보기) 진입 후 복귀 '내용보기' 클릭 → 약관 상세 웹뷰 진입 뒤로가기 시 바텀시트로 복귀 이전 체크 상태 유지 Case F — 앱 백그라운드 전환 후 복귀 바텀시트 상태 유지 체크 상태 유지 세션 타임아웃 시 LOG-001로 복귀
6	인터랙션 사양	바텀시트 등장 Duration: 500ms Easing: `cubic-bezier(0.32, 0.72, 0, 1)` — iOS 스프링 Transform: `translateY(100%) → translateY(0)` 딤 오버레이 Duration: 400ms Easing: `cubic-bezier(0.4, 0, 0.2, 1)` — Material ease Opacity: `0 → 1` 체크박스 토글 Duration: 200ms ease Check 아이콘: opacity 전환 Border: 미체크 `rgba(26,26,26,0.25)` → 체크 `var(--charcoal)` CTA 버튼 상태 전환 Duration: 400ms 비활성 → 활성: 배경 + 텍스트 컬러 동시 전환

← 이전 화면: LOG-001 다음 화면: LOG-003 →