Duolingo에서 영감을 받은 디자인 시스템

Category: 생산성 & SaaS 언어 학습 플랫폼. 밝은 올빼미 그린, 굵직한 그림자, 게임화된 즐거움.

1. 비주얼 테마와 분위기

Duolingo는 시각 언어로 표현된 게임화 디자인입니다. 인터페이스는 거리낌 없이 밝으며, 올빼미 그린(#58cc02)을 브랜드 프라이머리로 사용하고 모든 인터랙티브 요소 하단에 4px의 굵직한 그림자를 두어 눌리기를 기다리는 3D 버튼처럼 보입니다. 페이지는 흰색(#ffffff)이며 2–3px의 굵은 테두리는 진한 회색(#e5e5e5)으로, 전체 시스템은 더 나은 계층 구조로 재탄생한 2015년 iOS 앱처럼 읽힙니다.

타이포그래피는 크롬에 Feather Bold(커스텀 둥근 산세리프), 본문에 Mona Sans(또는 Inter)를 사용합니다. 디스플레이 크기는 크고 자신감 넘치며——Duolingo는 절대 속삭이지 않습니다. 제목에는 종종 초록색 밑줄 획이 있거나 초록색 필 위에 올라가며, 마스코트 Duo(초록색 올빼미)는 정적인 로고가 아닌 활동적인 일러스트 캐릭터로 등장합니다.

형태 언어는 친근합니다: 카드에 16–20px 반지름, 버튼에 12px, 칩과 프로그레스 바에 9999px. 아이코노그래피는 채워진 형태의 둥근 스타일이며 스킬별로 색상이 코딩되어——모든 레슨 화면에는 즉시 식별 가능한 색상 쌍이 있습니다.

주요 특징:

• 올빼미 그린(#58cc02)이 지배적인 브랜드 컬러로 서페이스의 30% 이상 사용
• 모든 버튼에 4px 굵직한 바텀 그림자(“촉각적 누름” 어포던스)
• 2–3px 솔리드 테두리, 헤어라인은 절대 사용 안 함
• Feather Bold(둥근 디스플레이) + Mona Sans(본문)
• 크고 자신감 넘치는 텍스트——디스플레이 크기는 48px에서 시작해 올라감
• 마스코트=캐릭터: Duo 올빼미가 온보딩, 오류, 스트릭에 등장
• 스트릭 오렌지(#ff9600)와 젬 핑크(#ce82ff)가 세컨더리 브랜드 컬러

2. 컬러 팔레트와 역할

프라이머리

• 올빼미 그린(#58cc02): 브랜드 프라이머리, 주요 CTA, 정답.
• 올빼미 그린 딥(#58a700): 초록 버튼의 누름/그림자 색상.
• 올빼미 그린 라이트(#89e219): 호버, 소프트 필.
• 올빼미 그린 페일(#dbf8c5): 소프트 서페이스, 성공 배너.

세컨더리 악센트

• 스트릭 오렌지(#ff9600): 스트릭 카운터, 불꽃 아이콘, 프리미엄 에너지.
• 스트릭 오렌지 딥(#cc7a00): 오렌지 눌림 상태.
• 젬 핑크(#ce82ff): 젬 화폐, Super Duolingo.
• 장어 블루(#1cb0f6): 힌트 버튼, 정보 링크.
• 카디널 레드(#ff4b4b): 오답, 목숨 소실.
• 비 옐로우(#ffc800): 프로 배지, 업적.

서페이스

• 스노우(#ffffff): 프라이머리 배경.
• 장어(#f7f7f7): 섹션 구분, 세컨더리 서페이스.
• 스완(#e5e5e5): 비활성화 배경, 인셋 블록.
• 울프(#777777): 다크 구분선, 세컨더리 텍스트.

잉크 & 텍스트

• 장어 블랙(#3c3c3c): 프라이머리 텍스트.
• 울프(#777777): 세컨더리 텍스트, 캡션.
• 헤어(#afafaf): 비활성화, 플레이스홀더.

테두리

• 스완(#e5e5e5): 표준 2px 테두리.
• 헤어(#afafaf): 호버 시 강조 테두리.

3. 타이포그래피 규칙

폰트 패밀리

• 디스플레이 / UI / 제목: Feather Bold, 폴백: 'DIN Round Pro', 'Helvetica Neue', sans-serif
• 본문 / 장문: Mona Sans, 폴백: 'Helvetica Neue', system-ui, sans-serif
• 코드 (드물게, 학교/관리): JetBrains Mono, 폴백: ui-monospace, Menlo, monospace

계층 구조

원칙

• 800이 기본값: Feather Bold는 제목과 버튼에서 800으로 실행됩니다. 이 시스템에서 700은 약하게 보입니다.
• 큰 타입: 제목 크기가 일반적인 제품 브랜드보다 25–40% 더 크며——자신감이 곧 정체성입니다.
• 둥근 글자꼴: 모든 글리프에 부드러운 끝부분이 있습니다. 날카로운 세리프는 친근함의 계약을 깨뜨립니다.

4. 컴포넌트 스타일링

버튼

프라이머리 (올빼미 그린)

• 배경: #58cc02
• 텍스트: #ffffff
• 패딩: 14px 24px
• 반지름: 16px
• 바텀 테두리: 4px solid #58a700 (굵직한 그림자)
• 호버: 배경 #89e219
• 액티브: translate-y 4px, 바텀 테두리 0 (버튼 “눌림”)
• 사용: “계속”, “확인”, 메인 CTA.

세컨더리 (바텀 그림자가 있는 흰색)

• 배경: #ffffff
• 텍스트: #777777
• 테두리: 2px solid #e5e5e5
• 바텀 테두리: 4px solid #e5e5e5
• 반지름: 16px
• 패딩: 14px 24px
• 호버: 텍스트 #3c3c3c, 테두리 #afafaf

스트릭 오렌지

• 배경: #ff9600
• 텍스트: #ffffff
• 바텀 테두리: 4px solid #cc7a00
• 사용: 스트릭 목표, “스트릭 시작”

에러 (카디널 레드)

• 배경: #ff4b4b
• 텍스트: #ffffff
• 바텀 테두리: 4px solid #cc3b3b
• 사용: 오답 피드백.

카드 / 레슨 타일

• 배경: #ffffff
• 테두리: 2px solid #e5e5e5
• 바텀 테두리: 4px solid #e5e5e5
• 반지름: 16px
• 패딩: 16px
• 호버: 2px 상승, 그림자 0 4px 0 #d7d7d7

스킬 트리 노드 (레슨 버블)

• 크기: 80×72px
• 배경: 스킬 색상 tint (활성화는 초록, 잠김은 회색)
• 바텀 테두리: 6px solid 더 어두운 변형
• 반지름: 50% (원형)
• 활성화: 1.6s마다 1.0 → 1.05 펄스

입력

• 배경: #ffffff
• 테두리: 2px solid #e5e5e5
• 반지름: 12px
• 패딩: 12px 16px
• 포커스: 테두리 #1cb0f6 (장어 블루), 링 0 0 0 3px rgba(28, 176, 246, 0.2)

프로그레스 바

• 트랙: #e5e5e5
• 필: #58cc02 (또는 스트릭 시 #ff9600)
• 반지름: 9999px
• 높이: 16px
• 애니메이션 필: 증가 시 320ms ease-out.

5. 간격 & 레이아웃

• 기본 단위: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64.
• 컨테이너: 최대 1080px, 24px 거터.
• 레슨 트리 열: 너비 320px; 데스크톱에서 중앙 정렬.

6. 모션

• 지속시간: 버튼 누름 180ms; 스킬 노드 잠금 해제 320ms; 활성 노드 펄스 1.6s.
• 이징: cubic-bezier(0.34, 1.56, 0.64, 1) (백아웃, 약간의 오버슈트) 잠금 해제용.
• 마스코트: Duo는 4–6s마다 눈을 깜빡이고, 스트릭 마일스톤에서 점프 (480ms ease-out 스프링).

7. 사용 가이드라인

• 고채도 올빼미 그린, 굵직한 바텀 그림자, 둥근 레슨 기하학적 요소를 함께 유지하세요. 평평한 초록 버튼 단독으로는 Duolingo처럼 읽히지 않습니다.
• 특대형 볼드 타입은 제품이 격려나 피드백이 필요한 레슨, 스트릭, 진행 상황 순간을 위해 아껴두세요.
• 플레이풀한 모션은 진행 상태 변화 주변에 절제하여 사용하고, 모든 컨트롤에 일반적인 바운시 애니메이션을 사용하는 것은 피하세요.