이전 단풍우편함에 이어 겨울시즌에 맞춘 서비스이다. 자신의 집에 있는 트리를 꾸미고, 옆 방에는 1년간의 추억을 회고할 수 있는 폴라로이드 사진이 매달려있는 컨셉으로, 받은 편지에서 사진만을 확인할 수 있는 공간도 마련해주었다.

눈꽃우편함 링크

이번에도 마찬가지로 팀장으로 이끌어나갔고, 근 몇달간 팀원들의 성장이 충분히 있었기에 각자의 파트에 충실할 수 있도록 기획은 함께 했지만, 디자인, 프론트엔드, 백엔드는 확실히 분리해서 개발을 시작했다.

단풍우편함에서의 사용자 패턴을 분석해본 결과, 매일 나무를 물들이기 위해 매일 지속적으로 접속해 활동하는 사람이 2300명 중 많은 인원을 차지하고 있진 않았다. 그리고 캐릭터 10종을 제공했음에도, 마이페이지를 통해 캐릭터를 변경하는 사람 또한 예상보다 많지 않았다. 이 점에서 부족한 UI/UX를 제공했다고 판단이 되었고, 이 점을 개선하고자 변경 사항이 있었다.

1. UI/UX를 어떻게 개선했는가?

1. 접근이 쉬운 스킨 및 캐릭터 변경
2. 유저의 버튼 클릭 유도

1. 접근이 쉬운 스킨 및 캐릭터 변경

기존의 단풍우편함에서는 메뉴에 마이페이지가 있고 마이페이지에 들어가면 내 나무/캐릭터 변경하기 페이지로 넘어갈 수 있는 버튼이 있었다. 이러한 플로우가 유저에게 있어서 허들이 있다고 생각이 되었고, 메인 페이지에 있는 버튼을 통해 바로 접근이 가능한 모달에 스킨, 캐릭터 변경 기능을 모두 넣었다.

이렇게 적용하니, 사용자들이 좀더 많은 커스텀을 하는 결과를 도출해낼 수 있었다.

2. 유저의 버튼 클릭 유도

이 버튼을 통해 받은 사진만 모아볼 수 있는 페이지로 이동한다는 점을 보여주기 위해 애니메이션을 적용했다. 좌우로 계속해서 움직히는 애니메이션인데, 코드를 살펴보자면 아래와 같다.


사진만 모아보는 페이지에서는 반대로 움직이는 화살표이기에, 코드의 중복을 줄이고자 어디 화살표인지 props로 넘겨받아 조건부로 적용될 수 있게끔 코드를 구성했다.

2. 코드 리펙토링

1. 모달 컴포넌트의 확장성
2. react-query의 도입
3. Recoil을 통한 상태관리
4. 컴포넌트화를 통한 코드 중복 제거

1. 모달 컴포넌트의 확장성

다시 나의 단풍우편함 코드를 살펴보면, 컴포넌트 분리가 멋대로이기도 하고, 확장성과 유지보수를 전혀 고려하지 않은 코드 구조이다. (막막한 코드..) Modal같은 경우도 하나의 Modal 스켈레톤 컴포넌트를 만들어 이를 목적에 맞게 활용할 수 있었음에도 중복된 코드로 계속해서 또다른 Modal을 만들어놨었다.

하지만 이번 눈꽃우편함에서는 다르다. 모달 컴포넌트의 확장성을 고려하여 코드를 설계했다. 일정 부분 코드를 설명하자면,

모달의 제목을 매 코드마다 중복 작성하는 것보단 props로 넘기는 것이 옳다고 판단이 되었다. 만약 제목이 없는 모달을 사용해야한다면 ""를 props로 넘기면 된다.

모달은 여러 크기를 가질 수 있다. 이에 따라 모달 image source에 따른 imageType을 설정할 수 있도록 설계를 했다. 만약 더 작은 모달, 더 큰 모달을 추가할 시 imageType에 'LargeModal'을 추가하고,

여기에도 LargeModal의 image와 크기에 맞게 case를 추가해주면 된다.

2. react-query의 도입

이전에는 정말 단순하고 저급한 코드로 서버로 부터 데이터를 fetch하곤 했다. 물론 사용자가 맞이하는 화면에서는 데이터가 다 불러와지지 않았는데도 페이지에는 마운트되고, 일정시간 딜레이 발생으로 인해 데이터가 덜컥 거리면서 반영되는 문제가 있었다. 이로 인해 useQuery 훅과 Suspense를 도입했다. fallback UI로 "Loading..."을 띄워주고 서버의 데이터가 성공적으로 fetch 될 때까지 화면에 등장하는 것을 미루었다.

이를 통해 훨씬 더 개선된 로딩 UX를 제공해줄 수 있었고, 사용자의 혼란을 야기시킬 수 있는 일을 줄일 수 있었다.

3. Recoil을 통한 상태관리

중요한 data 중 하나인 사용자의 데이터. 사용자의 닉네임과 스킨의 종류, 그리고 가입한 날로부터 어떻게 되었는지를 recoil로 관리한다. 이를 통해 스킨 선택 모달에서 사용자가 클릭하는 값에 대해서도 관리한다.

    const setHomeData = useSetRecoilState(HomeDataAtom);

서버로부터 받아온 유저의 data를 recoil을 통해 상태관리를 했다.

4. 컴포넌트화를 통한 코드 중복 제거

모달을 적절히 컴포넌트화를 했듯이, 다른 가능한 부분들도 컴포넌트화를 했다. 가장 대표적인 것은 page layout인데, 다음과 같이 모든 페이지에 공통적으로 적용되는 부분들이기에 컴포넌트로 분리를 진행해주었다.

정말 깔끔하지 않은가? 모든 페이지에 공통적으로 적용되는 레이아웃 컴포넌트를 위와 같이 분리했고, 페이지마다 import해서 사용해주었다.

이렇게 메인 페이지는 188줄로 끝낼 수 있었다.

하지만, 단풍우편함 코드 라인 수를 살펴보자면...

주인일 때 페이지와 방문자일 때 페이지를 분리해두고 코드의 중복이 엄청나다. 그리고 이를 분기처리해주는 코드까지 생각한다면 대략 900줄 가까이 되는 것이다. 이를 엄청나게 개선한 것이다.

3. 마무리하며

1. GA 도입
2. 진짜 마무리

1. GA 도입

사용자 행동 패턴 분석 및 얼마나 많은 사용자들이 눈꽃우편함을 사용해주는지 파악하기 위해 Google Analytics를 도입했다. 결과적으로는 약 2000명 이상의 사용자가 눈꽃우편함에 방문해주었다. 예상 외로 부진한 결과였으나 크리스마스 시즌에 유사서비스가 많이 배포되는 상황이었기에 고배를 마시며 다음 시즌을 기약하려고 한다.

2. 진짜 마무리

눈꽃우편함을 통해 단풍우편함 만큼의 유저 수를 확보하지는 못했지만 코드의 질을 향상시키려 노력했다는 점에서 의미를 크게 두고 있다. 물론 개발기간이 약 5일정도였고 프론트앤드는 나 혼자서 진행했기에 보다 더 질 좋은 코드를 짜지 못했다는 점도 아쉽긴 하지만, 단풍우편함의 코드에 비해서는 나 자신이 많이 성장했음을 느꼈다. 또 다음 기회에 눈꽃우편함의 코드를 리펙토링할 예정이다. 이번에는 개발기간을 보다 더 길게 잡고 더 확장성있고 유지보수하기 좋은 코드를 작성하려한다. 그때까지의 내가 성장할 수 있도록 기대해보며, 이 글을 마치겠다. 읽어주신 모든 분들에게 감사의 인사를 전한다.