프로젝트 공유 서비스를 구축하기 위해 필요한 텍스트 에디터로 Quill.js를 선택하였다. Quill.js는 사용자 친화적인 인터페이스와 높은 확장성을 제공하며, 다양한 디바이스 지원과 한글 입력 기능을 갖추고 있다. 무엇보다도 이 모든 기능을 무료로 이용할 수 있기 때문에, 이 텍스트 에디터를 선택하였다.
Quill.js를 사용하면서 글을 작성하는 데 오랜 시간이 소요되는 것을 알게 되었고, 이미지를 넣은 글이 글만 있는 게시글보다 훨씬 작성 시간이 오래 걸린다는 것을 발견했다. 기존에는 프론트엔드에서 이미지를 서버로 전송한 후, 해당 이미지를 S3로 전송하였다.
Quill은 BASE64로 이미지 파일을 인코딩한다. 8비트를 6비트로 변환하는 Base64의 특성 때문에 데이터 용량이 33% 증가하게 된다. 이렇게 증가한 데이터 용량과 변환된 긴 문자열을 다시 이미지로 디코딩하는 데 걸리는 시간 때문에 로딩 시간이 증가하게 되었다.
이 문제를 해결하기 위해 프론트엔드에서 바로 S3로 이미지를 업로드한 후, 서버에는 URL만 전송하는 방식을 도입하였다.
이 새로운 방식에서는 서버를 거치지 않아도 되므로 서버의 부하가 줄어들었다. 또한, 이미지 파일이 아닌 URL만 백엔드 서버로 전송함으로써, 용량 증가 문제도 해결하였다.
이러한 변경을 통해 이전과 비교하여 로딩 시간을 약 38% 줄일 수 있었다.
