포스트 레이아웃 인라인 클래스 정리로 팀 유지보수 비용 줄이기

레이아웃 파일 하나에서 inline class 를 정리하는 작업이었다.

왜 이게 팀 이슈가 됐나

블로그나 콘텐츠 중심 사이트를 운영하다 보면 특정 포스트 카테고리는 외부 데이터를 그대로 인입해서 렌더링하는 경우가 생긴다. K-STARTUP, BIZINFO 같은 출처에서 긁어온 본문은 원본 HTML 구조 자체가 우리 스타일 시스템과 맞지 않는 경우가 많다. 원본 마크업에는 이미 인라인 스타일이나 클래스가 덕지덕지 붙어 있거나, 반대로 아무런 스타일 힌트 없이 날것의 텍스트만 들어오기도 한다.

문제는 Post.astro 라는 공용 레이아웃에서 이걸 받아서 처리하다 보면 "이 포스트는 일반 포스트인가, K-STARTUP 포스트인가, BIZINFO 포스트인가" 를 구분하는 분기 로직이 생기고, 그게 조금씩 쌓이면서 inline class 가 점점 무거워진다. Tailwind 든 BEM 이든 어떤 방식을 쓰든 레이아웃 파일에 직접 때려 박은 클래스가 많아질수록 유지보수 시 "이 클래스는 어느 상황에서 붙는 거지?" 라는 질문이 반복된다.

팀원이 PR 에서 한 번 짚었던 포인트이기도 했다. 신규 카테고리 포스트 추가할 때 레이아웃 파일을 열면 inline class 가 많아서 어느 줄이 어느 케이스를 담당하는지 파악하는 데 시간이 걸린다고. 이게 쌓이면 온보딩 비용이 된다.

이번 작업 내용

src/layouts/Post.astro 파일에서 K-STARTUP 과 BIZINFO 본문 영역에 붙어 있던 inline class 를 minimal 하게 정리하는 작업이었다. "minimal styling" 이라는 표현이 핵심인데, 없애는 게 아니라 필요한 것만 남기는 방향이다.

보통 이런 작업에서 선택지는 세 가지 정도 된다.

이번에는 세 번째 방향을 택했다. 레이아웃 파일이라는 특성상 전면 리팩토링은 리스크가 있고, 지금 당장 공용 컴포넌트로 분리할 만큼 재사용 패턴이 확정되지 않은 상황이었기 때문이다. "지금 불필요한 것만 걷어낸다" 는 원칙으로 접근했다.

Astro 레이아웃 파일 특성상 아래처럼 조건부 class 바인딩이 누적되는 패턴이 흔하다.

<div
  class:list={[
    'prose max-w-none',
    isKStartup && 'text-sm leading-relaxed tracking-tight',
    isBizinfo && 'text-sm leading-loose font-light',
    isKStartup && 'border-l-2 pl-4',
  ]}
>
  <slot />
</div>

이런 식으로 조건 분기가 인라인에 묶여 있으면 한눈에 보기 어렵다. minimal styling 방향으로 정리하면 양쪽 케이스에서 실제로 시각적 차이를 만들지 않는 클래스는 과감히 제거하고, 공통되는 건 기본 class 로 올린다.

회고

style 커밋은 우선순위에서 자주 밀린다. 기능도 아니고 버그 수정도 아니니까. 근데 레이아웃 파일의 inline class 누적은 조용히 팀 속도를 갉아먹는다. 새 카테고리 추가할 때, 기존 카테고리 스타일 수정할 때마다 맥락 파악 비용이 붙는다.

총괄 입장에서 이런 작업은 "지금 당장 안 해도 되는데 지금 해두면 나중에 확실히 이득인 것" 카테고리다. 스프린트 사이 공백이나 다른 작업 대기 시간에 끼워 넣는 게 맞다. 대형 리팩토링으로 키우지 않고 커밋 하나 단위로 끊는 것도 중요하다. 이번처럼 Post.astro 하나, 변경 범위 명확, 리뷰 부담 낮은 방식이면 팀원도 부담 없이 리뷰할 수 있다.

코드리뷰에서 style 커밋을 볼 때 내가 주로 보는 건 "제거한 클래스가 실제로 렌더링에 영향 없는지" 다. 특히 외부 콘텐츠 인입 포스트는 로컬에서 재현하기 어려운 엣지케이스가 있을 수 있어서 변경 전후 스크린샷 비교를 PR 에 같이 올려달라고 요청하는 편이다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.