사용자 화면 · 회원가입/로그인
시스템 모달
LOG-009 · 2026. 01. 29
Description
| 0 | 공통 규칙 |
|
| 1 | 로그인 안내 모달 |
|
| 2 | 소셜 로그인 실패 모달 |
|
| 3 | 네트워크 오류 모달 |
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
로그인 안내
계속하려면 로그인이 필요해요
나중에 하기
로그인 하기
개발 구현 가이드 — LOG-009 시스템 모달
디자인 상태
완료
완료
최종 승인
류우상 ✅
류우상 ✅
승인일
2026-03-27
2026-03-27
Update History
2026.03.26구현 가이드 최신화 검증 — Description 전수 대조 누락 0건, 토큰 섹션 통합 확인, 디자인 산출물 동기화 완료
2026.03.25구현 가이드 최신화 — 모달 중앙 정렬(transform) 복구, aspect-ratio:1/1 복원, padding-bottom:25px 복구, Description/토큰/산출물 기준 전면 재작성
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.16모달 테두리(border) 삭제, 구현 가이드 동기화
2026.03.16구현 가이드 8섹션 최신화 (화면구조, 레이어구조+치수, 핵심인터랙션, 상태변화, 네비게이션플로우, 에러/예외, 모션스펙, 여백·간격 요약)
2026.03.13개발 구현 가이드 신규 작성, Design Description 섹션 통합
2026.03.09폰 목업(딤+모달) 추가 · Primary 버튼
--cta-gradient 적용 · 모달 유형별 케이스 카드 추가2026.03.04초기 디자인 작성
Implementation Specification
1. 화면 구조 개요
※ LOG-009는 시스템 레벨 알림/확인을 위한 공용 모달 컴포넌트이다. 3가지 유형(Confirm, Alert-소셜, Alert-네트워크)으로 사용된다.
- 컴포넌트 유형: 오버레이 모달 — 딤 레이어 + 화면 중앙 고정 모달 박스
- CSS 클래스:
.sb-dp-sys-modal(모달 박스),.sb-dp-sys-modal-dim(딤 오버레이) - 기본 구조: 타이틀 + 설명 본문 + 버튼(1~2개)
- 3가지 변형: ❶ 로그인 안내 (Confirm: 2버튼), ❷ 소셜 로그인 실패 (Alert: 1버튼), ❸ 네트워크 오류 (Alert: 1버튼)
- 공통 규칙: 모든 시스템 모달은 화면 중앙에 고정 노출, 노출 시 배경 dim 처리
- 모달 배경:
var(--bg)#FAFAF8, border 없음, border-radius:0 (R=0 직각) - 모달 외 영역(딤) 터치 시 닫힘 불가 — 반드시 버튼을 통해서만 해제
2. 레이어 구조 + 치수
| # | 영역 / 클래스 | 위치 / 치수 | 상세 속성 |
|---|---|---|---|
| 1 | 딤 오버레이.sb-dp-sys-modal-dim | position:absolute; top:0; left:0; right:0; bottom:0; z-index:5 | background:var(--overlay-dim) rgba(26,26,26,0.45) — 외부 탭 시 닫힘 불가 |
| 2 | 모달 박스.sb-dp-sys-modal | position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; width:78%; aspect-ratio:1/1 | background:var(--bg) #FAFAF8, border 없음, border-radius:0, display:flex, flex-direction:column, justify-content:center, align-items:center, padding-bottom:25px |
| 3 | 본문 텍스트 영역.sb-dp-sys-modal__text | text-align:center; padding:0 24px | 타이틀 + 설명 문구 포함 래퍼 |
| 4 | 타이틀.sb-dp-sys-modal__title | margin:0 0 8px (var(--space-2)) | font-family:var(--sans) Pretendard Variable, font-size:var(--text-md) 17px, font-weight:700, color:var(--charcoal) #1A1A1A, letter-spacing:var(--ls-tight) -0.02em |
| 5 | 설명 문구.sb-dp-sys-modal__desc | margin:0 | font-family:var(--sans) Pretendard Variable, font-size:var(--text-md) 17px, font-weight:500, color:var(--text-secondary) #555555, letter-spacing:var(--ls-normal) 0 |
| 6 | 버튼 컨테이너.sb-dp-sys-modal__actions | position:absolute; bottom:0; left:0; right:0; display:flex; gap:0 | 버튼 1~2개 수평 배치. ❶ 2버튼 시 각 flex:1로 좌우 균등 분할 (Secondary 좌 / Primary 우) |
| 7 | Primary 버튼.sb-dp-sys-modal__btn--primary | flex:1; height:50px; margin:0 | background:var(--cta-gradient) linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%), font-family:var(--sans), font-size:var(--text-base) 15px, font-weight:600, color:var(--white) #ffffff, letter-spacing:var(--ls-normal) 0, border-radius:0 |
| 8 | Secondary 버튼 (❶만).sb-dp-sys-modal__btn--secondary | flex:1; height:50px; margin:0 | background:var(--text-secondary) #555555, font-family:var(--sans), font-size:var(--text-base) 15px, font-weight:600, color:var(--white) #ffffff, letter-spacing:var(--ls-normal) 0, border-radius:0 |
3. 핵심 인터랙션
- ❶ 로그인 안내 (Confirm): "나중에 하기" → 모달 닫힘, 기존 화면 유지, 로그인 없이 가능한 범위 내 서비스 이용 가능 / "로그인 하기" → 모달 닫힘 → LOG-001 로그인 진입 화면 이동
- ❷ 소셜 로그인 실패 (Alert): "확인" → 모달 닫힘 → LOG-001 로그인 진입 화면 또는 직전 화면 유지
- ❸ 네트워크 오류 (Alert): "확인" → 모달 닫힘 → 현재 화면 유지, 사용자가 동일 동작 재시도 가능
- 딤 영역 탭: 닫힘 불가 (모든 유형) — 반드시 버튼 클릭으로만 해제
- 하드웨어 뒤로가기 (Android): "취소/나중에하기" 동작과 동일 처리
- 배경 잠금: 모달 노출 중 배경 스크롤/인터랙션 비활성화
4. 상태 변화
| 상태 | 조건 | 시각적 변화 | CSS 클래스 |
|---|---|---|---|
| 숨김 (기본) | 트리거 미발생 | 딤+모달 opacity:0, pointer-events:none | (클래스 없음) |
| 등장 | 트리거 발생 | 딤 opacity:0→1 (300ms), 모달 opacity:0→1 + scale:0.88→1 (350ms/400ms spring) | .is-visible |
| 노출 중 | 모달 활성 | 딤+모달 opacity:1, pointer-events:auto, 배경 잠금 | .is-visible |
| 닫힘 (애니메이션) | 버튼 클릭 | 모달 opacity:1→0 + scale:1→0.92 (200ms/250ms), 딤 opacity:1→0 (250ms) | .is-closing (300ms 후 자동 제거) |
5. 네비게이션 플로우
- 진입 경로: 기능 클릭 → 로그인 진입 화면 → 각종 모달
- ❶ 로그인 안내 트리거: 비로그인 상태에서 로그인 필수 기능 접근 시
- ❶ "로그인 하기": 모달 닫힘 → LOG-001 로그인 진입 화면
- ❶ "나중에 하기": 모달 닫힘 → 기존 화면 유지 (로그인 없이 가능한 범위 내 서비스 이용)
- ❷ 소셜 실패 트리거: 소셜 플랫폼 인증 중 오류 발생 시 / 타이틀: "(소셜로그인 명) 실패" — 동적 삽입
- ❷ "확인": 모달 닫힘 → LOG-001 로그인 진입 화면 또는 직전 화면
- ❸ 네트워크 오류 트리거: 서버 통신 실패 또는 타임아웃 발생 시
- ❸ "확인": 모달 닫힘 → 현재 화면 유지, 재시도 가능
- 기타 확장 케이스: 세션 만료 → 재로그인 안내, 계정 정지/탈퇴 → 안내 + 강제 로그아웃, 권한 요청 → OS 팝업 전 사전 안내
6. 에러/예외 처리
- 모달 내부 액션 실패: 모달 유지 + 에러 토스트 노출 (모달 위 z-index에 표시)
- 연속 모달 발생: 큐잉 처리 — 동시 2개 이상 노출 금지. 현재 모달 완전히 닫힌 후 다음 모달 등장
- "로그인 하기" 후 화면 이동 실패: 모달 닫힘 → 에러 토스트 "화면 이동 중 오류가 발생했습니다" + 현재 화면 유지
- 소셜 로그인 실패 타이틀: "(소셜로그인 명) 실패" — 실패한 플랫폼명 동적 삽입 필수
7. 모션 스펙
| 동작 | 속성 | duration | easing |
|---|---|---|---|
| 딤 등장 | opacity: 0 → 1 | 300ms | cubic-bezier(0.2, 0, 0, 1) |
| 모달 등장 — opacity | opacity: 0 → 1 | 350ms | cubic-bezier(0.2, 0, 0, 1) |
| 모달 등장 — scale (spring) | transform: translate(-50%,-50%) scale(0.88) → scale(1) | 400ms | cubic-bezier(0.34, 1.56, 0.64, 1) |
| 모달 닫힘 — opacity | opacity: 1 → 0 | 200ms | cubic-bezier(0.4, 0, 1, 1) |
| 모달 닫힘 — scale | transform: translate(-50%,-50%) scale(1) → scale(0.92) | 250ms | cubic-bezier(0.4, 0, 1, 1) |
| 딤 닫힘 | opacity: 1 → 0 | 250ms | cubic-bezier(0.4, 0, 1, 1) |
※ 닫힘 모션 시 transform은 translate(-50%,-50%)를 반드시 유지한 채 scale만 변경. 중앙 정렬 위치가 흐트러지지 않아야 함.
8. 여백·간격 요약
| 항목 | 값 | 비고 |
|---|---|---|
| 모달 너비 | width: 78% | 화면(폰 목업) 폭 기준 비율 |
| 모달 비율 | aspect-ratio: 1 / 1 | 정사각형 고정 — 높이 자동 계산 |
| 모달 위치 | top:50%; left:50%; transform:translate(-50%,-50%) | 화면 정중앙 고정 — transform 반드시 유지 |
| 본문 좌우 패딩 | padding: 0 24px | 타이틀 + 설명 영역 |
| 타이틀 → 설명 간격 | margin-bottom: 8px (var(--space-2)) | 타이틀 아래 여백 |
| 모달 하단 버퍼 | padding-bottom: 25px | 본문과 하단 고정 버튼 사이 여유 — 25px 유지 필수 |
| 버튼 영역 위치/높이 | position:absolute; bottom:0; left:0; right:0; height:50px | 모달 하단 고정 |
| 2버튼 레이아웃 (❶) | display:flex; gap:0 — 각 버튼 flex:1 | 간격 없이 좌우 균등 분할. Secondary 좌 / Primary 우 |
9. 적용 디자인 토큰
| 카테고리 | 토큰 | 실제값 | 사용처 |
|---|---|---|---|
| 색상 | --bg | #FAFAF8 | 모달 박스 배경 |
--charcoal | #1A1A1A | 타이틀 텍스트 색상 | |
--text-secondary | #555555 | 설명 문구 색상, Secondary 버튼 배경 | |
--overlay-dim | rgba(26,26,26,0.45) | 딤 오버레이 배경 | |
--white | #ffffff | 버튼 텍스트 색상 | |
| 그라디언트 | --cta-gradient | linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%) | Primary 버튼 배경 |
| 타이포그래피 | --sans | Pretendard Variable | 모든 텍스트 및 버튼 |
--text-md | 17px | 타이틀 + 설명 문구 폰트 크기 | |
--text-base | 15px | 버튼 레이블 폰트 크기 | |
| letter-spacing | --ls-tight | -0.02em | 타이틀 자간 |
--ls-normal | 0 | 설명 문구 및 버튼 레이블 자간 | |
| 간격 | --space-2 | 8px | 타이틀 margin-bottom |
| 투명도 | --alpha-8 | rgba(17,17,17,0.08) | 가이드 내 테이블 헤더 구분선 |
--alpha-4 | rgba(17,17,17,0.04) | 가이드 배경, 테이블 행 구분선 |
모달 유형별 — 적용 케이스
각 모달의 실제 디자인. Primary 버튼은 차트 레드 그라디언트(--cta-gradient) 적용.
Case 1 — 로그인 안내
로그인 안내
계속하려면 로그인이 필요해요
나중에 하기
로그인 하기
Case 2 — 소셜 로그인 실패
(소셜로그인 명) 실패
소셜 로그인 계정을 확인해주세요
확인
Case 3 — 네트워크 오류
네트워크 오류
잠시 후 다시 시도해주세요
확인