원픽플래너 스타일 가이드

1. Overview

원픽플래너는 직장인의 일정, 할 일, 캘린더를 한곳에서 관리하는 개인 일정관리 SaaS입니다.

스타일의 핵심 방향은 다음과 같습니다.

• 차분하고 신뢰감 있는 인상
• 복잡한 일정 정보를 빠르게 파악할 수 있는 구조
• 업무 중 오래 사용해도 피로하지 않은 화면
• 딥네이비를 기반으로 한 안정감
• 민트를 활용한 긍정적이고 생산적인 강조
• 라이트모드와 다크모드에서 동일한 브랜드 경험 제공

디자인 원칙

1. 정보 우선
   장식보다 일정, 우선순위, 완료 상태가 먼저 보여야 합니다.

2. 낮은 시각적 피로도
   순수한 검정과 흰색의 과도한 대비를 피하고, 중간 톤의 배경과 텍스트를 사용합니다.

3. 명확한 상태 표현
   예정, 진행 중, 완료, 지연 상태를 색상·아이콘·텍스트로 함께 표현합니다.

4. 일관된 인터랙션
   버튼, 카드, 입력 필드, 캘린더 셀의 hover/focus/active 상태를 동일한 규칙으로 구성합니다.

5. 점진적 강조
   모든 요소를 강조하지 않고, 현재 선택 상태와 주요 행동에만 민트 컬러를 사용합니다.

---

2. Color Palette

브랜드 컬러

용도	색상	HEX
Primary Deep Navy	브랜드 기본색	#1B2A4A
Primary Navy Dark	hover, active, 강조	#12203A
Primary Navy Light	연한 배경, 선택 영역	#E9EEF7
Mint	주요 CTA, 완료 상태	#3ED6B5
Mint Dark	mint hover, 진한 텍스트	#20B995
Mint Soft	완료 배경, 알림 배경	#E5FAF5

라이트모드 색상

토큰	HEX	용도
background	#F7F9FC	앱 전체 배경
surface	#FFFFFF	카드, 패널
surface-muted	#F0F3F8	보조 영역
border	#E3E8F0	기본 테두리
border-strong	#CBD5E1	강조 테두리
text-primary	#172033	주요 텍스트
text-secondary	#596579	보조 텍스트
text-muted	#8B96A8	비활성 텍스트
text-inverse	#FFFFFF	어두운 배경 위 텍스트

다크모드 색상

다크모드는 순수한 검정 대신 네이비 계열을 사용합니다.

토큰	HEX	용도
background	#0F1728	앱 전체 배경
surface	#172238	카드, 패널
surface-muted	#202D45	보조 영역
border	#2B3A54	기본 테두리
border-strong	#40516D	강조 테두리
text-primary	#F3F6FA	주요 텍스트
text-secondary	#AAB6C8	보조 텍스트
text-muted	#728096	비활성 텍스트
text-inverse	#172033	밝은 배경 위 텍스트

상태 색상

상태	기본색	배경색	사용 예
Success	#20B995	#E5FAF5	완료, 저장 성공
Warning	#D99024	#FFF5DF	마감 임박
Error	#D95C5C	#FFF0F0	오류, 삭제
Info	#4D82D9	#EDF4FF	안내, 정보
Neutral	#718096	#F0F3F8	예정, 비활성

상태 색상은 색상만으로 구분하지 않습니다. 아이콘, 라벨, 체크 상태를 함께 사용해야 접근성이 좋아집니다.

Tailwind 색상 설정 예시

// tailwind.config.js
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          navy: '#1B2A4A',
          'navy-dark': '#12203A',
          'navy-light': '#E9EEF7',
          mint: '#3ED6B5',
          'mint-dark': '#20B995',
          'mint-soft': '#E5FAF5',
        },
        app: {
          background: 'rgb(var(--color-background) / <alpha-value>)',
          surface: 'rgb(var(--color-surface) / <alpha-value>)',
          muted: 'rgb(var(--color-surface-muted) / <alpha-value>)',
          border: 'rgb(var(--color-border) / <alpha-value>)',
        },
      },
    },
  },
};

:root {
  --color-background: 247 249 252;
  --color-surface: 255 255 255;
  --color-surface-muted: 240 243 248;
  --color-border: 227 232 240;
}

.dark {
  --color-background: 15 23 40;
  --color-surface: 23 34 56;
  --color-surface-muted: 32 45 69;
  --color-border: 43 58 84;
}

---

3. Typography

권장 폰트

한글 가독성이 뛰어난 Pretendard를 기본 폰트로 사용합니다.

font-family:
  Pretendard,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;

타입 스케일

이름	크기	행간	굵기	사용 예
Display	32px	1.25	700	대시보드 주요 인사말
Heading 1	24px	1.35	700	페이지 제목
Heading 2	20px	1.4	700	섹션 제목
Heading 3	16px	1.5	600	카드 제목
Body Large	16px	1.6	400	주요 본문
Body	14px	1.55	400	기본 본문
Body Small	13px	1.5	400	보조 설명
Caption	12px	1.4	500	날짜, 메타 정보
Button	14px	1	600	버튼 레이블

사용 원칙

• 대시보드의 핵심 숫자와 오늘의 날짜는 Heading 1 또는 Display를 사용합니다.
• 캘린더의 날짜 숫자는 본문보다 약간 높은 대비를 사용합니다.
• 카드 메타 정보는 Caption으로 낮은 시각적 우선순위를 부여합니다.
• 한 화면에서 굵은 글씨를 과도하게 사용하지 않습니다.
• 긴 문장에는 최소 1.5 이상의 행간을 적용합니다.

<h1 class="text-2xl font-bold leading-[1.35] text-slate-900 dark:text-slate-50">
  오늘도 좋은 하루예요
</h1>

<p class="mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400">
  오늘 예정된 일정을 확인해 보세요.
</p>

---

4. Spacing System

기본 단위는 4px이며, Tailwind spacing scale을 사용합니다.

토큰	값	권장 용도
space-1	4px	아이콘과 텍스트 사이
space-2	8px	작은 요소 간격
space-3	12px	카드 내부 요소
space-4	16px	기본 패딩
space-5	20px	입력 필드, 작은 카드
space-6	24px	카드 패딩, 섹션 간격
space-8	32px	큰 섹션 간격
space-10	40px	페이지 상단 여백
space-12	48px	주요 레이아웃 간격
space-16	64px	대형 화면 영역

레이아웃 기준

• 모바일 페이지 좌우 패딩: 16px
• 데스크톱 페이지 좌우 패딩: 24px ~ 32px
• 카드 내부 패딩: 20px ~ 24px
• 섹션 간격: 24px ~ 32px
• 아이콘과 레이블 간격: 8px
• 버튼 내부 좌우 패딩: 16px ~ 20px

대시보드는 다음 구조를 권장합니다.

Sidebar 240px
Main content max-width 1440px
Page padding 24px
Section gap 24px
Card gap 16px

---

5. Component Styles

5.1 버튼

Primary Button

주요 작업인 일정 추가, 저장, 완료에 사용합니다.

• 배경: brand-mint
• 텍스트: brand-navy-dark
• hover: 조금 더 어두운 mint
• focus: mint 외곽 링
• 높이: 기본 40px, 작은 버튼 32px

<button
  class="inline-flex h-10 items-center gap-2 rounded-lg
         bg-brand-mint px-4 text-sm font-semibold text-brand-navy-dark
         transition-colors hover:bg-brand-mint-dark
         focus:outline-none focus:ring-4 focus:ring-brand-mint/25
         disabled:cursor-not-allowed disabled:opacity-50"
>
  <span>일정 추가</span>
</button>

Secondary Button

보조 작업, 필터, 취소에 사용합니다.

<button
  class="inline-flex h-10 items-center rounded-lg border border-slate-200
         bg-white px-4 text-sm font-medium text-slate-700
         transition-colors hover:bg-slate-50
         dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200
         dark:hover:bg-slate-700"
>
  필터
</button>

Destructive Button

삭제와 같이 되돌리기 어려운 작업에 사용합니다.

• 기본 배경은 사용하지 않고 outline 또는 muted red를 권장합니다.
• 삭제 확인 모달에서는 명확한 위험 표현을 사용합니다.

5.2 할 일 카드

할 일 카드는 업무 제목, 시간, 우선순위, 완료 상태를 빠르게 파악할 수 있어야 합니다.

구성 요소:

• 완료 체크박스
• 할 일 제목
• 마감 시간 또는 날짜
• 태그
• 우선순위 표시
• 더보기 메뉴

권장 스타일:

<article
  class="group rounded-xl border border-slate-200 bg-white p-4
         shadow-sm transition-all
         hover:-translate-y-0.5 hover:border-brand-mint/50 hover:shadow-md
         dark:border-slate-700 dark:bg-slate-800"
>
  <div class="flex items-start gap-3">
    <button
      aria-label="할 일 완료 처리"
      class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center
             rounded-full border-2 border-slate-300
             transition-colors hover:border-brand-mint
             dark:border-slate-600"
    ></button>

    <div class="min-w-0 flex-1">
      <h3 class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
        주간 업무 보고서 작성
      </h3>

      <div class="mt-2 flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
        <span>오늘 16:00</span>
        <span class="h-1 w-1 rounded-full bg-slate-300"></span>
        <span class="text-amber-600 dark:text-amber-400">높은 우선순위</span>
      </div>
    </div>

    <button
      aria-label="할 일 메뉴"
      class="rounded-md p-1.5 text-slate-400 opacity-0 transition-opacity
             hover:bg-slate-100 hover:text-slate-600
             group-hover:opacity-100 dark:hover:bg-slate-700"
    >
      ⋯
    </button>
  </div>
</article>

완료 상태에서는 다음을 적용합니다.

• 제목에 line-through
• 텍스트 대비 낮춤
• 체크 아이콘을 brand-mint로 표시
• 카드 전체 opacity는 과도하게 낮추지 않음

5.3 캘린더

캘린더는 날짜 선택보다 일정 밀도와 현재 위치를 이해하는 것이 중요합니다.

권장 규칙:

• 오늘 날짜: 민트 원형 또는 민트 outline
• 선택 날짜: 딥네이비 배경 또는 민트 배경
• 주말: 텍스트를 살짝 낮은 대비로 표시
• 다른 달 날짜: opacity 0.4 ~ 0.55
• 일정 색상: 상태나 카테고리를 표현하되 텍스트 대비를 유지
• 날짜 셀 최소 높이: 데스크톱 96px, 모바일 72px

<div
  class="min-h-24 rounded-lg border border-transparent p-2
         transition-colors hover:bg-slate-50
         dark:hover:bg-slate-800"
>
  <div class="flex items-center justify-between">
    <span
      class="flex h-7 w-7 items-center justify-center rounded-full
             bg-brand-mint text-xs font-bold text-brand-navy-dark"
    >
      24
    </span>
  </div>

  <div class="mt-2 space-y-1">
    <div class="truncate rounded bg-brand-mint/15 px-2 py-1 text-xs text-brand-mint-dark">
      팀 회의
    </div>
  </div>
</div>

5.4 카드

기본 카드:

<div
  class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm
         dark:border-slate-700 dark:bg-slate-800"
>
  <!-- content -->
</div>

카드에는 가급적 하나의 주요 목적만 부여합니다. 서로 다른 정보 그룹은 카드 내부에서 충분한 간격으로 분리합니다.

5.5 입력 필드

• 기본 높이: 40px 또는 44px
• radius: 8px
• placeholder는 실제 텍스트보다 낮은 대비
• focus 시 민트 외곽 링
• 오류 상태에서는 테두리와 설명 텍스트를 함께 표시

<input
  type="text"
  placeholder="일정 제목을 입력하세요"
  class="h-11 w-full rounded-lg border border-slate-200 bg-white px-3
         text-sm text-slate-900 placeholder:text-slate-400
         outline-none transition
         focus:border-brand-mint focus:ring-4 focus:ring-brand-mint/20
         dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
/>

5.6 배지와 태그

배지는 상태, 카테고리, 우선순위를 짧게 표시합니다.

<span
  class="inline-flex items-center rounded-full bg-brand-mint/15
         px-2.5 py-1 text-xs font-medium text-brand-mint-dark
         dark:text-brand-mint"
>
  개인
</span>

---

6. Shadows & Elevation

원픽플래너는 차분한 브랜드이므로 그림자를 강하게 사용하지 않습니다.

단계	Tailwind	용도
Level 0	shadow-none	기본 플랫 영역
Level 1	shadow-sm	일반 카드, 입력 영역
Level 2	shadow-md	hover 카드, 드롭다운
Level 3	shadow-lg	모달, 주요 팝오버
Level 4	shadow-xl	화면 위에 떠 있는 패널

권장 원칙:

• 일반 카드는 shadow-sm
• hover 시 shadow-md
• 선택 상태는 그림자보다 border 또는 background 변화로 표현
• 다크모드에서는 그림자만으로 구분하지 않고 border를 함께 사용
• 모달 뒤에는 검은색 overlay를 40% ~ 60%로 적용

<div class="shadow-sm hover:shadow-md dark:shadow-black/20">
  카드 콘텐츠
</div>

---

7. Animations & Transitions

애니메이션은 생산성을 방해하지 않고 상태 변화와 공간 관계를 이해시키는 데 사용합니다.

기본 속도

유형	시간	용도
Fast	120ms	hover, 색상 변화
Normal	180ms	버튼, 카드 상태
Moderate	240ms	드롭다운, 팝오버
Slow	320ms	모달, 패널 전환

권장 easing

cubic-bezier(0.2, 0.8, 0.2, 1)

적용 예시

<div class="transition-all duration-200 ease-out">
  콘텐츠
</div>

사용할 애니메이션

• 버튼 hover 시 배경색 변화
• 할 일 완료 시 체크 아이콘 등장
• 사이드 패널 열림/닫힘
• 캘린더 월 전환
• 카드 hover 시 1~2px 상승
• 저장 완료 시 짧은 성공 피드백

피해야 할 애니메이션

• 계속 반복되는 장식용 애니메이션
• 전체 레이아웃이 크게 움직이는 효과
• 일정 목록이 로드될 때 지나치게 긴 stagger 효과
• 사용자가 작업을 완료하는 데 필요한 정보의 지연

접근성을 위해 prefers-reduced-motion을 지원합니다.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

8. Border Radius

토큰	값	사용 예
radius-sm	6px	작은 버튼, 태그
radius-md	8px	입력 필드, 기본 버튼
radius-lg	12px	카드, 캘린더 셀
radius-xl	16px	주요 카드, 모달
radius-full	9999px	아바타, 상태 배지, 체크 버튼

원픽플래너에는 8px과 12px을 기본으로 사용합니다.

• 버튼: rounded-lg
• 입력 필드: rounded-lg
• 카드: rounded-xl
• 태그: rounded-full
• 모달: rounded-2xl
• 체크박스: 원형 또는 rounded-md

과도하게 둥근 UI는 캐주얼한 인상을 줄 수 있으므로 큰 컨테이너에는 rounded-full을 사용하지 않습니다.

---

9. Opacity & Transparency

값	용도
100%	기본 콘텐츠
90%	hover 보조 콘텐츠
75%	보조 텍스트, 비활성 아이콘
50%	비활성 상태, 이전 달 날짜
25%	상태 배경, focus ring
15%	부드러운 강조 배경
0%	숨김 상태

권장 사용

<!-- 민트 강조 배경 -->
<div class="bg-brand-mint/15 text-brand-mint-dark"></div>

<!-- 포커스 링 -->
<button class="focus:ring-4 focus:ring-brand-mint/25"></button>

<!-- 모달 overlay -->
<div class="fixed inset-0 bg-slate-950/50"></div>

주의사항:

• 본문 텍스트에 opacity-50 이하를 사용하지 않습니다.
• opacity로 텍스트 대비를 조절하기보다 명시적인 텍스트 색상 토큰을 우선 사용합니다.
• 다크모드에서 흰색 overlay는 과도하게 밝아질 수 있으므로 검정 계열 overlay를 사용합니다.
• 비활성 요소도 텍스트와 아이콘을 식별할 수 있어야 합니다.

---

10. Common Tailwind CSS Usage

자주 사용하는 조합

<!-- 페이지 배경 -->
<div class="min-h-screen bg-app-background text-slate-900 dark:text-slate-100">

<!-- 기본 카드 -->
<div class="rounded-xl border border-slate-200 bg-white shadow-sm
            dark:border-slate-700 dark:bg-slate-800">

<!-- 기본 제목 -->
<h2 class="text-xl font-bold text-slate-900 dark:text-slate-50">

<!-- 보조 텍스트 -->
<p class="text-sm text-slate-500 dark:text-slate-400">

<!-- 민트 CTA -->
<button class="rounded-lg bg-brand-mint px-4 py-2.5 font-semibold
               text-brand-navy-dark hover:bg-brand-mint-dark">

<!-- 반응형 그리드 -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">

<!-- 접근 가능한 focus 상태 -->
<button class="focus:outline-none focus:ring-4 focus:ring-brand-mint/25">

반응형 기준

화면	기준	주요 변화
Mobile	< 640px	사이드바 축소, 단일 열
Tablet	640px ~ 1024px	2열 카드, 축소된 패딩
Desktop	1024px 이상	사이드바 표시, 다중 열
Wide	1280px 이상	대시보드 카드 및 캘린더 확장

다크모드 규칙

기본 원칙은 모든 surface, border, text에 dark 변형을 명시하는 것입니다.

<div
  class="border border-slate-200 bg-white text-slate-900
         dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
>
  다크모드 대응 콘텐츠
</div>

추천 컴포넌트 클래스 조합

<!-- 대시보드 레이아웃 -->
<main class="mx-auto w-full max-w-[1440px] px-4 py-6 sm:px-6 lg:px-8">

<!-- 섹션 -->
<section class="space-y-4">

<!-- 콘텐츠 그리드 -->
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">

<!-- 아이콘 버튼 -->
<button
  class="inline-flex h-9 w-9 items-center justify-center rounded-lg
         text-slate-500 transition-colors hover:bg-slate-100
         hover:text-slate-700 dark:hover:bg-slate-700"
>
  아이콘
</button>

---

예시: 대시보드 일정 요약 컴포넌트

type Schedule = {
  title: string;
  time: string;
  category: string;
  completed?: boolean;
};

const schedules: Schedule[] = [
  {
    title: '주간 업무 보고서 작성',
    time: '오늘 16:00',
    category: '업무',
  },
  {
    title: '운동하기',
    time: '오늘 19:30',
    category: '건강',
    completed: true,
  },
];

export function TodaySchedule() {
  return (
    <section
      className="
        rounded-xl border border-slate-200 bg-white p-5 shadow-sm
        dark:border-slate-700 dark:bg-slate-800
      "
      aria-labelledby="today-schedule-title"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-xs font-medium text-slate-500 dark:text-slate-400">
            2026년 9월 24일
          </p>
          <h2
            id="today-schedule-title"
            className="mt-1 text-lg font-bold text-slate-900 dark:text-slate-50"
          >
            오늘의 일정
          </h2>
        </div>

        <button
          className="
            rounded-lg bg-brand-mint px-3 py-2 text-sm font-semibold
            text-brand-navy-dark transition-colors
            hover:bg-brand-mint-dark
            focus:outline-none focus:ring-4 focus:ring-brand-mint/25
          "
        >
          일정 추가
        </button>
      </div>

      <div className="mt-5 space-y-3">
        {schedules.map((schedule) => (
          <article
            key={schedule.title}
            className="
              group flex items-center gap-3 rounded-lg border border-slate-100
              p-3 transition-colors hover:border-brand-mint/40
              hover:bg-brand-mint/5
              dark:border-slate-700 dark:hover:bg-brand-mint/10
            "
          >
            <button
              aria-label={`${schedule.title} 완료 처리`}
              className={[
                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2',
                'transition-colors focus:outline-none focus:ring-4 focus:ring-brand-mint/20',
                schedule.completed
                  ? 'border-brand-mint bg-brand-mint text-brand-navy-dark'
                  : 'border-slate-300 hover:border-brand-mint dark:border-slate-600',
              ].join(' ')}
            >
              {schedule.completed && <span className="text-xs">✓</span>}
            </button>

            <div className="min-w-0 flex-1">
              <h3
                className={[
                  'truncate text-sm font-semibold',
                  schedule.completed
                    ? 'text-slate-400 line-through dark:text-slate-500'
                    : 'text-slate-900 dark:text-slate-100',
                ].join(' ')}
              >
                {schedule.title}
              </h3>

              <div className="mt-1 flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                <span>{schedule.time}</span>
                <span className="h-1 w-1 rounded-full bg-slate-300" />
                <span>{schedule.category}</span>
              </div>
            </div>

            <button
              aria-label={`${schedule.title} 더보기`}
              className="
                rounded-md p-1.5 text-slate-400 opacity-0 transition-opacity
                hover:bg-slate-100 hover:text-slate-600
                group-hover:opacity-100 dark:hover:bg-slate-700
              "
            >
              ⋯
            </button>
          </article>
        ))}
      </div>
    </section>
  );
}

이 컴포넌트는 원픽플래너의 핵심 스타일을 반영합니다.

• 딥네이비: 기본 텍스트와 안정적인 구조
• 민트: 주요 행동과 완료 상태
• 낮은 대비의 보조 텍스트
• 작은 그림자와 부드러운 카드 radius
• 다크모드 대응
• 키보드 focus 상태
• 완료 상태의 시각적 변화
• 일정 제목이 길어질 때의 truncate 처리