듀오링고: 디자인 언어로서의 게이미피케이션

THE DUOLINGO LOOP:

  ┌─────────────┐
  │   TRIGGER    │ ← 푸시 알림 (Duo가 슬퍼 보임)
  │   External   │   또는 내적 (죄책감, 스트릭 불안)
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │   ACTION     │ ← 앱 열기, "레슨 시작" 탭
  │   (minimal)  │   마찰: 거의 제로 (3-5분 분량)
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │   REWARD     │ ← XP 획득, 스트릭 유지, 리그 진행,
  │  (variable)  │   보물 상자 열기, 하트 보존
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │  INVESTMENT  │ ← 스트릭 성장 (손실 회피 증가),
  │              │   리그 순위 유지, 친구들이 진행 상황을 봄
  └──────┬──────┘
         │
         └──────→ (다음 날, TRIGGER로 복귀)

:root {
  /* Core brand */
  --duo-green: #58cc02;        /* 성공, 정답, 주요 CTA */
  --duo-green-dark: #58a700;   /* Hover/active 상태 */

  /* Gamification signals */
  --duo-blue: #1cb0f6;         /* 정보, 진행, 중립 */
  --duo-red: #ff4b4b;          /* 하트, 실수, 긴급 */
  --duo-orange: #ff9600;       /* 스트릭, 불꽃, 따뜻함 */
  --duo-purple: #ce82ff;       /* 리그, 프리미엄, 특별 */
  --duo-yellow: #ffc800;       /* XP, 보상, 축하 */
  --duo-pink: #ff86d0;         /* 이벤트, 특별 챌린지 */

  /* Surfaces */
  --background: #ffffff;
  --surface-gray: #e5e5e5;
  --text-primary: #4b4b4b;
  --text-secondary: #afafaf;

  /* CTA용 시그니처 그린 그라데이션 */
  --cta-gradient: linear-gradient(
    to bottom,
    #78e000 0%,
    #58cc02 100%
  );
}

/* Duolingo의 특징적인 버튼 스타일 */
.btn-primary {
  background: var(--duo-green);
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none;
  border-bottom: 4px solid var(--duo-green-dark);
  border-radius: 16px;
  padding: 14px 24px;
  cursor: pointer;
  transition: filter 100ms ease;
}

.btn-primary:active {
  border-bottom-width: 0;
  margin-top: 4px;  /* 물리적 누름 시뮬레이션 */
  filter: brightness(0.95);
}

SKILL TREE (간략화):
┌─────────────────────────────────────┐
│                                     │
│          ★★★★★                      │  ← Legendary (골드)
│          ┃                          │
│       ┌──╋──┐                       │
│      ★★★ ★★★                        │  ← 크라운 레벨 3-5
│       └──╋──┘                       │
│          ┃                          │
│       ┌──╋──┐                       │
│      ★★  ★★                         │  ← 크라운 레벨 1-2
│       └──╋──┘                       │
│          ┃                          │
│         ★                           │  ← 새 스킬 (회색)
│                                     │
│  ● = 완료  ○ = 가능                  │
│  ◌ = 잠김                            │
└─────────────────────────────────────┘

LESSON FLOW (15개 챌린지):

챌린지 1-3:    객관식 (가장 쉬움)
               "올바른 번역을 선택하세요"
               → 인식만, 생산 불필요

챌린지 4-7:    단어 뱅크 (중간)
               "단어를 탭하여 문장을 만드세요"
               → 제한된 생산, 단어가 제공됨

챌린지 8-11:   타이핑 (어려움)
               "들은 것을 입력하세요"
               → 완전한 생산, 보조 장치 없음

챌린지 12-14:  혼합 형식 (가장 어려움)
               말하기, 듣기, 번역
               → 다중 스킬 통합

챌린지 15:     보통 더 쉬움
               → 성공으로 마무리, 긍정적 느낌

STREAK DISPLAY:
┌─────────────────────────────────────┐
│                                     │
│           🔥 247                     │
│         일 연속 학습                  │
│                                     │
│  월    화    수    목    금    토    일  │
│   ●    ●    ●    ●    ●    ○    ○   │
│                                     │
│  ○ = 아직 미완료                      │
│  ● = 완료 (초록 체크)                 │
│                                     │
│  "레슨을 완료하여 스트릭을              │
│   이어가세요!"                        │
│                                     │
└─────────────────────────────────────┘

/* 스트릭 불꽃 애니메이션 — 하루가 지남에 따라 긴급함 증가 */
.streak-icon {
  animation: flame-idle 2s ease-in-out infinite;
}

/* 위험 상태 (오늘 학습 안 함, 저녁 시간) */
.streak-icon--at-risk {
  animation: flame-urgent 0.8s ease-in-out infinite;
  filter: saturate(1.3);
}

@keyframes flame-idle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
}

@keyframes flame-urgent {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  25% { transform: scale(1.1) rotate(3deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.08) rotate(2deg); }
}

DUO의 감정 상태:

😊 행복          → 정답, 스트릭 유지
😢 슬픔          → 푸시 알림 ("보고 싶어요")
😤 좌절          → 연속 오답
🥳 축하          → 레슨 완료, 새 업적
😴 잠자기        → 오늘 앱을 열지 않음
🤩 흥분          → 새 기능, 스트릭 이정표
😭 울기          → 스트릭이 끊기기 직전
💀 사망          → 스트릭 끊김 (핵 옵션)
🎓 자부심        → 코스 완료, 레전더리 레벨

정답:
┌─────────────────────────────────────┐
│                                     │
│  ✓ 훌륭해요!                         │  ← 초록 배너
│                                     │  ← 긍정적 효과음
│  [ 계속하기 ]                        │  ← 즉각적 전진
│                                     │
└─────────────────────────────────────┘

오답:
┌─────────────────────────────────────┐
│                                     │
│  ✗ 정답:                             │  ← 빨간 배너 (무섭지 않은 빨강)
│    "Je suis un homme"              │  ← 올바른 답을 보여줌
│                                     │  ← 부드러운 "오답" 소리
│  [ 알겠어요 ]                        │  ← 인정하되, 처벌하지 않음
│                                     │
└─────────────────────────────────────┘

/* 오답 — 단호하지만 무섭지 않게 */
.feedback-incorrect {
  background: var(--duo-red);
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 16px 16px 0 0;
  animation: slide-up 200ms ease-out;
}

/* 진행 바는 여전히 앞으로 나아간다 */
.progress-bar {
  height: 16px;
  border-radius: 8px;
  background: var(--surface-gray);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--duo-green);
  border-radius: 8px;
  transition: width 300ms ease-out;
  /* 오답이어도 진행이 약간 전진한다 */
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}