Design System: 마음이 쉬는 시간
태권도 명상몸짓 콘텐츠 플랫폼 · maeumtime.com 본 문서는 프론트엔드 개발 전 참조하는 디자인 표준 문서입니다. 신규 컴포넌트 개발 시 반드시 이 문서의 토큰과 규칙을 우선 적용합니다.
1. Brand Concept
컨셉: "멈춤 속에서 나를 만나다" 톤앤매너: 차분함, 정갈함, 여백감, 신뢰감 핵심 경험: 명상, 호흡, 태권도 명상몸짓의 결합 분위기 레퍼런스: 새벽 산 풍경, 유리 질감(Glassmorphism), 부드러운 그라데이션
2. Color Palette
2.1 Primary Colors
| 토큰명 | HEX | 용도 |
|---|---|---|
| Primary | #6B60E2 | 버튼, 활성 아이콘, 그라데이션 포인트 |
| Primary Light | #9B93EE | 그라데이션 보조, hover 밝기 |
| Primary Gradient | linear-gradient(135deg, #6B60E2, #9B93EE) | 원형 프로그레스, CTA 버튼 배경 |
2.2 Background
| 토큰명 | HEX / 값 | 용도 |
|---|---|---|
| BG Light | #F8F9FE | 전체 앱/웹 기본 배경 |
| BG Hero Gradient | linear-gradient(180deg, #FDF6F0 0%, #F3EDF9 60%, #E9E4F5 100%) | 히어로 영역(새벽 산 이미지 배경톤) |
| Card Background | rgba(255,255,255,0.75) | 카드 유리 질감 배경 |
2.3 Text
| 토큰명 | HEX | 용도 |
|---|---|---|
| Text Primary | #1A1D26 | 헤드라인, 주요 텍스트 |
| Text Secondary | #6C707D | 설명, 서브 텍스트 |
| Text on Primary | #FFFFFF | 버튼/포인트 배경 위 텍스트 |
2.4 Semantic / State
| 토큰명 | HEX | 용도 |
|---|---|---|
| Success | #4CAF93 | 완료, 확인 상태 |
| Beginner Tag | #8FB8E8 (배경 rgba 10%) | 초급 난이도 태그 |
| Intermediate Tag | #E8A85C (배경 rgba 10%) | 중급 난이도 태그 |
| Border/Divider | rgba(26,29,38,0.08) | 카드 경계선, 구분선 |
색상 사용 원칙: 화면당 포인트 컬러(Primary)는 CTA와 활성 상태에만 제한적으로 사용하고, 나머지는 무채색과 배경 그라데이션으로 여백감을 유지합니다.
3. Typography
권장 폰트: Pretendard (한글) / Inter (영문·숫자 보조)
| 스타일 | Weight | Size | 용도 |
|---|---|---|---|
| Display | Bold | 28px | "김석련(도경) 박사님" 등 인사말 타이틀 |
| Heading 1 | Bold | 24px | 페이지 대제목 |
| Heading 2 | SemiBold | 18px | 섹션 제목 (오늘의 명상, 추천 콘텐츠 등) |
| Body | Regular | 14px | 설명, 본문 텍스트 |
| Body Small | Regular | 13px | 카드 내 보조 설명 |
| Caption | Regular | 12px | 태그, 시간, 난이도 표시 |
줄간격(line-height)은 본문 1.5, 헤딩 1.3을 기준으로 합니다.
4. Spacing & Radius Scale
| 토큰명 | 값 |
|---|---|
| space-xs | 4px |
| space-sm | 8px |
| space-md | 16px |
| space-lg | 24px |
| space-xl | 32px |
| space-2xl | 48px |
| Radius 토큰 | 값 | 용도 |
|---|---|---|
| radius-sm | 12px | 태그, 작은 버튼 |
| radius-md | 20px | 일반 카드 |
| radius-lg | 28px | 히어로 카드, 큰 배너 |
| radius-full | 999px | 원형 프로그레스, 프로필 이미지, 필/토글 버튼 |
5. Elevation & Glassmorphism
카드 기본 스타일:
.card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
box-shadow: 0 8px 24px rgba(107, 96, 226, 0.08);
}Hover 상태: box-shadow를 0 12px 32px rgba(107,96,226,0.14)로 강조하고 translateY(-2px) 적용.
6. Layout
6.1 Desktop (사이드바형)
좌측 고정 사이드바(약 220px), 아이콘 + 텍스트 조합의 트리형 메뉴 구성. 메뉴 순서: 홈 · 명상 · 호흡 · 몸짓(태권도 명상) · 선시·명언 · 기록 · 강의·도서 · 커뮤니티 · 마이페이지 사이드바 하단에 프로필 카드(사진, 이름, 역할, "프로필 보기" 버튼) 고정 배치.
6.2 Mobile (하단 탭형)
하단 고정 내비게이션 5개 항목: 홈 · 명상 · 몸짓 · 기록 · 마이 상단 헤더는 좌측 메뉴 아이콘, 중앙/좌측 로고, 우측 알림 아이콘으로 구성. 카드형 퀵메뉴(1분 호흡하기, 오늘의 한 줄, 태권도 명상몸짓, 마음 기록, 강의·도서, 더보기)는 2열 그리드로 배치.
6.3 Breakpoints
| 구간 | 값 |
|---|---|
| Mobile | ~ 767px |
| Tablet | 768px ~ 1023px |
| Desktop | 1024px 이상 |
7. Components
7.1 Buttons
Primary Button: 배경 Primary 그라데이션, 텍스트 흰색, radius-full 또는 radius-md, 패딩 12px 24px. Secondary Button: 배경 흰색/투명, 테두리 1px solid rgba(107,96,226,0.3), 텍스트 Primary 컬러. 버튼 라벨은 사용자 행동 기준으로 작성 ("호흡 시작하기", "명상 시작하기") — 시스템 용어 사용 금지.
7.2 Cards
정보 카드(오늘의 한 줄, 태권도 명상몸짓, 마음 기록, 강의·도서): 아이콘/이모지 + 제목 + 1줄 설명 + 화살표(>) 인터랙션. 추천 콘텐츠 카드: 썸네일 이미지(4:3) + 제목 + 소요 시간 태그. 난이도/시간 태그는 Caption 스타일, radius-sm, 옅은 배경색 사용.
7.3 원형 프로그레스 (호흡 인디케이터)
구성: SVG circle 2개(배경 트랙 + 진행 표시), 중앙에 "들이마시기 / 4초" 텍스트. 진행 애니메이션은 stroke-dasharray와 stroke-dashoffset을 transition으로 제어. 색상은 Primary Gradient 적용, 트랙 색상은 rgba(107,96,226,0.12).
.progress-ring__track {
stroke: rgba(107, 96, 226, 0.12);
}
.progress-ring__indicator {
stroke: url(#primaryGradient);
stroke-linecap: round;
transition: stroke-dashoffset 1s linear;
}7.4 Bottom Navigation (Mobile)
아이콘 + 라벨 조합, 활성 탭은 Primary 컬러 아이콘 + 굵은 라벨, 비활성 탭은 Text Secondary 컬러. 활성 인디케이터는 아이콘 하단 또는 상단에 작은 dot/bar로 표시 가능.
8. Iconography
스타일: 라인 아이콘 기준 1.5px stroke, 모서리 둥글게(round join/cap). 태권도 관련 아이콘(몸짓, 품새)은 실루엣 형태의 커스텀 아이콘으로 별도 제작 권장. 아이콘 크기 기준: 사이드바 20px, 하단 탭 24px, 카드 내 아이콘 28~32px.
9. Interaction & Motion
Hover: 카드 밝기 소폭 상승 + box-shadow 강조, transition 0.2s ease. Progress: 원형 호흡 인디케이터는 1s linear 애니메이션. Page/Section 전환: fade + translateY(8px) 정도의 절제된 모션만 사용, 과도한 애니메이션 지양. 접근성: 모든 인터랙티브 요소에 focus-visible 스타일 적용, prefers-reduced-motion 대응 필수.
10. Accessibility Checklist
- 텍스트 대비 WCAG AA 기준(4.5:1) 충족 여부 확인
- 모든 버튼/링크 키보드 포커스 표시 확인
- 아이콘 전용 버튼에 aria-label 부여
- 모션 축소 설정 사용자 대응(prefers-reduced-motion)
- 모바일 터치 영역 최소 44x44px 확보
11. 파일/개발 규칙 (프로젝트 공통 지침 연동)
기존 파일 구조 확인 후 작업, 신규 파일 임의 생성 금지. 소스는 메인모듈 / 공통모듈 / PC모듈 / 모바일모듈로 분리 개발. 파일 크기 15~25KB 제한, 동시 작업은 2~3개 파일 이내로 관리. 변경 전 백업 필수, 한 번에 하나씩 변경 후 즉시 테스트.
댓글 0