기성 테마 위에 CSS를 덧칠하는 커스터마이징은 시안과 1:1로 맞추려는 순간 우선순위 전쟁이 된다. 디자인 시안이 확정돼 있다면 클래식 커스텀 테마를 직접 만드는 쪽이 오히려 싸다 — 필요한 파일은 12개뿐이다. 이 블로그가 그 결과물이고, CSS는 160KB에서 28KB 한 장으로 줄었다.
지난 편에서 워드프레스를 맥에 세웠으니 이번엔 겉모습입니다. 결론부터 말하면 저는 기성 테마 커스터마이징으로 시작했다가 중간에 갈아엎고 테마를 직접 만들었습니다. 이 글은 그 과정에서 배운 것의 기록입니다 — 어느 쪽이 맞는지는 상황에 따라 다르지만, 갈림길의 기준은 분명했습니다.
시안이 먼저다 — 파일이 곧 스펙
테마를 고르기 전에 한 일이 있습니다. 완성된 모습을 HTML 파일로 먼저 만들었습니다. 매거진들(원더월, 아이즈매거진)을 레퍼런스로 잡고, 홈과 글 상세 두 페이지를 브라우저에서 열리는 정적 HTML로 확정했죠. 색 토큰, 타입 스케일, 간격, 카드 컴포넌트까지 전부 이 파일 안에 있습니다.
이게 나중에 모든 판단의 기준이 됐습니다. “테마가 시안과 같은가?”는 취향 문제가 아니라 파일 두 개를 나란히 놓고 비교하면 끝나는 검증 문제가 되거든요. AI에게 작업을 맡길 때도 “이 파일과 똑같이”가 가장 정확한 지시였습니다. 실제로 나란히 놓으면 이렇습니다.
기성 테마 커스터마이징은 왜 시안과 안 맞을까?
처음엔 정석대로 했습니다. 가볍기로 유명한 기성 테마를 깔고, 그 위에 커스텀 CSS를 얹는 방식이죠. 초반엔 잘 굴러갑니다. 색 바꾸고 폰트 얹는 수준까지는요.
문제는 시안과 1:1로 맞추려는 순간부터입니다. 기성 테마는 자기 CSS를 이미 갖고 있어서, 내 규칙이 이기려면 테마 규칙보다 우선순위(specificity)가 높아야 합니다. 실제로 겪은 예를 하나만 들면 — 썸네일 비율을 16:9로 바꾸려는데 테마가 padding-bottom: 66.67%(3:2 비율)를 더 구체적인 선택자로 박아놔서, 똑같이 긴 선택자를 통째로 복사해 덮어써야 했습니다. 이런 싸움이 컴포넌트마다 반복됩니다.
덧칠 CSS는 계속 자랍니다. 테마가 업데이트되면 깨질 수 있는 폭탄도 같이 자라죠. 어느 순간 알게 됐습니다 — 저는 테마를 쓰는 게 아니라 테마와 싸우고 있었습니다.
커스텀 테마, 언제 직접 만드는 게 더 쌀까?
판단 기준은 두 개였습니다.
- 시안이 이미 확정돼 있는가? — 시안 HTML에 완성된 CSS가 통째로 있었습니다. 그럼 테마를 시안에 맞추는 것보다 시안을 테마로 옮기는 게 일이 적습니다.
- 유지보수를 누가 하는가? — 커스텀 테마의 최대 단점은 관리 부담인데, 이 블로그는 운영을 Claude Code에 맡기는 구조라 그 부담이 크게 줄었습니다. 사람이 직접 관리한다면 기성 테마 유지가 나을 수 있습니다.
워드프레스 클래식 테마는 생각보다 단순합니다. 이 블로그 테마는 파일 12개가 전부입니다.
이식의 핵심 규칙은 하나였습니다. 시안의 클래스 이름을 템플릿에서 그대로 쓴다. 마크업 구조가 시안과 같으면 CSS는 손대지 않고 통째로 옮겨도 그대로 먹습니다. “비슷하게”가 아니라 “같게”가 오히려 쉽습니다.
숫자로 — 갈아엎은 값어치
| 항목 | 기성 테마 + 덧칠 | 커스텀 테마 |
|---|---|---|
| CSS | 약 160KB, 여러 파일 | 약 28KB 한 장 |
| 페이지당 요청 | 20개 이상 | HTML 외 6개 |
| 시안 재현도 | 싸우면서 근사치 | 클래스까지 1:1 |
| 테마 업데이트 리스크 | 있음 (덧칠 깨짐) | 없음 (의존 없음) |
| 관리 주체 | 테마 제작사 + 나 | 나 (= Claude Code) |
겪어봐야 아는 함정 3개
커스텀 테마로 넘어와서도 함정은 있었습니다. 전부 CSS가 아니라 워드프레스의 습관 때문이었습니다.
- wpautop — 워드프레스는 본문에 문단 태그와 줄바꿈을 자동 삽입합니다. 정교한 HTML 블록(참고 문헌 박스 등)이 이것 때문에 벌어지면, 블록을 한 줄로 압축해서 넣으면 됩니다.
- 모바일 여백 증발 — 좌우 여백을 주는 요소에
padding: .95rem 0처럼 상하 패딩을 덮어쓰면 좌우가 0이 되어버립니다.padding-block으로 상하만 건드리는 게 안전합니다. - 그리드 가로 넘침 — CSS 그리드의 기본
min-width: auto때문에 긴 콘텐츠가 화면 밖으로 밀립니다.1fr대신minmax(0,1fr), 그리드 안 요소에min-width: 0.
정리
- 시안을 파일로 먼저 확정 — 이후 모든 판단이 검증 문제가 된다
- 덧칠 커스터마이징은 색·폰트까지는 좋지만, 1:1 재현부터는 우선순위 전쟁
- 시안이 확정돼 있고 관리를 AI에 맡긴다면 커스텀 클래식 테마가 더 싸다 — 파일 12개면 된다
- 클래스 이름을 시안과 같게 — CSS를 그대로 이식하는 열쇠
- wpautop · padding-block · minmax(0,1fr) — 워드프레스 습관 3개는 미리 알고 가자
다음 편은 이 글에서 계속 나온 그 시안의 간격·글자 크기를 정한 방법 — 타입 스케일과 4px 그리드입니다.
