기능 추가가 반복되면서 복잡해진 소스 코드를 정리하고 장기적인 유지보수가 가능하도록 전체적인 페이지 구조 리팩토링을 단행했다.
의미를 알 수 없던 수많은 div 태그들을 걷어내고 HTML5 시맨틱 태그를 도입해 문서의 논리적 계층 구조를 새롭게 정립했다.
header, nav, main, footer 등 각 영역의 역할에 맞는 태그를 배치하여 코드만 보고도 페이지의 구성을 한눈에 파악할 수 있게 개선했다.
스타일 시트 역시 BEM 방법론을 참고해 클래스 명명 규칙을 통일하고, 중복되는 레이아웃 코드를 외부 CSS로 분리하여 관리 효율을 높였다.
이러한 구조적 개선이 단순히 보기 좋은 코드를 만드는 것을 넘어 검색 엔진 최적화와 웹 접근성 향상에 실질적인 도움을 준다는 점을 데이터로 확인했다.
논리적으로 정돈된 뼈대가 소프트웨어의 안정성을 지탱하는 핵심 기반임을 실감했다.
누구나 쉽게 읽고 수정할 수 있는 코드를 작성하는 과정에서 개발자로서의 책임감을 느꼈다.
지속적인 리팩토링을 통해 기술 부채를 해결하고 변화에 유연하게 대응할 수 있는 견고한 아키텍처를 완성했다.
깨끗한 코드가 결국 서비스의 품질로 직결된다는 사실을 다시 한번 가슴에 새겼다.
