2021 — 2025
네이버 해피빈 캠페인 페이지
네이버의 기부·소셜펀딩 플랫폼 해피빈에서 다수의 클라이언트 캠페인 페이지를 담당했습니다. PC·Mobile 적응형으로 각각 제작하며, 캠페인마다 새롭게 요구되는 인터랙션과 애니메이션을 jQuery로 직접 설계하고 구현했습니다.
Screenshots
Background
해피빈은 네이버의 기부·소셜펀딩 플랫폼으로, 기업·기관 클라이언트가 자체 캠페인 페이지를 통해 참여를 유도합니다. 각 캠페인 페이지는 클라이언트마다 다른 콘셉트와 인터랙션 요구를 가지며, 참여율을 높이기 위한 창의적인 UI 구현이 핵심입니다. 2021년부터 2025년까지 다수의 캠페인 페이지를 담당했으며, PC·Mobile을 각각 별도 제작하는 적응형(Adaptive) 방식으로 작업했습니다.
Responsibilities
- PC · Mobile 각각 별도 제작하는 적응형 캠페인 페이지 마크업
- YouTube 재생 진행에 연동되는 커스텀 프로그레스 바 구현
- Book 페이지 넘김 · Firework · 텍스트 타이핑 등 테마별 애니메이션 개발
- Drag&Drop · Card Flip · OX 퀴즈(앞뒤 이동) · 랜덤 이미지 노출 등 인터랙티브 기능 구현
- 비포&애프터 슬라이더 · 커스텀 마우스 커서 · 텍스트 하이라이트 등 UI 요소 개발
- 기획서 너머의 클라이언트 의도를 파악하여 완성도 있는 결과물 납품
Key Challenge
캠페인마다 새로운 인터랙션 요구가 들어왔고, 해피빈 플랫폼 환경에서 일부 외부 스크립트가 충돌하는 문제가 있었습니다. 기획서에 명시되지 않은 부분도 많아 클라이언트 의도를 직접 해석해야 하는 상황이 반복됐습니다.
플랫폼에서 안정적으로 동작하는 범위를 먼저 파악하고, jQuery 기반 커스텀 스크립트를 매번 직접 작성하는 방식으로 대응했습니다. 기획 의도가 불명확한 부분은 기획자와 사전 소통을 통해 확인하고 기획서 이상의 완성도를 목표로 작업했습니다.
YouTube 연동 프로그레스, 북 플립, 드래그&드롭, OX 퀴즈 등 다양한 인터랙션을 플랫폼 오류 없이 구현. 4년간 수십여 개 캠페인을 안정적으로 납품했습니다.
Retrospective
정해진 패턴을 반복하는 것이 아니라, 캠페인마다 새로운 인터랙션 방식을 찾아야 했습니다. 플랫폼 제약 안에서 창의적인 솔루션을 도출하는 힘과, 기획서 너머의 의도를 읽어내는 감각을 이 작업들을 통해 키웠습니다. 수십 개의 캠페인을 거치며 다양한 jQuery 애니메이션 기법을 체득했고, 이것이 이후 GSAP 기반 인터랙션 작업의 토대가 됐습니다.