.png)
<aside>
<aside> <img src="/icons/bookmark_blue.svg" alt="/icons/bookmark_blue.svg" width="40px" />
</aside>
</aside>
<aside> <img src="/icons/cursor_gray.svg" alt="/icons/cursor_gray.svg" width="40px" />
수년간 누적된 하드코딩과 테이블 기반 마크업이 뒤엉킨 레거시 코드베이스(PHP + JavaScript) 때문에 전체 흐름을 파악하기가 어려웠습니다. 구조가 복잡해 한 부분을 수정하면 의존 관계가 얽힌 다른 기능에서 연쇄 오류가 빈번하게 발생했습니다.
이를 해결하기 위해 아래와 같은 방법을 적용했습니다.
먼저, 수정 대상 기능의 핵심 파일과 함수를 식별한 뒤 메모로 실행 흐름을 간단히 스케치했습니다. 이어서 관련 PHP 로직·JS 이벤트·테이블 의존성을 추적해, 변경 사항이 다른 영역에 미칠 영향을 정리했습니다.
각 수정 전 파일을 기능·날짜별 스냅숏으로 백업해 언제든 롤백할 수 있는 안전 지점을 마련했습니다. 이후 가장 작은 모듈 단위로 코드를 리팩터링해 FTP로 배포한 뒤, 즉시 실행해 오류를 실시간으로 확인·수정하는 과정을 반복하며 연쇄 오류를 차단하고 전체 코드를 점진적으로 안정화했습니다.
결과
복잡하게 얽혀 있던 레거시 결제 로직을 모듈 단위로 재설계하고, 핵심 기능별로 코드를 분리해 가독성을 높임으로써 결제수단 변경이나 신규 도입 시에도 안정적으로 작동하도록 구조를 정비하고 유지보수 효율성까지 향상시켰습니다.
</aside>
<aside> <img src="/icons/cursor_gray.svg" alt="/icons/cursor_gray.svg" width="40px" />
UI/UX 작업 초기에는 디자인 틀을 먼저 완성한 뒤 기능을 이식하는 방식으로 진행했습니다.
하지만 오래된 PHP 문법과 CSS 충돌로 인해 !important와 인라인 스타일을 남용하게 되었고,
작업이 진행될수록 UI 비노출·버튼 미작동·기능 충돌 등 문제가 반복 발생했습니다.
기능을 수정하면 UI가 깨지고, UI를 손보면 기능이 망가지는 악순환 속에서 유지보수 효율이 급격히 떨어지고, 디버깅에도 과도한 시간이 소요됐습니다.
이를 해결하기 위해 아래와 같은 방법을 적용했습니다.
초기에는 UI 틀을 먼저 완성하고 기능을 이식하는 방식으로 개발을 진행했으나,
반복적인 충돌과 오류로 인해 코드를 전면 롤백하고, 기능 중심 개발 방식으로 전환했습니다.
결제 페이지에서 클라이언트가 요청한 핵심 기능을 우선 구현한 후, 기능 완료 기준으로 UI 요소를 단계별로 추가하며 기능 안정화 → UI 적용 순서로 작업을 진행했습니다.이 방식은 기능이 명확히 정의된 상태에서 UI를 붙일 수 있어, 오류 추적과 수정이 훨씬 용이했습니다.
기존 CSS와의 충돌을 방지하기 위해, CSS 파일 최하단에 네임스페이스 방식으로 새 스타일을 정의하고, 주석을 활용해 기능별 스타일 영역을 명확히 구분함으로써 유지보수 편의성을 높였습니다.
결과
기능 안정화 후 UI를 적용하는 방식으로 스타일 충돌과 연쇄 오류를 방지했고, 네임스페이스·주석 분리를 통해 유지보수성과 재사용 효율까지 높일 수 있었습니다.
</aside>