CLAUDE.mdtypescript

jolajoamemo CLAUDE.md

이 문서는 프로젝트의 일관된 디자인을 유지하기 위한 상세 규칙을 정의합니다.

View Source

JolaJoaMemo 디자인 가이드

이 문서는 프로젝트의 일관된 디자인을 유지하기 위한 상세 규칙을 정의합니다.

1. 색상 시스템 (Color System)

1.1 라이트 모드 (Light Mode)

| 변수명 | 색상값 | 용도 | |--------|--------|------| | --bg | #ffffff | 기본 배경 | | --bg-secondary | #f9f9fb | 보조 배경, 카드 배경 | | --bg-hover | #f5f5f7 | 호버 상태 | | --bg-active | #f0f0f3 | 활성 상태 | | --bg-selected | #f3f0ff | 선택된 항목 | | --text | #1a1a1a | 기본 텍스트 | | --text-secondary | #6b6b6b | 보조 텍스트 | | --text-muted | #9ca3af | 흐린 텍스트, 플레이스홀더 | | --text-tertiary | #b0b0b0 | 3차 텍스트 | | --border | #e5e5e5 | 기본 테두리 | | --border-light | #f0f0f0 | 연한 테두리 |

1.2 다크 모드 (Dark Mode)

| 변수명 | 색상값 | 용도 | |--------|--------|------| | --bg | #0a0a0c | 기본 배경 | | --bg-secondary | #18181b | 보조 배경 | | --bg-hover | #222225 | 호버 상태 | | --bg-active | #2c2c30 | 활성 상태 | | --bg-selected | #2a2820 | 선택된 항목 | | --text | #ffffff | 기본 텍스트 | | --text-secondary | #ffffff | 보조 텍스트 | | --text-muted | #e0e0e0 | 흐린 텍스트 | | --text-tertiary | #d0d0d0 | 3차 텍스트 | | --border | #606060 | 기본 테두리 | | --border-light | #505050 | 연한 테두리 |

1.3 액센트 색상 (Accent Colors)

--accent: #FEE500        /* 카카오 노란색 - 주요 강조 색상 */
--accent-light: #FFF9CC  /* 라이트모드: 연한 노란색 */
--accent-light: #3d3520  /* 다크모드: 어두운 노란색 */
--accent-text: #3C1E1E   /* 라이트모드: 진한 갈색 */
--accent-text: #000000   /* 다크모드: 검정색 */

1.4 시맨틱 색상 (Semantic Colors)

| 변수명 | 라이트 | 다크 | 용도 | |--------|--------|------|------| | --error | #ef4444 | #ff6b6b | 에러, 삭제 | | --success | #22c55e | #51cf66 | 성공, 완료 | | --warning | #f59e0b | #fcc419 | 경고, 주의 | | --star | #f59e0b | #f59e0b | 우선순위 별 |

2. 버튼 규칙 (Button Rules)

2.1 ⚠️ 필수 규칙: 노란색 버튼

노란색 배경(--accent, #FEE500)을 사용하는 버튼은 반드시 검정색 또는 어두운 텍스트를 사용해야 합니다.

/* ✅ 올바른 예시 */
.btn-accent {
  background: var(--accent);      /* #FEE500 */
  color: var(--accent-text);      /* 라이트: #3C1E1E, 다크: #000000 */
  border: none;
}

/* ❌ 잘못된 예시 - 절대 사용 금지 */
.btn-accent {
  background: var(--accent);
  color: white;                   /* 흰색 텍스트 금지! */
}

2.2 버튼 종류

Primary 버튼 (기본)

.btn-primary {
  background: var(--text);        /* 검정/흰색 배경 */
  color: var(--bg);               /* 흰색/검정 텍스트 */
  border: none;
}
.btn-primary:hover {
  opacity: 0.85;
}

Secondary 버튼 (보조)

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-hover);
}

Danger 버튼 (위험/삭제)

.btn-danger {
  background: var(--error);       /* 빨간색 */
  color: #ffffff;
  border: none;
}

Ghost 버튼 (투명)

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
}

2.3 버튼 크기

| 크기 | 패딩 | 폰트 크기 | 용도 | |------|------|----------|------| | Small | 6px 12px | 12px | 인라인 액션 | | Default | 8px 16px | 13px | 일반 버튼 | | Large | 12px 20px | 14px | 주요 액션 |

2.4 아이콘 버튼

.icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: transparent;
  border: none;
}

2.5 Floating Action Button (FAB)

.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

3. 타이포그래피 (Typography)

3.1 폰트 패밀리

--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', monospace;

3.2 폰트 크기 체계

| 용도 | 크기 | 굵기 | 예시 | |------|------|------|------| | 제목 (H1) | 24px | 600 | 페이지 타이틀 | | 제목 (H2) | 18px | 600 | 섹션 타이틀 | | 제목 (H3) | 16px | 600 | 카드 타이틀 | | 본문 | 14px | 400 | 일반 텍스트 | | 버튼 | 13px | 500 | 버튼 레이블 | | 라벨 | 12px | 500 | 입력 라벨, 메타 정보 | | 작은 텍스트 | 11px | 400 | 태그, 배지 | | 아주 작은 | 10px | 400 | 타임스탬프 |

3.3 줄 높이

  • 기본: 1.5
  • 제목: 1.3
  • 버튼: 1

4. 간격 시스템 (Spacing System)

4.1 기본 간격

| 단위 | 값 | 용도 | |------|-----|------| | xs | 4px | 아이콘-텍스트 간격 | | sm | 8px | 요소 내부 간격 | | md | 12px | 요소 간 간격 | | lg | 16px | 섹션 내부 패딩 | | xl | 20px | 카드 패딩 | | 2xl | 24px | 섹션 간 간격 | | 3xl | 32px | 페이지 패딩 |

4.2 컴포넌트별 패딩

/* 버튼 */
button { padding: 8px 16px; }

/* 입력 필드 */
input, textarea { padding: 10px 14px; }

/* 리스트 아이템 */
.list-item { padding: 12px 16px; }

/* 사이드바 아이템 */
.sidebar-item { padding: 10px 14px; }

/* 카드 */
.card { padding: 20px; }

5. 테두리 및 라운딩 (Border & Radius)

5.1 테두리 반경

--radius: 6px;      /* 기본 라운딩 */
--radius-lg: 10px;  /* 큰 라운딩 (카드, 모달) */

| 컴포넌트 | 반경 | |----------|------| | 버튼 | 6px | | 입력 필드 | 6px | | 카드 | 10px | | 태그 | 4px | | 배지 | 10px (pill) | | 아바타 | 50% (원형) | | 스크롤바 | 4px |

5.2 테두리 스타일

/* 기본 테두리 */
border: 1px solid var(--border);

/* 연한 테두리 */
border: 1px solid var(--border-light);

/* 포커스 테두리 */
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-light);

6. 상태 표시 (States)

6.1 인터랙티브 상태

/* 기본 */
background: var(--bg-secondary);

/* 호버 */
background: var(--bg-hover);

/* 활성 (클릭 중) */
background: var(--bg-active);

/* 선택됨 */
background: var(--bg-selected);

/* 비활성 */
opacity: 0.5;
cursor: default;

6.2 포커스 표시

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

7. 컴포넌트 스타일 (Component Styles)

7.1 카드 (Card)

.card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);  /* 10px */
  padding: 20px;
  margin-bottom: 12px;
}

.card-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

7.2 리스트 아이템 (List Item)

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s ease;
}

.list-item:hover {
  background: var(--bg-hover);
}

.list-item.selected {
  background: var(--bg-selected);
}

7.3 사이드바 아이템 (Sidebar Item)

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 2px;
  font-size: 14px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
}

.sidebar-item:hover {
  background: var(--bg-hover);
}

.sidebar-item.active {
  background: var(--bg-active);
  font-weight: 500;
}

7.4 태그 (Tag)

.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 4px;
}

7.5 배지 (Badge)

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;  /* pill 형태 */
}

7.6 상태 표시 (Status)

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-success { color: var(--success); }
.status-error { color: var(--error); }
.status-warning { color: var(--warning); }

7.7 입력 필드 (Input)

input, textarea, select {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: all 0.15s ease;
}

input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

7.8 구분선 (Divider)

.divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

7.9 빈 상태 (Empty State)

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

8. 애니메이션 (Animations)

8.1 트랜지션

/* 기본 트랜지션 */
transition: all 0.15s ease;

/* 빠른 트랜지션 */
transition: all 0.1s ease;

/* 느린 트랜지션 */
transition: all 0.2s ease;

8.2 키프레임

/* 로딩 스피너 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 페이드 인 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

8.3 로딩 스피너

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

9. 스크롤바 (Scrollbar)

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

10. 텍스트 선택 (Text Selection)

::selection {
  background: var(--accent);
  color: white;
}

/* 선택 가능 */
p, span, div, textarea, input {
  user-select: text;
}

/* 선택 불가 */
button, a, nav {
  user-select: none;
}

11. 반응형 디자인 (Responsive Design)

11.1 브레이크포인트

| 이름 | 크기 | 용도 | |------|------|------| | sm | 640px | 모바일 | | md | 768px | 태블릿 | | lg | 1024px | 작은 데스크톱 | | xl | 1280px | 데스크톱 |

11.2 위젯 크기

| 위젯 | 너비 | 높이 | |------|------|------| | 포스트잇 | 300px | 300px | | 캘린더 | 320px | 480px | | 타임블록 | 400px | 600px | | 오목 | 480px | 560px | | 정보창 | 800px | 600px |

12. 접근성 (Accessibility)

12.1 색상 대비

  • 텍스트와 배경 간 명암비: 최소 4.5:1
  • 노란색 배경에는 반드시 검정색/어두운 텍스트 사용

12.2 포커스 표시

  • 모든 인터랙티브 요소에 포커스 표시 필수
  • outline: 2px solid var(--accent)

12.3 터치 타겟

  • 최소 크기: 44px × 44px (모바일)
  • 버튼 간 간격: 최소 8px

13. 코드 스타일 (Code Style)

.code-block, code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 12px 16px;
}

14. 그림자 (Shadows)

/* FAB 그림자 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* FAB 호버 그림자 */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

/* 일반적으로 그림자 사용을 최소화 */

15. 체크리스트

새로운 컴포넌트 작성 시 확인사항:

  • [ ] CSS 변수 사용 (하드코딩된 색상값 금지)
  • [ ] 노란색 버튼에 검정색 텍스트 사용
  • [ ] 라이트/다크 모드 모두 지원
  • [ ] 호버/포커스/활성 상태 정의
  • [ ] 적절한 트랜지션 적용
  • [ ] 일관된 간격 및 패딩 사용
  • [ ] 접근성 요구사항 충족