썸네일도 편하게

기록 발행 전, 레이어를 하나 더 추가했다. 기록 프리뷰 레이어다. 이제는 발행 버튼을 누르면 바로 저장하지 않고, 기록 미리보기부터 거친 후에 저장할 수 있다. 이 기능을 추가한 이유는 크게 두 가지다.

기록 미리보기를 만든 이유

첫 번째는 발행 전 최종 확인을 위해서다. 프리뷰 화면은 기록 목록에 노출되는 카드형/리스트형 UI의 썸네일과 동일한 비율로 구성되어 있다. 따라서 실제로 썸네일이 어떻게 보일지 미리 확인할 수 있다. 또한 발행 전에 제목과 부제목을 한 번 더 점검하고, 선택한 토픽이 적절한지도 다시 검토할 수 있다.

두 번째는 본문과 분리된 썸네일 업로드를 하고 싶었다. 많은 플랫폼에서는 썸네일을 설정하거나 노출하려면 내용에 이미지가 포함되어 있어야 한다. Sprinters에는 본문에 이미지를 넣지 않더라도, 기록을 대표하는 썸네일만 따로 자유롭게 설정할 수 있도록 만들었다.

신경써야했던 부분들

기존에는 본문에서 이미지를 선택한 뒤 대표 이미지로 설정하면, 해당 이미지가 썸네일로 지정되는 방식이었다. 별도로 대표 이미지를 설정하지 않은 경우에는 본문에 포함된 첫 번째 이미지를 자동으로 썸네일로 사용했다.

하지만 이제는 썸네일을 따로 설정할 수 있는 단계가 추가되었다. 따라서 본문의 대표 이미지 설정과 발행 전 썸네일 설정이 서로 충돌하지 않고, 하나의 자연스러운 흐름으로 이어지도록 정리할 필요가 있었다.

이번 작업의 핵심은 본문 첫 번째 이미지를 발행 시점에 자동 썸네일로 삼던 암묵적 로직을 사용자가 명시적으로 선택한 썸네일만 저장하는 로직으로 바꾼 것이다. 그래서 지금은 본문에 이미지가 있어도 대표 이미지로 설정된 게 없고, 기록 미리보기에서 따로 업로드한 이미지도 없으면 썸네일은 비어 있게 된다.

자동 썸네일 설정으로 인해 생긴 엣지 케이스 중 하나는 썸네일을 먼저 설정했을 때 발생했다. 썸네일만 지정한 후, 다시 본문에 이미지를 처음 업로드하면 해당 이미지가 대표 이미지로 지정되기 때문에 썸네일이 다시 설정되었다.

그래서 자동 대표 이미지 설정을 완전히 없애기보다는, 해당 동작이 일어나기 전에 썸네일 유무를 먼저 확인하도록 수정했다.

  
    
  
  
    
  

// 현재 기록에 대표 썸네일로 취급할 게 있는지 확인
const thumbnailExists = hasThumbnail({
  draftThumbnail,
  existingThumbnail: post.thumbnail,
});

// 업로드한 이미지를 대표 이미지로 지정해도 되는지 확인
const autoThumbnail = shouldAutoThumbnail({
  hasThumbnail: thumbnailExists,
  hasBodyImage: hasCompletedRecordImage(editor),
});

thumbnailExists는 편집 중인 초안의 썸네일 상태와 발행된 글에 저장되어 있던 썸네일도 함께 확인한다. 그리고 이 값을 자동 대표 지정 조건에 넣어, 업로드한 이미지를 대표 이미지로 지정해도 되는지에 대한 최종 확인을 거친다. 풀어서 쓰면 다음과 같다.

  
    
  
  
    
  

// 썸네일이 존재하지 않고, 본문에도 이미지가 없다면 true
const autoThumbnail =
  !thumbnailExists && !hasCompletedRecordImage(editor);

따라서 이미 썸네일을 직접 설정했거나, 수정 중인 글에 기존 썸네일이 있으면 새로 올리는 첫 본문 이미지더라도 자동으로 대표 이미지가 설정되지 않는다. 반대로 썸네일도 없고 본문에도 이미지가 없다면, 방금 올린 이미지가 첫 이미지이므로 자동 대표 이미지로 지정된다.

수정 페이지 쪽은 저장된 썸네일의 출처를 복원하기 위한 추가 로직이 필요했다. 저장된 썸네일이 본문 이미지인지, 별도 업로드한 썸네일인지, 의도적으로 썸네일을 제거한 상태인지를 알아야했다. 따라서 썸네일용 별도 컬럼을 추가해서 구성했다.

마무리

이번 기능도 꽤 마음에 든다. 관련해서 고민과 테스트를 정말 많이했고, 머리 아팠다. 기존 동작에 대한 고려도 필요했고, 자연스러운 흐름으로 만들기 위해 더 높은 이해가 필요했다. 기능이 많아지니까, 신경써야 할 부분들이 점점 더 늘고 있다. 하지만 재밌다. 내가 필요해서 만든다. 다른 사람이 써주면 더 좋고.

사용 중 불편한 점이나 개선할 부분이 있다면 저에게 알려주세요. 최대한 참고해서 수정하겠습니다. 버그 신고 · 개선 제안 링크를 통해 제출 부탁드립니다. 감사합니다!