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

시스템 모달

LOG-009 · 2026. 03. 04

화면 이름 시스템 모달
화면 위치 기능 클릭 > 로그인 진입 화면 > 각종 모달
화면 ID LOG-009
작성일 2026. 03. 04

로그인 안내

계속하려면 로그인이 필요해요

나중에 하기
로그인 하기
1

(소셜로그인 명) 실패

소셜 로그인 계정을 확인해주세요

확인
2

네트워크 오류

잠시 후 다시 시도해주세요

확인
3
Description
0 공통 규칙
  • 모든 시스템 모달은 화면 중앙에 고정 노출
  • 모달 노출 시 배경 dim 처리
  • 모달 외 영역 터치 시 닫힘 불가
  • 사용자는 반드시 버튼을 통해 모달을 해제해야 함
1 로그인 안내 모달
  • 노출 조건
    • 로그인이 필요한 기능 접근 시
    • 비로그인 상태에서 로그인 필수 액션 발생 시 노출
  • 안내 문구
    • 타이틀: 로그인 안내
    • 설명: 계속하려면 로그인이 필요해요
  • 버튼 구성
    • 나중에 하기
      • 모달 닫힘
      • 기존 화면 유지
      • 로그인 없이 가능한 범위 내에서 서비스 이용 가능
    • 로그인 하기
      • 로그인 진입 화면(LOG-001)으로 이동
2 소셜 로그인 실패 모달
  • 노출 조건
    • 소셜 로그인 인증 실패 시
    • 소셜 플랫폼 인증 중 오류 발생 시 노출
  • 안내 문구
    • 타이틀: (소셜로그인 명) 실패
    • 설명: 소셜 로그인 계정을 확인해주세요
  • 확인 버튼
    • 모달 닫힘
    • 로그인 진입 화면(LOG-001) 또는 직전 화면 유지
3 네트워크 오류 모달
  • 노출 조건
    • 네트워크 연결 오류 발생 시
    • 서버 통신 실패 또는 타임아웃 발생 시 노출
  • 안내 문구
    • 타이틀: 네트워크 오류
    • 설명: 잠시 후 다시 시도해주세요
  • 확인 버튼
    • 모달 닫힘
    • 현재 화면 유지
    • 사용자가 동일 동작 재시도 가능

Design Output

UI 디자인 산출물

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

9:41

로그인 안내

계속하려면 로그인이 필요해요

나중에 하기
로그인 하기
Applied Design Tokens
요소Token값
모달 배경 --bg #FAFAF8 — 직각 (R=0)
모달 테두리 --charcoal 1px solid 직각 border, border-radius: 0
딤 오버레이 --charcoal 45% rgba(26,26,26,0.45)
타이틀 --sans · 18px · 700 Pretendard, --charcoal, center
설명 문구 --sans · 18px · 500 · --text-secondary #6B6B6B, center
Primary 버튼 (CTA) --cta-gradient · 50px linear-gradient(135deg, #961E23 → #B22A30) · 14px · 600
Secondary 버튼 ❶ --text-secondary bg · 50px #6B6B6B, "나중에 하기"
모달 비율 1:1 정사각형 고정 비율, 화면 중앙 정렬 (width 78%)
모달 외 터치 disabled 반드시 버튼을 통해 해제
내부 패딩 24px 문구 영역 좌우 마진
모달 유형별 — 적용 케이스

각 모달의 실제 디자인. Primary 버튼은 차트 레드 그라디언트(--cta-gradient) 적용.

Case 1 — 로그인 안내

로그인 안내

계속하려면 로그인이 필요해요

나중에 하기
로그인 하기

Case 2 — 소셜 로그인 실패

(소셜로그인 명) 실패

소셜 로그인 계정을 확인해주세요

확인

Case 3 — 네트워크 오류

네트워크 오류

잠시 후 다시 시도해주세요

확인
Design Description

Update History

2026.03.04초기 디자인 작성
2026.03.09폰 목업(딤+모달) 추가 · Primary 버튼 --cta-gradient 적용 · 모달 유형별 케이스 카드 추가
0 공통 규칙
  • 모든 시스템 모달은 화면 중앙에 고정 노출
  • 모달 노출 시 배경 dim 처리 — rgba(26,26,26,0.45)
  • 모달 외 영역 터치 시 닫힘 불가
  • 사용자는 반드시 버튼을 통해 모달을 해제해야 함
  • Primary 버튼(로그인 하기, 확인): --cta-gradient 차트 레드 그라디언트
  • Secondary 버튼(나중에 하기): --text-secondary #6B6B6B 배경
1 로그인 안내 모달
  • 노출 조건
    • 로그인이 필요한 기능 접근 시
    • 비로그인 상태에서 로그인 필수 액션 발생 시 노출
  • 안내 문구
    • 타이틀: 로그인 안내
    • 설명: 계속하려면 로그인이 필요해요
  • 버튼 구성
    • 나중에 하기
      • 모달 닫힘
      • 기존 화면 유지
      • 로그인 없이 가능한 범위 내에서 서비스 이용 가능
    • 로그인 하기
      • 로그인 진입 화면(LOG-001)으로 이동
2 소셜 로그인 실패 모달
  • 노출 조건
    • 소셜 로그인 인증 실패 시
    • 소셜 플랫폼 인증 중 오류 발생 시 노출
  • 안내 문구
    • 타이틀: (소셜로그인 명) 실패
    • 설명: 소셜 로그인 계정을 확인해주세요
  • 확인 버튼
    • 모달 닫힘
    • 로그인 진입 화면(LOG-001) 또는 직전 화면 유지
3 네트워크 오류 모달
  • 노출 조건
    • 네트워크 연결 오류 발생 시
    • 서버 통신 실패 또는 타임아웃 발생 시 노출
  • 안내 문구
    • 타이틀: 네트워크 오류
    • 설명: 잠시 후 다시 시도해주세요
  • 확인 버튼
    • 모달 닫힘
    • 현재 화면 유지
    • 사용자가 동일 동작 재시도 가능
← 이전 화면: LOG-008 다음 화면: HOM-001 →