인프런 커뮤니티 질문&답변

안녕하세요. Tailwind CSS 실무 사용 여부에 대해 답변하겠습니다.

실무에서는 Tailwind CSS, Instagram이나 Airbnb처럼 내부 스타일 시스템(CSS Modules, CSS-in-JS), 또는 Google/Youtube처럼 자체 빌드된 CSS 프레임워크 등 여러 가지 기법으로 디자인을 구현합니다.

1) Tailwind CSS를 사용중인 웹 서비스 예시

실제 예시로 Tailwind CSS를 사용 중인 대표적인 서비스 중 하나가 Supabase입니다.
Supabase 웹페이지의 코드(supabase/apps/ui-library/components at master · supabase/supabase)를 확인해보면 다음과 같이 HTML 요소에 Tailwind 유틸리티 클래스가 직접 적용된 모습을 볼 수 있습니다:

(supabase mode-toggle.tsx 예제코드)

'use client'

import { useTheme } from 'next-themes'
import * as React from 'react'

import { Moon, Sun } from 'lucide-react'
import { Button_Shadcn_ } from 'ui'

export function ModeToggle() {
  const { setTheme, resolvedTheme } = useTheme()
  const [, startTransition] = React.useTransition()

  return (
    <Button_Shadcn_
      className="h-7 w-7"
      onClick={() => {
        startTransition(() => {
          setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
        })
      }}
      size="icon"
      variant="ghost"
    >
      <Moon className="dark:hidden" />
      <Sun className="hidden dark:block" />
      <span className="sr-only">Toggle theme</span>
    </Button_Shadcn_>
  )
}

또한 Supabase는 block-item.tsx, command-menu.tsx, theme-switcher-dropdown.tsx, top-navigation.tsx 등에서 볼 수 있듯이, 전체 웹페이지를 컴포넌트 하나하나를 잘게 쪼개어 관리하는 구조를 사용하고 있습니다. Supabase처럼 컴포넌트를 잘게 나누고 관리하는 구조를 사용하면, 이러한 단점을 최소화하면서도 Tailwind의 생산성을 유지할 수 있습니다.
즉, 질문자님이 말씀하신 Tailwind CSS의 단점을 실무에서는 컴포넌트화와 구조화로 보완하고 있는 셈입니다.

2) 내부 스타일 시스템(CSS Modules, CSS-in-JS) 사용중인 웹 서비스 예시

(인스타그램 로그인 폼 클래스 예시)

위 사진처럼 인스타그램은 Tailwind CSS와는 다르게, x972fbf, xdt5ytf, x78zum5 같은 난독화된 클래스명을 사용하여 자체적인 내부 CSS 스타일 시스템을 구축해 사용하고 있습니다.

자체적인 내부 CSS 스타일 시스템의 이유 2가지

1. 코드 최적화 및 번들 사이즈 최소화

   • 클래스명을 짧고 해시처럼 만들면 전체 HTML과 CSS의 용량을 줄일 수 있어 페이지 로딩 속도가 향상됩니다.

   • 이런 방식은 빌드 도구(예: Webpack, Metro, Parcel)로 CSS를 압축할 때 자주 사용됩니다.

2. 크롤링 방지 및 보안 목적

   • 사람이 이해할 수 없는 클래스명은 웹 스크레이퍼나 자동화된 봇이 DOM 구조를 분석하기 어렵게 만듭니다.

   • 특히 로그인 페이지처럼 민감한 인터페이스에서는 자동화 로그인 시도나 악성 크롤링을 방지하는 효과도 있습니다.

결과적으로 인스타그램은 React 및 PHP 기반의 재사용 가능한 컴포넌트 시스템을 사용하며, 많은 개발자들이 협업하고 다양한 상황(크롤링, 웹사이트 로딩속도, AddBlock 방지)에 대응하기 위해 구조가 깊고 복잡해졌으며 Atomic CSS 시스템(Stylex)을 사용하여, 각 클래스가 하나의 속성만을 가지도록 설계해 스타일시트 크기를 최소화하고 있습니다.

Q. 만약 html 디자이너가 따로 있을때는 tailwindcss를 사용하지 않나요?

A. 말 그대로 디자이너는 Figma, Zeplin, Adobe XD 등으로 UI 시안을 제작할 뿐이고,
해당 시안에 맞춰 실제 개발이 이뤄질 수만 있다면,
Tailwind CSS를 쓰든 CSS Modules를 쓰든 회사마다 기술 스택, 협업 문화, 이후의 유지보수/인수인계 방식에 따라 달라질 것으로 예상됩니다.

즉, 실무에서는 팀 규모, 프로젝트 특성, 유지보수 전략 등에 따라 Tailwind CSS, 내부 스타일 시스템, 자체 빌드 프레임워크 등 다양한 방식이 선택되고 있습니다. 중요한 것은 어떤 기술을 사용하느냐보다, 그 기술을 팀과 프로젝트에 맞게 어떻게 구조화하고 관리하느냐입니다.

Tailwind CSS의 클래스가 많아 보일 수 있지만, Supabase처럼 잘게 나눠진 컴포넌트 구조로 관리하면 충분히 실무에서도 효율적으로 활용할 수 있습니다.

오 정성스런 답변에 링크까지 감사합니다!