전체 페이지 스크롤 버그와 마크업 패턴 파편화를 한 번에 정리

두 파일만 건드렸는데, 이게 생각보다 팀 전체 흐름을 정리하는 작업이었다.

왜 이게 지금 나왔냐면

body overflow 문제는 사실 꽤 오래된 이슈였다. 언젠가 모달 레이어나 드로어 컴포넌트를 붙이면서 overflow: hidden을 body에 걸었던 게 그대로 남아있던 것. 당장 눈에 띄는 버그는 아니라서 티켓 우선순위에서 계속 밀렸고, 결국 "스크롤이 왜 안 돼요?" 같은 제보가 쌓이고 나서야 손을 댔다.

팀 리드 입장에서 이런 류의 이슈가 제일 골치 아프다. 긴급하지 않으니 백로그에 묻히고, 묻히다 보면 나중엔 원인 파악도 흐릿해진다. 이번엔 index.html과 styles.css 두 파일로 범위가 좁았기 때문에 그나마 깔끔하게 잡을 수 있었다.

변경 내용 정리

body overflow 해제 자체는 코드로 보면 아주 단순하다.

/* before */
body {
  overflow: hidden;
}

/* after */
body {
  /* overflow 제거 — 모달 잠금은 .modal-open 클래스로 위임 */
}

문제는 이걸 그냥 지우는 게 아니라, 모달이 열렸을 때 스크롤을 막는 책임을 어디에 둘 건지 명확히 해야 한다는 거다. body에 직접 걸면 모달 상태와 관계없이 항상 스크롤이 막히니까, 모달 열릴 때 .modal-open 같은 클래스를 body에 토글하는 패턴으로 가는 게 맞다. 이 부분을 팀원들한테 PR 코멘트로 남겨뒀다. 나중에 비슷한 패턴 작업할 때 같은 실수를 반복하지 않도록.

admin_db 마커 패턴 통일 얘기

이쪽이 사실 더 신경 쓴 부분이다. index.html 내에서 admin_db 관련 마커가 파일 여러 곳에 제각각 형태로 박혀 있었다. 누군가는 주석으로, 누군가는 data 속성으로, 어떤 건 아예 id 네이밍으로만 암묵적으로 표시한 것들이 섞여 있었던 것.

<!-- 기존: 파편화된 패턴들 -->
<!-- admin_db: user_table -->
<div id="adminDbUserTable">...</div>
<div data-db="admin" data-table="user">...</div>

<!-- 통일 후 -->
<div data-admin-db="user_table">...</div>
<div data-admin-db="order_table">...</div>

이런 파편화는 당장 기능에 영향은 없지만, 나중에 이 마커를 파싱하거나 자동화 스크립트로 추적해야 할 때 일관성이 없으면 그때 가서 다 뜯어고쳐야 한다. 지금 통일해두지 않으면 패턴이 더 퍼지기 전에 못 잡는다는 판단이었다.

코드리뷰에서 "왜 지금 이걸 건드리냐"는 질문이 나올 수 있는 작업이다. 이런 건 배경을 PR 설명에 짧게라도 써두는 게 팀 전체 맥락 공유에 도움이 된다. 기능 변경이 없어 보이는 리팩터링일수록 더 그렇다.

작은 파일, 큰 패턴

변경 파일 수는 두 개, 코드 줄 수도 크지 않다. 그런데 이런 작업이 쌓이지 않으면 나중에 훨씬 큰 비용을 치른다. 스타일 전역 오염, 마크업 패턴 파편화 — 둘 다 전형적인 "나중에 정리하자"의 결말이다.

팀 리드로서 이런 핀포인트 수정들을 얼마나 제때 챙기느냐가 코드베이스 건강도를 꽤 많이 좌우한다고 생각한다. 기능 개발 속도에 밀려 계속 뒤로 미루다 보면, 결국 신규 입사자가 "여기 왜 이렇게 돼 있어요?"라고 물어봤을 때 아무도 답을 못 하는 상황이 된다.

다음 스프린트엔 비슷한 패턴 정리 건을 아예 작은 태스크로 나눠서 팀원들이 번갈아 담당하는 방식을 시도해볼 생각이다.

끝.

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

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

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