Design System 스타일 보호 — CSS (tailwindcss-obfuscator)

• 디자인 시스템의 Tailwind 클래스 이름을 빌드 결과물에서 짧은 이름으로 바꾼다
• 소스는 그대로 두고 빌드 뒤에 CLI 로 치환한다
• 시크릿 창에서만 깨지던 건 CSS 초기 커시 문제였다

왜 했나

Tailwind 는 클래스 이름이 곧 스타일이라서 개발자 도구만 열면 디자인 시스템이 그대로 보인다. 복사해 가기도 쉽다. 완벽하게 막을 수는 없지만 읽기 어렵게 만들기로 했다.

세 단계

소스에서 쓰는 클래스를 모아 class-mapping.json 에 원래 이름과 바꿀 이름을 적는다. 그다음 .next 결과물의 CSS, JS, HTML 에서 이 매핑대로 이름을 치환한다. 소스 코드는 손대지 않아서 개발할 때는 평소처럼 읽기 쉽다.

다른 방법과 비교

CSS Modules 나 vanilla-extract 도 빌드 때 해시 이름을 만들지만 스타일 작성 방식 자체를 바꿔야 한다. styled-components 는 런타임에 클래스를 만들어서 비용이 들고 서버 컴포넌트와도 잘 안 맞는다. obfuscator 는 Tailwind 를 그대로 쓰면서 결과물만 바꾼다는 게 차이다.

남긴 것, 뺀 것

flex, relative 처럼 너무 흔한 클래스는 일부러 그대로 두었다. 바꿔봐야 감추는 게 없고 서드파티 코드와 부딪힐 수만 있다. simplebar, swiper 처럼 라이브러리가 자기 클래스 이름으로 DOM 을 찾는 경우는 치환 대상에서 뺐다. 문자열을 조합해서 만드는 클래스 이름은 매핑에 안 잡힐 수 있어서 따로 확인해야 한다.

빌드 파이프라인

next build 로 결과물을 만든 뒤 tw-obfuscator CLI 를 돌리고, 그다음 fixup 스크립트로 제외 대상과 깨진 부분을 맞춘다. webpack 플러그인으로 빌드 중간에 끼우는 방식도 있는데 이건 쓰지 않았다. Next 버전이나 번들러가 바뀌면 같이 깨지기 쉬워서, 빌드가 끝난 파일만 다루는 쪽이 더 단순했다.

next build
npx tw-obfuscator   # .next 결과물 치환
# fixup: 제외 대상, 깨진 부분 보정

시크릿 창에서만 깨지던 문제

배포 뒤에 일반 창은 멀정한데 시크릿 창에서만 스타일이 깨졌다. 원인은 CSS 파일 이름이었다. 빌드 때 붙은 HASH.css 이름은 그대로인데 치환 뒤 내용이 바뀌어서, 같은 이름으로 치환 전 파일을 들고 있던 커시와 새 HTML 이 섞였다. CSS 에 재검증 헤더를 붙여서 해결했다. 내용을 바꾸면 파일 이름도 같이 바꿔야 한다는 걸 여기서 배웠다.