표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Shopify Polaris
상거래 경험을 위한 Shopify의 디자인 시스템으로, 명확하고 일관된 인터페이스를 제공합니다.
- YEAR
- 2016
- BY
- Shopify
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#008060
- SECONDARY#5C6AC4
- ACCENT#00A0AC
- BG#F6F6F7
- SURFACE#FFFFFF
취급 표시
- 살짝 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 미니멀
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- Shopify 관리자 대시보드
- Shopify 앱 스토어
사용 사례
- 이커머스 관리자 UI
- 판매자용 대시보드
- Shopify 앱 개발
- 상거래 SaaS
이런 프로젝트에 맞습니다
- 이커머스 관리자 UI
- Shopify 앱
- 판매자용 대시보드
- 상거래 SaaS
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2016년 Shopify 내부 디자인 시스템으로 시작. 이후 Shopify 앱 개발자 생태계 전체의 표준으로 공개.
핵심 원칙
- 명확성
- 효율성
- 일관성
주요 특징
- 머천트 중심 디자인
- 일관된 컴포넌트
- 접근성 우선
- 명확한 행동 유도
- 효율적인 워크플로우
장점과 한계
장점
- 이커머스 워크플로우에 최적화
- 오픈소스로 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 design token 사용
- 모바일 우선 반응형
- 판매자 워크플로우 명확한 피드백 (loading/success/error)
하지 말 것
- Polaris 컴포넌트 무시하고 커스텀 UI — Polaris 컴포넌트 우선 사용
- CTA 버튼 약하게 스타일링 금지 — 구매 액션 항상 강조
모션 — Polaris animation token 사용. 기능적 피드백 중심 모션.
접근성
WCAG 2.1 AA 준수. 색상 대비·키보드 내비게이션 철저 검증.
자주 묻는 질문
Shopify Polaris이란 무엇인가요?
상거래 경험을 위한 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 앱 스토어 등이 있습니다.