NMWC의 시각 아이덴티티 시스템. 로고, 색, 타이포그래피, 아이코노그래피, 모션의 일관된 룰. 모든 시각 표현은 이 문서를 기준으로 합니다.
4단의 pill이 쌓이는 stack. 각 pill은 자기 SILO를 운영하는 builder — collective로 모였지만 개별로 존재합니다. NMWC는 한 SILO씩 쌓이며 성장합니다.
NMWC의 시그니처 마크는 4-step Pill Stack. 4단의 pill이 쌓여 만드는 stack — 한 SILO씩 더해지며 collective를 이루는 NMWC의 성장 메타포. 각 pill은 개별 builder로 존재합니다.
원본 SVG: nmwc-logo.svg (currentColor 사용). 적용된 페이지의 CSS color를 상속.
마크 주변 최소 여백 = 1× pill height (마크 내부 pill 두께 = 20px 기준).
워드마크 주변 최소 여백 = cap height의 0.5× (SUIT 700 기준 약 16~20px).
컨텍스트별 최소 크기. 마크는 실제 픽셀로 렌더되어 있어 화면에서 직접 가독성을 확인할 수 있습니다.
동일 마크가 16px부터 128px까지 어떻게 살아남는지. pill 처리(rx=10) 덕분에 16px에서도 떨어지지 않음.
실제 적용 컨텍스트의 모킹 · 앱 아이콘 · 프로필 · 로딩 · 헤더 · 명함 · 스티커.
index.html 홈 hero에 적용된 3D 변형. 평면 마크의 4단 pill 구조를 dark matte stone으로 입체화하고 cosmic + desert atmosphere에 띄운 시그니처 표현. 평면 마크의 사용 룰(회전·비례·색)은 그대로 유효하며, 본 트리트먼트는 hero / splash / launch 컨텍스트 한정.
nmwc-3d-mark.html · three.js v0.165 · ACESFilmic tone| 속성 | 값 | 비고 |
|---|---|---|
| 라이브러리 | three/addons/geometries/RoundedBoxGeometry | segments 24 · radius 0.27 |
| pill spec (w · y) | [3.50, +1.00] · [2.59, +0.34] · [1.69, −0.34] · [0.85, −1.00] | 너비 축소율은 평면 R12-4와 동일 |
| slab height | 0.55 | — |
| slab depth | 0.75 | — |
| property | 값 | 역할 |
|---|---|---|
| type | MeshPhysicalMaterial | PBR |
| color | #030303 | near-pure black — key 광원이 닿는 면만 형태 노출 |
| metalness | 0.0 | 완전 무광 |
| roughness | 0.92 | — |
| envMapIntensity | 0.18 | 환경광 거의 흡수 |
| sheen | 0.22 · color #ffffff · roughness 0.78 | 가장자리 미세 광택 |
| normalMap | 절차적 concrete · canvas 1024² · 8000 micro-divot · repeat 2×2 | normalScale 0.14 |
모든 광원은 form 외부에서만 — 내부 발광 금지.
| 광원 | spec | 비고 |
|---|---|---|
| HDRI | Poly Haven studio_small_09_1k.hdr | ambient bounce 전용 |
| Fallback env | RoomEnvironment via PMREM | exposure 0.04 |
| HemisphereLight | top #ffffff / bottom #000000 | intensity 0.10 |
| DirectionalLight (key) | pos (5, 6, 4) | intensity 1.50 |
| DirectionalLight (fill) | pos (−4, −1, 3) | intensity 0.15 |
| Tone mapping | ACESFilmicToneMapping | exposure 1.0 · SRGBColorSpace |
| Camera | PerspectiveCamera FOV 36 · z 7.5 | 정중앙 고정 |
모든 배경 효과는 form-independent. 마크가 없어도 같은 분위기가 성립.
| 레이어 | 구현 | 비고 |
|---|---|---|
| Canvas color | var(--canvas) #090909 | base |
| Horizon glow band | linear-gradient(180deg, transparent 38%, rgba(255,255,255,0.028) 50%, transparent 62%) | 수평선 힌트 |
| Vignette | radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%) | cinematic falloff |
| Film grain | SVG feTurbulence · fractalNoise · baseFreq 0.85 · numOctaves 2 · alpha 0.09 · 240×240 repeat | surface texture |
| Cosmic starfield | three.js Points 380개 · z −2~−22 | y rotation ~22분/회전 |
| Drifting dust | three.js Points 220개 · rise 0.0006~0.0028/frame + side drift · wrap at y=8 → −8 | "desert wind in space" |
모든 background-image는 background-attachment: fixed, repeat는 grain 레이어만.
(hover: hover) 전용).mark-3d-fog (blur 5px, opacity 0.55) + .mark-3d-sharp (opacity 1.0)--mx / --my (mousemove + requestAnimationFrame throttle).layer-sharp만 사용 (.layer-fog는 비활성 — fog halo 제거)| 단계 | spec | 비고 |
|---|---|---|
| Entrance | ENTRANCE_DUR 1500ms · easeOutCubic · ENTRANCE_DROP 4.8 · ENTRANCE_STAGGER 0.12 fraction | bottom pill이 먼저 라이즈 → top pill 마지막 |
| Typo fade-in | 1.1s ease-out · delay 0.15s · trigger body.mark-entered | entrance 완료 후 |
| Idle spin | group y rotation +0.0010/frame (드래그 중 +0.0002로 감속) | 지속 회전 |
| Drag rotation | pointer delta · yaw·pitch × 0.006 rad/px · pointerup 후 inertia × 0.93 decay · pitch clamp ±1.1 | cursor grab↔grabbing, mobile touch-action: none |
| Starfield drift | y rotation +0.00008/frame | — |
| Dust drift | per-particle velocity · y wrap at ±8 | — |
@media (prefers-reduced-motion: reduce) — 3D 캔버스·entrance 전부 비활성, 타이포 즉시 표시@media (hover: none) — sharp 레이어/스포트라이트 마스크 제거 → fog 단독@media (max-width: 720px) — 타이포 wrap 허용 (.layer .title { white-space: normal })Reference 구현: index.html · three.js v0.165 · importmap 기반 ESM.
3색의 미니멀 팔레트. Black + White + Accent로 모든 brand 표현을 해결합니다. 의미 색(success/warning/error)은 Product 가이드에서 정의.
nmwc-framer-tokens.css 단일 출처. 디자인과 구현 양쪽이 같은 토큰을 본다.
monochrome 그리드 위에 떨어뜨리는 oversized atmospheric tile. 페이지당 한두 장이 적정.
모든 텍스트는 WCAG AA 이상 보장:
#ffffff) on Canvas (#090909) ≈ 21.0:1 (AAA)#0099ff) on Canvas ≈ 5.4:1 (본문 AA 통과, 18px+ AAA)#999999) on Canvas ≈ 6.5:1 (AA)SUIT Variable 단일 폰트 시스템. 한글+라틴 통합 디자인. weight 100~900 연속 변화로 모든 hierarchy 해결.
sun-typeface가 배포하는 무료 variable font. MIT 라이선스. CDN으로 즉시 임베드.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT@2/fonts/variable/woff2/SUIT-Variable.css">
body {
font-family: 'SUIT Variable', 'SUIT', -apple-system, sans-serif;
}샘플 텍스트는 weight 차이를 보여주기 위한 것 · 워드마크는 항상 700 + letter-spacing 0.04em 고정.
5개 spec 속성 각각의 시각 효과. 우측 비교 — 좌(스펙대로) vs 우(스펙 위반). 모든 wordmark는 spec을 정확히 지켜야 합니다.
코드·데이터·파일경로용. 시스템 mono stack.
font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;12-tier scale. Display는 SUIT Variable 500의 음수 트래킹이 핵심.
Lucide React 표준 셋 + NMWC 커스텀 아이콘. 마크의 pill 언어와 일치하는 round cap. 이 섹션은 브랜드 캐넌 — 제품 UI 적용 사이즈 표준·컨텍스트별 예시는 Product § Iconography 참조.
currentColor · 텍스트 색을 상속제품 UI는 Lucide React 셋을 기본 사용. CDN: https://lucide.dev
import { ChevronRight, Settings, User } from 'lucide-react';
<ChevronRight size={24} strokeWidth={1.5} />마크의 4-step pill stack 언어를 차용한 커스텀 아이콘 (추후 확장):
사진과 그래픽의 톤 가이드. 마크의 미니멀·하이콘트라스트 언어 유지.
마크의 정밀함과 일치하는 모션. 빠르고 절제된 transition. 무한 반복·과한 bounce 금지.
카드 위에 호버하면 dot이 해당 timing function으로 트래블합니다. 곡선의 가로축은 시간, 세로축은 진행률.
카드 위에 호버하면 dot이 해당 시간만큼 트래블합니다. 150ms와 800ms 차이를 직접 비교해 보세요.
--motion-micro
--motion-fast
--motion-standard
--motion-medium
--motion-slow
--motion-brand
마크의 4단이 위에서 아래로 순차 등장. 80ms stagger · 총 440ms.
Hero 3D Mark의 entrance · idle spin · mouse parallax는 위 룰의 예외 — splash 컨텍스트 한정으로 무한 idle spin과 mouse-driven tilt 허용. 상세 스펙은 01 · Logo › 3D Mark · Hero Treatment 참조.
제공 자산 파일 목록. 모두 SVG (벡터). 색은 currentColor로 CSS에서 제어.
| 파일 | 용도 | 비고 |
|---|---|---|
nmwc-logo.svg | 원본 마크 | currentColor |
nmwc-logo-white.svg | 다크 배경 강제 | #ffffff hardcoded |
nmwc-logo-black.svg | 라이트 배경 강제 | #090909 hardcoded |
nmwc-favicon.svg | 브라우저 탭 (modern) | SVG favicon · 모든 사이즈 대응 |
nmwc-favicon-32.png | 브라우저 탭 (legacy) | 32×32 PNG fallback |
nmwc-apple-touch-icon.png | iOS 홈 화면 | 180×180 · 검정 배경 + 흰색 마크 |
nmwc-og.png | OG 소셜 공유 | 1200×630 · 마크 + 워드마크 + tagline |
※ 소스 SVG는 .assets-source/에 보관 (apple-touch-icon-source.svg, og-source.svg). PNG 재생성 시 qlmanage + sips 파이프라인 사용. favicon.ico multi-size는 도구(icoutils/ImageMagick) 부재로 SVG favicon + PNG fallback 패턴으로 대체.