아반떼 N 소개 이벤트

🎬 시연 영상

• Youtube

🚗 프로젝트 소개

• 신차 홍보를 위한 이벤트 페이지 입니다.
• 선착순, 추첨 이벤트로 구성되어 있습니다.
• 다양한 애니메이션을 구현하여 유저가 흥미를 가지도록 유도했습니다.
• 공유 URL을 통해 홍보 효과를 극대화 하였습니다.

🛠️ 기술 스택

👥 팀원 구성

FE	FE	BE	BE
이태혁	박대원	유성욱	조도연
@thgee	@DaeWon9	@starwook	@ysndy

📖 페이지별 기능

[추첨 이벤트]

• 신규 유저가 로그인할 시 기본 3회 뽑기권이 지급되며 뽑기를 진행하면 추첨 이벤트에 자동 응모 처리됩니다.
• 생성된 URL을 공유하여 신규 유저가 가입하면 뽑기권을 얻을 수 있습니다.
• 이벤트가 끝난 후 관리자의 일괄 추첨을 통해 1등부터 5등까지의 당첨자가 선정됩니다.
• 모든 카테고리별 1개 이상의 파츠를 획득하면 아반떼 N 미니어처를 증정하며 이 또한 관리자의 추첨으로 진행됩니다.

추첨 이벤트

[파츠 뽑기]

• 카드를 클릭해서 파츠를 뽑을 수 있습니다.
• 가지고 있는 뽑기권이 소진되면 더이상 뽑기를 진행할 수 없습니다.

파츠 뽑기

[파츠 컬렉션]

• 파츠뽑기에서 획득한 파츠들을 장착하여 아반떼를 커스텀 할 수 있습니다.
• 카드에 마우스를 올리면, 장착된 파츠들을 한눈에 확인할 수 있습니다.

파츠 컬렉션

[기대평/공유]

• 아반떼 N에 대한 기대평을 작성할 수 있습니다.
• 기대평은 50자 이내로 작성하도록 설정하였습니다.
• 내 컬렉션을 자랑 수 있는 공유링크를 복사할 수 있습니다.
• 다른 사람이 공유링크로 접속하게 되면 내가 장착했던 파츠들을 구경할 수 있습니다.
• 공유링크로 접속한 유저가 로그인을 하면 링크를 공유한 유저의 뽑기권이 1회 증가합니다.

기대평/공유

[선착순 이벤트]

• 오전 10시가 되면 퀴즈가 공개됩니다.
• 정답을 틀리게 되면 아반떼 N 소개 페이지로 이동하여 힌트를 찾아볼 수 있습니다.
• 선착순 인원 안에 들었다면 당첨 상품과 함께 전화번호를 입력할 수 있는 페이지로 이동합니다.

선착순 이벤트

📂 디렉토리 구조

packages
    ├── admin
    │   ├── public
    │   │   ├── fonts
    │   │   │   ├── pretendard
    │   │   │   ├── pyeongChang
    │   │   │   └── pyeongChangPeace
    │   │   └── images
    │   │       ├── favicon
    │   │       ├── gnb
    │   │       └── modal
    │   └── src
    │       ├── apis
    │       │   ├── auth
    │       │   ├── expectation
    │       │   ├── orderEvent
    │       │   └── partsEvent
    │       ├── common
    │       │   ├── components
    │       │   │   ├── Button
    │       │   │   ├── GlobalNavigationBar
    │       │   │   │   └── GlobalNavs
    │       │   │   ├── ModalContainer
    │       │   │   │   └── modal
    │       │   │   │       ├── AlertModal
    │       │   │   │       ├── ConfirmModal
    │       │   │   │       ├── GoolgleLoginModal
    │       │   │   │       ├── ImageModal
    │       │   │   │       └── PendingModal
    │       │   │   └── Space
    │       │   └── utils
    │       ├── components
    │       │   └── partsEvent
    │       │       ├── ExpectationDataGrid
    │       │       ├── MainEventDrawForm
    │       │       ├── MiniatureEventDrawForm
    │       │       ├── ParticipantDataGrid
    │       │       ├── RewardInfo
    │       │       └── WinnerDataGrid
    │       ├── constants
    │       └── pages
    │           ├── Error
    │           ├── orderEvent
    │           │   ├── OrderEventGeneration
    │           │   ├── OrderEventManagement
    │           │   └── OrderEventWinnerManagement
    │           └── partsEvent
    │               ├── PartsEventDraw
    │               ├── PartsEventGeneration
    │               ├── PartsEventParticipantManagement
    │               └── PartsEventWinnerManagement
    ├── core
    │   └── src
    │       ├── apis
    │       │   └── login
    │       ├── contexts
    │       ├── hooks
    │       ├── providers
    │       ├── theme
    │       ├── types
    │       │   ├── orderEvent
    │       │   └── partsEvent
    │       └── utils
    └── service
        ├── public
        │   ├── fonts
        │   │   ├── pretendard
        │   │   ├── pyeongChang
        │   │   └── pyeongChangPeace
        │   ├── icons
        │   └── images
        │       ├── common
        │       ├── demo
        │       ├── favicon
        │       ├── gnb
        │       ├── main
        │       ├── modal
        │       ├── newCar
        │       ├── og
        │       ├── parts
        │       ├── partsCollection
        │       ├── pickEvent
        │       │   ├── card
        │       │   ├── joinInfo
        │       │   └── prize
        │       └── quiz
        └── src
            ├── apis
            │   ├── expectation
            │   ├── link
            │   ├── lottery
            │   ├── orderEvent
            │   └── partsEvent
            ├── common
            │   ├── components
            │   │   ├── Button
            │   │   ├── CheckBox
            │   │   ├── ClickInduceIcon
            │   │   ├── ClipBoardButton
            │   │   ├── Footer
            │   │   ├── GlobalNavigationBar
            │   │   │   ├── GlobalNavs
            │   │   │   │   └── ExpirationTimer
            │   │   │   └── MenuButton
            │   │   ├── Marquee
            │   │   ├── ModalContainer
            │   │   │   ├── content
            │   │   │   └── modal
            │   │   │       ├── AlertModal
            │   │   │       ├── ConfirmModal
            │   │   │       ├── DescriptionModal
            │   │   │       ├── GoolgleLoginModal
            │   │   │       ├── NavigateModal
            │   │   │       └── PendingModal
            │   │   └── ScrollToTop
            │   ├── hooks
            │   ├── responsive
            │   ├── styles
            │   └── utils
            ├── components
            │   ├── main
            │   │   ├── Banner
            │   │   ├── EventCard
            │   │   ├── EventPeriod
            │   │   │   └── Timer
            │   │   └── Expectation
            │   ├── nQuizEvent
            │   │   ├── NQuizReward
            │   │   ├── NQuizSection
            │   │   │   ├── NQuizAlternativeBody
            │   │   │   ├── NQuizHeader
            │   │   │   └── NQuizInput
            │   │   └── NQuizTitle
            │   ├── newCar
            │   │   ├── NewCarInfo
            │   │   ├── TracingCar
            │   │   └── util
            │   ├── partsCollection
            │   │   ├── CustomCard
            │   │   ├── PartsTab
            │   │   │   └── PartsCard
            │   │   └── PinContainer
            │   │       └── Pin
            │   │           └── WaveCircle
            │   ├── partsPick
            │   │   ├── PartsCard
            │   │   └── PickTitle
            │   ├── pickEvent
            │   │   ├── CardCarousel
            │   │   ├── JoinInfo
            │   │   └── PrizeContainer
            │   │       └── PrizeItem
            │   └── share
            │       └── PartsTab
            │           └── PartsCard
            ├── constants
            └── pages
                ├── Error
                ├── Loading
                ├── LotteryApplyInfo
                ├── Main
                ├── NQuizEvent
                ├── NQuizEventWinnerApply
                ├── NewCar
                ├── PartsCollection
                ├── PartsPick
                ├── PickEvent
                └── Share

📜 이슈관리 및 문서

• 스크럼 및 회고
• FE 회의록
• 트러블슈팅

🔧 세부 기술스택과 채택한 이유

Pnpm

• 모노레포 환경에서 각 패키지마다 모듈이 중복으로 설치되어 발생하는 낭비를 막기 위해 도입하였습니다.

MonoRepo

• 코드 중복을 줄이고, 공통된 로직이나 일관된 코드 스타일을 각 패키지에서 사용하기 위해 도입하였습니다.

• service와 admin을 분리하여 각 패키지에 대한 번들사이즈를 줄이는 동시에 admin에 대한 보안은 강화되는 효과를 얻었습니다.

Firebase Preview

• CI/CD 파이프라인에서 production 환경 이전에 preview 환경을 구축하여 변경사항을 검토할 수 있도록 하였습니다.

• 동적 링크로 생성되는 Preview 환경을 통해 효율적인 A/B 테스트를 진행했습니다.

Emotion

• 컴포넌트 단위로 스타일을 캡슐화하고, 동적으로 스타일을 적용하기 위해 CSS-in-JS 방식을 채택했습니다.

• Styled-component 보다 emotion이 더 유연하고, 번들사이즈가 작다고 판단하여 emotion을 채택했습니다. (styled-component vs emotion)

React-query

• 이벤트 페이지 특성상 대규모 트래픽이 예상되어 서버의 부하를 최소화하기 위해 캐싱 기능을 사용했습니다.

• useSuspenseQuery를 사용하여 API 호출 중에도 suspense 컴포넌트가 정상적으로 작동할 수 있도록 하였습니다.

Framer-motion

• 복잡한 애니메이션이 많은 프로젝트에서 부드러운 애니메이션 구현을 위해 도입하였습니다.

💭 프로젝트 주요 고려 사항, 알게 된 점

모노레포 환경에서의 CI/CD 구축

• Github Action을 사용하여 PR 작성시 동적 링크로 생성되는 Preview 배포가, Main브렌치에 Merge시 Production배포가 자동화되도록 구성했습니다.

• 모노레포에서 일반적인 모놀리식 구조처럼 CI/CD 구축 시 레포지토리 내의 모든 패키지가 빌드되기 때문에 변경되지 않은 패키지들도 빌드되어 리소스가 낭비될 우려가 존재했습니다.

• 이를 해결하기 위해 CI/CD 파이프라인에 아래의 로직을 추가하여 해결했습니다.

  • 현재 패키지의 마지막 커밋해쉬가 Main브렌치의 마지막 커밋해쉬와 같은지 판별합니다.
  • 두 커밋해쉬가 같다면 해당 패키지는 변경사항이 없다고 판단하고 빌드되지 않도록 구현했습니다.

• 추가적으로 PR 작성 시 변경된 패키지가 무엇인지 Github Bot이 댓글로 작성하도록 하여 팀원이 어느 패키지를 수정했는지 바로 알아볼 수 있도록 구현했습니다.

UX 개선

• 1차 데모에서 발생했던 UX 관련 부정적 피드백을 기록하고 개선하여 2차 데모때는 약 88% 감소시켰습니다.

• Preview 배포 환경을 통해 A/B test를 진행하여 사용자의 피드백을 효율적으로 반영할 수 있었습니다.

반응형, Cross browsing 웹 구현

• 이벤트페이지의 특성 상 모바일로 접속하는 유저가 많을것이라고 판단하여 반응형 웹을 구현하기로 결정했습니다.

• 각종 브라우저와 디바이스마다 폰트, 이미지 등의 호환성 이슈를 EOT ⇒ WOFF, SVG ⇒ WEBP 처럼 범용적인 형식을 채택하여 해결하였습니다.

• Safari 브라우저와 IPhone 환경에서 3D 애니메이션이 작동하지 않는 이슈가 발생하였습니다. Window 객체의 userAgent 메소드를 사용하여 유저의 환경에 따라 2D 애니메이션으로 대체하여 해결하였습니다.

• 웹 표준을 준수하며 작업하는 것의 중요성을 깨달았습니다.

협업

• Jira, Slack, github를 연동하여 협업하였습니다.

• Jira에서 이슈 생성 혹은 Github에서 PR, merge 시 Slack으로 팀원들에게 알림이 전송되도록 하여 빠른 피드백이 가능하도록 구축했습니다.

• 기획, 디자인, 개발팀이 나뉘어져있는 실무와 유사한 프로젝트를 통해 각 부서간 협업하는 방법을 배웠습니다.