프로젝트 종료

약 5주간의 Codefolio 프로젝트가 종료되었다. 프로젝트를 진행하며 팀원들과 함께 많은 것을 배웠다. 팀원들과 함께 프로젝트를 진행하며 소통하는 방법을 배웠고, 팀원들의 의견을 존중하며 프로젝트를 진행하는 방법을 배웠다.

특히 디자이너와 소통은 쉽지 않았다. 기획적인 부분을 깊게 파고들기를 원하셨는데, 우리에게 주어진 시간이 많지 않았던 문제점이 있었다. 그래서 디자이너와의 소통을 위해 디자이너가 기획한 내용을 먼저 구현해보고, 디자이너와 함께 수정해나가는 방식으로 진행했다. 이렇게 진행하면서 디자이너와의 소통이 원활해졌고, 디자이너의 의견을 존중하며 프로젝트를 진행하는 방법을 배웠다.

기술적으로도 많은 것을 배울 수 있었다. 아래에 따로 기술적인 부분들을 정리할 예정이다.

프로젝트 간 기술적인 챌린지

프로젝트를 진행하며 몇가지 성능개선과 코드베이스 수정등의 기술적 챌린지가 있었다. 이를 정리해보자.

1. 디테일 모달의 최적화

초기 버전에서 사용자가 게시글을 클릭하게 되면, 정보가 없는 모달이 띄어지게 되고 그 이후 데이터가 모두 불러와져 변경되기까지 약 1600ms가 소요되었다. 또한, 데이터가 뒤늦게 클라이언트에 표현되며 레이아웃 시프트가 발생하고 있었다.

또, 코드 베이스를 살펴보니, 하나의 상위 컴포넌트에서 로직을 처리하는 것이 아닌 각각 작은 단위의 UI 컴포넌트에서 데이터를 가져와 가공하고 있는 것을 발견하였다.

디테일 페이지를 모달로 띄우는것이 아니라, 페이지로 변경하여 SSR을 적용하게 된다면, 프리패칭 및 하이드레이션을 통해 사용자가 조금 더 빠른 경험을 할 수 있을것이라 판단했다.

하지만 프로젝트 중반 디자인을 변경하기는 어렵다는 디자이너님의 의견과 게시글이 많아졌을 때 사용자가 무한스크롤을 통해 아티클을 발견해 읽다가, 다시 아티클을 벗어났을 때 동일한 페이지의 연속성을 보장하기 위해 모달을 유지하기로 하였다.

로딩속도를 개선하기위해 팀원들이 작업한 컴포넌트들을 분석해 최소한의 데이터 통신이 이루어지고, loading 상태 확인 및 서버에서 불러온 데이터를 최상위컴포넌트에서 가공처리하도록 리팩토링하는 것이 최선이라고 결정하게 되었다.

기존 각종 하위 컴포넌트에서 supabase 함수를 통해 총 6번 통신하던 데이터들을 최상위 컴포넌트에서 3번으로 감소시켰고, 이를 props로 각각의 UI 컴포넌트로 전달하였다.

또한, 데이터가 불러와지는 동안 loading 상태를 확인해 빈 모달이 띄어지는 대신, Loader를 사용해 사용자에게 데이터가 불러와지고 있음을 보여주도록 변경하였다.

리팩토링을 진행한 결과, 최초 약 1600ms 정도의 로딩 시간이 약 600ms로 60%의 성능 개선을 이끌어낼 수 있었다. 절대적인 시간 외에도 Loader를 통해 사용자가 데이터 통신 중임을 확인함으로써 UX도 개선될 수 있었다.

2. Optimistic Update

기존 버전에서, 대부분의 팀원들이 react-query에 익숙하지 않아 react-query를 적용하지 않고 supabase의 제공 함수를 그대로 사용하고 있었다. 이 중에서 사용자의 인터렉션에따라 서버 데이터가 갱신되고 이를 통해 클라이언트에서 UI가 변경되는 부분들의 반응속도가 느린 것을 발견할 수 있었다.

특히, 좋아요 및 북마크 기능에서 사용자의 인터렉션이 발생했을 시 약 1200ms의 레이턴시가 있었다.

기존 supabase 함수를 그대로 사용하고 있는 부분들을 전체적으로 react-query로 리팩토링하고, 사용자의 인터렉션에 따라 클라이언트 UI가 변경되는 부분은 Optimistic Update를 적용해 즉각적인 피드백을 주는 것으로 변경하기로 하였다.

Optimistic Update는 사용자의 인터렉션에 따라 클라이언트에서 UI를 변경하고, 이를 서버에 반영하는 과정에서 에러가 발생하면 이전 상태로 되돌리는 방식이다.

이를 적용한 결과, 사용자의 인터렉션에 따라 클라이언트 UI가 즉각적으로 변경되는 것을 확인할 수 있었고, 레이턴시가 약 1600ms에서 400ms로 60%의 성능 개선을 이끌어낼 수 있었다.

3. next/font 적용

폰트 최적화 이전, light house를 실행하였을 때, 성능점수가 74점이었다. 최초 페이지 진입 시 cdn으로 google font를 가져오며 약 3600KiB의 네트워크 리소스를 사용하였다. 만일 사용자의 네트워크 환경이 좋지 않다면 최초 로딩 시간 지연 및 foit/fout 현상으로 UX가 나빠질 수 있다 판단하였다.

이를 해결하기 위해 next/font를 적용하여, 폰트를 미리 로드하는 방식으로 최적화를 진행하였다.

폰트 최적화 이후, light house를 실행하였을 때, 성능점수가 99점이 되었고, 최초 페이지 진입 시 cdn으로 google font를 가져오는 대신, 미리 로드한 폰트를 사용하였다.

향후 목표

이제 프로젝트가 끝이나고 끝나지 않을 것 같은 부트캠프도 종료될 예정이다. 앞으로 취업시장에 뛰어들게 될텐데, 대략적인 계획을 세워놓는것이 좋을 것 같다.

1. 취업 준비 취업 준비를 위해, 이력서를 작성하고, 포트폴리오를 만들어야겠다.

2. 개인 프로젝트 개인 프로젝트를 진행하면서 팀 프로젝트에서 해보지 못했던 부분들을 도전해보고 싶다. 특히 요즘 가장 핫한 ChatGPT의 API를 사용해 무언가를 만들어보고 싶다.

3. 블로그 앞으로 블로그를 통해 비정기적으로 읽었던 아티클들을 정리, 배웠던 것들을 기록해보고 싶다.

4. 책 부트캠프를 진행하며 시간적 정신적 여유가 없어서 읽지못했던 독서를 다시 시작하려 한다. 기술적인 서적들 뿐만 아니라 문학작품들도 읽을 예정이다.