# Shopify Polaris — 디자인 스타일 가이드
## 기본 정보
- **ID**: shopify-polaris
- **카테고리**: design-language
- **연도**: 2016
- **제작자**: Shopify
## 설명
상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다.
## 역사·배경
2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
## 핵심 원칙
- 명확성
- 효율성
- 일관성
## 주요 특징
- 머천트 중심 디자인
- 일관된 컴포넌트
- 접근성 우선
- 명확한 행동 유도
- 효율적인 워크플로우
## 색상 팔레트
- Shopify Green (#008060): Brand Primary
- Interactive (#2C6ECB): 링크·버튼
- Success (#008060): 성공 상태
- Critical (#D82C0D): 오류·위험
- Warning (#FFC453): 경고 상태
## 사용 사례
- 이커머스 관리자 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=shopify-polaris
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=shopify-polaris&merged=true
Shopify Polaris
상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다.
2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
색상 팔레트
Shopify Green
#008060
Brand Primary
주요 특징
- 머천트 중심 디자인
- 일관된 컴포넌트
- 접근성 우선
- 명확한 행동 유도
- 효율적인 워크플로우
장단점
장점
- +이커머스 워크플로우에 최적화
- +오픈소스로 Shopify 앱 개발에 자유롭게 활용
- +접근성 검증 완료
단점 / 한계
- −Shopify 플랫폼에 특화된 시각 언어
- −이커머스 외 서비스엔 어색할 수 있음
적합한 사용처
사용 사례
- 이커머스 관리자 UI
- 판매자용 대시보드
- Shopify 앱 개발
- 상거래 SaaS
이런 프로젝트에 추천
이커머스 관리자 UIShopify 앱판매자용 대시보드상거래 SaaS
접근성WCAG 2.1 AA 준수. 색상 대비·키보드 내비게이션 철저 검증.
실제 사용 예시
Shopify 관리자 대시보드Shopify 앱 스토어
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Polaris Buttons
명확한 행동 유도를 위한 버튼 스타일
Polaris Cards
명확한 정보 구조를 위한 카드
Products
Total products1,247
In stock983
Out of stock264
Sales
Today$2,345
This week$15,678
This month$67,890
Banners
중요한 정보와 상태를 전달하는 배너
ℹ️
Information
Your store is now live and accepting orders.
✓
Success
Product has been successfully published.
⚠️
Warning
Some products are low in stock.
Data Table
상품 정보를 효율적으로 표시
| Product | Status | Inventory | Price |
|---|
| Premium T-Shirt | Active | 142 | $29.99 |
| Cotton Hoodie | Active | 87 | $49.99 |
| Denim Jeans | Draft | 23 | $79.99 |
Page Header
머천트를 위한 명확한 페이지 구조
Products
Manage your product inventory and pricing
Action List
효율적인 작업 흐름을 위한 리스트
Form Layout
상품 등록을 위한 폼 레이아웃
Polaris Typography
머천트 중심의 명확하고 효율적인 타이포그래피 시스템
Display (26px)
Shopify Polaris
Heading (20px)
머천트를 위한 디자인 시스템
Subheading (14px, uppercase)
Commerce Experience
Body (14px)
Shopify Polaris는 판매자가 온라인 상점을 효율적으로 관리할 수 있도록 설계된 디자인 시스템입니다. 명확성, 효율성, 일관성을 핵심 원칙으로 합니다.