핵심 비유
'옷과 조명' 비유 — 반응형 디자인은 옷을 몸에 맞춰 입는 것과 같다. 어른 옷을 초등학생에게 그대로 입히면 질질 끌리고, 반대로 작은 옷을 억지로 입히면 터진다. 좋은 디자인은 폰·태블릿·PC라는 서로 다른 '몸'에 맞춰 레이아웃이 다시 짜인다. 다크모드는 같은 방에서 밤에 조명만 낮추는 것과 같다. 조명을 낮춰도 글자는 여전히 읽혀야지, 깜깜하게 만들어 아무것도 안 보이면 실패다. 핵심은 '뒤집기'가 아니라 글자가 계속 보이도록 대비를 지키면서 눈부심만 줄이는 것이다.
핵심 포인트
- 모바일 우선(mobile-first): 제일 좁은 폰 화면부터 설계하고, 넓어질수록 요소를 더하는 순서가 안전하다. PC부터 만들면 폰에서 꾸겨진다.
- 브레이크포인트: 화면 너비가 특정 값을 넘으면 레이아웃을 바꾸는 기준선. 흔히 모바일 ~640px, 태블릿 ~768px, PC ~1024px 근처에서 1단 → 2단 → 3단으로 칸 수를 바꾼다.
- 반응형은 '축소'가 아니다. 폰에서는 가로 카드 3개를 세로로 쌓고, 메뉴는 햄버거(☰)로 접는 식으로 재배치한다.
- 다크모드 = 색 반전 아님: 순흑(#000)·순백(#fff)을 직접 쓰면 눈부심·번짐이 심하다. 배경은 짙은 회색(예 stone-900 #1c1917), 글자는 밝은 회색(순백 대신 #e7e5e4)으로 살짝 낮춘다.
- 대비율은 라이트·다크 둘 다 4.5:1 이상 유지(본문 기준). 다크에서 채도 높은 색은 떠 보이므로 채도를 한 단계 낮춘다.
- 한 화면에서 두 모드가 같은 정보 구조를 유지해야 한다. 다크에서만 버튼이 사라지거나 글자가 묻히면 안 된다.
교사 팁
도입은 "같은 앱을 폰과 PC에서 본 적 있죠? 뭐가 달라지던가요?"로 연다(메뉴가 ☰로 접히는지, 칸 수가 바뀌는지 떠올리게). 학생이 가진 폰을 가로/세로로 돌려보게 하면 반응형을 몸으로 느낀다. 이어서 design-sense 분석 탭에 같은 앱의 모바일·PC 스크린샷을 각각 올려 추출된 레이아웃(칸 수·정렬)이 어떻게 달라지는지 비교한다. 그다음 내디자인 탭에서 자기 팔레트의 라이트/다크 두 벌을 만들어 보고, 다크 배경을 #000이 아닌 짙은 회색으로 바꿨을 때 글자 대비가 어떻게 유지되는지 직접 확인하게 한다.
좋은 예 vs 나쁜 예
- ✅ 유튜브 다크모드: 배경이 완전 검정이 아니라 짙은 회색, 글자는 살짝 누른 흰색. 썸네일 색은 그대로 살아 대비가 유지된다. 토스도 폰에서는 카드를 세로로 쌓고 PC에서는 좌우로 펴서 같은 정보를 다르게 배치한다.
- ❌ 라이트모드 색을 그대로 두고 배경만 검정으로 칠하기: 연회색 글자(#999)가 검은 배경에서 대비 부족으로 안 읽히고, 흰 박스만 등불처럼 눈을 찌른다. "다크모드 켰더니 글자가 안 보여요"의 전형.
실습·평가
- 실습: design-sense 내디자인 탭에서 내 색 팔레트의 '다크 버전'을 만든다(5~8분). 규칙은 단 두 개 — ① 배경은 순흑 대신 짙은 회색 ② 본문 글자는 순백 대신 살짝 누른 밝은 회색. 만든 뒤 라이트·다크를 나란히 두고 "글자가 둘 다 읽히는가?"를 짝과 확인.
- O/X 퀴즈: "다크모드는 라이트모드의 색을 그대로 반전(검정↔흰색)시키기만 하면 된다." → X (순흑/순백 대신 짙은·밝은 회색을 쓰고 채도를 낮춰 대비 4.5:1을 유지해야 한다)