Tailwind, 외우지 말고 손으로 익히세요 — 31문제짜리 인터랙티브 학습 트레이너

Tailwind CSS, 문서만 봐서는 도무지 손에 안 붙더라고요. bg-blue-500, px-4, md:flex... 읽으면 이해는 되는데 막상 빈 화면 앞에 앉으면 손이 안 나가는 그 느낌. 그래서 "읽고 → 직접 쳐보고 → 바로 결과를 확인하는" 인터랙티브 학습 트레이너를 직접 만들었습니다.

주요 기능

핵심은 "목표 화면을 보고, 내가 클래스를 조합해 똑같이 만들어보는" 따라 만들기 방식이에요.

• 11개 주제 · 31개 연습 문제 — 기초 개념부터 간격(Spacing), 크기(Sizing), 색상, 타이포그래피, 테두리, Flexbox, Grid, 효과, 상태·반응형, 변형·트랜지션까지. 왼쪽 사이드바에서 주제별 진행률(0/3 처럼)이 한눈에 보여서 어디까지 했는지 놓치지 않아요.
• 펼쳐두는 치트시트 — 각 주제 상단에 "클래스 읽는 법"과 "숫자 단위 감각(1 = 0.25rem = 4px)"을 먼저 깔아둬요. p-1은 4px, p-2는 8px... 이 감각이 잡히면 나머지는 술술 풀립니다.
• 목표 vs 내 결과 라이브 프리뷰 — 왼쪽엔 만들어야 할 목표 화면, 오른쪽엔 내가 친 클래스가 즉시 렌더되는 결과 화면. 둘을 나란히 비교하면서 차이를 좁혀가는 게 진짜 학습이 되더라고요.
• 관대한 채점 — 끝 숫자(스케일·명도)가 좀 달라도 정답으로 인정해요. bg-blue-500을 bg-blue-600으로 써도 통과. 정답은 한 가지 예시일 뿐, 같은 결과를 내는 다른 조합도 인정하는 게 실전 감각에 더 맞다고 봤어요.
• 힌트 · 정답 보기 · 초기화 — 막히면 힌트, 정 안 되면 정답 확인, 다시 처음부터 연습까지. ⌘↵ 단축키로 바로 채점도 됩니다.

기술 이야기

학습 도구라서 "입력 즉시 결과가 보이는 반응성"이 가장 중요했어요. 사용자가 클래스를 타이핑하는 순간 오른쪽 프리뷰가 다시 그려져야 하니까요. 그래서 React로 상태를 잡고, 채점 로직은 정규화(끝 숫자 무시, 클래스 순서 무관)를 거쳐 "결과적으로 같은가"를 비교하도록 만들었습니다.

당연히 연습 대상이 Tailwind 자체라, UI 전부를 Tailwind 유틸리티로 짰어요. 도구를 만들면서 제가 먼저 Tailwind에 익숙해지는 일석이조였달까요. 배포는 Vercel로 올려서 링크만 있으면 누구나 바로 연습할 수 있게 했습니다.

마무리

데스크톱은 목표/결과를 좌우로 펼쳐 보고, 모바일에선 주제 탭이 가로 스크롤로 깔끔하게 접혀요.

문서를 100번 읽는 것보다 직접 한 번 쳐보는 게 빠르다고 믿어요. Tailwind를 시작하는 분, 혹은 "대충 아는데 손은 안 나가는" 분이라면 한 번 풀어보세요!