UI/UX 엔지니어링 및 현대 제품 디자인 시스템
사용자 인터페이스 엔지니어링, UX 아키텍처, 디자인 토큰, 컴포넌트 라이브러리 및 제품 미학 변환을 위한 엄격하고 기관 등급의 운영 가이드입니다.
1. 핵심 운영 원칙
- 숨 쉬는 공간이 있는 정보 밀도: 고밀도 레이아웃(Linear, Bloomberg, Stripe, TradingView)은 뷰포트 픽셀당 최대 신호를 혼잡함 없이 제공합니다. 이는 의도적인 대비, 컴팩트한 타이포그래피 스케일, 1px 미묘한 테두리, 일관된 간격 그리드(4px / 8px)를 통해 달성됩니다.
- 고품질 디자인 가이드라인: 다듬어지지 않은 기본값은 거부합니다.
- ❌ 과포화된 보라색/인디고 그라데이션 사용 금지.
- ❌ 흰색 위
text-gray-400또는 검은색 위text-zinc-600과 같은 읽을 수 없는 저대비 회색 텍스트 사용 금지. - ❌ 선명한 벡터 SVG(Lucide/Radix) 대신 이모지 아이콘 사용 금지.
- ❌ 거대한 반경(
rounded-3xl)과 정렬되지 않은 작은 텍스트가 있는 거대한 빈 떠 있는 카드 사용 금지. - ❌ 키보드 포커스 상태 누락 또는 마우스 전용 상호 작용 금지.
- ✔️ 목적 있는 색상 팔레트, 미묘한 1px 테두리(
border-slate-800), 고정폭 표 형식 숫자(font-mono tabular-nums), 선명한 마이크로 배지, 접근 가능한 대비 비율($>4.5:1$)을 사용하십시오.
- 도메인별 색상 의미론:
- 금융/양적 애플리케이션에서 색상은 높은 이해관계의 의미론적 의미를 전달합니다.
- 녹색(
#10B981/#22C55E): 긍정적인 알파, 수익성, 매수 신호, 상승 성장. - 빨간색(
#EF4444/#F43F5E): 손실, 하락, 포렌식 위험, 매도 신호, 마이너스 현금 흐름. - 호박색/노란색(
#F59E0B): 주의, 분류 필요, 중립 체제, 경고 플래그. - 파란색/청록색(
#3B82F6/#06B6D4): 정보 상태, 포커스 링, 기본 액션 버튼, 중립 추세. - 색맹 접근성: 색상에만 의존하지 마십시오. 색상 표시기를 방향성 글리프(
▲,▼,—), 상태 배지 또는 툴팁과 함께 사용하십시오.
- 예측 가능한 인지 성능:
- 제로 레이아웃 시프트(CLS < 0.1): 지연 로드되는 차트 및 테이블을 위해 골격 공간을 확보하십시오.
- 낙관적 피드백: 버튼 클릭 및 필터 스위치에서 즉각적인 활성 상태(<50ms 피드백)를 제공하십시오.
- 전체 페이지 스피너 대신 골격: 데이터가 로드되는 동안 페이지 레이아웃과 탐색 크롬을 유지하십시오.
2. 디자인 토큰 아키텍처
강력한 디자인 시스템은 세 가지 명시적인 토큰 계층으로 구성됩니다.
graph TD
Primitive["1. 원시 토큰<br>(원시 값: slate-900, emerald-500, font-size-14, 8px)"]
Semantic["2. 의미 토큰<br>(의도: surface-background, text-primary, border-subtle, status-success)"]
Component["3. 컴포넌트 토큰<br>(범위: table-header-bg, badge-pill-padding, chart-grid-stroke)"]
Primitive --> Semantic --> Component
2.1 색상 토큰 매트릭스 (기관용 다크 및 라이트 테마)
| 의미 토큰 | 다크 모드 값 | 라이트 모드 값 | 용도 |
|---|---|---|---|
bg-app | #0B0F17 (딥 옵시디언) | #F8FAFC (슬레이트 틴트) | 뷰포트 루트 배경 |
bg-surface | #111827 (리치 징크/슬레이트) | #FFFFFF (순수 흰색) | 카드, 패널, 모달 다이얼로그 |
bg-surface-hover | #1E293B (음소거된 블루-그레이) | #F1F5F9 (라이트 슬레이트) | 테이블 행 호버, 메뉴 항목 호버 |
border-subtle | #1E293B (1px 깔끔한 테두리) | #E2E8F0 | 카드 테두리, 테이블 구분선 |
border-accent | #334155 | #CBD5E1 | 포커스된 입력, 활성 탭 테두리 |
text-primary | #F8FAFC (고대비, 16:1) | #0F172A | 기본 제목, 테이블 데이터 값 |
text-secondary | #94A3B8 (슬레이트 400, 7:1) | #475569 | 측정 라벨, 설명, 타임스탬프 |
text-muted | #64748B (슬레이트 500, 4.5:1) | #64748B | 바닥글, 비활성화 상태, 단축키 힌트 |
accent-primary | #2563EB (로열 블루) | #2563EB | 기본 CTA 버튼, 활성 라디오 탭 |
status-bullish | #10B981 (에메랄드) | #059669 | 상승, 매수 확신, 긍정 CAGR |
status-bearish | #EF4444 (로즈/레드) | #DC2626 | 하락, 부적격, 고부채 |
status-caution | #F59E0B (앰버) | #D97706 | 오래된 데이터, 검토 필요, 중간 플래그 |
2.2 타이포그래피 스케일 및 숫자 서식
/* 금융 터미널 및 고밀도 테이블에 필수 */
.tabular-numbers {
font-family: var(--font-mono), monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
- 제목 (디스플레이/타이틀): 세미볼드 / 볼드(600/700), 좁은 자간(
letter-spacing: -0.03em), 줄 높이 1.2. - 본문 및 컨트롤: 13px–14px (
text-sm), 인터랙티브 라벨은 중간(500), 텍스트는 보통(400). - 마이크로 라벨 및 배지: 11px–12px (
text-xs), 볼드/세미볼드(600/700), 대문자 및tracking-wider. - 숫자 및 지표: 고정폭 표 형식 글꼴(
JetBrains Mono,Roboto Mono, 또는tabular-nums가 적용된Inter), 모든 테이블에서 오른쪽 정렬.
3. 고밀도 금융 터미널 및 테이블 UX
데이터 테이블은 금융 및 분석 워크플로우의 핵심 엔진입니다. 다음의 양보할 수 없는 규칙을 따르십시오.
- 정렬 규칙:
- 텍스트, 기호, 회사 이름: 왼쪽 정렬.
- 숫자 지표(가격, P/E, ROCE, CAGR, 점수, 날짜): 오른쪽 정렬.
- 상태 배지, 실행 가능한 플래그, 아이콘: 가운데 정렬.
- 고정 열 및 다중 행 헤더:
- 헤더 행은 세로 스크롤 중에 고정되어야 합니다(
sticky top-0 bg-surface z-10). - 모바일 및 초광폭 테이블의 가로 스크롤을 위해 식별 열(회사 이름/기호)을 고정합니다.
- 헤더 행은 세로 스크롤 중에 고정되어야 합니다(
- 시각적 구조:
- 행 높이: 컴팩트(36px–40px) 또는 표준(44px), 미묘한 얼룩말 줄무늬 또는 깔끔한 1px 테두리(
border-b border-slate-800/60) 사용. - 즉각적인 행 호버 강조(
hover:bg-slate-800/40 cursor-pointer). - 직접적인 인라인 배지 알약(
bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold).
- 행 높이: 컴팩트(36px–40px) 또는 표준(44px), 미묘한 얼룩말 줄무늬 또는 깔끔한 1px 테두리(
- 인터랙티브 컨트롤:
- 정렬 표시 화살표(
▲활성 오름차순,▼활성 내림차순, 음소거된⇅정렬 가능). - 지우기 버튼(X)이 있는 즉시 검색, 활성 필터 개수 칩(
Filters (3)), 총 개수가 표시된 페이지 매김 컨트롤(Showing 1–50 of 1,060).
- 정렬 표시 화살표(
4. 사용성 및 상호 작용 아키텍처 (닐슨 노먼 휴리스틱)
flowchart LR
A["회상보다 인식<br>(이동 경로, 고정 헤더, 저장된 필터)"] --> B["사용자 제어 및 자유<br>(빠른 지우기, Esc로 닫기, 실행 취소)"]
B --> C["시스템 상태 가시성<br>(낙관적 UI, 로딩 스켈레톤, 타임스탬프)"]
C --> D["사용 효율성<br>(키보드 단축키, 명령 팔레트 Cmd+K)"]
- 시스템 상태 가시성:
- 사용자가 시장이 실시간인지 마감되었는지 알 수 있도록 금융 데이터에는 항상 "As of [시장 날짜/시간]"을 표시하십시오.
- 요청이 100ms 이상 걸리면 빈 화면이나 차단 스피너 대신 지역화된 스켈레톤을 표시하십시오.
- 사용자 제어 및 자유:
- 필터 막대에는 기본값이 아닌 필터가 활성화된 경우 원클릭 "Reset All Filters" 버튼이 있어야 합니다.
- 모달 및 서랍은
Escape키와 배경 클릭 시 닫혀야 합니다.
- 일관성 및 컴포넌트 계층 구조:
- 기본 동작: 단색 고대비 채우기(
bg-blue-600 hover:bg-blue-500 text-white). 뷰당 정확히 하나의 기본 CTA. - 보조 동작: 테두리/미묘한 채우기(
bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700). - 고스트 동작: 투명(
hover:bg-slate-800 text-slate-400 hover:text-slate-100). - 파괴 동작: 빨간색 계열 경고(
bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30).
- 기본 동작: 단색 고대비 채우기(
- 접근성 (WCAG 2.2 AA / AAA):
- 일반 본문 텍스트의 텍스트-배경 대비 비율 $ ge 4.5:1$, 큰 텍스트 및 UI 컴포넌트의 경우 $ ge 3:1$.
- 모든 인터랙티브 요소는 가시적인
:focus-visible포커스 링(ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900)이 있어야 합니다. - 터치 기기에서 최소 클릭 가능한 터치 대상: $44 \times 44$px.
5. WCAG 2.2 AA / AAA 색상 대비 엔지니어링 및 검증
대비는 미적 선호도가 아닌 수학적 엔지니어링 사양입니다. 낮은 대비는 심각한 인지 피로, 눈부심 또는 낮은 밝기에서의 가독성 실패, 접근성 규정 준수 위반을 유발합니다.
5.1 수학적 대비 비율 사양
모든 sRGB 색상의 상대 휘도 $L$은 CIE 공식을 사용하여 계산됩니다. $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ 여기서 각 색상 채널 $C \in {R, G, B}$은 8비트 sRGB($C_{\text{srgb}} = C_{8\text{bit}} / 255$)에서 선형화됩니다. $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{if } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{if } C_{\text{srgb}} > 0.04045 \end{cases}$$
더 밝은 색상($L_1$)과 더 어두운 색상($L_2$) 사이의 대비 비율은 다음과 같습니다. $$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$
5.2 엄격한 준수 임계값
| 요소 카테고리 | WCAG 2.2 AA 최소 | WCAG 2.2 AAA 목표 | 검증 기준 |
|---|---|---|---|
| 일반 본문 텍스트 (< 18pt / 24px 일반, < 14pt / 18.5px 볼드) | **$ | ||
| ge 4.5:1$** | **$ | ||
| ge 7.0:1$** | 기본 데이터, 라벨, 설명, 테이블 행, 버튼 라벨 | ||
| 큰 텍스트 및 제목 ($ | |||
| ge 18\text{pt}$ / $24\text{px}$, 또는 $ | |||
| ge 14\text{pt}$ 볼드) | **$ | ||
| ge 3.0:1$** | **$ | ||
| ge 4.5:1$** | 디스플레이 제목, 섹션 헤더, 주요 지표 숫자 | ||
| UI 컴포넌트 및 그래픽 개체 (WCAG 1.4.11) | **$ | ||
| ge 3.0:1$** | **$ | ||
| ge 4.5:1$** | 입력 테두리, 토글, 분할 탭 경계, 활성 칩 윤곽선, 포커스 링 | ||
| 색상 사용 (WCAG 1.4.1) | 비색상 표시기 필요 | 이중 인코딩 필요 | 색상만으로 선택이나 상태를 전달하지 말고 체크 표시, 아이콘 또는 텍스트 굵기와 함께 사용 |
5.3 일반적인 대비 함정 5가지 및 체계적인 수정
1. 다크 모드 분할 탭 혼합
- 결함:
--tab-bg: #0F172A로 설정된 컨테이너 내부의 활성 탭이--card: #111827로 설정되었습니다. 대비 비율은 1.02:1(2단위 RGB 델타)입니다. 선택된 탭이 컨테이너 배경에 완전히 혼합되어 사용자가 활성 선택을 결정할 수 없습니다. - 수정: 활성 탭 배경을
--card-elevated: #1E293B로 높이고, 활성 1px 의미론적 테두리(1px solid var(--accent)/#10B981)와 미묘한 광택 링(box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25))을 추가하고, 활성 탭의 SVG 아이콘 색상을 일치시킵니다.
2. 라이트 모드 음소거 텍스트 대비 실패
- 결함: 흰색(
#FFFFFF) 또는 밝은 종이(#F8FAFC) 위에 Slate-400(#94A3B8)을 사용하는 기본 보조/음소거 텍스트. 대비 비율은 2.57:1로 WCAG SC 1.4.3($ ge 4.5:1$)을 심각하게 위반합니다. - 수정: 라이트 모드 보조 텍스트를 최소 Slate-500(
#64748B)으로 어둡게 하여#FFFFFF에서 4.77:1,#F8FAFC에서 4.54:1의 대비 비율을 얻습니다.
3. 호박색/경고 텍스트 배지 실패
- 결함: 상태 알약에 순수 흰색 위에 밝은 호박색(
#D97706/ Amber-600)을 사용합니다. 대비 비율은 3.22:1로 4.5:1 텍스트 임계값을 충족하지 못합니다. - 수정: 라이트 모드 텍스트 배지의 색상을 Amber-700(
#B45309)으로 어둡게 하여 의미론적 따뜻함을 유지하면서 4.82:1을 달성합니다.
4. 보이지 않는 다크 모드 입력 및 컨트롤 경계 (WCAG 1.4.11)
- 결함: 어두운 슬레이트 표면(
#111827/#0B0F17)에 미묘한 8%–12% 흰색 불투명도 테두리(rgba(255, 255, 255, 0.08))는 대비 비율이 1.2:1–1.4:1에 불과하여 3:1 비텍스트 경계 요구 사항을 위반합니다. - 수정: 기본 다크 모드 입력 테두리를 최소 18% 흰색 불투명도(
rgba(255, 255, 255, 0.18)/#334155)로 설정하고 호버 상태는 32%(rgba(255, 255, 255, 0.32)/#475569)로 설정합니다.
5. 안드로이드 Material 3 다크 모드 FilterChip 함정
- 결함: Material 3에서 기본 선택된
FilterChip은 어두운 표면(#14181E)에 대해secondaryContainer(#37474F)를 사용하여 1.83:1의 대비만 제공합니다. 윤곽선이나 글리프가 없으면 칩은 SC 1.4.11 및 SC 1.4.1을 모두 위반합니다. - 수정: 다음을 명시적으로 지정합니다.
selectedBorderColor = MaterialTheme.colorScheme.primary(9.88:1 대비 제공).selectedBorderWidth = 1.5.dp.leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else null→ 색상 인식과 무관하게 선택 상태를 시각화.
6. UI/UX 개편 플레이북 (단계별 실행)
기존 애플리케이션의 UI/UX를 재구성하거나 현대화하는 작업이 주어지면 다음 4단계 실행 전략을 따르십시오.
1단계: 디자인 시스템 기반 및 토큰 추출
- CSS/Tailwind(
globals.css/tailwind.config.js)에서 색상 팔레트, 타이포그래피 스케일, 간격 변수 및 테두리 반경 계층 구조를 설정합니다. - 기관용 다크 모드 토큰 및 의미론적 색상 클래스를 도입합니다.
2단계: 컴포넌트 프리미티브 현대화
- 핵심 재사용 가능한 UI 프리미티브를 리팩토링합니다.
Button: 기본, 보조, 고스트, 파괴, 로딩 스피너 포함.Badge/Tag: 상태, 계층 및 모멘텀을 위한 의미론적 색상 알약.Card/Panel: 깔끔한 테두리, 둥근 모서리(rounded-lg또는rounded-xl), 미묘한 배경.DataTable: 헤더 정렬, 오른쪽 정렬된 숫자, 고정 헤더, 호버 행.Modal/Drawer: 배경 흐림, 포커스 트랩, 부드러운 진입 애니메이션.Tooltip: 복잡한 지표(예: EV/EBITDA, CANSLIM 점수)에 대한 유익한 설명.
3단계: 레이아웃 및 탐색 개편
- 명확한 활성 경로 표시기, 회사 검색 창, 시스템 상태 표시기(예: 시장 세션 날짜, API 상태)가 있는 최신 상단 탐색 모음/사이드바로 현대화합니다.
- 경로 전환 시 레이아웃 지터와 페이지 점프를 제거합니다.
4단계: 고가치 페이지 현대화
- 중요한 사용자 대면 뷰를 개편합니다.
- 대시보드: 경영진 요약 타일, 시장 펄스, 상승/하락 종목, 레짐 히트맵.
- 확신 / 스크리너: 빠른 검색, 정렬 가능한 열, 지표 알약 및 빠른 세부 정보 서랍이 있는 고밀도 테이블.
- 회사 워크스페이스 / 상세: 시간대 알약(1M, 6M, 1Y, 5Y, MAX)이 있는 인터랙티브 차트, 시간 경과에 따른 주요 재무 지표를 포함한 재무 타임라인 테이블, 주석 가능한 이미지, 관련 뉴스 피드.
7. 디자인 품질 체크리스트 (모든 UI 릴리스 전)
- 디자인 시스템 계층: 원시 토큰 → 의미 토큰 → 컴포넌트 토큰이 모두 존재하고 문서화되었습니까?
- 대비 엔지니어링: 모든 텍스트 및 UI 컴포넌트가 지정된 WCAG 2.2 대비 비율 임계값을 충족합니까?
- 색상 의미론: 색상이 잘못된 맥락에서 사용되지 않았습니까? (예: 경고에 녹색, 긍정 신호에 빨간색). 색맹 안전 장치(글리프, 배지)가 적용되었습니까?
- 데이터 테이블 규정 준수: 숫자는 오른쪽 정렬되었습니까? 고정 열이 있습니까? 헤더가 스크롤됩니까? 호버 상태가 있습니까?
- 키보드 접근성: 모든 상호 작용에
tabindex속성이 있습니까? 포커스 링이 가시적입니까? 모달이 Esc로 닫힙니까? - 모바일 인체 공학: 44x44px 터치 대상이 있습니까? 테이블이 가로로 스크롤됩니까? 중단점이 적응됩니까?
- 성능 기준: 레이아웃 시프트(CLS < 0.1)가 있습니까? 느린 데이터에 대한 스켈레톤이 있습니까? 버튼에 대한 낙관적 피드백이 있습니까?
- 정보 밀도: UI가 불필요한 패딩이나 거대한 빈 공간 없이 뷰포트 공간을 효율적으로 사용합니까?
- 일관된 컴포넌트 계층 구조: 기본/보조/고스트/파괴 동작이 전체적으로 시각적으로 올바르게 계층화되었습니까?