해당 프로젝트에서는 사용자 경험 중심의 UI 구현과 지갑 연동 안정화에 집중했습니다.

UI 측면에서는 GSAP를 활용해 몰입감 있는 애니메이션을 구현했으며, 애니메이션 로직은 유지보수성을 고려해 설계했습니다. 특히 행성 애니메이션의 경우, 초기에는 모든 행성을 하나의 애니메이션으로 묶는 구조였기 때문에 행성 개수가 변경될 때마다 로직을 수정해야 했고, 크기 조정도 어려워 유지보수성이 낮았습니다. 이를 개선하기 위해 각 행성에 개별 애니메이션을 적용하고 진행도를 조정하는 방식으로 리팩토링했습니다. 그 결과, 행성 개수가 변경되어도 변수 하나만 수정하면 되는 구조로 단순화하고 유지보수성을 높였습니다. 또한 Swiper와 GSAP를 함께 사용해 섹션 슬라이드 전환과 애니메이션 효과가 자연스럽게 이어지도록 구성했습니다.

지갑 연동은 Wagmi를 활용해 다양한 블록체인 지갑과의 연결을 안정적으로 구현했습니다. 개발 중 WalletConnect 사용 시, 지갑을 반복해서 연결하거나 해제할 때 오류가 발생하는 문제가 있었습니다. 콘솔 로그 분석 결과 로컬 스토리지에 지갑 세션의 암호화 키가 없거나 일치하지 않을 때 문제가 발생하는 것으로 파악했습니다. 이에 지갑 연결 해제 시 로컬 스토리지를 초기화하는 방식으로, 일시적으로 대응했고, 이후 Wagmi 라이브러리의 버전을 업그레이드해 해당 문제를 최종적으로 해결했습니다.

2023년 11월에는 Cloudflare 데이터 센터 정전으로 인해 영상 재생이 불가능해지는 장애가 발생한 적이 있습니다. 이때, YouTube 임베드를 활용해 콘텐츠를 즉시 대체함으로써 사용자 경험과 서비스 품질을 유지했습니다.

프론트엔드와 백엔드 전반을 담당하며, UI 애니메이션 구현, 컴포넌트 리팩토링, 데이터 연동 자동화 등 여러 영역에서 개선을 주도했습니다.

먼저, 스크롤에 따라 이미지를 시퀀스 형태로 보여주는 애니메이션을 구현해 시각적 몰입도를 높였습니다. 또한, 리팩토링도 진행했습니다. 초기에는 언어 선택 Popper 영역의 노출 상태와 제어 함수를 상위 컴포넌트에서 생성해 하위로 전달하는 구조였습니다. 이에 따라 props 전달이 과도해지고 컴포넌트 간 의존성이 증가하는 문제가 있었습니다. 이를 개선하기 위해 노출 로직과 외부 클릭 감지 처리를 하위 컴포넌트로 이동시켜 구조를 단순화하고 유지보수성을 높였습니다.

백엔드 개발은 Next.js API Routes와 MongoDB, Mongoose를 활용해 유연한 스키마로 구성했습니다. 특히, 신청 데이터를 팀에서 사용 중이던 Google Sheets와 자동으로 연동되도록 설계하여 어드민 툴 없이도 실시간 데이터 공유가 가능하도록 구현했습니다.

개발 서버에 배포한 후에 멤버십 신청 API에서 간헐적으로 500 에러가 발생하는 문제가 있었습니다. 원인을 분석한 결과, getServerSideProps에서 연결한 DB가 페이지 장기 비활성 시 연결이 끊기며 타임아웃 오류가 발생하는 것이었습니다. 이를 해결하기 위해 DB 연결 시점을 API 요청 시점으로 변경해 문제를 안정적으로 해결했습니다.

해당 프로젝트는 지인들에게 소소한 크리스마스 선물을 전하기 위해 기획한 서비스로 기획부터 디자인, 개발까지 전 과정을 혼자 수행했습니다.

잘못된 이메일 주소 입력을 방지하기 위해 JWT 토큰과 Nodemailer를 활용한 이메일 인증 기능을 구현했습니다. 또한, 산타의 답장은 OpenAI API를 통해 자동 생성하고, 따뜻한 위로와 공감을 담기 위해 칭찬, 공감, 격려 중심의 프롬프트를 설계했습니다.

예약된 메일이 안정적으로 전송될 수 있도록 AWS Lambda와 EventBridge를 활용해 예약 발송 기능을 구현했습니다. 초기에는 Vercel의 Cron Job을 고려했지만, 무료 플랜에서 작업 실행 시간이 10초로 제한된다는 점을 확인하고 AWS로 전환했습니다.

약 100건의 예약 메일 발송 테스트를 진행하며 안정성을 검증한 뒤 서비스를 배포했습니다. 이후, 사용자 요청을 반영하여 '내 편지 확인' 페이지와 편지 저장 기능을 추가했으며, 안내 메일을 통해 사용자의 만족도를 더욱 높일 수 있도록 개선했습니다.