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

Category: 전자상거래 및 소매 전자상거래 플랫폼. 다크 퍼스트 시네마틱, 네온 그린 강조색, 초경량 타이포그래피.

1. 비주얼 테마 및 분위기

Shopify.com은 다크 퍼스트의 디지털 극장입니다——커머스 플랫폼을 영화 시사회처럼 연출하는 웹사이트입니다. 전체 경험은 깊은 숲의 초록빛이 아주 희미하게 담긴 거의 검은 표면（#02090A、#061A1C、#102620）위에서 펼쳐지며, SaaS 마케팅 페이지라기보다 테크 키노트의 독점 제품 공개 같은 야간 분위기를 만들어냅니다. 이 어둠은 차갑거나 기업적이지 않습니다——어두운 강당 맨 앞줄에 앉아 있는 것 같은, 럭셔리 경험의 따뜻하게 감싸는 어둠입니다.

타이포그래피는 부정할 수 없는 주인공입니다. NeueHaasGrotesk——세련된 Helvetica의 후계자——은 기념비적인 크기（96px）와 믿기 어려울 만큼 가는 굵기（330-400）로 등장하여, 잉크로 인쇄된 것이 아니라 빛으로 새겨진 것 같은 헤드라인을 만들어냅니다. ss03 OpenType 기능은 자형에 독특한 개성을 부여하여 Shopify의 타이포그래피를 일반적인 Helvetica 사용과 차별화합니다. 디스플레이 레이어 아래에서, Inter Variable은 외과적 정밀도로 본문 텍스트를 처리하며, 마찬가지로 특이한 가변 굵기（420、450、550）를 사용합니다——이것들은 전통적인 굵기 정류소 사이의 공간에 존재합니다. 이 정밀함은 모든 세부 사항에 심혈을 기울이는 회사의 신호입니다.

색상은 극도의 절제로 사용됩니다. 주요 강조색은 Shopify 네온 그린（#36F4A4）——포커스 링과 강조 하이라이트에만 등장하는 전기적인 민트 색상으로, 어두운 캔버스에 생물 발광 신호처럼 박동합니다. 더 부드러운 그린 틴트（알로에 #C1FBD4、피스타치오 #D4F9E0）가 분위기 있는 워시를 제공합니다. 흰색은 어두운 표면에서 유일하게 중요한 텍스트 색상이며, 아연 기반의 뉴트럴 스케일（#A1A1AA부터 #3F3F46）이 조용한 정보의 계층 구조를 처리합니다. 결과적으로 커머스 기술이 SF 미래에 속하는 것처럼 느끼게 만드는 디자인이 탄생합니다.

Key Characteristics：

• 깊은 숲의 청록색 언더톤을 가진 다크 퍼스트 디자인（순수한 검정 아님）
• 기념비적인 크기（96px）의 초경량 디스플레이 타이포그래피（굵기 330）가 만드는 환상적인 존재감
• 어둠에 대비한 단일 고에너지 강조색으로서의 네온 그린（#36F4A4）
• 주요 인터랙티브 형태로서의 풀 필 버튼（9999px 반경）
• 사진적 깊이감을 만드는 다층 박스 그림자
• 어두운 UI 맥락에 내장되어 주변 어둠과 어우러지는 제품 스크린샷
• 텍스트 계층을 위한 아연 기반 뉴트럴 스케일——따뜻함과 차가움의 균형

2. 컬러 팔레트 및 역할

프라이머리

• Shopify 화이트（#FFFFFF）：어두운 표면의 기본 텍스트, 버튼 채우기, 고대비 요소
• Shopify 블랙（#000000）：바디 배경, 흰색 버튼 위의 텍스트, 최대 대비 기반（—color-shade-100）

세컨더리 및 강조색

• 네온 그린（#36F4A4）：시그니처 강조색——포커스 링, 인터랙티브 하이라이트, 활성 상태 인디케이터. 전기적이고 생물 발광적
• 알로에（#C1FBD4）：장식적 배경, 분위기 있는 카드를 위한 부드러운 그린 워시（—color-aloe-10）
• 피스타치오（#D4F9E0）：미묘한 표면 차별화를 위한 가장 밝은 그린 틴트（—color-pistachio-10）

서피스 및 배경색

• 보이드（#000000）：루트 페이지 배경——최대 깊이를 위한 진정한 검정
• 딥 틸（#02090A）：카드 서피스, 콘텐츠 컨테이너——그린 언더톤이 있는 거의 검정
• 다크 포레스트（#061A1C）：뚜렷한 그린 특성을 가진 섹션 배경
• 포레스트（#102620）：올라온 어두운 표면, 헤더 배경——가장 따뜻한 어두운 음영
• 다크 카드 보더（#1E2C31）：어두운 표면의 카드 테두리, 미묘한 경계 정의

뉴트럴 및 텍스트（아연 스케일）

• Shade-30（#D4D4D8）：가장 밝은 뉴트럴, 어두운 곳에서 거의 보이지 않는 테두리（—color-shade-30）
• 뮤트 텍스트（#A1A1AA）：보조 텍스트, 메타데이터, 설명——조용한 목소리
• Shade-50（#71717A）：3차 텍스트, 타임스탬프, 가장 중요도가 낮은 정보（—color-shade-50）
• Shade-60（#52525B）：비활성 텍스트, 장식적 뉴트럴（—color-shade-60）
• Shade-70（#3F3F46）：미묘한 구분선, 거의 보이지 않는 UI 경계（—color-shade-70）
• 라이트 보더（#E4E4E7）：밝은 표면의 테두리（드물게——라이트 모드 모달에서만）

시맨틱 및 강조색

• Link Muted（#9797A2）：밑줄 장식이 있는 뮤트 링크 텍스트
• Link Sage（#9DABAD）：청록색 틴트의 뮤트 링크
• Link Lavender（#BDBDCA）：더 밝은 링크 변형
• Link Mint（#99B3AD）：테마 섹션을 위한 그린 틴트 링크 변형

그라데이션 시스템

• 다크 틸 워시：#102620 중심에서 #02090A 가장자리로의 방사형 그라데이션——제품 쇼케이스 뒤에 사용
• 그린 애트모스페릭：히어로 섹션 뒤의 미묘한 그린 틴트 환경 그라데이션, 단색 없이 깊이감 형성
• 스포트라이트：검정으로 페이드아웃되는 집중된 밝은 영역——키노트 스타일의 프레젠테이션 조명 연출

3. 타이포그래피 규칙

폰트 패밀리

디스플레이： NeueHaasGrotesk（세련된 Helvetica의 후계자, 가변 폰트）

• 폴백：Helvetica、Arial、sans-serif
• OpenType 기능：ss03（스타일리스틱 세트 3——독특한 자형 대안）
• 사용 가능한 굵기：330、360、400、500、750（가변）
• 모든 헤딩, 히어로 텍스트, 대형 디스플레이 요소에 사용

바디： Inter-Variable

• 폴백：Helvetica、Arial、sans-serif
• OpenType 기능：ss03
• 사용 가능한 굵기：400、420、450、500、550（가변）
• 본문 텍스트, 링크, 버튼, UI 요소에 사용

모노： ui-monospace

• 폴백：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
• 코드 스니펫, 데이터 레이블, 기술적 콘텐츠에 사용

계층 구조

원칙

Shopify의 타이포그래피는 가변 폰트 정밀도의 걸작입니다. 디스플레이 레이어는 거의 완전히 굵기 330-400으로 구성되어 있습니다——투영된 빛처럼 어두운 배경 위에 떠 있는 것 같은, 깃털처럼 가벼운 텍스트입니다. 이는 대부분의 SaaS 사이트가 취하는 굵고 무거운 접근 방식과 정반대입니다：다른 사이트들이 소리를 지르는 곳에서 Shopify는 거대한 크기로 속삭입니다. 굵기 330의 96px 헤드라인은 거대한 크기와 섬세한 획의 역설을 만들어내어——기념비적이면서도 섬세하게 느껴집니다. ss03 OpenType 기능은 특정 글자（아마도 ‘a’、‘g’ 및 특정 숫자）를 더 세련된 모습으로 만드는 스타일리스틱 세트를 활성화하여, Shopify의 타이포그래피를 표준 Helvetica Neue 사용과 차별화합니다. Inter Variable은 외과적 정밀도로 바디 레이어를 처리하며, 전통적인 정류소 사이에 존재하는 420, 550 같은 굵기를 사용합니다——모든 텍스트가 필요한 정확한 시각적 무게를 갖습니다.

4. 컴포넌트 스타일링

버튼

프라이머리（화이트 필）

• 배경：화이트（#FFFFFF）
• 텍스트：블랙（#000000）
• 테두리：2px solid transparent
• 테두리 반경：풀 필（9999px）
• 패딩：12px 26px 12px 16px（비대칭——시각적 균형을 위해 오른쪽 패딩을 더 크게）
• 호버：약간의 불투명도 감소 또는 배경 이동
• 포커스：2px #36F4A4（네온 그린）아웃라인 링
• 트랜지션：all 200ms ease

세컨더리（고스트/아웃라인）

• 배경：투명
• 텍스트：화이트（#FFFFFF）
• 테두리：2px solid 화이트（#FFFFFF）
• 테두리 반경：풀 필（9999px）
• 패딩：12px 26px 12px 16px
• 호버：블랙 텍스트의 화이트 배경으로 채우기
• 포커스：2px #36F4A4 아웃라인

배지/태그（뉴트럴 필）

• 배경：rgba(255, 255, 255, 0.2)（서리 유리）
• 텍스트：화이트（#FFFFFF）
• 테두리：없음
• 테두리 반경：약간 둥글게（4px）
• 패딩：12px 16px
• 폰트：16px 레귤러

카드 및 컨테이너

• 배경：어두운 페이지에서 딥 틸（#02090A）
• 테두리：1px solid #1E2C31（다크 카드 보더）——거의 보이지 않는 경계
• 테두리 반경：표준 카드 8px, 피처드 카드 12px, 상단 둥근 카드 20px 20px 0 0
• 그림자：다층 시스템：
  • 정지：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
  • 인셋 흰색 하이라이트가 미묘한 상단 테두리 글로우를 생성
• 호버：그림자가 확장되고 카드가 약간 밝아질 수 있음
• 트랜지션：box-shadow 300ms ease, transform 200ms ease

인풋 및 폼

• 배경：투명 또는 다크 포레스트（#061A1C）
• 텍스트：화이트（#FFFFFF）
• 테두리：1px solid #3F3F46（Shade-70）
• 테두리 반경：8px
• 패딩：12px 16px
• 포커스：2px solid #36F4A4（네온 그린 포커스 링）
• 플레이스홀더：Shade-50（#71717A）
• 트랜지션：border-color 200ms ease

내비게이션

• 배경：투명（어두운 히어로 위에 오버레이）, 스크롤 시 포레스트（#102620）가 됨
• 높이：약 64px
• 왼쪽：Shopify 워드마크 로고（SVG, 어두운 배경에 흰색）
• 중앙/오른쪽：18px/500 NeueHaasGrotesk 내비 링크, 흰색, 자간 0.72px
• CTA：화이트 필 버튼 「Start for free」（오른쪽）
• 보조 CTA：흰색 테두리의 고스트 버튼
• 호버：링크가 뮤트 텍스트（#A1A1AA）로 변하거나 밑줄 생성
• 모바일：햄버거 메뉴, 풀스크린 다크 오버레이
• 트랜지션：스크롤 시 배경 300ms ease

이미지 처리

• 제품 스크린샷：어두운 UI 맥락에 내장되어 주변 어둠과 어우러짐
• 관리 인터페이스 프리뷰：미묘한 카드 테두리가 있는 어두운 배경에 표시
• 가로세로 비율：다양——히어로 이미지는 넓게（약 16:9）, 피처 샷은 유연하게
• 모든 이미지는 어두운 컨테이너 안에 플러시하게 배치——밝은 테두리나 프레임 없음
• 어두운 플레이스홀더 서피스를 가진 지연 로딩

신뢰 지표

• 통계를 눈에 띄게 표시：「15+」（년），「150M+」（구매자）
• NeueHaasGrotesk로 디스플레이 크기의 숫자
• 파트너/개발자 에코시스템 콜아웃 섹션
• 페이지 흐름에 통합된 다크 테마 추천사

5. 레이아웃 원칙

간격 시스템

기본 단위：8px

그리드 및 컨테이너

• 최대 컨테이너 너비：약 1280px（가운데 정렬）
• 히어로：전체 너비, 가장자리에서 가장자리로 이어지는 어두운 배경에 가운데 정렬 텍스트
• 피처 섹션：텍스트와 제품 스크린샷의 2열 레이아웃
• 통계 섹션：큰 숫자를 포함한 가로 레이아웃
• 수평 패딩：데스크탑 64px, 태블릿 32px, 모바일 16px
• 그리드 간격：주요 콘텐츠 블록 사이 24-32px

여백 철학

Shopify의 여백 전략은 연극적입니다. 섹션들은 광대한 어두운 공간으로 구분됩니다——80px에서 120px의 순수한 검은 호흡 공간——웹페이지가 아닌 프레젠테이션의 페이싱을 만들어냅니다. 각 콘텐츠 블록은 키노트 스타일 스크롤에서 독립적인 「슬라이드」입니다. 섹션 내부에서는 간격이 더 촘촘하고 의도적이어서, 광대한 공허 속에 초점 밀도를 만들어냅니다. 매크로 레벨의 여백과 마이크로 레벨의 정밀함 사이의 대비가 사이트에 시네마틱한 리듬을 부여합니다.

테두리 반경 스케일

6. 깊이와 고도

Shopify의 그림자 시스템은 유독 정교합니다. 단일 값 그림자 대신, 카드는 누적된 다층 접근 방식을 사용합니다：경계 정의를 위한 1px 링, 자연스러운 빛의 감쇠를 위한 2px/4px/8px 점진적 블러, 상단 조명 유리 표면을 시뮬레이션하는 섬세한 인셋 화이트 글로우（rgba(255,255,255,0.03)）. 어두운 배경에서는 그림자가 이미 어두운 표면에서 더 어두워지기 때문에, 그림자는 전통적인 고도보다 「앰비언트 오클루전」처럼 기능합니다——카드가 위에 떠 있는 것이 아니라 표면 속으로 약간 가라앉는 것처럼 보입니다.

장식적 깊이

• 다크 틸 그라데이션：히어로 섹션과 제품 쇼케이스 뒤의 앰비언트 방사형 워시
• 스포트라이트 효과：검정으로 페이드아웃되는 밝은 중심 영역, 키노트 스타일의 연극적 조명 연출
• 엣지 글로우：인셋 박스 그림자를 통한 어두운 카드의 미묘한 밝은 색 테두리
• 그린 애트모스페릭 헤일로：브랜드 강조색을 반향하는 배경 그라데이션의 희미한 그린 틴트

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

해야 할 것

• 깊이를 위해 다크 틸-블랙 서피스 계층（보이드 → 딥 틸 → 다크 포레스트 → 포레스트）을 사용한다
• 디스플레이 타이포그래피를 굵기 330-400으로 유지한다——환상적인 가벼움이 디자인의 시그니처
• 네온 그린（#36F4A4）을 포커스 상태와 핵심 강조 하이라이트에만 사용한다
• 모든 프라이머리 CTA 버튼에 9999px 반경을 적용한다——풀 필은 타협할 수 없다
• 카드 고도에 다층 그림자 시스템을 사용한다——단일 그림자는 평평해 보인다
• 모든 텍스트에서 ss03 OpenType 기능을 유지한다——타이포그래피 아이덴티티의 일부
• 본문 텍스트에 Inter Variable, 헤딩에 NeueHaasGrotesk를 사용한다——역할을 혼합하지 않는다
• 시네마틱한 페이싱을 위해 섹션 사이에 극적인 간격（80px+）을 만든다

하지 말아야 할 것

• 어두운 배경의 텍스트에 순수한 검정（#000000）을 사용하지 않는다——흰색（#FFFFFF）만 사용한다
• 따뜻한 색상（오렌지, 빨강, 노랑）을 도입하지 않는다——팔레트는 엄격하게 쿨 계열（그린, 틸, 뉴트럴）
• NeueHaasGrotesk 본문 텍스트에 500 이상의 굵기를 사용하지 않는다——무거운 굵기는 환상적인 느낌을 깨뜨린다
• 큰 표면에 그린 강조색을 적용하지 않는다——네온 그린은 작고 정밀한 하이라이트에만 사용
• 인터랙티브 요소에 날카로운 모서리（0px 반경）를 사용하지 않는다——모든 것을 둥글게
• 밝은 배경을 추가하지 않는다——다크 테마는 근본적인 것이며 선택 사항이 아니다
• 단일 레이어 박스 그림자를 사용하지 않는다——누적 접근 방식이 시스템
• 본문 텍스트의 줄 높이를 1.56 이상으로 설정하지 않는다——Shopify의 텍스트는 비교적 컴팩트
• 같은 크기/역할에서 NeueHaasGrotesk와 Inter를 혼합하지 않는다——굵기 스케일이 다르다
• 헤딩에 0 미만의 자간을 사용하지 않는다——Shopify 헤딩은 중립 또는 양수 트래킹

8. 반응형 동작

브레이크포인트

터치 타겟

• 최소 터치 타겟：44x44px（WCAG AAA）
• 필 버튼：최소 48px 높이에 넉넉한 수평 패딩
• 내비 링크：44px 터치 영역
• 카드 서피스：링크된 경우 카드 전체를 탭 가능

접힘 전략

• 내비게이션：전체 수평 링크 → 1024px 이하에서 햄버거 메뉴；로고와 CTA 버튼은 표시 유지
• 히어로 섹션：96px 디스플레이 → 태블릿에서 70px → 모바일에서 48px；단일 열 가운데 정렬 유지
• 피처 섹션：텍스트+이미지 2열 → 768px 이하에서 단일 열로 쌓임
• 통계：가로 행 → 모바일에서 세로로 쌓임
• 섹션 패딩：뷰포트가 좁아질수록 64px → 40px → 24px → 16px
• 카드：그리드 → 스택, 모바일에서 전체 너비 유지

이미지 동작

• 제품 스크린샷：어두운 컨테이너 안에서 반응형, 가로세로 비율 유지
• 히어로 이미지：모든 브레이크포인트에서 전체 너비, 어두운 플레이스홀더로 지연 로딩
• 관리 UI 프리뷰：비례하여 크기 조정, 모바일에서 크롭될 수 있음
• 모든 이미지는 CDN（cdn.shopify.com）과 반응형 srcset 사용

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

빠른 색상 참조

• 프라이머리 CTA：Shopify 화이트（#FFFFFF）
• 페이지 배경：보이드 블랙（#000000）
• 카드 서피스：딥 틸（#02090A）
• 섹션 배경：다크 포레스트（#061A1C）
• 올라온 배경：포레스트（#102620）
• 강조색：네온 그린（#36F4A4）
• 본문 텍스트：화이트（#FFFFFF）
• 뮤트 텍스트：뮤트（#A1A1AA）
• 다크 테두리：다크 카드 보더（#1E2C31）

예시 컴포넌트 프롬프트

• 「진짜 검정（#000000）배경에 96px/330 NeueHaasGrotesk 흰색 헤드라인, 20px/500의 #A1A1AA 서브타이틀, 두 개의 필 버튼（화이트 필 9999px 반경과 2px 흰색 테두리 고스트）을 가진 히어로 섹션을 만드세요」
• 「딥 틸（#02090A）위에 1px #1E2C31 테두리, 12px 반경, 다층 그림자（1px 링 + 2px/4px/8px 블러, 10% 블랙）를 가지고, 32px/360 흰색 헤딩과 18px/400 #A1A1AA 본문 텍스트를 담은 피처 카드를 디자인하세요」
• 「다크 포레스트（#061A1C）위에 96px/750 흰색 숫자（NeueHaasGrotesk）, 16px/400 #A1A1AA 설명 레이블, 통계 블록 사이에 64px의 넉넉한 간격을 가진 통계 섹션을 구축하세요」
• 「투명한 배경（스크롤 시 #102620이 됨）, 왼쪽에 흰색 Shopify 로고, 18px/500 흰색 내비 링크（0.72px 자간）, 오른쪽에 흰색 필 「Start for free」 버튼을 가진 스티키 내비를 만드세요」
• 「rgba(255,255,255,0.2) 서리 유리 배경, 4px 반경, 12px 16px 패딩, 16px 흰색 텍스트를 가진 태그/배지를 디자인하세요——어두운 카드 서피스 위에 떠 있습니다」

반복 작업 가이드

이 디자인 시스템으로 생성된 기존 화면을 개선할 때：

1. 한 번에 하나의 컴포넌트에 집중한다
2. 이 문서의 구체적인 색상 이름과 16진수 코드를 참조한다
3. 기억하세요：이것은 다크 퍼스트 디자인——밝은 표면은 예외이지 규칙이 아니다
4. 디스플레이 텍스트는 항상 깃털처럼 가볍게 느껴져야 한다（굵기 330-400）——무겁게 보이면 굵기를 줄인다
5. 네온 그린（#36F4A4）은 소중하다——포커스와 강조에만 절약해서 사용한다
6. 다크 서피스 계층（블랙 → 딥 틸 → 다크 포레스트 → 포레스트）이 미묘한 깊이를 만든다
7. 그림자는 다층으로 이루어져 있다——단일 box-shadow 값으로는 Shopify 카드의 느낌을 재현할 수 없다
8. ss03 OpenType 기능은 타이포그래피 일관성을 위해 모든 텍스트에서 활성화되어야 한다