Tailwind 외우다 포기하고 연습장을 만들었습니다

Tailwind 문서를 세 번쯤 정독했는데도 빈 화면 앞에서 손이 안 나가더라고요. bg-blue-500, px-4, md:flex... 읽으면 다 알겠는데 막상 치려면 "패딩이 p였나 pd였나"부터 막히는 겁니다. 운동을 책으로 배운 느낌이랄까. 결국 이건 외우는 게 아니라 손으로 익혀야 하는 거구나 싶어서, 연습장을 직접 만들었습니다.

방식은 따라 만들기입니다. 왼쪽에 목표 화면이 있고, 내가 클래스를 치면 오른쪽에 즉시 렌더돼요. 둘을 비교하면서 차이를 좁혀가는 겁니다. 이게 문서 읽기랑 뭐가 다르냐면, 틀려볼 수 있다는 거예요. p-4 쳐보고 "어 이거보다 넓어야 하는데" 하면서 p-6으로 고치는 그 과정에서 감각이 생깁니다. 문서는 그걸 못 줘요.

문제는 11개 주제에 31개를 넣었습니다. 간격, 크기, 색상, 타이포, 테두리, Flexbox, Grid, 상태·반응형, 변형·트랜지션까지. 사이드바에 주제별 진행률이 떠서 어디까지 했는지 안 놓치고요. 주제마다 상단에 미니 치트시트를 깔아놨는데, 제일 중요한 건 숫자 감각입니다. Tailwind의 1이 0.25rem, 그러니까 4px이라는 것. p-1은 4px, p-4는 16px. 이 환산만 몸에 배면 나머지는 술술 풀립니다. 저도 이거 만들면서야 확실해졌어요.

채점은 일부러 관대하게 했습니다. bg-blue-500을 bg-blue-600으로 쳐도 통과예요. 실전에서 명도 한 단계 차이는 취향 문제니까, 클래스 순서 무시하고 끝 숫자에 여유를 주고 "결과적으로 같은가"만 봅니다. 막히면 힌트, 정 안 되면 정답 보기도 있고, Cmd+Enter로 바로 채점도 됩니다.

재밌는 건 이 연습장 UI 자체가 전부 Tailwind로 짜여 있다는 겁니다. Tailwind 연습 도구를 만들면서 제가 제일 연습이 됐어요. 배포는 Vercel이라 링크만 열면 바로 풀 수 있습니다.

문서 백 번 읽는 것보다 한 번 쳐보는 게 빠릅니다. Tailwind 입문하시는 분, 아니면 저처럼 "아는데 손이 안 나가는" 분들 한번 풀어보세요. 31문제 다 풀고 나면 빈 화면이 덜 무서워집니다.

참고로 문제는 계속 추가할 생각입니다. 요즘 실무에서 자주 쓰는 조합 위주로요. 풀다가 '이런 주제도 있으면 좋겠다' 싶은 게 있으면 댓글 남겨주세요. 다음 배치에 반영하겠습니다. 그리드 심화편이 지금 1순위 후보입니다.