Nothing 스타일 UI/UX 디자인 시스템

Swiss 타이포그래피, 산업 디자인(Braun, Teenage Engineering) 및 현대 인터페이스 제작에 정통한 시니어 제품 디자이너의 툴킷입니다. 단색, 타이포그래피 중심, 정보 밀도가 높지만 깔끔합니다. 다크 모드와 라이트 모드를 동등한 수준으로 지원합니다.

디자인 작업을 시작하기 전에, 필요한 Google Fonts와 로드 방법을 선언하십시오 (references/tokens.md 섹션 1 참조). 폰트가 이미 사용 가능하다고 가정하지 마십시오.

1. 디자인 철학

더하지 말고 덜어내십시오. 모든 요소는 존재할 자격을 얻어야 합니다. 제거를 기본값으로 삼으십시오.
구조 자체가 장식입니다. 그리드, 데이터, 계층 구조 자체를 드러내십시오.
단색이 기본 캔버스입니다. 색상은 이벤트이지 기본값이 아닙니다. 단, 데이터 상태를 인코딩할 때는 예외입니다(섹션 3 참조).
타이포그래피가 주요한 역할을 합니다. 크기, 두께, 간격이 계층을 만듭니다. 색상, 아이콘, 테두리가 아닙니다.
두 모드 모두 최우선으로 다루어집니다. 다크 모드: OLED 블랙. 라이트 모드: 따뜻한 오프 화이트. 어느 한쪽이 "파생"되지 않으며, 두 모드 모두 전체 디자인 주의를 기울입니다. 사용자에게 어떤 모드로 시작할지 물어보십시오.
산업적 따뜻함. 기술적이고 정확하지만 차갑지 않습니다. 인간의 손길이 느껴져야 합니다.

2. 제작 규칙 — 구성 방법

2.1 시각적 계층: 3계층 규칙

모든 화면은 정확히 세 가지 중요도 계층을 가집니다. 두 개도, 다섯 개도 아닌, 세 개입니다.

계층	내용	방법
기본	사용자가 처음 보는 하나. 숫자, 헤드라인, 상태.	Doto 또는 Space Grotesk, 디스플레이 크기. `--text-display`. 48–96px 여유 공간.
보조	지원 컨텍스트. 레이블, 설명, 관련 데이터.	Space Grotesk, 본문/소제목 크기. `--text-primary`. 기본 요소에 8–16px 간격으로 밀집 배치.
3차	메타데이터, 탐색, 시스템 정보. 보이지만 경쟁하지 않음.	Space Mono, 캡션/레이블 크기. `--text-secondary` 또는 `--text-disabled`. 모두 대문자. 가장자리나 하단에 배치.

테스트: 화면을 흐리게 뜨세요. 무엇이 가장 중요한지 여전히 알 수 있습니까? 두 요소가 경쟁한다면, 하나를 줄이거나, 흐리게 하거나, 이동시켜야 합니다.

흔한 실수: 모든 것을 "보조"로 만드는 것. 균일한 크기와 균일한 간격의 요소 = 시각적 평탄함. 대담해지십시오 — 기본은 터무니없이 크게, 3차는 터무니없이 작게 만드십시오. 그 대비 자체가 계층입니다.

2.2 폰트 규율

화면당 최대:

2개 폰트 패밀리 (Space Grotesk + Space Mono. Doto는 히어로 순간에만 사용.)
3개 폰트 크기 (하나는 크게, 하나는 중간, 하나는 작게)
2개 폰트 두께 (Regular + 다른 하나 — 보통 Light 또는 Medium, Bold는 드물게)

예산처럼 생각하십시오. 추가 크기/두께는 시각적 일관성을 해칩니다. 새 크기를 추가하기 전에, 이 차별을 간격이나 색상으로 만들 수 있는지 물어보십시오.

결정	크기	두께	색상
제목 vs. 본문	예	아니오	아니오
레이블 vs. 값	아니오	아니오	예
활성 vs. 비활성 탐색	아니오	아니오	예
히어로 숫자 vs. 단위	예	아니오	아니오
섹션 제목 vs. 내용	예	선택 사항	아니오

경험 법칙: 새 폰트 크기를 원한다면, 아마도 간격 문제일 것입니다. 대신 거리를 추가하십시오.

2.3 의미로서의 간격

간격은 관계를 전달하는 주요 도구입니다.

좁음 (4–8px)   = "함께 속함" (아이콘 + 레이블, 숫자 + 단위)
중간 (16px)    = "같은 그룹, 다른 항목" (목록 항목, 양식 필드)
넓음 (32–48px)   = "새 그룹 시작" (섹션 나누기)
아주 넓음 (64–96px)   = "새 컨텍스트" (히어로에서 콘텐츠로, 주요 구분)

구분선이 필요하다면, 간격이 잘못된 것입니다. 구분선은 간격 대비가 부족한 증상입니다. 구조적으로 동일한 항목이 있는 데이터 밀집 목록에서만 사용하십시오.

2.4 컨테이너 전략 (상단 선호)

간격만으로 (근접성이 항목 그룹화)
단일 구분선
미묘한 테두리 윤곽선
배경이 변경된 표면 카드

각 단계는 시각적 무게를 더합니다. 작동하는 가장 가벼운 도구를 사용하십시오. 가장 중요한 요소를 절대 박스로 감싸지 마십시오 — 배경 위에 떠 있게 하십시오.

2.5 계층으로서의 색상

단색 시스템에서 그레이 스케일 자체가 계층입니다. 화면당 최대 4단계:

--text-display (100%) → 히어로 숫자. 화면당 하나.
--text-primary (90%)  → 본문 텍스트, 주요 콘텐츠.
--text-secondary (60%) → 레이블, 캡션, 메타데이터.
--text-disabled (40%) → 비활성, 타임스탬프, 힌트.

빨간색(#D71921)은 계층의 일부가 아닙니다. 그것은 인터럽트입니다 — "여기, 지금 보세요." 긴급한 것이 없다면, 화면에 빨간색이 없어야 합니다.

데이터 상태 색상(성공 녹색, 경고 호박색, 강조 빨간색)은 데이터 값을 인코딩할 때 "하나의 악센트" 규칙에서 예외입니다. 색상을 값 자체에 적용하고 레이블이나 행 배경에는 적용하지 마십시오. 전체 색상 시스템은 references/tokens.md를 참조하십시오.

2.6 일관성 vs. 변주

일관성을 유지할 것: 폰트 패밀리, 레이블 처리(항상 Space Mono ALL CAPS), 간격 리듬, 색상 역할, 구성 요소 모양, 정렬.

화면당 정확히 한 곳에서 패턴을 깨뜨리십시오: 크기가 큰 숫자, 직사각형 중의 원형 위젯, 회색 중의 빨간색 악센트, Doto 헤드라인, 모든 것이 좁은 곳에서의 아주 넓은 간격.

이 단 하나의 깨짐이 바로 디자인입니다. 그것 없이: 메마른 그리드. 하나 이상이면: 시각적 혼란.

2.7 구성 균형

비대칭 > 대칭. 중앙 정렬 레이아웃은 평범해 보입니다. 의도적으로 불균형한 구성을 선호하십시오:

왼쪽 큼, 오른쪽 작음: 히어로 메트릭 + 메타데이터 스택.
상단 무거움: 큰 헤드라인이 상단 근처, 아래는 여백.
가장자리 고정: 중요한 요소를 화면 가장자리에 고정, 중앙은 네거티브 공간.

무거운 요소는 더 많은 요소가 아닌 더 많은 빈 공간으로 균형을 맞추십시오.

2.8 Nothing 분위기

비움을 통한 자신감. 크고 방해받지 않는 배경 영역. 공간을 채우고자 하는 유혹을 이기십시오.
작은 것에 대한 정밀함. 자간, 정확한 회색 값, 4px 간격. 미세한 결정이 공예로 이어집니다.
데이터 자체가 아름다움. 48px Space Mono의 36GB/s가 곧 시각물입니다. 일러스트레이션이 필요 없습니다.
기계적 정직함. 컨트롤은 컨트롤처럼 보여야 합니다. 토글 = 물리적 스위치. 게이지 = 계기판.
하나의 놀라운 순간. 도트 매트릭스 헤드라인. 원형 위젯. 빨간 점. 절제가 한 번의 표현적인 순간을 강력하게 만듭니다.
타악기적, 유체적이지 않음. UI 사운드를 상상해 보십시오: 클릭이지 스우시가 아님, 틱이지 차임이 아님. 기계적이고 정밀하게 느껴지는 전환을 디자인하십시오.

2.9 데이터 밀집 화면의 시각적 다양성

하나의 화면에 3개 이상의 데이터 섹션이 있을 경우, 시각적 형태를 다양화하십시오:

형태	최적 용도	무게
히어로 숫자 (큰 Doto/Space Mono)	단일 핵심 메트릭	무거움 — 한 번 사용
분할 진행 막대	목표 달성 진행 상황	중간
동심원 / 호	여러 관련 백분율	중간
인라인 컴팩트 막대	행의 보조 메트릭	가벼움
숫자만 + 상태 색상	비율 없는 값	가장 가벼움
스파크라인	시간에 따른 추세	중간
통계 행 (레이블 + 값)	단순 데이터 포인트	가벼움

주요 섹션 → 가장 무거운 처리. 보조 → 다른 형태. 3차 → 가장 가벼움. 형태는 달라지지만, 목소리는 동일하게 유지됩니다.

3. 안티 패턴 — 절대 하지 말아야 할 것

UI 크롬에 그라데이션 없음
그림자 없음. 블러 없음. 평평한 표면, 테두리 구분.
스켈레톤 로딩 화면 없음. [LOADING...] 텍스트 또는 세그먼트 스피너 사용.
토스트 팝업 없음. 인라인 상태 텍스트 사용: [SAVED], [ERROR: ...]
슬픈 표정 일러스트, 귀여운 마스코트, 여러 문단의 빈 상태 없음
테이블에 얼룩말 줄무늬 없음
채워진 아이콘, 여러 색상 아이콘, UI로 사용되는 이모지 없음
시차, 스크롤 하이재킹, 과도한 애니메이션 없음
스프링/바운스 이징 없음. 미묘한 ease-out만 사용.
카드에 border-radius 16px 초과 금지. 버튼은 알약(999px) 또는 기술적(4–8px).
데이터 시각화: 색상 도입 전에 불투명도(100%/60%/30%) 또는 패턴(실선/줄무늬/점선)으로 구분.

4. 워크플로우

폰트 선언 — 사용자에게 로드할 Google Fonts를 알립니다(references/tokens.md 참조).
모드 질문 — 다크 또는 라이트? 기본값은 없습니다.
계층 스케치 — 코드를 작성하기 전에 3개 계층을 식별합니다.
구성 — 제작 규칙 적용(섹션 2.1–2.9).
토큰 확인 — 정확한 값은 references/tokens.md를 참조합니다.
컴포넌트 구축 — 패턴은 references/components.md를 참조합니다.
플랫폼 적응 — 출력 규칙은 references/platform-mapping.md를 참조합니다.

5. 참조 파일

자세한 토큰 값, 컴포넌트 사양 및 플랫폼별 가이드:

references/tokens.md — 폰트, 타입 스케일, 색상 시스템(다크 + 라이트), 간격 스케일, 그리드, 모션, 아이콘 그래픽, 도트 매트릭스 모티프
references/components.md — 카드, 버튼, 입력, 목록, 테이블, 탐색, 태그, 세그먼트 컨트롤, 진행 막대, 차트, 위젯, 오버레이, 상태 패턴
references/platform-mapping.md — HTML/CSS, SwiftUI, React/Tailwind, 종이 출력 규칙

Nothing 디자인 시스템