게시글 이미지 업로드 로직에 대한 고민 문제 해결 과정(Quill)

개발자들이 이용하게 될 커뮤니티를 만들면서 에디터에 대한 고민을 많이 하게 되었다. 특히 개발자를 대상으로 한다는 점에서 Heading,코드블럭,indent 등의 기능을 반드시 제공해야 한다고 생각했다.
처음에는 에디터를 내가 생각하는 핵심적인 기능들만 모아 최대한 커스텀 제작을 하고자 했지만, 제한된 개발 기한 안에는 완성도 높게 만들기 어렵다고 판단하여 react-quill 에디터 라이브러리를 사용하게 되었다.

 

그리고 이번 글에서는 게시글 작성 페이지에서 이미지를 업로드하는 로직을 구현하며 내가 겪었던 실패들과 고민들에 대해 적어보고자 한다.

Quill의 이미지 첨부 기본 값 그리고 내게 필요한 로직

기본적으로 Quill 에디터의 경우 이미지를 첨부하게 되면 사용자가 이미지를 등록하게 되면, 해당 파일을 base64형태로 인코딩하여 그 데이터를 에디터에 삽입되는 이미지 태그의 src로 사용하게 된다. 하지만 나는 이미지를 Firebase의 storage에 저장하고, 해당 이미지의 url을 받아와 데이터베이스에 저장하고 이미지 태그의 src로 사용해야 했다.

첫번째 시도, 그리고 문제발생! 🔥

위에서 언급한 것 처럼 이미지 저장과 에디터에 삽입하는 로직을 아래와 같이 구현했다.

사용자가 이미지 등록
-> 이미지를 storage에 저장
-> storage url을 받아오기
-> 이미지 태그의 src에 추가하여 화면에 삽입

다행스럽게도 기능은 작동했다. 하지만 그 과정에서 문제가 있었는데, 사용자가 이미지를 첨부하고 이미지가 화면에 렌더링 될 때까지 소요되는 시간이 사용자가 불편을 겪기에 충분한 시간이었다.😭

 

이를 해결하기 위해 한참을 고민했고 다음과 같은 시도를 했다.

Quill 에디터가 이미지를 첨부할 때 파일을 base64로 인코딩된 데이터를 소스로 이미지를 띄운다는 점에서 착안했는데, 사용자가 이미지를 첨부하면 그 즉시 base64로 인코딩된 데이터를 소스로 이미지를 렌더링 시키고, 동시에 이미지를 storage에 저장하고 받아온 url을 base64 데이터를 대체하도록 구현했다.

 

이러한 시도에도 불구하고 약간의 진전은 있었지만 결론적으로는 폐기된 시도가 됐다. 사용자가 이미지를 삽입하자마자 클라이언트에서 렌더링 시키는 것 까지는 문제가 없었는데, 이미지를 storage에 저장하고 받아온 url로 이미지의 src를 변경하자 이미지가 깜빡이며 대체되는 동작이 화면에 전달되고 사용자의 경험에 악영향을 끼칠게 분명했다.

두번째 시도 😇

첫번째 시도의 부작용을 해결하기 위해 여러 시도를 해봤지만 만족스럽게 해결되는 방법은 없었다. 결국 또 다른 방법을 고민해야했다. 그리고 결국 시도한 방법은 사용자가 이미지를 첨부하고 게시글을 저장하기 전 까지는 클라이언트에서 이미지 파일을 base64로 인코딩된 데이터로 보관을 하고, 게시글이 최종적으로 저장되는 단계에서 이미지 파일을 storage에 저장하는 로직을 구현했다.

사용자가 이미지 등록
-> 이미지 파일을 클라이언트에서 base64로 인코딩하여 에디터에 렌더링
-> 최종 저장단계에서 storage에 저장

 

해당 로직으로 이미지 첨부와 게시글 저장을 구현하자 첨부와 동시에 이미지가 에디터에 삽입되었고, 저장하는 단계에서 storage에 저장하는 통신이 사용자 경험을 망치지 않는다는 결론을 내고 이미지 첨부와 게시글 저장 로직을 마무리할 수 있었다.