Tailwind 30분 압축

Tailwind CSS는 비개발자에게 매우 다정한 도구입니다. CSS 한 줄도 모르더라도, 클래스 이름만 잘 '고르는' 방식으로 디자인을 다듬을 수 있습니다. 학원의 기초반에서는 이 방식을 첫 주에 익혀, 사이트의 분위기 자체를 한 단계 끌어올립니다. 30분 안에 70%를 잡는 압축 가이드를 정리했습니다.

1. \"외우는 게 아니라 고르는 것\"

다른 사람이 만든 CSS 강의는 보통 \"속성을 외우라\"고 합니다. Tailwind는 반대입니다. 자주 쓰는 디자인 결정들을 미리 '메뉴'로 만들어두고, 본인은 그 메뉴 중에서 고르기만 하면 됩니다. p-4는 \"안쪽 여백 보통\", p-8은 \"안쪽 여백 큼\" 같은 식입니다.

처음 며칠은 \"어떤 게 '보통'이고 어떤 게 '큼'이지?\"가 헷갈립니다. 그 헷갈림은 도구가 아니라 본인의 미감의 문제입니다. 한 번 익숙해지면, \"여기는 살짝 좁게, 여기는 시원하게\"를 클래스로 자유롭게 옮깁니다.

2. 꼭 알 8개 카테고리

3. 30분 따라하기 흐름

1. 0~5분 — 색 두 가지 정하기 베이지/짙은 갈색, 화이트/네이비처럼 어울리는 두 색을 정합니다. Tailwind 색은 stone, slate, amber 등 이름이 있어요. 골라두면 거의 어떤 조합도 무난합니다.
2. 5~15분 — 카드 한 장 다듬기 bg-stone-100 p-6 rounded-2xl shadow-sm 한 줄로 카드 하나가 정돈됩니다. 안에 글자는 text-lg font-semibold text-stone-800처럼.
3. 15~25분 — 한 줄에 카드 3장 놓기 부모 요소에 grid grid-cols-1 md:grid-cols-3 gap-6. 모바일에서는 한 줄, 데스크탑에서는 세 줄. 자동 반응형.
4. 25~30분 — 호버 + 작은 디테일 카드에 hover:shadow-lg transition을 더하면 마우스만 올려도 입체감이 살짝 들립니다. 본인 눈에 '예쁘게'가 한 단계 올라가는 순간입니다.

4. 한계와 '본인 색깔'

Tailwind는 '평균 이상' 디자인을 빠르게 만들지만, '독창적' 디자인은 본인이 따로 만들어야 합니다. 다행히 기초반은 \"평균 이상\"이 목표이고, 그 다음 단계는 본인이 시간을 가지고 직접 톤을 만들어 가는 단계입니다.

본인 색깔을 만들고 싶을 때는, 다음 3가지부터 고정하시면 좋습니다.

• 색 2~3가지 팔레트 — 매번 다른 색을 쓰지 않고 정해진 색만 반복.
• 폰트 1~2종 — 메인 제목용·본문용으로만 구분.
• 여백 단위 — 8px·16px·24px·32px 같은 일정한 단위.

마치며

디자인은 거창한 재능이 아니라 '반복되는 작은 선택'의 집합입니다. Tailwind는 그 선택을 메뉴로 만들어주는 도구입니다. 다음 글에서는 '1인 사업자가 외주 없이 사이트를 운영'할 때의 진짜 비용·시간 계산을 다룹니다.