[기술포스팅 원문] https://ramirami.tistory.com/209

[기술포스팅 요약] 이번 프로젝트는 단순한 이벤트 페이지 제작이 아니라, 미방문자에게 좋은 경험을 제공하여 앱 사용을 유도하는 것이 목표였습니다. 이를 위해 충분한 개발 기간을 확보하고 최적의 기술을 도입했습니다.

1. 프로젝트 목표
단순한 이벤트 페이지가 아닌, 앱 사용 유도를 위해 몰입감 있는 사용자 경험을 제공하는 것이 목표였습니다.

2. 기술 구현
기술 스택 선정
- React: 터치 이벤트를 부드럽게 처리하고 클라이언트 사이드 인터랙션을 풍부하게 구현
- TailwindCSS: 빠른 개발과 일관된 UI를 유지하기 위해 사용
- Canvas: 복권 긁기의 애니메이션과 터치 인터랙션 구현의 핵심 기술

최적화 전략
- 빌드 최적화: 필요한 페이지만 선택하여 배포
- CDN 구성: S3와 CloudFront를 활용한 콘텐츠 전송 최적화
- 배포 자동화: GitHub Actions를 이용한 CI/CD 구축 및 Teams 배포 알림

핵심 기능 - 복권 긁기 구현
이벤트의 핵심 기능인 복권 긁기 인터랙션은 실제 복권을 긁는 듯한 경험을 제공하는 것이 중요했습니다.
구현 방식
- 레이어 구조: 긁을 수 있는 복권 이미지(캔버스)와 아래 당첨 이미지로 구성
- 인터랙션: 50% 이상 긁으면 캔버스가 사라지고 당첨 결과와 콘페티 효과 출력
- 전환 효과: 페이지 이동 없이 조건문을 활용한 자연스러운 화면 전환

성능 최적화
- 이미지 미리 로드(preload)하여 인터랙션 시 지연 최소화
- 캔버스 렌더링 품질 향상: ctx.imageSmoothingQuality = 'high';
- 애니메이션 최적화: requestAnimationFrame을 사용하여 부드러운 렌더링
- 불필요한 재생성 방지: useMemo를 사용하여 캔버스 초기화 함수 최적화


3. 협업 과정
마케팅팀과의 협업
마케팅팀과의 협업을 통해 초기 기획보다 훨씬 풍성한 사용자 경험을 제공할 수 있었습니다.
- 애니메이션 개선: 복권 긁기 애니메이션을 더욱 부드럽게 구현
- 시각적 효과: 당첨 순간 콘페티 효과 추가
- UX 최적화: 페이지 전환 없이 자연스러운 UI 전환 구현
- 성능 개선: 이미지 프리로딩을 통한 반응 속도 향상

QA 엔지니어와의 협업
QA 엔지니어와의 협업을 통해 서비스 안정성과 사용자 경험을 한 단계 높일 수 있었습니다.
- 단순 버그 탐색이 아닌 체계적인 테스트 프로세스 경험
- 사용자 경험과 안정성을 고려한 개선 사항 반영


이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼