사내 웹사이트 유지보수 및 운영

상황

신규 입사 이후, 회사에서 운영 중이던 여러 개의 서비스 사이트와 파트너 포털들이 모두 제 담당으로 넘어오게 되었습니다. 이 사이트들은 공통적으로 워드프레스로 구축되어 있었고, 서비스마다 역할과 타깃이 달라 사이트 수는 많은데 구조와 스타일은 제각각인 상태였습니다. 처음에는 단순한 유지보수 정도로 생각했지만, 실제로 코드를 들여다보니 한 페이지 안에 모든 마크업이 뒤섞여 있거나, 메인 CSS 한 파일에 모든 스타일이 몰려 있는 등 관리 난이도가 높아진 상태였습니다.

원인 분석

워드프레스를 본격적으로 다뤄본 경험이 없던 터라, 처음에는 테마 구조와 템플릿 계층, 플러그인 동작 방식을 이해하는 데만도 시간이 꽤 걸렸습니다. 각 페이지는 별도의 템플릿이나 블록 단위 구분 없이 하나의 파일에 통째로 작성되어 있었고, CSS 역시 공통/개별 스타일이 뒤섞여 있어 작은 수정에도 영향 범위를 파악하기 어려웠습니다. 그 결과 단순한 텍스트 수정이나 UI 조정에도 '이 코드가 어디에 연결되어 있는지'를 찾는 데 불필요한 시간이 많이 소요되고 있었습니다. 이 상태를 그대로 유지한 채 유지보수만 반복한다면, 시간이 지날수록 품질과 작업 효율이 더 떨어질 수밖에 없다고 판단했습니다.

행동

먼저 사이트별 역할과 핵심 기능을 정리하고, 워드프레스 내에서 재사용 가능한 구조를 만드는 데 집중했습니다. 섹션과 기능 단위로 코드를 나누고, 반복해서 등장하는 레이아웃이나 요소들은 워드프레스의 템플릿 파트, 재사용 블록, 숏코드 등을 활용해 '컴포넌트처럼' 재구성했습니다. 스타일 역시 공통 요소와 페이지/기능별 스타일을 분리해, 필요한 CSS를 묶어서 관리할 수 있도록 구조를 정리했습니다. 이렇게 정리 작업을 먼저 AIONCLOUD 사이트에 적용해 코드와 파일 구조를 다시 잡은 뒤, 같은 패턴을 AIWorks 사이트에도 확장 적용하는 방식으로 진행하고 있습니다. 한편, AIWorks 안에서는 그룹웨어와 SFA 등 여러 기능이 함께 제공되는데, SFA 영역에는 Chart.js를 활용해 AI 기반 매출 추이를 시각화하는 대시보드를 추가했습니다. Chart.js는 워드프레스 환경에서도 비교적 쉽게 연동할 수 있고, 다양한 차트 타입과 애니메이션, 반응형 대응이 잘 되어 있어 데이터 변화를 직관적으로 보여 주기에 적합하다고 판단했습니다.

결과

정리 작업을 마친 AIONCLOUD 사이트의 경우, 수정이 필요할 때 이전처럼 코드 위치를 찾는 데 시간을 낭비하지 않고, 어떤 템플릿과 블록을 건드려야 하는지 명확하게 파악한 뒤 빠르게 대응할 수 있게 되었습니다. AIWorks 역시 점진적으로 같은 패턴으로 정리해 나가면서, 하나의 서비스 안에서 그룹웨어와 SFA 등 다양한 기능을 일관된 UI와 구조로 제공할 수 있는 기반을 마련하고 있습니다. 특히 SFA 영역에 적용한 AI 기반 매출 추이 시각화는 영업 조직에서 실제로 자주 확인하는 지표가 되었고, 자체 개발한 그룹웨어 기능 역시 AIWorks 안에서 자연스럽게 녹아들어 하나의 통합 서비스로 활용되고 있습니다. 그 결과, 여러 개의 워드프레스 사이트와 기능들을 '각각 따로 관리해야 하는 대상'이 아니라, 공통 패턴과 컴포넌트로 묶어 관리 효율을 높인 자산으로 전환할 수 있었습니다.