# Shopify Polaris

> 상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다.

- 층: 레퍼런스 (디자인 언어)
- ID: shopify-polaris
- 연도: 2016
- 제작자: Shopify
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/shopify-polaris

## 정의

상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다.

## 역사·배경

2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.

## 주요 특징

- 머천트 중심 디자인
- 일관된 컴포넌트
- 접근성 우선
- 명확한 행동 유도
- 효율적인 워크플로우

## 핵심 원칙

- 명확성
- 효율성
- 일관성

## 컬러 시스템

Shopify 초록 기반 신뢰감 있는 이커머스 시스템. 판매자와 구매자 모두에게 안정적인 느낌

### 색상 역할

- interactive: 링크, 버튼 — Shopify Green 또는 파랑
- critical: 삭제·오류 — 빨강
- warning: 주의 — 노랑
- success: 완료 — 초록
- surface: 페이지 배경 — 매우 연한 회색
- text: 거의 검정 (#202223)

### 색상 제약

- Shopify 브랜드 초록 외 vivid color 추가 자제
- 이커머스 특성상 CTA(구매 버튼)는 항상 가장 눈에 띄어야 함
- 신뢰감을 해치는 과도한 색상 혼합 금지

### 다크모드 전략

Polaris dark mode 토큰 사용

### 대비 요구사항

WCAG AA (4.5:1) 전면 준수 — 이커머스 접근성 중요

## 타이포그래피

- 폰트 성격: 중립적이고 신뢰감 있는 산세리프. 읽기 쉽고 전문적인 느낌
- 권장 폰트 수: 최대 1개
- 타입 스케일: Polaris Type Scale

### 타이포그래피 제약

- Polaris 타이포 스케일 준수
- merchant-facing UI는 정보 밀도 높게 — 작은 텍스트도 가독성 확보

## 설계 제약

### 하면 안 되는 것

- Polaris 컴포넌트 무시하고 커스텀 UI — Polaris 컴포넌트 우선 사용
- CTA 버튼 약하게 스타일링 금지 — 구매 액션 항상 강조

### 반드시 포함할 것

- Polaris design token 사용
- 모바일 우선 반응형
- 판매자 워크플로우 명확한 피드백 (loading/success/error)

### 모션 가이드

Polaris animation token 사용. 기능적 피드백 중심 모션.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 이커머스 관리자 UI
- 판매자용 대시보드
- Shopify 앱 개발
- 상거래 SaaS

## 추천 프로젝트 유형

- 이커머스 관리자 UI
- Shopify 앱
- 판매자용 대시보드
- 상거래 SaaS

## 장단점

### 장점

- 이커머스 워크플로우에 최적화
- 오픈소스로 Shopify 앱 개발에 자유롭게 활용
- 접근성 검증 완료

### 단점·한계

- Shopify 플랫폼에 특화된 시각 언어
- 이커머스 외 서비스엔 어색할 수 있음

## 실제 사용 제품·서비스

- Shopify 관리자 대시보드
- Shopify 앱 스토어

## 접근성

WCAG 2.1 AA 준수. 색상 대비·키보드 내비게이션 철저 검증.

## 자주 묻는 질문

### Q1. Shopify Polaris이란 무엇인가요?

상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다. 2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.

### Q2. Shopify Polaris의 핵심 디자인 원칙은 무엇인가요?

Shopify Polaris의 핵심 원칙은 명확성, 효율성, 일관성입니다.

### Q3. Shopify Polaris은 어떤 프로젝트에 적합한가요?

Shopify Polaris은 이커머스 관리자 UI, 판매자용 대시보드, Shopify 앱 개발, 상거래 SaaS, 이커머스 관리자 UI, Shopify 앱, 판매자용 대시보드, 상거래 SaaS 등의 프로젝트에 적합합니다.

### Q4. Shopify Polaris의 장단점은 무엇인가요?

장점으로는 이커머스 워크플로우에 최적화, 오픈소스로 Shopify 앱 개발에 자유롭게 활용, 접근성 검증 완료이 있습니다. 단점으로는 Shopify 플랫폼에 특화된 시각 언어, 이커머스 외 서비스엔 어색할 수 있음이 있습니다.

### Q5. Shopify Polaris에서 색상은 어떻게 사용하나요?

Shopify 초록 기반 신뢰감 있는 이커머스 시스템. 판매자와 구매자 모두에게 안정적인 느낌 색상 역할은 interactive: 링크, 버튼 — Shopify Green 또는 파랑, critical: 삭제·오류 — 빨강, warning: 주의 — 노랑입니다. 주의사항: Shopify 브랜드 초록 외 vivid color 추가 자제, 이커머스 특성상 CTA(구매 버튼)는 항상 가장 눈에 띄어야 함.

### Q6. Shopify Polaris에 어울리는 폰트 스타일은 무엇인가요?

Shopify Polaris에는 중립적이고 신뢰감 있는 산세리프. 읽기 쉽고 전문적인 느낌 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Polaris 타이포 스케일 준수, merchant-facing UI는 정보 밀도 높게 — 작은 텍스트도 가독성 확보.

### Q7. Shopify Polaris 디자인에서 하면 안 되는 것은 무엇인가요?

Shopify Polaris에서 피해야 할 것: Polaris 컴포넌트 무시하고 커스텀 UI — Polaris 컴포넌트 우선 사용, CTA 버튼 약하게 스타일링 금지 — 구매 액션 항상 강조.

### Q8. Shopify Polaris을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Shopify Polaris을 적용한 대표적인 제품·서비스로는 Shopify 관리자 대시보드, Shopify 앱 스토어 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #008060
- secondary: #5C6AC4
- accent: #00A0AC
- background: #F6F6F7
- surface: #FFFFFF
- text: #202223
- textSecondary: #6D7175
- border: #C9CCCF

### 타이포그래피

- fontFamily: 'SF Pro Text', -apple-system, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 4px × scale 1
- borderRadius: sm 3px / md 4px / lg 8px / full 9999px
- shadow sm: 0 1px 0 rgba(0, 0, 0, 0.05)
- shadow md: 0 2px 4px rgba(0, 0, 0, 0.1)
- shadow lg: 0 4px 8px rgba(0, 0, 0, 0.15)
- border: 1px solid #C9CCCF

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: rounded / solid
- icon: lucide / stroke 1.5 / size 20px
- layout: boxed / section compact
- animation: 100ms ease

## 관련 링크

### 관련 스타일

- [Atlassian Design System](https://ui.buildersgate.com/styles/atlassian-design)
- [Carbon Design System](https://ui.buildersgate.com/styles/carbon-design)
- [Material Design](https://ui.buildersgate.com/styles/material-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/shopify-polaris)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/shopify-polaris)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/shopify-polaris)

### 비교

- [Shopify Polaris vs Atlassian Design System](https://ui.buildersgate.com/compare/atlassian-design-vs-shopify-polaris)
- [Shopify Polaris vs Carbon Design System](https://ui.buildersgate.com/compare/carbon-design-vs-shopify-polaris)
- [Shopify Polaris vs Material Design](https://ui.buildersgate.com/compare/material-design-vs-shopify-polaris)

### 쓰임새별 추천

- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)

---

HTML 버전: https://ui.buildersgate.com/styles/shopify-polaris

이 문서는 https://ui.buildersgate.com/styles/shopify-polaris.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.