Microsoft Excel
Excel 그린 + Ribbon UI + 무한 격자의 스프레드시트 표준
Brand DNA
브랜드 DNA
- 브랜드명: Microsoft Excel
- 한 줄 정체성: 1985년 이후 세계 표준 스프레드시트 — 행/열 그리드 + 수식 + 차트의 정량 도구
- 공식 디자인 철학: Microsoft 365 / Fluent 2 — "Calm, Optimistic, Inclusive"
- 시그니처 요소 1개: Excel 그린(#107C41) 타이틀바 + Ribbon UI + 무한 격자. 셀 선택은 두꺼운 녹색 윤곽선
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 정확, 격자, 신뢰
- 무드 설명: Excel 그린은 타이틀·선택 상태에 집중하고, 작업 영역은 라이트의 흰 격자 또는 다크의 저채도 격자로 유지한다. 1px 셀 경계, tabular-nums, 우측 정렬 숫자가 데이터 중심의 신뢰감을 만든다.
- 비주얼 스타일: 모던 미니멀 (Fluent 2)
- 밀도(Density): Compact — 셀 높이 24px, 정보 밀도 최우선
- 모서리 성향: Sharp (2~4px)
- 평면성: Flat — 그림자는 팝오버/리본만
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Excel Green */
--color-primary-50: #E6F4EC;
--color-primary-100: #B8E0CB;
--color-primary-200: #82C8A2;
--color-primary-300: #4FB07B;
--color-primary-400: #2A9C5E;
--color-primary-500: #107C41; /* Excel Green */
--color-primary-600: #0D6433;
--color-primary-700: #094D27;
--color-primary-800: #06371B;
--color-primary-900: #03200F;
/* Secondary */
--color-secondary-500: #185ABD; /* Excel formula bar accent */
/* Neutral - Fluent 2 */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F3F2F1; /* ribbon/header bg */
--color-neutral-200: #E1DFDD; /* cell border row/col header */
--color-neutral-300: #D1D1D1; /* cell grid line */
--color-neutral-500: #A19F9D;
--color-neutral-700: #605E5C;
--color-neutral-800: #3B3A39;
--color-neutral-900: #252525;
--color-neutral-1000: #000000;
/* Semantic - 숫자 표시용 */
--color-positive-fg: #107C41; /* 양수/증가 */
--color-negative-fg: #A4262C; /* 음수/감소 */
--color-success-bg: #DFF6DD;
--color-success-fg: #107C10;
--color-warning-bg: #FFF4CE;
--color-warning-fg: #8A6900;
--color-error-bg: #FDE7E9;
--color-error-fg: #A4262C;
--color-info-bg: #EFF6FC;
--color-info-fg: #0078D4;
/* Surface */
--bg-base: #FFFFFF;
--bg-subtle: #FAFAFA;
--bg-elevated: #FFFFFF;
--bg-ribbon: #F3F2F1;
--bg-overlay: rgba(37,37,37,0.45);
/* Text */
--text-primary: #252525;
--text-secondary: #3B3A39;
--text-tertiary: #605E5C;
--text-on-primary: #FFFFFF;
--text-disabled: #A19F9D;
/* Border */
--border-default: #D1D1D1;
--border-subtle: #E1DFDD;
--border-strong: #A19F9D;
--border-cell: #D1D1D1;
--border-focus: #107C41; /* 셀 선택 외곽선 */
}
[data-theme="dark"] {
/* Primary - 다크 캔버스용 대비 보정 */
--color-primary-50: #06210F;
--color-primary-100: #093218;
--color-primary-200: #0D4A25;
--color-primary-300: #137C41;
--color-primary-400: #1E9A54;
--color-primary-500: #2A9C5E;
--color-primary-600: #4FB87B;
--color-primary-700: #7CCD9C;
--color-primary-800: #ABE0C0;
--color-primary-900: #DBF2E5;
--color-secondary-500: #5DA3F0;
--color-neutral-0: #1B1B1B;
--color-neutral-50: #1F1F1F;
--color-neutral-100: #292929;
--color-neutral-200: #333130;
--color-neutral-300: #3B3A39;
--color-neutral-500: #5C5B59;
--color-neutral-700: #A19F9D;
--color-neutral-800: #D2D0CE;
--color-neutral-900: #E6E6E6;
--color-neutral-1000: #FFFFFF;
--color-positive-fg: #4FB87B;
--color-negative-fg: #E88B91;
--color-success-bg: #12260F;
--color-success-fg: #6CCB6C;
--color-warning-bg: #2E2410;
--color-warning-fg: #E5C04A;
--color-error-bg: #2E1416;
--color-error-fg: #E88B91;
--color-info-bg: #102A40;
--color-info-fg: #5DA3F0;
--bg-base: #1B1B1B;
--bg-subtle: #1F1F1F;
--bg-elevated: #292929;
--bg-ribbon: #292929;
--bg-overlay: rgba(0,0,0,0.60);
--text-primary: #E6E6E6;
--text-secondary: #D2D0CE;
--text-tertiary: #A19F9D;
--text-on-primary: #0E1A12;
--text-disabled: #6B6967;
--border-default: #3B3A39;
--border-subtle: #333130;
--border-strong: #5C5B59;
--border-cell: #3B3A39;
--border-focus: #2A9C5E;
}Typography
타이포그래피
- 폰트 페어링:
- 영문: Aptos (2024년 신규 기본, 옛 Calibri 대체) → Segoe UI / Calibri 폴백
- 한글: Aptos Korean / Malgun Gothic 폴백
- 수식/숫자: tabular-nums 강제
- 위계 (스프레드시트는 셀 단위 폰트, 컨텍스트 작음):
- Title (Workbook): 14px / 600 / 1.4 / 0
- Ribbon Tab: 12px / 600 / 1.4 / 0
- Cell Default: 11px / 400 / 1.4 / 0 tabular-nums
- Cell Header (Row/Col): 11px / 600 / 1.4 / 0
- Body: 13px / 400 / 1.5 / 0
- Caption: 10px / 600 / 1.4 / 0.02em
- Formula bar: 13px / 400 / 1.4 Cascadia Code
Spacing
스페이싱
- Base unit: 4px
- 토큰 (스프레드시트는 셀 단위 sizing): ``
css --cell-h: 24px; /* 기본 셀 높이 */ --cell-h-compact: 20px; --row-header-w: 32px; --col-header-w: 64px; /* 기본 열 너비 */ --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px;``
Border Radius
Border Radius
--radius-none: 0; /* 셀은 무조건 0 */
--radius-sm: 2px; /* 리본 버튼 */
--radius-md: 4px; /* 다이얼로그 */
--radius-lg: 8px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-popover: 0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12); /* 컨텍스트 메뉴 */
--shadow-ribbon: 0 1px 0 rgba(0,0,0,0.06);
--shadow-dialog: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.12);Iconography
Iconography
- 스타일: Fluent UI Icons (Filled small)
- Stroke 굵기: 1.5px equivalent
- 모서리 처리: Square
- 추천 라이브러리: Fluent UI Icons
Component Guide
컴포넌트 가이드
Button (Ribbon)
.ribbon-btn { font: 600 11px/1.4 Aptos, 'Segoe UI', sans-serif; letter-spacing: 0;
border-radius: 2px; padding: 4px 8px; border: 1px solid transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
background: transparent; color: var(--text-primary); }
.ribbon-btn:hover { background: var(--bg-subtle); border-color: var(--border-default); }
.ribbon-btn.active { background: var(--color-primary-50); color: var(--color-primary-700); border-color: var(--color-primary-300); }
.btn-primary { background: var(--color-primary-500); color: #fff; padding: 6px 14px; font: 600 12px/1 inherit; border-radius: 2px; border: 0; }Input (Formula Bar)
.formula-bar { background: #fff; border: 1px solid var(--border-default); padding: 4px 8px; font: 400 13px/1.4 Cascadia Code, monospace; height: 24px; }
.formula-bar:focus { outline: 0; border-color: var(--color-primary-500); }Cell
.cell { border-right: 1px solid var(--border-cell); border-bottom: 1px solid var(--border-cell); padding: 0 6px; font: 400 11px/1.4 Aptos, 'Segoe UI', sans-serif; height: 24px; display: flex; align-items: center; box-sizing: border-box; }
.cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cell.header { background: var(--bg-ribbon); font-weight: 600; color: var(--text-secondary); }
.cell.header.active { background: var(--color-primary-100); color: var(--color-primary-700); }
.cell.selected { outline: 2px solid var(--color-primary-500); outline-offset: -2px; }
.cell.positive { color: var(--color-positive-fg); }
.cell.negative { color: var(--color-negative-fg); }
.cell.bold { font-weight: 600; }Badge / Tag
.tag { padding: 1px 4px; border-radius: 2px; font: 600 9px/1.4 inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-saved { background: var(--color-success-bg); color: var(--color-success-fg); }
.tag-edited { background: var(--color-warning-bg); color: var(--color-warning-fg); }Navigation (Sheet Tabs)
.sheet-tabs { background: var(--bg-ribbon); border-top: 1px solid var(--border-default); display: flex; padding: 0 8px; }
.sheet-tab { padding: 6px 14px; font: 500 11px/1.4 inherit; color: var(--text-secondary); border: 1px solid transparent; border-bottom: 0; }
.sheet-tab.active { background: #fff; color: var(--color-primary-700); border-color: var(--border-default); border-top: 2px solid var(--color-primary-500); }Motion
Motion
--duration-fast: 80ms; /* 셀 입력 즉시 */
--duration-base: 150ms;
--duration-slow: 300ms;
--ease-out: cubic-bezier(0.33, 0, 0.67, 1);Anti-patterns
Anti-patterns
1. 셀에 라운드 모서리 적용 금지 — 격자 정렬 손실 2. 본문 셀에 가변폭 폰트 사용 금지 — tabular-nums 필수 (숫자 정렬) 3. 그림자로 셀 분리 금지 — 1px 보더만 사용 4. 그린을 본문 텍스트에 남발 금지 — 양수/증가 데이터, 헤더만 5. 셀 높이 32px 이상으로 키우지 말 것 — Compact 24px가 정보 밀도 표준