- 신차 홍보를 위한 이벤트 페이지 입니다.
- 선착순, 추첨 이벤트로 구성되어 있습니다.
- 다양한 애니메이션을 구현하여 유저가 흥미를 가지도록 유도했습니다.
- 공유 URL을 통해 홍보 효과를 극대화 하였습니다.
- 신규 유저가 로그인할 시 기본 3회 뽑기권이 지급되며 뽑기를 진행하면 추첨 이벤트에 자동 응모 처리됩니다.
- 생성된 URL을 공유하여 신규 유저가 가입하면 뽑기권을 얻을 수 있습니다.
- 이벤트가 끝난 후 관리자의 일괄 추첨을 통해 1등부터 5등까지의 당첨자가 선정됩니다.
- 모든 카테고리별 1개 이상의 파츠를 획득하면 아반떼 N 미니어처를 증정하며 이 또한 관리자의 추첨으로 진행됩니다.
| 추첨 이벤트 |
|---|
 |
- 카드를 클릭해서 파츠를 뽑을 수 있습니다.
- 가지고 있는 뽑기권이 소진되면 더이상 뽑기를 진행할 수 없습니다.
| 파츠 뽑기 |
|---|
 |
- 파츠뽑기에서 획득한 파츠들을 장착하여 아반떼를 커스텀 할 수 있습니다.
- 카드에 마우스를 올리면, 장착된 파츠들을 한눈에 확인할 수 있습니다.
| 파츠 컬렉션 |
|---|
 |
- 아반떼 N에 대한 기대평을 작성할 수 있습니다.
- 기대평은 50자 이내로 작성하도록 설정하였습니다.
- 내 컬렉션을 자랑 수 있는 공유링크를 복사할 수 있습니다.
- 다른 사람이 공유링크로 접속하게 되면 내가 장착했던 파츠들을 구경할 수 있습니다.
- 공유링크로 접속한 유저가 로그인을 하면 링크를 공유한 유저의 뽑기권이 1회 증가합니다.
| 기대평/공유 |
|---|
 |
- 오전 10시가 되면 퀴즈가 공개됩니다.
- 정답을 틀리게 되면 아반떼 N 소개 페이지로 이동하여 힌트를 찾아볼 수 있습니다.
- 선착순 인원 안에 들었다면 당첨 상품과 함께 전화번호를 입력할 수 있는 페이지로 이동합니다.
| 선착순 이벤트 |
|---|
 |
- 모노레포 환경에서 각 패키지마다 모듈이 중복으로 설치되어 발생하는 낭비를 막기 위해 도입하였습니다.
코드 중복을 줄이고, 공통된 로직이나 일관된 코드 스타일을 각 패키지에서 사용하기 위해 도입하였습니다.
service와 admin을 분리하여 각 패키지에 대한 번들사이즈를 줄이는 동시에 admin에 대한 보안은 강화되는 효과를 얻었습니다.
CI/CD 파이프라인에서 production 환경 이전에 preview 환경을 구축하여 변경사항을 검토할 수 있도록 하였습니다.
동적 링크로 생성되는 Preview 환경을 통해 효율적인 A/B 테스트를 진행했습니다.
컴포넌트 단위로 스타일을 캡슐화하고, 동적으로 스타일을 적용하기 위해 CSS-in-JS 방식을 채택했습니다.
Styled-component 보다 emotion이 더 유연하고, 번들사이즈가 작다고 판단하여 emotion을 채택했습니다. (styled-component vs emotion)
이벤트 페이지 특성상 대규모 트래픽이 예상되어 서버의 부하를 최소화하기 위해 캐싱 기능을 사용했습니다.
useSuspenseQuery를 사용하여 API 호출 중에도 suspense 컴포넌트가 정상적으로 작동할 수 있도록 하였습니다.
- 복잡한 애니메이션이 많은 프로젝트에서 부드러운 애니메이션 구현을 위해 도입하였습니다.
Github Action을 사용하여 PR 작성시 동적 링크로 생성되는 Preview 배포가, Main브렌치에 Merge시 Production배포가 자동화되도록 구성했습니다.
모노레포에서 일반적인 모놀리식 구조처럼 CI/CD 구축 시 레포지토리 내의 모든 패키지가 빌드되기 때문에 변경되지 않은 패키지들도 빌드되어 리소스가 낭비될 우려가 존재했습니다.
이를 해결하기 위해 CI/CD 파이프라인에 아래의 로직을 추가하여 해결했습니다.
- 현재 패키지의 마지막 커밋해쉬가 Main브렌치의 마지막 커밋해쉬와 같은지 판별합니다.
- 두 커밋해쉬가 같다면 해당 패키지는 변경사항이 없다고 판단하고 빌드되지 않도록 구현했습니다.
추가적으로 PR 작성 시 변경된 패키지가 무엇인지 Github Bot이 댓글로 작성하도록 하여 팀원이 어느 패키지를 수정했는지 바로 알아볼 수 있도록 구현했습니다.
1차 데모에서 발생했던 UX 관련 부정적 피드백을 기록하고 개선하여 2차 데모때는 약 88% 감소시켰습니다.
Preview 배포 환경을 통해 A/B test를 진행하여 사용자의 피드백을 효율적으로 반영할 수 있었습니다.
이벤트페이지의 특성 상 모바일로 접속하는 유저가 많을것이라고 판단하여 반응형 웹을 구현하기로 결정했습니다.
각종 브라우저와 디바이스마다 폰트, 이미지 등의 호환성 이슈를
EOT ⇒ WOFF,SVG ⇒ WEBP처럼 범용적인 형식을 채택하여 해결하였습니다.Safari 브라우저와 IPhone 환경에서 3D 애니메이션이 작동하지 않는 이슈가 발생하였습니다. Window 객체의 userAgent 메소드를 사용하여 유저의 환경에 따라 2D 애니메이션으로 대체하여 해결하였습니다.
웹 표준을 준수하며 작업하는 것의 중요성을 깨달았습니다.
Jira, Slack, github를 연동하여 협업하였습니다.
Jira에서 이슈 생성 혹은 Github에서 PR, merge 시 Slack으로 팀원들에게 알림이 전송되도록 하여 빠른 피드백이 가능하도록 구축했습니다.
기획, 디자인, 개발팀이 나뉘어져있는 실무와 유사한 프로젝트를 통해 각 부서간 협업하는 방법을 배웠습니다.