프로모션2024.09 ~ 2024.10Nuxt3CanvasLottieMSW

카카오 전지적친구시점 프로모션

프로젝트 개요

카카오 서비스 마케팅 주관 프로모션으로, 중학생 - 대학생을 타겟으로 카카오톡의 적극적인 활용과 긍정적인 인식을 위한 서비스

프로젝트 정보

전지적 친구 시점

기술 스택

UI: HTML, SCSS
FRONT: Nuxt3

주요 구현 기능

canvas를 활용한 캐릭터 꾸미기 기능
- 기획에서 요구하는 canvas 기능들을 구현 (캐릭터 객체 추가, 액세서리 객체 추가하여 꾸미기, 확대 및 축소, 회전 기능 등)
canvas to PNG
- canvas를 이용해 꾸민 캐릭터의 각 인스턴스를 합쳐 하나의 이미지로 변환하는 기능 구현
HTML 요소 이미지화
- HTML로 구현되어 있는 영역을 전체 이미지로 변환 후 다운로드 받는 기능 구현
펑공유, 카카오 친구 피커 등 다양한 스킴 및 디벨로퍼스 기능 활용

문제 및 해결

canvas 이슈
- 문제 바닐라 스크립트를 이용하여 canvas 기능을 따로 모듈화하여 개발하고 추후 Nuxt 프로젝트에 npm을 통해 설치하는 방식을 이용하였으나, 상호 호환 이슈, 모듈 수정이 필요할 때 모듈 수정, 빌드를 새로 진행해서 재설치해야 하는 불편함이 발생하였다.
- 해결 Nuxt3 프로젝트 내로 해당 모듈을 이동하였다. 프로젝트 Git 저장소 내로 이동했지만, 모듈의 형태를 유지해서 추후 예상되는 프로젝트에서도 사용 가능한 형태를 유지하였다.
- 문제 canvas 모듈 구현 시 싱글턴 패턴의 클래스 구조와 그에 따른 사이드 이펙트가 발생하였다.
- 해결 해당 클래스 구조를 걷어내고 인스턴스를 반복해서 생성할 수 있는 형태로 재구조화하였다.
인앱 자동 로그인에 따른 이슈
- 문제 인앱 접근 시 카카오 자동 로그인 지원을 구현해야 하는데 URL을 통해 로그인 관련 파라미터를 주고받는 구조 때문에 페이지가 리다이렉트되는 이슈, 깜빡거리는 느낌을 주는 이슈, 속도가 느리다는 이슈가 있었다.
- 해결 페이지 리다이렉트나 깜빡거리는 이슈는 일종의 가림막처럼 페이지를 가렸다가 토큰 할당 시 렌더링하는 방식으로 개선하였다.
- 개선 충분한 시간과 논의가 있었다면, 화이트리스트에 등록하는 방식으로 자동 로그인 처리를 시도해 볼 수 있었을 것 같다.
- 문제 메인 페이지 진입 이후 로그인 시 거치는 게이트 페이지 접근을 막기 위해 히스토리 삭제를 통해 뒤로 가기를 제한하였으나, iOS의 경우 bfcache 이슈로 히스토리를 삭제해도 뒤로 가기가 가능해지는 이슈가 발생하였다.
- 해결 로그인 성공 후 메인에 진입할 때 페이지 자체를 통째로 리로드하는 방식을 이용하였고, 이 때문에 속도가 느려지는 사이드 이펙트가 발생하였다.
Lottie 메모리 누수
- 문제 Lottie를 이용하여 움직이는 그래픽을 제공하였는데, Lottie가 포함된 페이지나 팝업을 반복적으로 띄웠을 때 서비스가 멈춰 버리는 현상이 발생하였다. PC에서 개발할 때는 확인하기 어려웠으나 모바일에서 해당 현상을 확인하였다.
- 해결 Lottie를 반복적으로 띄웠을 때 메모리 사용량이 GB 단위로 넘어가는 형태를 확인하였으며, 메모리가 제대로 회수되지 않아서 발생한 문제로 판단하였다. Lottie가 포함된 페이지나 팝업을 벗어날 때 해당 컴포넌트를 destroy시켜 Lottie가 사용하는 메모리를 적절히 리셋 및 회수하였다.

성과

추후 모듈 개발 및 모듈로 추출하는 형태를 고려하여 개발 진행 (기능별로 최대한 분리)
- Useragent 모듈 (카카오 인앱, 버전 분기 등 추가)
- HTML, image, canvas to image 등 이미지 관련 모듈
- API 코어 모듈 (API 사용 시 공통으로 가져가야 할 코어 세팅)
- 사내 페이지 로그 기록툴 코어 및 메서드 모듈
- canvas 모듈
인터페이스 설계 함께 진행
- 기존에는 백엔드에서 제공해 주는 API 인터페이스를 그대로 사용했다면, 해당 프로젝트에서는 인터페이스 설계부터 함께 협업하여 필요한 값들, 파라미터들을 충분히 논의하고 조정
MSW 활용을 통해 API 개발을 기다리지 않고 병행하여 진행