홈페이지 리뉴얼이나 반응형 개편을 맡기면서 "최신 CSS 기능을 쓰면 코드가 깔끔해진다"는 말을 들어본 적 있을 겁니다. 결론부터 말하면 한 파일의 코드는 짧아져도, 여러 파일이 서로 얽혀 돌아가는 전체 구조는 오히려 복잡해질 수 있습니다. 그래서 Container Query 같은 모던 CSS 기능을 들일 때는 코드 줄 수가 아니라 CSS와 자바스크립트가 같은 동작을 중복으로 건드리고 있는지부터 확인해야 합니다.
코드가 짧아져도 구조는 복잡해지는 이유
Container Query는 특정 영역(컨테이너)의 크기에 따라 안의 요소 스타일을 바꿔주는 CSS 기능으로, 예전에는 자바스크립트로 화면 크기를 감지해 처리하던 일을 CSS만으로 해결해 줍니다. 문제는 기존에 쓰던 자바스크립트 감지 코드(ResizeObserver 같은 크기 감지 도구)를 그대로 남겨둔 채 새 기능을 추가하는 경우입니다. 이렇게 되면 한쪽 파일만 보면 코드는 단순해 보이지만, CSS와 자바스크립트가 서로 다른 기준값으로 같은 화면 요소를 제어하면서 예상치 못한 화면 깨짐이 발생합니다.
중복 제어가 실제 화면에 남기는 흔적
이런 중복 제어는 당장 눈에 띄지 않다가 특정 화면 크기나 특정 브라우저에서만 버튼이 두 번 겹쳐 보이거나, 메뉴가 열렸다 닫혔다를 반복하는 식으로 드러납니다. 담당 개발자가 바뀌거나 외주사가 교체될 때 이런 숨은 중복이 방치되기 쉬워, 홈페이지를 운영하는 입장에서는 "분명 고쳤는데 다른 페이지에서 또 깨진다"는 민원을 받게 됩니다.
| 역할 | CSS가 맡아야 할 일 | 자바스크립트가 맡아야 할 일 |
|---|---|---|
| 크기 대응 | 요소 크기·배치 표현 | 데이터 로딩 후 레이아웃 트리거 |
| 상태 전환 | 단순 보이기·숨기기 | 사용자 입력에 따른 상태 저장 |
| 비동기 처리 | 해당 없음 | 서버 통신, 타이밍 제어 |
외주 개발팀에 확인해야 할 체크리스트
- 중복 제어 구간 찾기 화면 크기나 레이아웃을 바꾸는 코드가 CSS와 자바스크립트 양쪽에 동시에 존재하는지 개발팀에 구체적으로 물어보고 목록화합니다.
- 레거시 선택자 전수 조사 예전 방식으로 짜인 클래스명이나 선택자가 새 코드와 함께 남아 있지 않은지 전체 파일 기준으로 확인합니다.
- 역할 기준 재정의 "크기와 구조는 CSS, 상태와 비동기 처리는 자바스크립트"라는 원칙을 문서로 남겨 이후 작업자가 참고하도록 합니다.
- 리뉴얼 범위 명확히 하기 일부 컴포넌트만 모던 CSS로 바꾸는 부분 적용은 피하고, 바꾸기로 한 영역은 관련 자바스크립트까지 함께 정리하도록 요청합니다.
- 실제 기기 테스트 여러 화면 크기와 브라우저에서 메뉴, 버튼, 레이아웃이 중복 반응하지 않는지 직접 확인합니다.
단순해 보이는 리뉴얼일수록 놓치는 것들
- 코드 줄 수가 줄었다는 보고만 보고 내부 구조가 정리됐다고 오해하는 경우가 많습니다. 실제로는 역할 분담 없이 기능만 추가됐을 수 있습니다.
- 새 기능 적용 후 기존 코드를 지우지 않고 "혹시 몰라서" 남겨두는 습관이 가장 흔한 원인입니다. 남겨둔 코드가 나중에 충돌을 일으킵니다.
- 디자인 변경 요청만 하고 내부 구조 점검은 요청하지 않는 경우, 겉모습은 바뀌어도 숨은 버그는 그대로 이어집니다.
한 줄 정리 모던 CSS 도입의 목적은 코드를 짧게 만드는 것이 아니라 CSS와 자바스크립트의 역할을 명확히 나누는 데 있습니다. 홈페이지 리뉴얼을 맡길 때는 코드량보다 중복 제어 여부를 먼저 확인해야 합니다.