사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Material Design vs SEED Design (당근)
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Material Design 0, SEED Design (당근) 0. 온도감 — Material Design 0, SEED Design (당근) 1. 시대감 — Material Design 0, SEED Design (당근) 0. 격식 — Material Design 1, SEED Design (당근) 1.
나란히 놓고 보기
Material Design
- YEAR
- 2014
- BY
- MOOD
- 신뢰감 · 친근·발랄
SEED Design (당근)
- YEAR
- 2021
- BY
- 당근마켓 (Karrot)
- MOOD
- 따뜻한 · 친근·발랄 · 신뢰감
주요 특징
Material Design
- 그림자와 깊이를 통한 계층 구조
- 대담한 색상과 타이포그래피
- 의미 있는 모션과 애니메이션
- 반응형 그리드 시스템
- 일관된 아이콘과 이미지
SEED Design (당근)
- Radix 기반 시맨틱 컬러 토큰 시스템
- Stackflow 네비게이션 프레임워크
- React·React Native·iOS·Android 멀티 플랫폼
- 접근성(a11y) 내장 컴포넌트
- 오픈소스 (MIT 라이선스)
장점과 한계
Material Design
장점
- 전 세계적으로 인지도 높아 학습 비용 낮음
- 풍부한 공식 컴포넌트 라이브러리 (MUI)
- 명확한 가이드라인으로 일관성 유지 쉬움
- 접근성 기본 탑재
한계
- Google 스러운 느낌이 강해 차별화 어려움
- 스큐어모피즘 대비 감성적 깊이 부족
- 고급 브랜드 제품에는 부적합할 수 있음
SEED Design (당근)
장점
- MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능
- React·React Native·iOS·Android 4개 플랫폼 동시 지원
- Stackflow로 앱 같은 네비게이션 경험 제공
- Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응
- 접근성(WCAG 2.1 AA) 기본 내장
한계
- 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요
- Stackflow 의존성으로 네비게이션 패턴 변경 시 제약
- 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요
역사와 배경
Material Design
2014년 Google I/O에서 공개. '물리적 재료(Material)'를 메타포로 삼아 그림자·깊이·모션을 시스템화한 첫 대형 디자인 시스템.
SEED Design (당근)
2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.
접근성
Material Design
WCAG AA 대비율 준수. 색상 대비, 터치 타겟 크기(48dp), 스크린 리더 지원이 기본 사양.
SEED Design (당근)
React Aria 기반으로 키보드 네비게이션, 스크린 리더, 포커스 관리가 컴포넌트에 내장되어 있으며, 시맨틱 컬러 토큰으로 라이트/다크 모드에서 WCAG 2.1 AA 기준 명도 대비를 자동으로 충족합니다.
자주 묻는 질문
Material Design vs SEED Design (당근), 무엇이 다른가요?
Material Design — 구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다. SEED Design (당근) — 당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다. 무드 좌표에서 가장 벌어지는 축은 온도감입니다 — Material Design 쪽은 중간 쪽에, SEED Design (당근) 쪽은 따뜻함 쪽에 서 있습니다.
언제 Material Design 쪽, 언제 SEED Design (당근) 쪽을 골라야 하나요?
Android 앱 개발 · Google 생태계 제품 · 기업용 SaaS 같은 화면이라면 Material Design 쪽이 오래 버팁니다. 반대로 모바일 중심 C2C 커뮤니티 서비스 · 따뜻하고 친근한 브랜드 경험이 필요한 앱 · 멀티 플랫폼 동시 출시가 필요한 스타트업 쪽 그림이라면 SEED Design (당근) 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Material Design vs SEED Design (당근), 장단점은 어떻게 갈리나요?
Material Design 쪽 — 강점은 전 세계적으로 인지도 높아 학습 비용 낮음 · 풍부한 공식 컴포넌트 라이브러리 (MUI), 짚고 갈 한계는 Google 스러운 느낌이 강해 차별화 어려움 · 스큐어모피즘 대비 감성적 깊이 부족입니다. SEED Design (당근) 쪽 — 강점은 MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능 · React·React Native·iOS·Android 4개 플랫폼 동시 지원, 짚고 갈 한계는 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요 · Stackflow 의존성으로 네비게이션 패턴 변경 시 제약입니다.