슥캘린더 화면 기획서 (디자인 에이전트용)

문서 버전: v1.1 작성일: 2026년 3월 5일 플랫폼: iOS / iPadOS / macOS

1. 디자인 시스템

1-0. 디자인 방향 (Uber + iOS 26 Liquid Glass)

Uber 디자인 시스템 기반: 높은 대비의 모노톤, 굵고 명확한 정보 위계, 간결한 인터랙션
iOS 26 리퀴드글래스 적용: 반투명 레이어, 상단 하이라이트 보더, 큰 코너 라운드, 소프트 섀도우
핵심 원칙
- Primary 액션은 강한 대비(거의 Black/White)로 명확히 구분
- 카드/시트/패널은 glass-bg* 토큰 중심으로 레이어 깊이 표현
- 텍스트 가독성을 최우선으로 하며 과도한 채도 사용을 제한

1-1. 간격 시스템 (Spacing) 예시

모든 레이아웃에서 2, 4 단위를 기준으로 간격을 정의합니다.

토큰명	값 (pt)
`sp002`	2
`sp004`	4
`sp006`	6
`sp008`	8

1-2. 컬러 토큰 (Color Tokens)

관리 원칙: Pencil/Design.pen 변수는 Color+DesignSystem.swift의 계층(Primitives/Core/Semantic/SemanticExtensions/Calendar)과 1:1로 등록/유지합니다.

그레이스케일 예시

토큰명	Light Mode	Dark Mode	용도
`gray1`	#FAFAFA	#1A1A1A	앱 기본 배경
`gray2`	#F5F5F5	#242424	보조 배경
`gray3`	#E5E5E5	#2E2E2E	구분선, 보더
`gray9`	#1A1A1A	#FAFAFA	주요 텍스트

글래스 토큰 예시

토큰명	Light Mode	Dark Mode	용도
`glass-bg`	#FFFFFF99	#FFFFFF99	기본 글래스 패널
`glass-bg-strong`	#FFFFFFCC	#FFFFFFCC	강조 글래스 패널/카드
`glass-border`	#FFFFFF66	#FFFFFF66	글래스 보더 하이라이트
`glass-shadow`	rgba(15,23,42,0.12)	rgba(0,0,0,0.45)	글래스 표면 그림자

브랜드 컬러 예시

토큰명	Light Mode	Dark Mode	용도
`primary1`	#3B82F6	#60A5FA	주요 액션 버튼
`primary2`	#2563EB	#3B82F6	버튼 Pressed 상태
`primary3`	#DBEAFE	#1E3A8A	Secondary 배경

시맨틱 컬러 예시

토큰명	Light Mode	Dark Mode	용도
`success1`	#10B981	#34D399	성공 메시지, 완료 상태
`success2`	#D1FAE5	#064E3B	성공 배경
`warning1`	#F59E0B	#FBBF24	경고 메시지
`warning2`	#FEF3C7	#78350F	경고 배경
`error1`	#EF4444	#F87171	에러 메시지, 삭제
`error2`	#FEE2E2	#7F1D1D	에러 배경
`info1`	#3B82F6	#60A5FA	정보 메시지
`info2`	#DBEAFE	#1E3A8A	정보 배경

일정 카테고리 컬러 예시

토큰명	Light Mode	Dark Mode	용도
`calendar-red`	#EF4444	#F87171	개인 일정
`calendar-orange`	#F97316	#FB923C	약속
`calendar-yellow`	#EAB308	#FACC15	미팅
`calendar-green`	#10B981	#34D399	운동/건강
`calendar-blue`	#3B82F6	#60A5FA	업무
`calendar-purple`	#8B5CF6	#A78BFA	학습
`calendar-pink`	#EC4899	#F472B6	기념일

캘린더 일정 바/칩 토큰

토큰명	Light Mode	Dark Mode	용도
`calendar-chip-green-bg`	#DFF3E8	#DFF3E8	일정 바(운동/건강) 배경
`calendar-chip-green-fg`	#2F6A55	#2F6A55	일정 바(운동/건강) 텍스트/스트립
`calendar-chip-blue-bg`	#DCEEFF	#DCEEFF	일정 바(업무) 배경
`calendar-chip-blue-bg-soft`	#E9F5FF	#E9F5FF	일정 바(업무) 보조 배경
`calendar-chip-blue-fg`	#2E5F9E	#2E5F9E	일정 바(업무) 텍스트/스트립
`calendar-chip-orange-bg`	#FFEED5	#FFEED5	일정 바(약속) 배경
`calendar-chip-orange-fg`	#9A6228	#9A6228	일정 바(약속) 텍스트/스트립
`calendar-chip-pink-bg`	#FFE0E4	#FFE0E4	일정 바(기념일/휴일) 배경
`calendar-chip-pink-fg`	#A33A4B	#A33A4B	일정 바(기념일/휴일) 텍스트/스트립

1-3. 타이포그래피 (Typography)

폰트 패밀리

기본 폰트 변수: font-family-primary, font-family-secondary
현재 기본값: Pretendard

폰트 토큰 예시

토큰명	Font Size	Line Height	Weight	Letter Spacing	용도
`Display/Large`	96pt	112pt	Bold (700)	0pt	히어로/브랜딩 타이틀
`Display/Medium`	52pt	64pt	Bold (700)	0pt	대형 강조 타이틀
`Display/Small`	44pt	52pt	Bold (700)	0pt	큰 화면 제목
`Display/XSmall`	36pt	44pt	Bold (700)	0pt	중대형 제목
`Heading/XXLarge`	40pt	52pt	Bold (700)	0pt	최상위 제목
`Heading/XLarge`	36pt	44pt	Bold (700)	0pt	상위 제목
`Heading/Large`	32pt	40pt	Bold (700)	0pt	화면 제목
`Heading/Medium`	28pt	36pt	Bold (700)	0pt	섹션 제목
`Heading/Small`	24pt	32pt	Bold (700)	0pt	카드 제목
`Heading/XSmall`	20pt	28pt	Bold (700)	+0.25pt	서브 섹션 제목
`Paragraph/Large`	18pt	28pt	Regular (400)	0pt	긴 본문(강조)
`Paragraph/Medium`	16pt	24pt	Regular (400)	0pt	본문(기본)
`Paragraph/Small`	14pt	20pt	Regular (400)	0pt	보조 본문
`Paragraph/XSmall`	12pt	20pt	Regular (400)	0pt	작은 본문
`Label/Large`	18pt	24pt	Medium (500)	0pt	버튼/상태 라벨(대)
`Label/Medium`	16pt	20pt	Medium (500)	0pt	버튼/탭 라벨
`Label/Small`	14pt	16pt	Medium (500)	0pt	보조 라벨
`Label/XSmall`	12pt	16pt	Medium (500)	0pt	캡션 라벨

1-4. 코너 라운드 (Border Radius) 예시

토큰명	값 (pt)	용도
`rds004`	4	작은 버튼, 뱃지
`rds008`	8	일반 버튼, 입력 필드
`rds012`	12	카드, 모달
`rds016`	16	글래스 카드 기본
`rds020`	20	바텀시트 내부 패널
`rds024`	24	세그먼트/상위 패널
`rds-full`	999	원형/FAB/핸들

1-5. 그림자 (Shadow) 예시

토큰명	Shadow	용도
`shadow-sm`	0 2px 6px rgba(15,23,42,0.08)	작은 글래스 카드
`shadow-md`	0 6px 14px rgba(15,23,42,0.12)	일반 카드, 버튼
`shadow-lg`	0 10px 22px rgba(15,23,42,0.18)	모달, 시트
`shadow-xl`	0 16px 32px rgba(15,23,42,0.24)	오버레이, 플로팅 패널

2. 화면 구조 및 네비게이션

2-1. 화면 맵

Root
├── Tab 1: 홈 (캘린더)
│   ├── 월간 뷰 (메인)
│   ├── 선택된 날짜의 일간 일정 표시
│   ├── 날짜 셀 내부 일정 바/칩 표시 (dot 미사용)
│   ├── 데일리 프리뷰 (있는 경우)
│   ├── [+] 일정 추가 버튼 (Floating)
│   └── → 일정 추가 화면 (Sheet)
│       ├── 기본 상태: 텍스트 필드 + 마이크 버튼
│       ├── 입력 포커스 시 중간 높이로 즉시 확장 + 키보드 노출
│       ├── 음성 입력
│       └── → AI 파싱 결과 확인 (Sheet)
│           └── → 일정 저장 완료 (Dismiss)
│   └── → 일정 상세 (Sheet)
│       └── → 일정 편집 (Sheet)
│
├── Tab 2: 리캡
│   ├── 데일리 프리뷰 목록
│   ├── 주간 리캡
│   └── 월간 리캡
│   └── → 리캡 상세 (Sheet)
│
└── Tab 3: 설정
    ├── 프로필
    ├── 데일리 프리뷰 설정
    ├── 알림 설정
    ├── 캘린더 연동 (구글)
    ├── 앱 아이콘 변경
    ├── 프리미엄 구독
    └── 정보

Home Widget
├── Small: 오늘 일정 1건 요약(prefix + 시간)
├── Medium: 주차 가로 캘린더(해당 주만)
└── Large: 월간 캘린더(해당 달 전체)

2-2. 탭 바 (Tab Bar)

높이: 56pt (Safe Area 제외) 배경: gray1 구분선: 상단 1pt, gray3

탭	아이콘 (SF Symbol)	라벨	기능
홈	calendar	홈	캘린더 + 일간 일정
리캡	sparkles	리캡	데일리/주간/월간 리캡
설정	gearshape.fill	설정	설정 및 프로필

인터랙션:

선택 상태: primary1
비선택 상태: gray5
탭 시 Scale 애니메이션 (0.95 → 1.0, 100ms)

3. 화면별 상세 기획

3-1. 홈 화면 (캘린더 + 일간 일정)

구조

┌────────────────────────────────────────┐
│  [← 1월]   2026년 2월   [3월 →]           │  ← 헤더
├────────────────────────────────────────┤
│  일  월  화  수  목  금  토              │  ← 요일 헤더
│  26  27  28  29  30  31   1            │
│   2   3   4   5   6   7   8            │  ← 캘린더 그리드
│   9  10  11  12  13  14  15            │
│  16  17  18  19  20  21  22            │
│  23  24  25  26  27  28   1            │
├────────────────────────────────────────┤
│  [OO님, 오늘도 화이팅이에요!]                │  ← AI 응원 문구
│  ┌────────────────────────────────┐    │
│  │  [AI 생성 이미지]                 │    │
│  │                                │    │
│  └────────────────────────────────┘    │
├────────────────────────────────────────┤
│  2월 27일 (금)                          │  ← 선택된 날짜 헤더
│  ┌──────────────────────────────────┐  │
│  │ 10:00 팀 스탠드업                   │  │
│  │ 📍 Zoom                          │  │
│  └──────────────────────────────────┘  │  ← 일정 카드
│  ┌──────────────────────────────────┐  │
│  │ 14:00 클라이언트 미팅                 │  │
│  │ 📍 강남역 스타벅스                    │  │
│  └──────────────────────────────────┘  │
│                                        │
├────────────────────────────────────────┤
│  ━━                                    │ ← 3-2 일정 추가 시트 참고
│  일정 추가                        [X]   │  ← 헤더
├────────────────────────────────────────┤
│  ┌────────────────────────────────────┐│
│  │ 내일 오후 2시 강남역 카페 미팅            ││  ← 텍스트 필드 누르면 시트 커짐
│  │                               [🎤] ││
│  └────────────────────────────────────┘│
└────────────────────────────────────────┘

컴포넌트 상세

헤더

높이: sp048
패딩: sp020 (좌우)
배경: glass-bg + 상단 하이라이트 보더 (glass-border)
텍스트: heading2-bold, gray9
화살표 버튼: body1-regular, gray7, 탭 영역 44x44pt

요일 헤더

높이: sp032
패딩: sp008 (상하)
배경: glass-bg
텍스트: caption1-medium, gray6
일요일: error1, 토요일: primary1

캘린더 그리드

각 셀 크기: 화면 너비 / 7
셀 내부 패딩: sp004
날짜 텍스트: body2-regular, gray8
오늘: 원형 배경 primary1, 텍스트 white, body2-medium
일정 있는 날: 날짜 셀 내부에 일정 바/칩(line chip) 으로 표시
- 점(dot) 표시는 사용하지 않음
- 한 줄 높이: 14~18pt
- 좌측 2~3pt 카테고리 컬러 스트립 + 연한 배경 틴트
- 텍스트는 1줄 말줄임 처리
- 하루에 표시 가능한 최대 줄 수(예: 2~3줄) 초과 시 +N로 축약
선택된 날: 원형 테두리 primary1 2pt

데일리 프리뷰 배너 (데일리 프리뷰가 있는 경우만 표시)

패딩: sp016
배경: glass-bg-strong
코너: rds020
보더: 1pt glass-border
이미지 썸네일: 80pt x 80pt, 좌측, 코너 rds008
텍스트: body2-medium, gray9
화살표: chevron.right, 16pt, primary1
탭 시 리캡 화면의 해당 데일리 프리뷰로 이동

선택된 날짜 헤더

패딩: sp020 (좌우), sp012 (상하)
배경: gray1
텍스트: heading3-bold, gray9

일정 카드

패딩: sp016
배경: glass-bg-strong
코너: rds020
보더: 1pt glass-border
좌측 강조선: 4pt, calendar-* 컬러
시간: body2-medium, gray9
제목: body1-regular, gray8
장소: caption1-regular, gray6, 아이콘 mappin.circle.fill
탭 시 일정 상세 시트 표시

Floating 일정 추가 버튼

크기: 56pt x 56pt
위치: 우측 하단, 화면 가장자리에서 sp020 떨어짐
배경: #111111CC (Light) / #F4F4F5CC (Dark)
코너: rds-full (원형)
아이콘: plus, 24pt, white
보더: 1pt glass-border
그림자: shadow-lg
탭 시 일정 추가 시트 표시

상태별 뷰

빈 상태 (일정 없음)

┌────────────────────────────────────────┐
│  2월 27일 (금)                          │
│                                        │
│  📅 일정이 없습니다                     │
│  우측 하단 + 버튼을 눌러 일정을 추가하세요│
│                                        │
│                                 [+]    │
└────────────────────────────────────────┘

아이콘: 64pt, gray4
텍스트: body1-medium, gray5
서브텍스트: body2-regular, gray4

인터랙션

날짜 선택

캘린더 그리드에서 날짜를 탭하면 해당 날짜가 선택됨
선택된 날짜: 원형 배경 primary3, 텍스트 primary1, body2-medium
선택된 날짜의 일정이 하단에 표시됨
데일리 프리뷰가 있는 경우 배너 표시

스크롤

캘린더 그리드는 고정
데일리 프리뷰 배너 + 일정 리스트 영역만 스크롤
Floating 버튼은 항상 고정 (스크롤 시에도 표시)

3-2. 일정 추가 시트

구조

기본 상태 (Default)

┌────────────────────────────────────────┐
│  ━━                                    │  ← 드래그 핸들
│  ┌────────────────────────────────────┐│
│  │ Search...                     [🎤] ││  ← 텍스트 필드 + 마이크 버튼
│  └────────────────────────────────────┘│
└────────────────────────────────────────┘

확장 상태 (Expanded)

┌────────────────────────────────────────┐
│  ━━                                    │  ← 드래그 핸들
│  ┌────────────────────────────────────┐│
│  │ Search...                     [🎤] ││  ← 포커스된 텍스트 필드
│  └────────────────────────────────────┘│
│                                        │
│  (자연어 입력 보조 영역 / 파싱 액션)      │
│                                        │
└────────────────────────────────────────┘
           + 키보드 자동 노출

컴포넌트 상세

시트 배경

Uber 스타일의 단정한 레이아웃 위에 iOS 26 반투명 글래스 질감 적용
코너: 상단 라운드(큰 반경)
배경 블러 + 미세한 테두리 하이라이트
기본 상태와 확장 상태 사이의 detent 전환 지원

드래그 핸들

크기: 36pt x 4pt
배경: 반투명 밝은 톤
코너: rds-full
중앙 정렬, 상단 sp008

텍스트 입력 필드

기본 상태에서 항상 노출 (핵심 입력 진입점)
구성: 검색/자연어 입력 placeholder + 우측 마이크 버튼
텍스트 필드 탭 시 즉시 입력 가능 상태로 포커스

시트 상태 (Detent)

default detent: 하단 컴팩트 높이 (입력 필드 + 마이크 버튼만 보임)
medium detent: 텍스트 입력/보조영역이 보이는 중간 높이

확장 UX 규칙

텍스트 필드 탭 즉시 default -> medium 확장
확장과 동시에 키보드 자동 노출
사용자가 입력을 시작해도 별도 추가 탭 없이 타이핑 가능
드래그 다운 또는 완료 액션 시 다시 기본 상태로 축소 가능

3-3. AI 파싱 결과 확인 시트

구조

┌────────────────────────────────────────┐
│  ━━                                    │  ← 드래그 핸들
│                                        │
│  일정을 확인해주세요                    │  ← 헤더
│                                        │
│  ┌────────────────────────────────────┐│
│  │ 제목                               ││
│  │ 강남역 카페 미팅                    ││
│  ├────────────────────────────────────┤│
│  │ 날짜                               ││
│  │ 2026년 2월 28일 (금)               ││
│  ├────────────────────────────────────┤│
│  │ 시간                               ││
│  │ 오후 2:00 ~ 오후 3:00              ││
│  ├────────────────────────────────────┤│
│  │ 장소                               ││
│  │ 강남역                             ││
│  ├────────────────────────────────────┤│
│  │ 메모                               ││
│  │ (없음)                             ││
│  └────────────────────────────────────┘│
│                                        │
│  ┌────────────────────────────────────┐│
│  │            [저장하기]              ││
│  └────────────────────────────────────┘│
│  ┌────────────────────────────────────┐│
│  │            [수정하기]              ││
│  └────────────────────────────────────┘│
└────────────────────────────────────────┘

컴포넌트 상세

시트 배경

코너: rds016 (상단만)
배경: glass-bg-strong
보더: 1pt glass-border
그림자: shadow-lg
최소 높이: 화면 높이 60%

드래그 핸들

크기: 36pt x 4pt
배경: gray3
코너: rds-full
중앙 정렬, 상단 sp008

헤더

패딩: sp024 (상), sp020 (좌우)
텍스트: heading3-bold, gray9

필드 카드

패딩: sp016
배경: glass-bg
코너: rds016
보더: 1pt glass-border
각 필드 패딩: sp012
필드 구분선: 1pt, gray3
라벨: caption1-medium, gray6
값: body1-regular, gray9
빈 값: body1-regular, gray4

저장 버튼

높이: 52pt
배경: primary1
코너: rds012
텍스트: label-medium, gray1

수정 버튼

높이: 52pt
배경: transparent
테두리: 1pt, gray3
코너: rds012
텍스트: label-medium, gray7

3-4. 리캡 화면

구조 (데일리 프리뷰 탭)

┌────────────────────────────────────────┐
│  리캡                                   │  ← 헤더
│  [주간] [월간]                           │  ← 세그먼트
├────────────────────────────────────────┤
│  ┌────────────────────────────────────┐│
│  │  [AI 생성 이미지]                  ││
│  │  (사용자 아바타가 일정 수행 중)     ││
│  │                                    ││
│  │  2월 27일 (금)                     ││
│  │  • 10:00 팀 스탠드업               ││
│  │  • 14:00 클라이언트 미팅           ││
│  │  • 19:00 홍대 저녁 약속            ││
│  │                          [공유 →]  ││
│  └────────────────────────────────────┘│  ← 프리뷰 카드
│  ┌────────────────────────────────────┐│
│  │  [AI 생성 이미지]                  ││
│  │  2월 26일 (목)                     ││
│  │  • 09:00 아침 운동                 ││
│  │  • 15:00 프로젝트 리뷰             ││
│  │                          [공유 →]  ││
│  └────────────────────────────────────┘│
└────────────────────────────────────────┘

컴포넌트 상세

세그먼트 컨트롤

높이: 40pt
배경: glass-bg
코너: rds016
선택 배경: primary1
선택 텍스트: label-medium, gray1
비선택 텍스트: label-medium, gray6

프리뷰 카드

패딩: sp016
배경: glass-bg-strong
코너: rds020
보더: 1pt glass-border
그림자: shadow-md
이미지 비율: 16:9
이미지 코너: rds012

날짜 텍스트

패딩: sp012 (상)
텍스트: heading3-bold, gray9

일정 리스트

각 항목 패딩: sp008
불릿: circle.fill, 8pt, calendar-* 컬러
텍스트: body2-regular, gray8

공유 버튼

우측 하단 정렬
아이콘: square.and.arrow.up, 20pt, primary1
텍스트: caption1-medium, primary1

3-5. 설정 화면

구조

┌────────────────────────────────────────┐
│  설정                                  │  ← 헤더
├────────────────────────────────────────┤
│  ┌────────────────────────────────────┐│
│  │  [프로필 이미지]   사용자 이름      ││
│  │                   user@example.com ││
│  └────────────────────────────────────┘│  ← 프로필 카드
│                                        │
│  일반                                  │  ← 섹션 헤더
│  ┌────────────────────────────────────┐│
│  │  데일리 프리뷰 설정          [>]   ││
│  │  알림 설정                   [>]   ││
│  │  캘린더 연동                 [>]   ││
│  │  앱 아이콘 변경              [>]   ││
│  └────────────────────────────────────┘│  ← 설정 리스트
│                                        │
│  프리미엄                              │  ← 섹션 헤더
│  ┌────────────────────────────────────┐│
│  │  프리미엄 플랜 구독          [>]   ││
│  └────────────────────────────────────┘│
│                                        │
│  정보                                  │  ← 섹션 헤더
│  ┌────────────────────────────────────┐│
│  │  버전 정보                   1.0.0 ││
│  │  이용약관                    [>]   ││
│  │  개인정보 처리방침            [>]   ││
│  └────────────────────────────────────┘│
└────────────────────────────────────────┘

컴포넌트 상세

프로필 카드

높이: 80pt
패딩: sp016
배경: glass-bg-strong
코너: rds020
보더: 1pt glass-border
이미지: 56pt 원형, 좌측 정렬
이름: body1-medium, gray9
이메일: caption1-regular, gray6

섹션 헤더

패딩: sp024 (상), sp008 (하), sp020 (좌우)
텍스트: caption1-medium, gray6, 대문자

설정 리스트 아이템

높이: 52pt
패딩: sp016 (좌우)
배경: glass-bg
구분선: 하단 1pt, gray3 (마지막 항목 제외)
라벨: body1-regular, gray9
우측 화살표: chevron.right, 16pt, gray4

3-6. 위젯 화면 (Small / Medium / Large)

Small 위젯 (오늘 요약)

오늘 날짜/요일 노출 (오늘, 3월 4일 (수) 형태)
오늘 일정 중 우선순위 1건 노출
- 카테고리 컬러 prefix는 점(dot) 대신 짧은 bar 마커를 사용
- 일정 제목
- 시간(오른쪽 정렬)
추가 일정이 있으면 +N 보조 텍스트로 축약
빈 상태에서는 날짜 정보는 유지하고, 오늘 일정 없음 + 앱 진입 안내 문구를 노출

Medium 위젯 (주간 가로 캘린더)

해당 주차만 가로형 캘린더로 표시
상단에 기준 날짜 텍스트 표시
요일 행 + 7일 셀 구성
오늘 날짜는 강조(원형 테두리)
일정 표시는 점(dot) 대신 셀 내부 일정 바/칩으로 표시
- 짧은 이벤트는 단일 칩
- 다일 일정은 좌/우로 이어진 바 형태 허용
- 셀당 기본 노출은 1줄로 제한하고 초과 시 +N 축약
빈 상태에서는 주간 skeleton은 유지하고, 중앙에 이번 주 일정 없음 메시지를 배치

Large 위젯 (월간 캘린더)

해당 달 전체(5~6주) 표시
상단에 기준 날짜 텍스트 표시
월간 그리드 셀 내부에 일정 바/칩을 직접 표시
일정 표시는 레퍼런스 디자인과 동일한 방향으로 설계
- 점(dot) 표시는 사용하지 않음
- 카테고리 컬러 스트립 + 연한 배경
- 텍스트 1줄 말줄임
- 셀당 최대 표시 줄 초과 시 +N으로 축약
기본 노출은 셀당 2줄까지 허용하고, 3번째 일정부터 +N 처리
빈 상태에서는 월간 구조를 유지한 채 이번 달 일정 없음 메시지를 배치

위젯 공통 스타일

라운드 카드형 컨테이너(큰 코너)
밝은 배경 + 높은 가독성 텍스트 대비
iOS 홈 화면 배경 위에서도 텍스트 우선 가독성 확보
탭 시 앱 진입 및 해당 날짜(또는 일정)로 딥링크 이동
비이벤트 영역 탭은 날짜 컨텍스트, 이벤트 바/칩 탭은 일정 컨텍스트 딥링크로 연결

4. 컴포넌트 가이드

4-1. 버튼

Primary Button

높이: 52pt
패딩: sp016 (좌우)
배경: primary1
코너: rds012
텍스트: label-medium, white
Pressed: 배경 primary2, Scale 0.98

Secondary Button

높이: 52pt
패딩: sp016 (좌우)
배경: transparent
테두리: 1pt, gray3
코너: rds012
텍스트: label-medium, gray7
Pressed: 배경 gray2

Icon Button

크기: 44x44pt
배경: transparent
아이콘: 24pt, gray7
Pressed: 배경 gray2, 코너 rds-full

4-2. 입력 필드

Text Field

높이: 52pt
패딩: sp016 (좌우)
배경: gray2
코너: rds008
Placeholder: body1-regular, gray4
입력 텍스트: body1-regular, gray9
Focus: 테두리 2pt, primary1

Text Area

최소 높이: 120pt
패딩: sp016
배경: gray2
코너: rds012
스타일은 Text Field와 동일

4-3. 카드

기본 카드

패딩: sp016
배경: gray2
코너: rds012
그림자: shadow-sm

일정 카드

기본 카드 + 좌측 강조선 4pt
강조선 컬러: calendar-*

4-4. 알림/토스트

Success Toast

높이: 60pt
패딩: sp016
배경: success2
코너: rds012
아이콘: checkmark.circle.fill, 24pt, success1
텍스트: body2-medium, gray9

Error Toast

Success Toast와 동일, 컬러만 error-* 사용

5. 인터랙션 가이드

5-1. 화면 전환

Push (Navigation Stack)

애니메이션: 우측에서 좌측으로 슬라이드
Duration: 300ms
Easing: easeInOut

Sheet (Modal)

애니메이션: 하단에서 상단으로 슬라이드
Duration: 350ms
Easing: easeOut
배경 딤: black, 40% opacity
기본 detent(컴팩트) / 중간 detent(입력) 2단 구조
텍스트 필드 포커스 시 기본 detent에서 중간 detent로 자동 확장
확장과 동시에 키보드 자동 노출

Dismiss

애니메이션: 진입의 역방향
Duration: 250ms
Easing: easeIn

5-2. 제스처

스와이프

캘린더 월 변경: 좌우 스와이프
일정 삭제: 좌측 스와이프 → 삭제 버튼 노출
시트 닫기/축소: 하단 방향 드래그

입력 포커스

바텀시트 기본 상태에서 텍스트 필드 탭 시 즉시 입력 가능 상태 진입
입력 완료/취소 후에는 기본 detent로 복귀 가능

롱 프레스

일정 카드 롱 프레스 → 컨텍스트 메뉴 (수정/삭제/공유)
Duration: 500ms
Haptic: Medium Impact

5-3. 로딩 상태

Spinner

크기: 32pt
컬러: primary1
중앙 정렬

Skeleton

배경: gray3
애니메이션: Shimmer (좌→우)
Duration: 1500ms

5-4. 애니메이션

Scale (버튼 탭)

From: 1.0
To: 0.95
Duration: 100ms
Easing: easeOut

Fade

From: 0.0
To: 1.0
Duration: 200ms
Easing: linear

본 화면 기획서는 디자인 에이전트가 슥캘린더 UI를 구현하기 위한 명세서입니다. 모든 간격, 컬러, 폰트는 정의된 토큰을 사용해야 합니다.

FilesExpand file tree

Design-Spec.md

Latest commit

History

Design-Spec.md

File metadata and controls

슥캘린더 화면 기획서 (디자인 에이전트용)

목차

1. 디자인 시스템

1-0. 디자인 방향 (Uber + iOS 26 Liquid Glass)

1-1. 간격 시스템 (Spacing) 예시

1-2. 컬러 토큰 (Color Tokens)

그레이스케일 예시

글래스 토큰 예시

브랜드 컬러 예시

시맨틱 컬러 예시

일정 카테고리 컬러 예시

캘린더 일정 바/칩 토큰

1-3. 타이포그래피 (Typography)

폰트 패밀리

폰트 토큰 예시

1-4. 코너 라운드 (Border Radius) 예시

1-5. 그림자 (Shadow) 예시

2. 화면 구조 및 네비게이션

2-1. 화면 맵

2-2. 탭 바 (Tab Bar)

3. 화면별 상세 기획

3-1. 홈 화면 (캘린더 + 일간 일정)

구조

컴포넌트 상세

상태별 뷰

인터랙션

3-2. 일정 추가 시트

구조

컴포넌트 상세

3-3. AI 파싱 결과 확인 시트

구조

컴포넌트 상세

3-4. 리캡 화면

구조 (데일리 프리뷰 탭)

컴포넌트 상세

3-5. 설정 화면

구조

컴포넌트 상세

3-6. 위젯 화면 (Small / Medium / Large)

Small 위젯 (오늘 요약)

Medium 위젯 (주간 가로 캘린더)

Large 위젯 (월간 캘린더)

위젯 공통 스타일

4. 컴포넌트 가이드

4-1. 버튼

Primary Button

Secondary Button

Icon Button

4-2. 입력 필드

Text Field

Text Area

4-3. 카드

기본 카드

일정 카드

4-4. 알림/토스트

Success Toast

Error Toast

5. 인터랙션 가이드

5-1. 화면 전환

Push (Navigation Stack)

Sheet (Modal)

Dismiss

5-2. 제스처

스와이프

입력 포커스

롱 프레스

5-3. 로딩 상태

Spinner

Skeleton

5-4. 애니메이션

Scale (버튼 탭)

Fade