[회고] 미방문자 이벤트 프로젝트

1. 프로젝트의  목표

저희가 이번에 진행한 프로젝트는 단순한 이벤트 페이지를 만드는 것이 아니었습니다. 미방문자분들에게 정말 좋은 경험을 제공해서 우리 앱을 계속 써보고 싶다는 생각이 들게 만드는 게 목표였습니다. 그래서 평소보다 개발 기간을 더 넉넉히 잡고 진행했습니다.
 
 

2. 기술 구현

2.1 기술 스택 선정과 선정 이유
이러한 목표를 달성하기 위해 다음과 같은 기술 스택을 선정했습니다:

• React: 터치 이벤트를 부드럽게 처리하고 클라이언트 사이드 인터랙션을 풍부하게 구현하기 위해 선택했습니다.
• TailwindCSS: 빠른 개발과 일관된 UI를 위해 도입했습니다.
• Canvas: 복권 긁기의 부드러운 애니메이션과 터치 인터랙션을 위한 핵심 기술이었습니다.

2.2 최적화 전략

• 빌드 최적화: 복권 응모/긁기 페이지를 하나의 프로젝트로 만들고 필요한 페이지만 골라서 배포했습니다.
• CDN 구성: S3와 CloudFront를 써서 콘텐츠 전송을 최적화했습니다.
• 배포 자동화: GitHub Actions로 CI/CD를 구축하고 Teams로 배포 알림이 가도록 했습니다.

2.3 핵심 기능 - 복권 긁기 구현
이벤트의 하이라이트인 복권 긁기 기능은 정말 신경을 많이 썼습니다. 사용자분들이 실제 복권 긁는 것 같은 느낌을 받으셔야 했거든요.
 
구현 방식

• 레이어 구조: 2개의 레이어로 만들었습니다. 위에는 긁을 수 있는 복권 이미지를 캔버스로 올리고, 아래에는 당첨 이미지를 깔아뒀습니다.
• 인터랙션: 복권을 50% 이상 긁으면 자연스럽게 캔버스가 사라지면서 당첨 결과가 나오고 콘페티 효과도 터지도록 했습니다.
• 전환 효과: 복권 긁기에서 당첨 화면으로 넘어갈 때는 페이지 이동 없이 조건문으로 처리해서 자연스러운 전환감을 주었습니다.

성능 최적화

1. 이미지는 미리 로드해둬서 인터랙션할 때 딜레이가 없게 했습니다.

preloadImage.src = RAFFLE_SCRATCH_IMAGE_BASE_64;

1. 캔버스 렌더링은 이미지 스무딩을 켜고 high quality로 설정해서 그래픽 퀄리티를 높였습니다.

ctx.imageSmoothingQuality = 'high';

1. requestAnimationFrame을 써서 브라우저 렌더링 주기에 맞춰 부드러운 애니메이션이 되도록 했습니다.

requestAnimationFrame(() => calculateRevealedPercentage(ctx));

1. 캔버스 초기화 함수는 useMemo로 감싸서 불필요한 재생성을 막았습니다.

const initCanvas = useMemo(
() => (ctx: CanvasRenderingContext2D) => {
// 캔버스 초기화 로직
}, [canvasConfig.width, canvasConfig.height]);

 

3. 협업 과정

3.1 마케팅팀과의 협업
마케팅팀과 긴밀하게 협업했습니다. 처음에는 기획 단계에서 마케팅팀에서 개발의 기술적 한계를 고려하여 보수적으로 요구사항을 잡으셨는데, 이 부분에서 의견을 적극적으로 제시했습니다.
제가 기술적으로 가능한 부분들을 상세히 설명드리고, 사용자 경험을 향상시킬 수 있는 여러 제안을 했습니다. 예를 들어:

• 애니메이션 개선: 복권 긁기 애니메이션을 더욱 부드럽게 구현할 수 있다고 말씀드렸습니다
• 시각적 효과: 당첨 순간에 콘페티 효과를 추가하여 사용자의 즐거움을 배가시킬 수 있다고 제안했습니다
• UX 최적화: 페이지 전환 없이 자연스러운 UI 전환이 가능하다고 설명드렸습니다
• 성능 개선: 이미지 프리로딩을 통해 더 빠른 반응성을 제공할 수 있다고 말씀드렸습니다

이런 기술적 제안들을 마케팅팀에서 굉장히 긍정적으로 받아들여주셨고, 결과적으로 초기 기획보다 훨씬 풍성한 사용자 경험을 제공할 수 있게 되었습니다. 특히 복권 긁기 기능에서 실제 복권을 긁는 듯한 경험을 제공하자는 아이디어가 나왔을 때, 이를 구현하기 위한 기술적 방안을 즉시 제시할 수 있었던 것이 좋은 결과로 이어졌습니다.
 
3.2 QA 엔지니어와의 협업
이러한 협업 경험은 QA 엔지니어와의 협업으로도 자연스럽게 이어졌습니다. 처음으로 QA 엔지니어와 협업하면서, 이전의 일반적인 QA 방식과는 다른 체계적이고 전문적인 테스트 프로세스를 경험할 수 있었습니다. QA 엔지니어와의 협업은 단순히 버그를 찾는 것을 넘어서, 서비스의 안정성과 사용자 경험을 한 단계 높이는 계기가 되었습니다.