안녕하세요. web 34조 리코더 입니다. 저희는 마크다운을 지원하는 SNS, 모헤윰을 만들었는데요,

발표에 앞서 저희 프로젝트가 어떤 서비스인지, 시연 영상을 먼저 보여드리도록 하겠습니다.

오늘 발표는 저희 팀이 프로젝트 기간동안 만난 고민들에 대해 이야기하려고 합니다. 순서는 화면에 보이는 것과 같습니다.

모헤윰은 Next.js를 사용하여, 부분적으로 SSR을 적용하였습니다. 게시글 조회 페이지는 비로그인 상태에서도 접근이 가능하고, 사용자가 외부 링크를 통해 서비스에 유입된다면 가장 처음으로 볼 수 있는 페이지이기 때문에, 서버사이드 렌더링으로 Time to view를 단축시켜, 네트워크가 느린 환경에서도 사용자가 빠르게 글을 볼 수 있도록 하였습니다. 또한 게시글 페이지의 경우, 게시글 내용이 html에 포함되어 브라우저에 전달되기 때문에 검색엔진 최적화 측면에서 이득을 볼 수 있었습니다.

lighthouse를 이용해 성능 최적화도 진행하였습니다. lighthouse 보고서의 감점 요인들을 보고, 이미지 사이즈를 명시하여 렌더링에 따른 레이아웃 변경 횟수를 줄이고, 지나치게 많은 요청을 발생시키는 웹폰트를 로컬에서 호스트하였습니다. 또한 Next.js의 dynamic import를 이용하여 일부 컴포넌트를 동적으로 불러와 청크 크기를 줄이는 등의 방법으로 성능 개선을 진행하였습니다.

모헤윰은 사용자가 게시글에 서식을 적용할 수 있도록 하기 위해, 간단한 마크다운 문법을 지원합니다. 그리고 이를 외부 라이브러리를 사용하지 않고, 직접 구현했는데요,

실제 에디터 라이브러리를 벤치마크하여 Contenteditable div를 이용해 구현하였습니다. textarea 태그를 사용하지 않고 Contenteditable을 사용함으로써 추후 syntax highlighting과 같은 기능들을 구현할 수 있도록 확장성을 고려하였습니다.

Contenteditable div는 textarea나 input같은 입력을 위한 태그가 아니기 때문에 onChange같은 이벤트를 사용할 수 없고, 붙여넣기를 하면 클립보드의 내용이 텍스트, 파일, HTML Element 등의 구분 없이 그대로 입력되는 등의 문제가 있습니다. 사진에 보이는 것처럼 VSCode에서 코드를 복사해서 붙여넣기 하면 VSCode에서 보여주던 스타일이 그대로 따라 오는 것을 확인할 수 있습니다.