프로젝트 소개
포켓몬 스토어 온라인은 포켓몬 공식 굿즈를 판매하는 온라인 쇼핑몰로, 브랜드 경험과 상품 탐색의 즐거움이 함께 중요한 서비스였습니다. 저는 초기 구축 단계의 퍼블리싱을 전담하며 서비스 전반의 사용자 화면을 설계하고 구현했습니다.
HTML, CSS, JavaScript, jQuery, Handlebars.js 기반의 Shopby SDK 환경에서 전체 페이지의 구조와 스타일을 구성하고, 다양한 운영 요구사항을 실제 화면에 반영했습니다. PC와 모바일을 모두 고려한 퍼블리싱과 함께, 브랜드 톤을 해치지 않으면서도 사용성이 자연스럽게 유지되도록 디테일을 다듬는 데 집중했습니다.
NHN Shopby 서비스가 런칭된 지 얼마 되지 않은 시기에 진행된 프로젝트인 만큼, 플랫폼이 기본적으로 제공하지 않는 갤러리형 게시판 UI를 Vanilla JavaScript로 직접 구현해야 했습니다. 단순한 리스트 구조로는 브랜드 특성을 살리기 어려웠던 게시판 영역에 카드 형태의 갤러리 UI를 설계하고 적용하면서, 콘텐츠의 시각적 매력과 탐색성을 함께 높인 것은 물론 프론트엔드 개발자로서 첫 발걸음을 내디딘 의미 있는 프로젝트였습니다.
프로젝트 기간
2023.09 - 2023.10
주요 역할
- 쇼핑몰 전체 페이지(PC/Mobile) UI 퍼블리싱 및 반응형 웹 구축
- 웹 접근성 · 웹 표준 기반 UI 마크업 및 스타일링
- 운영 요구사항에 맞춘 상품 · 콘텐츠 UI 구성
- 브랜드 경험을 유지한 커스텀 게시판 UI 구현
사용 기술
Challenge & Solution
플랫폼 미지원 갤러리형 게시판 UI 구현
문제 정의
기본 게시판 UI만으로는 이벤트 콘텐츠를 브랜드에 맞는 방식으로 보여주기 어려웠습니다. 단순 리스트 구조로는 시각적 매력이 부족했고, 사용자 입장에서도 콘텐츠를 직관적으로 탐색하기 어려웠습니다.
해결 방안
Vanilla JavaScript로 갤러리형 게시판 UI를 직접 구현해 상품과 이벤트 이미지를 카드 형태로 노출하도록 구성했습니다. 이를 통해 콘텐츠 가독성과 탐색성을 높이고, 브랜드 특성에 맞는 시각적 경험을 강화했습니다.