이미지 배치 자동화로 발행 파이프라인 단순화

캐릭터 섹션의 이미지들을 자동으로 배치하는 기능을 lib_publish.js에 구현했다. 소제목별로 균등하게(약 3개씩) 이미지를 분배하는 로직인데, 이렇게 하니까 발행 시 수동 배치에 들이던 시간이 확 줄었다.

왜 자동 배치가 필요했나

처음엔 콘텐츠 작성자가 각 섹션에 이미지를 직접 삽입했다. 괜찮아 보이지만 스케일이 커지면서 문제가 생겼다.

• 일관성 부재: 어떤 섹션은 이미지 5개, 어떤 섹션은 1개 식으로 배치가 들쑥날쑥
• 휴먼 에러: 이미지를 빼먹거나 순서를 헷갈리는 일이 자주 발생
• 속도 저하: 모든 이미지를 수동으로 배치하려니 발행까지 시간이 꽤 오래 걸림
• 유지보수 부담: 콘텐츠가 변경되면 다시 수동으로 정렬해야 함

팀에서 콘텐츠 발행 속도가 중요한 만큼, 이 반복 작업을 자동화하는 게 가치가 있겠다고 판단했다.

소제목 기준 균등 배치 로직

구현의 핵심은 "소제목 균등"이라는 전략이다.

균등하게 배치하는 이유는 두 가지다:
- 시각적 균형: 특정 섹션만 이미지가 많으면 읽기에 지쳐 보인다
- 가독성: 적절한 간격의 이미지는 콘텐츠 흐름을 자연스럽게 해줌

만약 정확히 3개씩 나누어떨어지지 않으면(예: 소제목 4개, 이미지 10개) 끝쪽에 몇 개가 더 들어가는 식으로 유연하게 처리한다. 엄격함보다는 "대략 균등"이 실무에 맞다.

발행 파이프라인에서의 위치

발행 로직(lib_publish.js)에 이 기능을 넣은 이유는, 발행 직전에 모든 이미지를 수집하고 배치하는 게 가장 안전하기 때문이다:

• 타이밍: 최종 렌더 직전에 배치 → 이미지 추가/삭제 사항 반영됨
• 독립성: 콘텐츠 작성 단계와 분리 → 작성자는 자유롭게 작성 가능
• 재사용성: 발행할 때마다 동일한 규칙 적용 → 일관성 보장

이렇게 하니까 팀이 콘텐츠 작성에만 집중할 수 있고, 발행은 시스템이 책임진다는 믿음이 생겼다.

개발 회고

이 작업을 통해 느낀 몇 가지:

자동화할 때 고려할 점:
- 완벽한 자동화보다 "충분히 일관된" 자동화가 낫다. 특수 케이스 처리로 코드가 복잡해지면 차라리 수동이 더 빠를 수 있다.
- 로직이 명확할수록 나중에 디버깅이 쉽다. "약 3개씩"처럼 느슨한 규칙을 코드에 명시적으로 남기는 게 중요.

배운 점:
- 발행 시스템은 모든 후처리 로직이 모여 있는 곳이다. 이곳에 뭔가 추가할 때는 "이게 다른 발행 로직과 충돌하지 않나"를 먼저 확인해야 한다.
- 이미지 처리 같은 콘텐츠 관련 기능은 성능이 중요하다. 대량 이미지가 있어도 발행 시간이 크게 늘어나지 않도록 설계해야 팀이 답답해하지 않는다.

팀에 미친 영향:
- 발행 프로세스가 한 단계 단순해졌다.
- 콘텐츠 일관성 개선 → 사용자 경험도 좋아짐.
- 자동 배치가 작동하는지 검증하는 과정에서 팀과 "이미지는 몇 개가 적당한가" 같은 실질적 대화를 할 수 있었다.

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

• 노트북 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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