프론트엔드 디자인 스타일은(는) 무엇을 하나요?

네 가지 주요 디자인 언어를 프론트엔드 코드에 충실하게 구현합니다. 핵심은 '비슷해 보이는 것'이 아니라 의미론적 토큰 + 컴포넌트 형태 + 애니메이션 곡선의 세 가지 계층을 일관되게 적용하여, 결과물이 해당 플랫폼 사용자에게 '이게 iOS구나', '이게 Material이구나', '이게 Windows구나'라고 인식될 수 있도록 하는 것입니다.

사용 시기 / 사용하지 않을 시기

사용: 특정 디자인 스타일로 인터페이스를 생성하거나 개선할 때; 네 가지 스타일 간 선택 및 비교할 때; 디자인 토큰과 테마 파일을 생성할 때; 디자인 언어에 따른 시각적 검토를 할 때.

사용하지 않음: 사용자가 특정 스타일 선호도 없이 '예쁜 페이지'를 원할 때 → 먼저 스타일을 지정할 것인지 물어보거나 references/style-router.md의 추천 로직을 따르세요; 순수 백엔드/알고리즘 작업은 이 스킬과 관련이 없습니다.

네 가지 스타일 식별표

가장 식별력이 높은 몇 가지 특징입니다. 구현 전에 이 표를 먼저 확인하고, 세부 사항은 해당 참조 문서를 확인하세요.

| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 | |---|---|---|---| | 주 색상 | #3482FF (밝음) / #277AF7 (어두움) | #007AFF / #0A84FF | 역할 기반, 기준 #6750A4 | #0F6CBD | | 글꼴 | MiSans | SF Pro (<20pt Text, ≥20pt Display) | Roboto / Roboto Flex | Segoe UI Variable | | 본문 기준 | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) | | 둥근 모서리 언어 | 16dp 통일 둥근 모서리 + squircle (iOS와 동일, 버튼은 캡슐 아님) | 연속 곡률 둥근 모서리 (squircle), 컨테이너 10–20pt | 12dp 카드 / 28dp FAB & 팝업 / 완전 둥근 버튼 | 작은 둥근 모서리, 컨트롤 4px, 팝업 8px, 중첩 −2px | | 계층 기법 | 색조 계층화 (#FFFFFF / #F7F7F7 / #E8E8E8), 그림자 거의 사용 안 함 | 재질 흐림 효과 (translucency) + 그룹화된 목록 + 콘텐츠가 UI를 압도 | 색조 오버레이 (tonal overlay) 우선, 그림자 차선 | 재질 (Mica / Acrylic) + 낮은 다층 그림자 | | 애니메이션 | 가볍고 탄력적인 튕김, 200–300ms | 스프링 물리, 200–300ms, linear 없음 | 강조 곡선 cubic-bezier(0.2,0,0,1), 지속 시간 토큰별 등급 | 빠르고 절제됨, 150–250ms, easyEase | | 터치/클릭 대상 | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | 컨트롤 높이 32px (조밀/편안 모드) | | 한 줄 요약 | 둥글고, 투명하며, 파란색 기술 감성 | 절제, 여백, 콘텐츠 우선 | 색상 표현력 강함, 계층은 색조로 | 생산성, 선명함, 데스크탑 네이티브 |

워크플로우

Step 1 · 스타일 결정. 사용자가 이미 지정 → 바로 사용. 미지정 → references/style-router.md를 읽고, 제품 형태/플랫폼/밀도에 따라 1개의 추천 + 1개의 대안을 제시하여 사용자 확인을 받습니다.

Step 2 · 토큰 읽기. 해당 참조 문서를 열고 색상, 글자 크기 계층, 간격, 둥근 모서리, 그림자, 애니메이션을 모두 한 번 읽은 후 작업을 시작하세요. 기억에 의존하지 마십시오:

MIUIX / HyperOS → references/miuix-hyperos.md
Apple HIG → references/apple-hig.md
Material Design 3 → references/material-design-3.md
Fluent 2 → references/fluent-2.md

Step 3 · 토큰 적용. assets/tokens/<style>.css를 의미론적 토큰 계층으로 직접 복사하세요 (밝음/어두움 이중 테마 포함). 컴포넌트 스타일에 hex 값을 직접 쓰지 마십시오. 다크 모드는 [data-theme="dark"] 또는 prefers-color-scheme으로 전환합니다.

Step 4 · 컴포넌트 구축. references/components-playbook.md에서 해당 스타일의 컴포넌트 사양에 따라 구현합니다 (버튼 변형, 입력 필드, 카드, 내비게이션, 팝업, 스위치, 목록). 모든 상호작용 상태 (hover / focus / pressed / selected / disabled)가 있어야 하며, 기본 상태만 구현해서는 안 됩니다.

Step 5 · 애니메이션 추가 + 자가 점검. references/motion-and-accessibility.md에 따라 전환 효과를 추가한 후, python3 scripts/lint_tokens.py <산출물> --style <스타일>을 실행하고, 아래 자가 점검 목록을 하나씩 확인합니다.

철칙

스타일을 혼합하지 마십시오. Fluent를 선택했으면 iOS의 #007AFF, Material의 pill FAB 또는 HyperOS의 큰 둥근 모서리 카드가 나타나서는 안 됩니다. 혼합은 가장 흔한 실패 패턴입니다.
토큰 우선. 컴포넌트 CSS에는 var(--xxx)만 허용되며, 리터럴 색상/글자 크기/둥근 모서리 값은 허용되지 않습니다.
밝음/어두움 이중 테마를 함께 만드십시오. 네 가지 시스템 모두 공식 다크 모드 값이 있으므로, 표를 직접 참조하고 filter: invert나 수동으로 어둡게 하는 속임수를 사용하지 마십시오.
플랫폼 규칙은 변경할 수 없습니다. 예를 들어 iOS의 최소 클릭 영역 44pt, Material의 상태 계층 불투명도, Fluent 컨트롤의 1px 하단 테두리, HyperOS의 어두운 배경 #242424 (순수 검정 surface 아님).
접근성은 필수입니다. 본문 대비 ≥ 4.5:1, UI 요소 ≥ 3:1, 포커스 링이 보여야 하며 prefers-reduced-motion을 존중해야 합니다.
중국어 타이포그래피는 별도로 처리해야 합니다. Roboto / Segoe UI / SF Pro에는 완전한 한자字形이 없으므로, 중국어 인터페이스는 반드시 PingFang / Source Han Sans / MiSans 등 중국어 글꼴로 폴백하고 letter-spacing을 줄여야 합니다 (라틴 문자 간격은 중국어에 적합하지 않음).

전달 규칙

기본적으로 단일 파일 실행 가능 HTML (인라인 <style> + <script>)을 산출하며, 토큰은 :root CSS 변수로 구성되어 사용자가 바로 미리보기와 복사가 가능합니다.
사용자가 프레임워크를 지정한 경우 전환하며, 매핑 규칙은 references/framework-mappings.md를 참조하십시오: Tailwind는 assets/mappings/tailwind.css 사용; React/Vue는 토큰 객체 + CSS 변수 사용; Compose는 공식 라이브러리 우선 (MIUIX는 MiuixTheme, M3는 MaterialTheme).
컴포넌트 데모 페이지는 assets/templates/showcase.html을 참조할 수 있습니다 (동일한 컴포넌트 집합을 네 가지 스타일로 병렬 표시, 테마와 밝음/어두움 전환 가능).
산출 후 반드시 검증 실행: python3 scripts/lint_tokens.py <산출물 파일> --style <스타일>, 세 가지 검사 (하드코딩된 색상 값 / 대비 / 핵심 토큰)를 통과하지 못하면 수정 후 전달하십시오.
전달 시 설명: 사용한 시스템, 의도적으로 벗어난 부분, 다크 모드 전환 방식, 글꼴 폴백 스택.

자가 점검 목록

완료 후 항목별로 확인하고, 통과하지 못하면 수정하십시오:

참조 파일

파일	내용
`references/style-router.md`	네 가지 스타일 선택 결정 트리, 비교 매트릭스, 혼합 금지 구역
`references/miuix-hyperos.md`	MIUIX 토큰 전체 표 + HyperOS 시각적 특징 + 컴포넌트 사양
`references/apple-hig.md`	시스템 색상 전체 표 + Dynamic Type 12단계 + 재질 + 컴포넌트 사양
`references/material-design-3.md`	29개 색상 역할 밝음/어두움 전체 표 + 15단계 글자 크기 계층 + 모양/고도/상태 계층
`references/fluent-2.md`	중성 색상/브랜드 색상 계층 + Type Ramp + 컨트롤 크기 + Mica/Acrylic + 그림자 토큰
`references/components-playbook.md`	버튼/입력/카드/내비게이션/팝업/스위치/목록의 스타일별 구현 사양
`references/motion-and-accessibility.md`	네 시스템의 애니메이션 곡선 및 지속 시간, 접근성 필수 요구 사항, 검토 목록
`references/framework-mappings.md`	Tailwind / React / Vue / Compose / SwiftUI의 토큰 매핑 규칙
`scripts/lint_tokens.py`	실행 가능한 검증: 하드코딩된 색상 값, 대비, 핵심 토큰 완비성
`assets/mappings/tailwind.css`	Tailwind v4 `@theme` 토큰 매핑, 네 가지 시스템이 동시에 같은 페이지에 존재 가능

프론트엔드 디자인 스타일