미리보기

개인 기술 블로그를 Next.js + Typescript로 구현해 Vercel을 통해 배포하여 운영중입니다. 배운 것이나 문제를 겪은 내용을 글로 포스팅하여 공유하고 있으며, 다른 웹사이트를 보면서 재밌어보이는 기능을 직접 구현해보기 위한 Playground로도 사용하고 있습니다.

게시글 목록 페이지

• Next.js의 App router의 동적 세그먼트로 페이지 디렉토리 구현, 라우트를 빌드 타임에 생성

• generatetaticParams()로 동적인 경로를 받아와 게시글 카테고리 분류

게시글 상세 페이지

• 게시글을 사전에 서버에서 렌더링되도록 구성

• react-mdx-remote를 활용 사전에 작성한 mdx 파일을 HTML로 파싱 후 렌더링

목차 사이드 바(ToC)

• Intersection Observer API를 사용하여 DOM 요소 관찰

• 특정 DOM 요소(포스트의 h2, h3 태그)로 이동할 수 있는 ToC 사이드바 구현

• 로딩 시 trasition 애니메이션 구현

검색엔진 최적화(SEO)

• generateMetadata()로 동적 metadata 생성

• Static Site Generation으로 정적인 페이지 구성

• 시맨틱 태그를 사용하여 페이지 구조 표현

• Image 태그의 alt 속성 활용

그 외

• 댓글 기능

• 다크모드 / 라이트모드

• 글 목록 리스트 그리드형 / 리스트형 분리

• 반응형 레이아웃 (sm, md)

문제 정의

Discord는 Skype 이래로 가장 많은 사람들이 이용하는 인스턴트 메신저 프로그램 중 하나로, 저 또한 친구들과 게임을 하거나 소통할 때 디스코드를 사용하고 있습니다. 친구가 움직이는 이미지를 공유해주려 하였는데, 이미지가 움직이지를 않았습니다. Discord는 아직 움직이는 webp, 이른바 Animated webp 파일에 대한 지원을 하지 않는다는 것을 알게 되었습니다. 이 문제를 해결하기 위한 봇을 만들어보기로 했습니다.

개발 과정

Discord.js 가이드 문서를 통해 기본적인 봇 프로그램 제작 방법에 대해 공부하면서 어떤 방식으로 문제를 해결할지 고민을 시작했습니다. Discord 자체에서 Animated webp 형식에 대한 지원을 하지 않는 이상, 봇 프로그램으로 할 수 있는 방식에는 한계가 있다고 판단했습니다. Discord는 Animated webp는 지원하지 않지만, Animated gif는 지원하고 있었습니다. 저는 이 점에 착안해서 webp 파일을 gif로 자동 변환해주는 봇 프로그램을 만들어보기로 했습니다.

webp 파일을 디스코드 서버에 업로드하면, 이를 봇이 감지하고 중간에 가로채서 node.js의 writeFileSync() 모듈을 통해 webp파일을 서버단에 생성하고, 그 파일을 이미지를 변환해주는 라이브러리인 sharp를 활용하여 gif형식으로 변환한 후에 디스코드 서버로 올리는 방식입니다.

기존에 이미지를 변환해주는 라이브러리는 많았으나, 가장 좋은 이미지 압축률과 변환 속도를 갖춘 것이 sharp 였습니다. Next.js의 이미지 최적화에도 사용되는 라이브러리로, 그 성능은 검증되어 있습니다. 크기가 큰 파일은 resizing을 통해 변환과정에 걸리는 시간을 줄였습니다. 파일 크기에 따라 다르지만, 예시로 올린 webp 파일의 경우 변환하고 다시 업로드 되는 데까지 0.5초 가량밖에 걸리지 않습니다. 이로써 움직이는 webp 파일을 올려도 더이상 멈춰있는 이미지를 보지 않을 수 있게 되었습니다. 누군가가 실제로 직면한 문제를 해결하고 도움을 줄 수 있게 된, 저에겐 작지만 아주 뜻깊은 경험이었습니다.

• 방대한 양의 영양제 이미지를 불러와야 했는데, Next.js의 Image 최적화 기능을 활용하여 로딩시간을 줄였습니다.

• 화면이 깜빡이는 일이 없도록 페이지 라우팅을 활용하였고, 검색창 애니메이션 및 로딩스피너를 활용하여 사용자 경험을 끌어올리고자 하였습니다.

• Axios의 Interceptor, 인스턴스를 활용한 코드의 모듈화 과정을 거쳤고, 컴포넌트 단위로 개발을 진행하였습니 다. TypeScript에서 자주 쓰는 Type의 경우 따로 Interface화 하여 코드의 가독성을 끌어올리고자 하였습니다.

• 상태관리를 활용하여 선택한 두 개의 제품을 비교할 수 있는 서랍기능을 만들었으며, 이로 인해 페이지가 바뀌어도 선택한 제품이 유지되어 비교할 수 있도록 구현하였습니다.

• 많은 이미지 뷰어 관련 라이브러리들을 연구하여 동화책을 읽는 듯한 느낌을 줄 수 있는 저희만의 e-book 뷰어를 만들어냈습니다.

• 서비스 특성 상 중복되는 부분은 컴포넌트화하여 개발의 효율성을 끌어올리고자 하였습니다.

• 유저 프로필 이미지를 AWS s3 스토리지에 저장하고 이미지 url을 받아오는 방식으로 구현하였는데, 새로 이미지 를 업로드할 경우 바로 적용되지 않는 문제가 발생했습니다. 이미지 업로드 후 새로고침을 통해 해결할 수도 있었지 만 팀원들과 토의하고 알아본 결과 s3에서 같은 url에 이미지를 저장하고 삭제하는 경우 캐싱기능이 작동해서 이미 지가 실시간으로 반영되지 않는다는 것을 알게 되었습니다. 이후 프로필 updateTime에 맞춰서 url을 생성하는 것으로 문제를 해결하였습니다.

• 로그인 시 회원정보를 전역상태로 관리하려 하였으나, 새로고침 시 상태가 초기화되어 로그인이 풀리는 문제가 발 생하였습니다. JWT Token을 사용하여 로그인을 구현하였는데, accessToken 및 유저 ID를 로컬스토리지에 저 장하는 것으로 이 문제를 해결하였습니다. refreshToken을 나누어 이는 백엔드 세션에 저장하는 것으로 보안상 의 문제도 고려하였습니다.

• WebRTC의 오픈소스 라이브러리 중 하나인 OpenVidu를 활용하여 화상채팅 서비스를 구현하였습니다. 백엔드 서버에 방 생성요청 시 받아오는 방 ID로 WebRTC 중계서버에 세션 생성 요청을 하면 화상채팅방 세션에 접속되 는 구조로 구현하였습니다. 같은 방 ID로 요청 시 같은 세션에 접속되는 것을 확인하였습니다.

• 실시간 투표 기능을 구현하였습니다. WebSocket 기능을 활용해야 했는데, OpenVidu에서 소켓통신을 지원한 다는 것을 알게 되었습니다. 이벤트가 발생하면 다른 사용자가 그 이벤트를 수신하는 기능을 응용하여 투표기능을 구현하였습니다.