# Shopify Polaris — 디자인 스타일 가이드
## 기본 정보
- **ID**: shopify-polaris
- **카테고리**: design-language
- **연도**: 2016
- **제작자**: Shopify
## 설명
상거래 경험을 위한 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 사용. 기능적 피드백 중심 모션.
## 사용 사례
- 이커머스 관리자 UI
- 판매자용 대시보드
- Shopify 앱 개발
- 상거래 SaaS
## 추천 프로젝트 유형
- 이커머스 관리자 UI
- Shopify 앱
- 판매자용 대시보드
- 상거래 SaaS
## 장점
- 이커머스 워크플로우에 최적화
- 오픈소스로 Shopify 앱 개발에 자유롭게 활용
- 접근성 검증 완료
## 단점·한계
- Shopify 플랫폼에 특화된 시각 언어
- 이커머스 외 서비스엔 어색할 수 있음
## 실제 사용 제품·서비스
- Shopify 관리자 대시보드
- Shopify 앱 스토어
## 접근성
WCAG 2.1 AA 준수. 색상 대비·키보드 내비게이션 철저 검증.
## 관련 스타일
- [atlassian-design](https://ui.buildersgate.com/styles/atlassian-design)
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [material-design](https://ui.buildersgate.com/styles/material-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #008060
- secondary: #5C6AC4
- accent: #00A0AC
- background: #F6F6F7
- surface: #FFFFFF
- text: #202223
- textSecondary: #6D7175
- border: #C9CCCF
### 헤더
- background: #008060
- textColor: #FFFFFF
- accentColor: #00A0AC
### 타이포그래피
- fontFamily: 'SF Pro Text', -apple-system, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 4px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 0 rgba(0, 0, 0, 0.05)
- md: 0 2px 4px rgba(0, 0, 0, 0.1)
- lg: 0 4px 8px rgba(0, 0, 0, 0.15)
- xl: 0 8px 16px rgba(0, 0, 0, 0.2)
### Border Radius
- none: 0
- sm: 3px
- md: 4px
- lg: 8px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #C9CCCF
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.1s ease
### 애니메이션
- duration: 100ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: compact
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Shopify Polaris이란 무엇인가요?
A: 상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다. 2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
### Q: Shopify Polaris의 핵심 디자인 원칙은 무엇인가요?
A: Shopify Polaris의 핵심 원칙은 명확성, 효율성, 일관성입니다.
### Q: Shopify Polaris은 어떤 프로젝트에 적합한가요?
A: Shopify Polaris은 이커머스 관리자 UI, 판매자용 대시보드, Shopify 앱 개발, 상거래 SaaS, 이커머스 관리자 UI, Shopify 앱, 판매자용 대시보드, 상거래 SaaS 등의 프로젝트에 적합합니다.
### Q: Shopify Polaris의 장단점은 무엇인가요?
A: 장점으로는 이커머스 워크플로우에 최적화, 오픈소스로 Shopify 앱 개발에 자유롭게 활용, 접근성 검증 완료이 있습니다. 단점으로는 Shopify 플랫폼에 특화된 시각 언어, 이커머스 외 서비스엔 어색할 수 있음이 있습니다.
### Q: Shopify Polaris에서 색상은 어떻게 사용하나요?
A: Shopify 초록 기반 신뢰감 있는 이커머스 시스템. 판매자와 구매자 모두에게 안정적인 느낌 색상 역할은 interactive: 링크, 버튼 — Shopify Green 또는 파랑, critical: 삭제·오류 — 빨강, warning: 주의 — 노랑입니다. 주의사항: Shopify 브랜드 초록 외 vivid color 추가 자제, 이커머스 특성상 CTA(구매 버튼)는 항상 가장 눈에 띄어야 함.
### Q: Shopify Polaris에 어울리는 폰트 스타일은 무엇인가요?
A: Shopify Polaris에는 중립적이고 신뢰감 있는 산세리프. 읽기 쉽고 전문적인 느낌 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Polaris 타이포 스케일 준수, merchant-facing UI는 정보 밀도 높게 — 작은 텍스트도 가독성 확보.
### Q: Shopify Polaris 디자인에서 하면 안 되는 것은 무엇인가요?
A: Shopify Polaris에서 피해야 할 것: Polaris 컴포넌트 무시하고 커스텀 UI — Polaris 컴포넌트 우선 사용, CTA 버튼 약하게 스타일링 금지 — 구매 액션 항상 강조.
### Q: Shopify Polaris을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Shopify Polaris을 적용한 대표적인 제품·서비스로는 Shopify 관리자 대시보드, Shopify 앱 스토어 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=shopify-polaris
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=shopify-polaris&merged=true
상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다. 2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
Shopify Polaris의 핵심 디자인 원칙은 무엇인가요?
Shopify Polaris의 핵심 원칙은 명확성, 효율성, 일관성입니다.
Shopify Polaris은 어떤 프로젝트에 적합한가요?
Shopify Polaris은 이커머스 관리자 UI, 판매자용 대시보드, Shopify 앱 개발, 상거래 SaaS, 이커머스 관리자 UI, Shopify 앱, 판매자용 대시보드, 상거래 SaaS 등의 프로젝트에 적합합니다.
Shopify Polaris의 장단점은 무엇인가요?
장점으로는 이커머스 워크플로우에 최적화, 오픈소스로 Shopify 앱 개발에 자유롭게 활용, 접근성 검증 완료이 있습니다. 단점으로는 Shopify 플랫폼에 특화된 시각 언어, 이커머스 외 서비스엔 어색할 수 있음이 있습니다.
Shopify Polaris에서 색상은 어떻게 사용하나요?
Shopify 초록 기반 신뢰감 있는 이커머스 시스템. 판매자와 구매자 모두에게 안정적인 느낌 색상 역할은 interactive: 링크, 버튼 — Shopify Green 또는 파랑, critical: 삭제·오류 — 빨강, warning: 주의 — 노랑입니다. 주의사항: Shopify 브랜드 초록 외 vivid color 추가 자제, 이커머스 특성상 CTA(구매 버튼)는 항상 가장 눈에 띄어야 함.
Shopify Polaris에 어울리는 폰트 스타일은 무엇인가요?
Shopify Polaris에는 중립적이고 신뢰감 있는 산세리프. 읽기 쉽고 전문적인 느낌 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Polaris 타이포 스케일 준수, merchant-facing UI는 정보 밀도 높게 — 작은 텍스트도 가독성 확보.
Shopify Polaris 디자인에서 하면 안 되는 것은 무엇인가요?
Shopify Polaris에서 피해야 할 것: Polaris 컴포넌트 무시하고 커스텀 UI — Polaris 컴포넌트 우선 사용, CTA 버튼 약하게 스타일링 금지 — 구매 액션 항상 강조.
Shopify Polaris을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Shopify Polaris을 적용한 대표적인 제품·서비스로는 Shopify 관리자 대시보드, Shopify 앱 스토어 등이 있습니다.