브랜드 중심 홈
정원의 계절감과 컬렉션을 큰 이미지와 절제된 타이포그래피로 연결했습니다.
Portfolio 01 · SIONI
SIONI
키즈웨어 브랜드의 이야기가 상품 탐색과 구매 경험으로 자연스럽게 이어지도록 구성한 반응형 스토어프런트입니다.
The challenge
브랜드의 분위기와 쇼핑 기능이 따로 놀지 않게
시오니는 자연과 정원을 닮은 이미지, 여러 컬렉션과 상품, 구매에 필요한 다양한 상태를 한 사이트 안에서 보여줘야 했습니다.
단순한 이미지 중심 룩북에 머무르지 않으면서도, 상품 목록과 구매 UI가 브랜드의 조용한 분위기를 해치지 않는 구조가 필요했습니다.
The approach
에디토리얼한 장면에서 실제 상품 행동까지
상품 탐색 흐름
카테고리 필터, 정렬, 컬렉션과 상품 상세를 한 흐름 안에서 탐색하도록 구성했습니다.
반응형 구매 UI
사이즈 선택, 장바구니, 위시리스트, 검색, 계정, 체크아웃 화면을 모바일에서도 사용할 수 있도록 조정했습니다.
Project result
브랜드 소개부터 체크아웃 확인까지 연결된 프런트엔드
홈, 쇼핑, 컬렉션, 룩북, 브랜드, 저널, 상품 상세와 체크아웃 화면을 하나의 라우팅 구조로 완성했습니다. 필터·정렬·장바구니·위시리스트·검색·계정 패널도 프런트엔드에서 동작하도록 구현했습니다.
5개 화면 폭320, 390, 768, 1024, 1280px에서 반응형 확인
접근성 동작키보드 포커스, Escape 닫기, 포커스 복귀와 reduced motion 대응
브라우저 검증가로 넘침과 콘솔 오류 없이 주요 탐색·구매 흐름 확인
프로젝트 완료. 브랜드 프레젠테이션, 상품 탐색, 장바구니, 위시리스트, 검색, 계정과 체크아웃까지 하나의 프런트엔드 스토어프런트로 마무리했습니다.
Start a project