Interaction Design · Camera Commerce
Interactive Camera Commerce Experience
제품을 직접 돌려보는 듯한 캐러셀과 명확한 사양 탐색을 결합한 카메라 이커머스 경험.
Concept Project — HUMAGENT LAB의 웹사이트 구축 역량을 보여주기 위해 자체 기획한 프로젝트입니다.
Street / Everyday
VANTA
X1
A compact image-maker for fast streets, quiet portraits, and everyday light.
Industry
Consumer Camera · Direct-to-Consumer
Project Scope
Commerce Strategy · Interaction Design · Responsive Development
ART DIRECTION
브랜드의 성격이 화면에서 느껴지도록
다크 그래파이트 화면, 네온 코랄 포인트와 궤도형 제품 탐색을 사용해 정교한 카메라의 물성과 움직임을 강조했습니다.
Core page system
CONCEPT BACKGROUND
왜 이 웹사이트를 설계했는가
새로운 미러리스 카메라 시스템이 기술 사양만 나열하지 않고, 제품의 촉감과 촬영 상황을 인터랙티브하게 전달해야 한다는 과제를 바탕으로 자체 기획했습니다.
이 프로젝트는 실제 고객 의뢰나 가상의 성과 사례가 아닙니다. 특정 고객을 전제로 문제를 꾸미지 않고, 해당 업종에서 유효할 수 있는 제작 접근을 탐구했습니다.
OBJECTIVES
목표
- 한 화면에서 제품별 마감과 촬영 특성을 직관적으로 비교
- 기술 사양을 실제 촬영 상황과 연결해 이해 부담 축소
- 데스크톱과 모바일에서 동일한 캐러셀 경험 제공
APPROACH
접근 방식
- 015개 제품 상태를 순환하는 키보드·터치 친화적 캐러셀 설계
- 02제품 이미지, 색상, 설명과 진행 상태를 하나의 인터랙션으로 동기화
- 03원본 레퍼런스의 라이선스를 존중해 브랜드와 카메라 자산을 독자적으로 제작
DELIVERABLES
제작 결과물
커머스 UX 전략
인터랙티브 제품 캐러셀
반응형 UX/UI
제품·렌즈 탐색 페이지
오리지널 제품 이미지
Next.js 구현
MAKING PROCESS
디자인 및 제작 과정
- 01
Frame
제품의 기술과 감성을 함께 전달할 핵심 장면을 정의했습니다.
- 02
Orbit
제품 상태와 사양이 함께 바뀌는 캐러셀 경험을 설계했습니다.
- 03
Build
모바일 접근성과 움직임 선호 설정을 고려해 반응형으로 구현했습니다.
YOUR PROJECT
다음 프로젝트는 당신의 목표에서 시작합니다.
아직 범위가 명확하지 않아도 괜찮습니다. 목표와 현재 상황을 알려주시면 가장 적합한 시작점을 함께 찾겠습니다.