콘텐츠 발행 때 이미지 URL 자동 처리로 작업 단순화
목차
콘텐츠를 발행할 때마다 이미지 URL을 수동으로 옮기고 링크를 설정하는 반복 작업을 자동화했다. lib_publish.js에서 발행 로직을 개선하고 ui.html의 UI 부분을 손봐서 이미지별로 링크를 선택할 수 있게 만들었다.
콘텐츠 발행 파이프라인의 숨은 복잡성
콘텐츠 관리 시스템에서 블로그나 뉴스 기사 같은 걸 발행할 때, 보통 이미지 처리가 까다로운데, 특히 여러 이미지가 포함될 때 그렇다. 각 이미지마다:
- 저장 위치가 다를 수 있고 (임시 저장소 → 최종 저장소)
- 그때그때 URL 형식이 바뀔 수 있으며
- 때론 이미지에 링크를 붙여야 할 때도 있고 아닐 때도 있다
이걸 매번 손으로 처리하면 실수도 잦고, 작업 시간도 오래 걸린다. 특히 한 번에 10개, 20개 이미지를 발행하는 상황이면 더 그렇다. 게다가 사람마다 URL 형식을 다르게 입력하면 나중에 일관성 문제도 생긴다.
자동화 로직과 유연성의 균형
이번 작업에서는 두 가지를 동시에 풀려고 했다.
첫째, 이미지 URL 자동 이식. 발행 시점에 소스에서 타겟으로 이미지를 이동할 때, 그 과정에서 새로운 URL을 자동으로 계산해서 콘텐츠 본문에 반영하게 했다. lib_publish.js의 발행 로직에서 이미지 처리 단계를 구조화하고, 각 이미지마다 변환 규칙을 일관되게 적용할 수 있게 설계했다.
둘째, 이미지별 링크 요청. 다만 모든 이미지가 링크를 필요로 하는 건 아니다. 어떤 이미지는 그냥 이미지 자체로 충분하고, 어떤 이미지는 클릭하면 상세 페이지로 가야 할 수도 있다. 그래서 UI 레벨에서 각 이미지별로 사용자가 링크를 붙일지 말지 선택하도록 했다. 발행 전 미리보기 화면(ui.html)에서 "이 이미지에 링크를 붙일까?"를 물어보는 방식이다.
이렇게 하면:
- 자주 반복되는 작업은 자동화해서 시간을 절약하고
- 어떤 이미지에는 개별적인 처리가 필요할 수 있으니 그 선택권은 남겨둔다
프론트와 백의 책임 분리
파일 구성을 보면 lib_publish.js와 ui.html이 분리된 이유가 있다.
lib_publish.js는 발행의 핵심 로직을 담는다. 데이터베이스에 저장된 콘텐츠를 읽고, 이미지 URL 변환 규칙을 적용하고, 최종적으로 발행 가능한 상태로 만드는 일이다. 이건 서버 사이드 로직이라 매번 같은 규칙으로 일관되게 실행되어야 한다.
ui.html은 발행 전 최종 검증 단계를 담는다. 사용자가 실제로 보게 될 화면이고, "이미지별 링크 옵션"을 선택하는 UI가 여기에 있다. 사용자 입력에 따라 발행 로직을 살짝 조정할 수 있게 해주는 부분이다.
이렇게 분리하면 나중에 발행 로직을 바꿔야 할 때 UI는 건드리지 않아도 되고, UI를 개선하고 싶을 때도 발행 로직 전체를 건드릴 필요가 없다.
회고: 자동화할 때의 선택과 집중
이 정도 규모의 작업을 하면서 느낀 게 하나 있는데, 자동화할 부분과 사용자 개입이 필요한 부분을 구분하는 게 중요하다는 것이다.
처음엔 "이미지 URL을 자동화하면, 링크도 함께 자동으로 붙여주면 더 편하지 않을까?" 싶을 수 있다. 하지만 링크 대상은 이미지마다 다를 수 있고, 자동으로 판단하기 어렵다. 예를 들어 상품 이미지면 상품 페이지로, 블로그 썸네일이면 블로그 포스트로 가야 하는데, 그걸 자동으로 알기는 힘들다.
그래서 URL처럼 기계적이고 반복적인 부분은 자동화하고, 의도 판단이 필요한 부분(링크 여부, 링크 대상)은 사용자 인터페이스로 남겨두는 게 맞다. 이건 개발 효율 뿐만 아니라 콘텐츠 품질 관점에서도 중요하다. 발행하기 전에 한 번 더 검토하는 단계가 있으니까.
비슷한 작업을 다시 만날 때는, 처음부터 "이 부분은 왜 자동화해야 하고, 이 부분은 왜 사람이 판단해야 하는가"를 명확히 할 생각이다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.