카테고리 정렬과 이미지 업로드 기능 통합

지난 작업은 발행 시스템의 여러 기능을 한 번에 개선한 작업이었다. 카테고리 5개를 체계적으로 동기화하고, ChatGPT 기반 이미지 업로드 기능을 추가하면서, 동시에 섹션 이미지의 불필요한 캐릭터 요소를 제거했다. 한 커밋에 세 가지 의미 있는 변경사항이 담긴 만큼, 각각이 왜 필요했고 어떤 의도로 함께 처리되었는지 정리해본다.

배경: 여러 기능을 함께 정리하게 된 이유

발행 시스템은 시간이 지나면서 여러 플랫폼의 표준에 맞추고, 사용자 피드백을 반영하고, UI/UX를 개선해야 하는 요청들이 쌓인다. 이 경우도 마찬가지였다.

먼저 카테고리 체계 정리는 오래전부터 필요했던 작업이다. 외부 시스템(특히 AI 플랫폼이나 이커머스 PG)과의 연동을 고려하면, 카테고리 체계의 일관성이 매우 중요하다. 사용자가 콘텐츠를 발행할 때 혼란을 겪지 않아야 하고, 데이터 동기화 과정에서 매핑 오류가 발생하지 않아야 하기 때문이다. 카테고리 5개를 명확하게 정의하고 동기화하는 것은 이런 일관성을 확보하는 첫걸음이다.

ChatGPT 이미지 업로드 기능은 최근의 기술 트렌드를 반영한 것이다. AI가 생성하거나 추천한 이미지를 직접 업로드할 수 있다면, 발행자의 작업 흐름이 한 단계 더 간편해진다. 별도의 이미지 소스를 찾거나 편집할 필요 없이 시스템 내에서 완결할 수 있다는 뜻이다. 게다가 이미지 선택부터 발행까지의 시간이 줄어들면, 콘텐츠 생산 속도도 올라간다.

섹션 이미지 캐릭터 제거는 디자인 리뷰나 성능 분석의 결과물이다. 섹션마다 붙어있던 캐릭터 요소가 로딩 시간을 늘리거나 모바일 환경에서 레이아웃을 어렵게 만들 수 있다. 더 간결한 UI로 갈아탄다면 사용자 경험도 개선되고, 유지보수도 더 간단해진다.

변경 내용: 세 가지 개선사항

카테고리 5개 동기화는 cat_list.js에서 카테고리 리스트를 관리하는 로직을 정비하고, server.js에서 카테고리 조회 및 동기화 엔드포인트를 정의하는 작업으로 이루어진다. 외부 시스템과의 일관성을 유지하기 위해 카테고리 ID와 이름을 표준화하고, 필요시 자동 매핑될 수 있도록 구조를 잡는다.

ChatGPT 이미지 업로드는 lib_publish.js의 핵심 변경사항이다. 이미지 업로드 함수에 ChatGPT 이미지를 처리하는 로직을 추가하면서, 파일 검증, 저장, 메타데이터 관리 등의 과정을 통합한다. server.js에서도 새로운 이미지 업로드 엔드포인트를 정의하고, 업로드된 이미지를 발행 단계에서 참조할 수 있도록 한다.

섹션이미지 캐릭터 제거는 ui.html의 마크업 변경이다. 기존에 섹션마다 포함되던 캐릭터 이미지 요소를 제거하거나, CSS에서 display:none으로 처리하는 대신 아예 마크업에서 삭제한다. 이는 단순한 UI 변경이지만, 네트워크 요청 감소, 렌더링 성능 개선, 모바일 환경에서의 반응성 향상 등 실질적인 효과로 이어진다.

한 커밋에 담은 이유, 그리고 고민

여러 기능을 한 커밋에 담을지, 분리할지는 항상 고민이 된다. 이 경우, 나는 다음과 같은 판단을 했다.

카테고리 동기화 → 이미지 업로드 지원 → UI 간결화

이 세 가지는 발행 시스템의 한 사이클을 완성하는 작업들이다.
다시 말해, 발행자가 느끼는 사용자 경험의 관점에서 보면 하나의 "개선된 발행 흐름"이다.

각각을 분리한다면, 발행 시스템의 완성도가 점진적으로 올라가지만, 코드 리뷰하고 배포할 때 여러 번에 나뉘어 진행된다. 전체 흐름을 검증하려면 세 커밋을 모두 검토해야 하고, 혹시 중간에 한 부분이 누락되면 발행 프로세스가 온전하지 않은 상태가 된다. 한 커밋으로 묶으면, 발행 시스템의 "완성도 있는 개선"을 한 번에 검토할 수 있다.

하지만 단점도 있다. 커밋이 커질수록 특정 부분만 되돌려야 할 상황에 대응하기 어려워진다. 만약 섹션이미지 캐릭터 제거 때문에 호환성 문제가 생긴다면, 전체 커밋을 되돌려야 한다. 이 위험을 줄이려면:

• 팀원들에게 미리 각 변경사항을 설명하고, 충돌이나 의존성 문제가 없는지 확인
• 카테고리 매핑, 이미지 업로드, UI 렌더링을 모두 테스트
• 커밋 메시지를 구조화하여 나중에 특정 부분만 찾거나 분석할 수 있도록 함

회고: 여러 파일을 함께 수정할 때 배운 점

이런 작업을 하면서 느낀 점은, 변경 파일이 많을수록 의존성 그래프를 먼저 그려야 한다는 것이다.

이 경우의 의존성은:
- cat_list.js (데이터 정의) → server.js (엔드포인트)
- lib_publish.js (이미지 처리) → server.js (API)
- ui.html (화면) → server.js (필요한 데이터 조회)

server.js가 중심이 되고, 다른 파일들이 거기에 의존한다. 코드 리뷰할 때도 server.js를 먼저 보고, 각 엔드포인트가 cat_list.js와 lib_publish.js의 새로운 로직을 올바르게 호출하는지 확인해야 한다. ui.html의 변경이 생각지 못한 렌더링 문제를 만들지는 않는지도 점검해야 한다.

또 하나는 섹션이미지 캐릭터 제거 같은 UI 변경은 신중하게라는 점이다. 사용자가 보는 UI가 바뀌는 만큼, "왜 제거했는가"에 대한 근거가 있어야 한다. 성능 때문인가? 디자인 리뷰 결과인가? 그 근거가 명확하지 않으면, 나중에 되돌려 달라는 요청이 올 수 있다. 이 경우엔 처음부터 팀 내 디자인, PM과 협의를 거쳐 "캐릭터를 제거하면 로딩이 개선된다" 같은 구체적인 지표를 가지고 진행하는 게 좋다.

발행 시스템처럼 자주 사용되는 부분의 기능 개선은 팀 전체의 생산성에 영향을 미친다. 한 개발자의 빠른 작업보다, 팀의 이해와 신뢰를 얻는 과정 자체가 중요하다는 걸 다시 한 번 확인했다.

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

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

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