Nike에서 영감을 받은 디자인 시스템

Category: 이커머스 & 리테일 스포츠 리테일. 모노크롬 UI, 대형 대문자 타이포그래피, 풀 블리드 사진.

1. 비주얼 테마 & 분위기

Nike.com은 역동적인 리테일 성당과 같습니다 — 스포츠의 폭발적인 에너지를 디지털 쇼핑 경험으로 승화시킨 사이트입니다. 디자인은 극단적인 단순함의 원칙 위에 작동합니다. 검정, 흰색, 회색으로 모든 것을 걷어내어 스포츠 사진과 제품 색상이 경쟁 없이 주인공이 되도록 합니다. 그 결과물은 웹사이트라기보다는 럭셔리 매거진의 정밀함으로 편집된 스포츠 에디토리얼에 가깝습니다. 모든 픽셀은 제품을 팔거나 제품으로 이끌기 위해 존재합니다.

“Podium CDS”(Nike 내부 Core Design System)는 공격적으로 모노크로매틱한 기반을 확립합니다. UI는 검정(#111111) 텍스트와 흰색 표면 속으로 사라지며, 땀 흘리는 선수, 공중에 뜬 신발, 경기장 에너지 같은 히어로 사진이 감성적 무게를 담당합니다. UI에 색상이 등장할 때는 거의 예외 없이 기능적입니다. 오류는 빨강, 링크는 파랑, 성공은 초록. 제품 자체가 색의 이야기입니다. 이 절제는 시각적 역설을 만들어냅니다. 인터넷에서 가장 화려한 페이지가 가장 미니멀하게 느껴지는 이유는, 모든 생동감이 인터페이스가 아닌 상품에서 비롯되기 때문입니다.

타이포그래피 시스템은 Nike 비주얼 아이덴티티의 나머지 절반입니다. Nike Futura ND — 불가능할 정도로 좁은 줄 높이(0.90)를 가진 커스텀 콘덴스드 Futura 변형 — 로 구현된 대형 대문자 헤드라인은 히어로 이미지를 타이포그래피 충격파처럼 뚫고 나옵니다. 헤드라인 아래에서는 실용적인 Helvetica Now 패밀리가 내비게이션부터 제품 설명까지 스위스 특유의 정밀한 명료함으로 처리합니다. 표현적인 디스플레이 타입과 기능적인 본문 타입 사이의 이 분리는 Nike의 브랜드 이중성을 반영합니다. 영감과 실행이 만나는 지점입니다.

Key Characteristics:

• 제품 사진만이 유일한 색상 공급원이 되도록 하는 모노크로매틱 UI (블랙/화이트/그레이)
• 히어로 이미지를 뚫고 나오는 대형 대문자 디스플레이 타이포그래피 (96px, 줄 높이 0.90)
• 보더 반경 없이 모든 가장자리를 채우는 풀 블리드 사진
• 기본 인터랙티브 요소로서의 필 형태 버튼 (30px 반경)
• 운동선수의 규율처럼 모든 측정값이 시스템에 맞물리는 8px 스페이싱 그리드
• 대형 내비게이션 이미지 카드로 구성된 카테고리 기반 쇼핑 구조
• 그림자 없음, 보더 최소화 — 표면 구분은 오직 회색 명도 차이만으로

2. 색상 팔레트 & 역할

기본

• Nike Black (#111111): 기반색 — 기본 텍스트, 버튼 배경, 내비게이션 텍스트, 히어로 오버레이. 순수 블랙(#000000)을 의도적으로 피해 미세하게 부드러운 가독성 확보
• Nike White (#FFFFFF): 기본 페이지 캔버스, 어두운 배경 위 버튼 텍스트, 카드 표면, 내비게이션 바 배경

표면 & 배경

• Snow (#FAFAFA): 가장 밝은 표면, 거의 흰색에 가까운 미묘한 구분 (—podium-cds-color-grey-50)
• Light Gray (#F5F5F5): 보조 배경, 검색 입력 필, 이미지 플레이스홀더, 로딩 스켈레톤 (—podium-cds-color-grey-100)
• Hover Gray (#E5E5E5): 호버 상태 배경, 비활성 버튼 필 (—podium-cds-color-grey-200)
• Dark Surface (#28282A): 다크/반전 섹션의 기본 배경 (—podium-cds-color-grey-800)
• Deep Charcoal (#1F1F21): 반전 기본 배경, 블랙을 제외한 가장 어두운 표면 (—podium-cds-color-grey-900)
• Dark Hover (#39393B): 어두운 배경 위 호버 상태 (—podium-cds-color-grey-700)

뉴트럴 & 텍스트

• Primary Text (#111111): 본문 텍스트, 헤딩, 내비게이션 링크 (—podium-cds-color-text-primary)
• Secondary Text (#707072): 설명 카피, 메타데이터, 타임스탬프, 가격 레이블 (—podium-cds-color-text-secondary)
• Disabled Text (#9E9EA0): 비활성 요소, 이용 불가 옵션 (—podium-cds-color-text-disabled)
• Disabled Inverse (#4B4B4D): 어두운 배경 위 비활성 텍스트 (—podium-cds-color-text-disabled-inverse)
• Border Primary (#707072): 표준 보더 색상, Secondary Text와 일치
• Border Secondary (#CACACB): 섬세한 보더, 입력 보더, 구분선 (—podium-cds-color-grey-300)
• Border Disabled (#CACACB): 비활성 보더 상태
• Border Active (#111111): 활성/포커스 보더, Primary Text와 일치

시맨틱 & 액센트

• Nike Red (#D30005): 치명적 오류, 세일 배지, 긴급 알림 (—podium-cds-color-red-600)
• Bright Red (#EE0005): Red-500, 강조를 위한 약간 밝은 빨강
• Nike Orange Badge (#D33918): 배지 텍스트, 프로모션 콜아웃 (—podium-cds-color-text-badge)
• Orange Flash (#FF5000): 표현적 오렌지 액센트 (—podium-cds-color-orange-400)
• Success Green (#007D48): 확인, 재고 있음, 긍정적 상태 (—podium-cds-color-green-600)
• Success Inverse (#1EAA52): 어두운 배경 위 성공 표시 (—podium-cds-color-green-500)
• Link Blue (#1151FF): 텍스트 링크, 정보성 하이라이트 (—podium-cds-color-blue-500)
• Info Inverse (#1190FF): 어두운 배경 위 링크 (—podium-cds-color-blue-400)
• Warning Yellow (#FEDF35): 경고 배경, 주의 배너 (—podium-cds-color-yellow-200)
• Focus Ring (rgba(39, 93, 197, 1)): 키보드 포커스 인디케이터 링

확장 색상 스펙트럼 (Podium CDS)

각 색상 램프는 캠페인과 제품 페이지의 표현적 사용을 위해 50–900 단계로 구성됩니다.

• Red: #FFE5E5 → #EE0005 → #530300
• Orange: #FFE2D6 → #FF5000 → #3E1009
• Yellow: #FEF087 → #FCA600 → #99470A
• Green: #DFFFB9 → #1EAA52 → #003C2A
• Teal: #D4FFFB → #008E98 → #043441
• Blue: #D6EEFF → #1151FF → #020664
• Purple: #E4E1FC → #6E0FF6 → #1C0060
• Pink: #FFE1F3 → #ED1AA0 → #4C012D

그라디언트 시스템

Nike는 UI 그라디언트를 사용하지 않습니다. 그라디언트가 등장할 때는 사진 방식으로 제품 히어로 배경에 적용됩니다(예: 빨간 배경에서 더 짙은 빨간 배경으로 이어지는 그라디언트 위의 빨간 신발). 디자인 시스템 자체는 단색만 사용합니다.

3. 타이포그래피 규칙

폰트 패밀리

디스플레이: Nike Futura ND (Nike 전용 커스텀 콘덴스드 Futura 변형)

• 대체 폰트: Helvetica Now Text Medium, Helvetica, Arial
• 대형 대문자 디스플레이 헤드라인에만 사용
• 특징적인 좁은 줄 높이 (0.90)와 대문자 변환

헤딩: Helvetica Now Display Medium

• 대체 폰트: Helvetica, Arial
• 24–32px 섹션 헤딩 및 제품 타이틀에 사용

Body Medium: Helvetica Now Text Medium (weight 500)

• 대체 폰트: Helvetica, Arial
• 링크, 버튼, 캡션, 강조된 본문 텍스트에 사용

Body: Helvetica Now Text (weight 400)

• 대체 폰트: Helvetica, Arial
• 표준 본문 카피, 설명, 메타데이터에 사용

Arabic: Neue Frutiger Arabic — 로케일별 대안 폰트

위계

원칙

Nike의 타이포그래피는 긴장감의 연구입니다. 디스플레이 레이어 — 0.90이라는 파괴적인 줄 높이를 가진 96px의 Nike Futura ND — 는 경기장 전광판처럼 느껴지도록 설계되었습니다. 거대하고, 압축되어 있으며, 대문자이고, 무시할 수 없습니다. 헤드라인을 전투의 함성으로 변환합니다. 디스플레이 레이어 아래에서 Helvetica Now는 임상적인 대위점을 제공합니다. 편안한 제품 탐색을 위한 넉넉한 1.75 줄 높이와 함께 스위스식 정밀 가독성을 선사합니다. 굵기 500(Medium)이 본문 텍스트 전반에서 지배적입니다. Nike의 산문에 bold의 무거움 없이 약간의 단호함을 부여하여 — 모든 문장이 자신 있는 추천처럼 읽히지, 고함처럼 읽히지 않습니다.

4. 컴포넌트 스타일링

버튼

기본

• 배경: Nike Black (#111111)
• 텍스트: White (#FFFFFF), 16px/500, Helvetica Now Text Medium
• 보더: 없음
• 보더 반경: 완전한 둥근 필 (30px)
• 패딩: ~12px 24px
• 호버: 배경이 Grey-500 (#707072)로 전환, 텍스트 호버 색상 적용
• 활성: opacity 0.5의 scale(0) 리플 효과
• 포커스: rgba(39, 93, 197, 1)의 2px box-shadow 링
• 전환: background 200ms ease

어두운 배경 위 기본

• 배경: White (#FFFFFF)
• 텍스트: Black (#111111)
• 호버: 배경이 Grey-300 (#CACACB)으로 전환

보조 (아웃라인)

• 배경: 투명
• 텍스트: Nike Black (#111111)
• 보더: 1.5px solid #CACACB (grey-300)
• 보더 반경: 30px
• 호버: 보더가 #707072로 어두워지고, 배경이 grey-200으로 변경

비활성

• 배경: Grey-200 (#E5E5E5)
• 텍스트: Grey-400 (#9E9EA0)
• 커서: not-allowed

아이콘 버튼

• 배경: Grey-100 (#F5F5F5)
• 형태: 30px 반경 (또는 원형은 50%)
• 패딩: 6px
• 호버: Grey-500 배경

카드 & 컨테이너

• 배경: White (#FFFFFF) — 대부분의 경우 눈에 보이는 카드 경계 없음
• 보더 반경: 제품 이미지 카드 0px (가장자리까지 채우는 이미지), 인터랙티브 컨테이너 20px
• 그림자: 없음 — Nike는 카드 그림자를 전혀 사용하지 않음
• 호버: 제품 카드에 리프트 효과 없음; 카드 내 텍스트 링크에 밑줄
• 제품 카드: 이미지 상단 (반경 없음), 텍스트 메타데이터 아래 12px 간격
• 카테고리 카드: 어두운 그라디언트 위 텍스트 오버레이가 있는 풀 블리드 사진
• 전환: 호버 시 이미지 교체에 opacity 200ms ease

입력 & 폼

• 배경: Grey-100 (#F5F5F5)
• 보더: 표시될 때 1px solid #CACACB, 검색에서는 보더 없음
• 보더 반경: 24px (검색 입력), 8px (폼 입력)
• 폰트: Helvetica Now Text, 16px
• 포커스: 보더가 #111111(border-active)로 전환, rgba(39, 93, 197, 1)의 2px 포커스 링
• 오류: 보더 #D30005 (치명적)
• 플레이스홀더: Grey-500 (#707072)
• 전환: border-color 200ms ease

내비게이션

• 배경: White (#FFFFFF), 고정(sticky)
• 높이: 데스크톱 ~60px
• 왼쪽: Nike Swoosh 로고 (24x24px SVG)
• 중앙: 카테고리 링크 (New & Featured, Men, Women, Kids, Sale), 16px/500 Helvetica Now Text Medium
• 오른쪽: 검색 (24px 반경 입력), 즐겨찾기, 장바구니 아이콘
• 호버: 텍스트 색상이 Grey-500 (#707072)으로 전환
• 모바일: 햄버거 메뉴, 전체 화면 오버레이
• 상단 배너: 어두운 배경(#111111)과 흰색 텍스트의 프로모션 메시지 바

이미지 처리

• 히어로 이미지: 풀 블리드, 보더 반경 없음, 가장자리까지 채움
• 제품 그리드: 정사각형 (1:1) 또는 4:3 비율, 보더 반경 없음
• 카테고리 카드: 16:9 또는 4:3, 텍스트 오버레이가 있는 풀 블리드
• 이미지 플레이스홀더: Grey-100 (#F5F5F5) 단색 배경
• 지연 로딩: 네이티브 loading=“lazy”, 스켈레톤은 #F5F5F5 배경 사용
• 제품 호버: 보조 이미지 교체 (정면 → 측면 뷰)

프로모션 배너

• 흰색 텍스트가 있는 풀 너비 다크(#111111) 배경
• 촘촘한 패딩 (세로 8-12px)
• 중앙 정렬 텍스트, 12px/500 Helvetica Now Text Medium
• 배송 프로모션, 멤버 혜택, 세일 공지에 사용

5. 레이아웃 원칙

스페이싱 시스템

기본 단위: 4px (기본 그리드는 8px 배수)

그리드 & 컨테이너

• 최대 컨테이너 너비: 1920px
• 표준 콘텐츠 너비: 수평 패딩 포함 ~1440px
• 제품 그리드: 데스크톱 3열, 태블릿 2열, 모바일 1열
• 카테고리 그리드: 풀 블리드 이미지의 3열
• 그리드 간격: 제품 카드 사이 4-12px (의도적으로 촘촘하게)
• 수평 패딩: 데스크톱 48px, 태블릿 24px, 모바일 16px

여백 철학

Nike의 여백 전략은 의도적으로 공격적입니다 — 패션 브랜드의 여유롭고 숨 쉬는 방식이 아니라, 모든 픽셀을 콘텐츠 또는 의도된 비움으로 채우는 압축되고 고밀도의 방식입니다. 제품 그리드는 풍요로움과 선택의 감각을 만들어내기 위해 최소한의 간격(4-12px)을 사용합니다. 섹션 구분은 쇼핑 맥락을 분리하기 위해 넉넉합니다(48-80px). 전체적인 효과는 잘 정리된 스포츠 대형 매장처럼 — 제품으로 가득 차 있으면서도 탐색 가능한 — 느낌을 줍니다.

보더 반경 스케일

6. 깊이 & 엘리베이션

Nike의 엘리베이션 철학은 극단적으로 플랫합니다. 카드 그림자도, 호버 리프트도, 플로팅 요소도 없습니다. 깊이는 오직 색상으로만 전달됩니다 — 어두운 섹션은 후퇴하고, 밝은 섹션은 전진하며, 회색 변화가 상태 변화를 나타냅니다. 이 평탄함은 Nike의 스포티하고 군더더기 없는 브랜드 개성을 강화합니다. 시각적 허식 없이, 직접적인 소통만 있습니다. 시스템 전체에서 유일한 “그림자”는 1px 인셋 구분선과 접근성을 위해 필수적인 포커스 링뿐입니다.

장식적 깊이

• 히어로 사진 오버레이: 텍스트 가독성을 위해 풀 블리드 사진 위에 어두운 그라디언트 스크림 적용
• 제품 배경 그라디언트: 히어로 제품 이미지 뒤의 컬러 배경 (예: 빨간 그라디언트 위의 빨간 신발)
• 배너 바: 페이지 상단의 단색 다크(#111111) 프로모션 스트립

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 모든 기본 텍스트에 Nike Black (#111111) 사용 — 순수 #000000은 절대 사용 금지
• 버튼을 필 형태(30px 반경)로 유지하고 기본/보조 변형으로 제한
• 히어로 섹션에 풀 블리드, 가장자리를 채우는 사진 사용 — 이미지에 보더 반경 없음
• 제품 사진이 모든 색상 생동감을 제공하도록 하고 UI는 모노크로매틱으로 유지
• Nike Futura ND 대문자는 디스플레이 헤드라인(96px 이상)에만 사용
• 풍요롭고 가득 찬 느낌을 위해 촘촘한 제품 그리드 간격 유지 (4-12px)
• 모든 입력 및 플레이스홀더 배경에 Grey-100 (#F5F5F5) 사용
• 색상은 시맨틱 의미에만 예약 (빨강=오류, 초록=성공, 파랑=링크)
• 모든 인터랙티브 텍스트 요소에 굵기 500(Medium) 사용

하지 말아야 할 것

• 카드에 그림자 추가 금지 — Nike의 엘리베이션 모델은 완전히 플랫
• 제품 이미지에 보더 반경 사용 금지 — 둥근 모서리는 UI 요소에만 적용
• UI 요소에 회색 스케일을 벗어난 브랜드 색상 도입 금지
• 24px 미만의 Nike Futura ND 사용 금지 — 전적으로 디스플레이용 서체
• 호버 리프트 효과 추가 금지 — Nike 카드는 호버 시 애니메이션 없음
• 버튼이나 링크에 regular weight(400) 사용 금지 — 항상 500 사용
• UI 요소 뒤에 컬러 배경 배치 금지 — 색상은 제품 맥락에만 예약
• 카드당 두 단계 이상의 텍스트 위계 사용 금지 (타이틀 + 본문)
• 장식적 구분선 추가 금지 — 1px 인셋만이 유일한 구분선 패턴
• 대비 약화 금지 — Nike 디자인은 의도적으로 흑백 대비를 최대로 밀어붙임

8. 반응형 동작

브레이크포인트

터치 타겟

• 최소 터치 타겟: 44x44px (WCAG AAA)
• 모바일 내비게이션 아이콘: 48x48px 터치 영역
• 제품 카드: 전체 표면이 탭 가능
• 필터 필: 최소 높이 36px, 12px 패딩

접기 전략

• 내비게이션: 전체 카테고리 링크 → 960px 미만에서 햄버거 메뉴로; 검색, 즐겨찾기, 장바구니 아이콘은 계속 표시
• 제품 그리드: 960px에서 3열 → 2열 → 640px에서 1열
• 히어로 섹션: 디스플레이 텍스트가 96px → 64px → 48px로 축소; 히어로 이미지는 모든 크기에서 풀 블리드 유지
• 카테고리 카드: 3열 → 2열 → 풀 블리드 이미지 유지한 채 1열
• 섹션 패딩: 뷰포트 축소에 따라 80px → 48px → 32px → 24px
• 프로모션 배너: 텍스트 줄바꿈 또는 잘림, 어두운 배경 유지

이미지 동작

• Nike CDN(c.static-nike.com)을 통한 너비 파라미터가 있는 반응형 이미지
• 제품 이미지: 다중 해상도 srcset (w_320, w_640, w_960, w_1920)
• 히어로 이미지: 모든 브레이크포인트에서 풀 블리드, 비율 변경 (데스크톱 16:9 → 모바일 4:3)
• 지연 로딩: 네이티브 loading=“lazy”, 로드 중 grey-100 플레이스홀더
• 아트 디렉션: 데스크톱과 모바일 구성 사이에서 히어로 크롭 변경

9. 에이전트 프롬프트 가이드

색상 빠른 참조

• 기본 CTA: Nike Black (#111111)
• 배경: White (#FFFFFF)
• 보조 표면: Light Gray (#F5F5F5)
• 헤딩 텍스트: Nike Black (#111111)
• 본문 텍스트 / 호버: Secondary Text (#707072)
• 보더: Border Secondary (#CACACB)
• 오류: Nike Red (#D30005)
• 링크: Link Blue (#1151FF)

컴포넌트 프롬프트 예시

• “가장자리까지 보더 반경 없이 채우는 풀 블리드 사진, 텍스트용 어두운 그라디언트 오버레이, Nike Futura 스타일의 96px/500 대형 대문자 헤드라인(줄 높이 0.90), Nike Black (#111111) 필 버튼(30px 반경)으로 구성된 제품 히어로 섹션을 만드세요”
• “정사각형 이미지(보더 반경 없음), 카드 사이 4px 간격, 16px/500 Nike Black (#111111)의 제품명, 14px/500 가격, Grey-500 (#707072)의 보조 텍스트로 구성된 3열 제품 카드 그리드를 디자인하세요”
• “왼쪽 정렬 로고, 호버 색상 #707072의 16px/500 (#111111) 중앙 정렬 카테고리 링크, 오른쪽 정렬 검색(24px 반경, #F5F5F5 배경), 즐겨찾기, 장바구니 아이콘이 있는 고정 흰색 내비게이션 바를 만드세요”
• “#111111 배경, 흰색 12px/500 중앙 정렬 텍스트, 8px 세로 패딩 — 풀 너비, 보더 반경 없음으로 구성된 프로모션 배너 스트립을 만드세요”
• “투명 배경, 1.5px #CACACB 보더, 30px 필 반경, 16px/500 #111111 텍스트, 호버 시 보더가 #707072로 어두워지는 보조 아웃라인 버튼을 디자인하세요”

반복 작업 가이드

이 디자인 시스템으로 생성된 기존 화면을 수정할 때:

1. 한 번에 하나의 컴포넌트에 집중하세요
2. 이 문서의 구체적인 색상 이름과 헥스 코드를 참조하세요
3. 기억하세요: 제품 사진이 색상입니다 — UI는 모노크로매틱으로 유지
4. 상태 변화에는 회색 스케일을 사용하세요: #F5F5F5 → #E5E5E5 → #CACACB → #707072
5. UI에서 너무 화려하다고 느껴진다면, 그것은 그럴 가능성이 높습니다 — Nike는 UI를 그레이스케일로 유지합니다
6. 디스플레이 타입(Nike Futura)은 항상 대문자여야 하며 24px 미만으로 사용하지 마세요
7. 본문 타입(Helvetica Now)은 인터랙티브 요소에 거의 항상 굵기 500을 사용해야 합니다