프로젝트 배경
1) 문제점 - 카페24 기본 구조만으로는 상품 상세 이미지 확대 경험이 제한적이어서 제품 디테일을 충분히 보여주기 어려웠습니다. - 메인 페이지의 버튼 위치, 배너 텍스트, 아이콘 크기와 정렬이 화면별로 일관되지 않아 브랜드 완성도가 떨어질 수 있었습니다. - 국문/영문 메인 섹션이 분리 운영되는 구조에서 카피와 레이아웃을 함께 정비할 필요가 있었습니다. 2) 프로젝트 목표 - 상품 상세 페이지
프로젝트 성과
카페24 구조 내 커스텀 상품 확대 기능 구현
외부 플러그인 없이 CSS와 JavaScript만으로 상품 상세 줌 인터랙션을 구현했습니다.
모바일·데스크탑 분리 UX 설계
터치 환경과 마우스 환경의 사용 방식을 분리해 화면별로 더 자연스러운 확대 동작을 만들었습니다.
메인 화면 시각 완성도 개선
버튼 위치, 카피 정렬, 배너 텍스트, 반응형 그리드를 정리해 브랜드 메인 화면의 완성도를 높였습니다.
SVG 아이콘 및 유틸 영역 일관성 확보
글로벌/장바구니 아이콘의 크기와 위치를 수정해 헤더 유틸 UI의 균형을 맞췄습니다.
국문·영문 메인 섹션 동시 정비
관리용 소스와 영문 소개 섹션까지 함께 수정해 다국어 브랜드 경험을 일관되게 정리했습니다.
핵심 기능
진행 단계
기존 화면 진단 및 수정 포인트 정의
2025.06.
상품 상세 확대, 아이콘 비율, 메인 버튼 위치, 영문 메인 구성 등 우선 개선 항목을 정리했습니다.
프로젝트 상세
1) 프로젝트 소개 - MOUMOUTE 공식몰 퍼블리싱 외주는 카페24 기반 주얼리 브랜드 이커머스 사이트의 상품 상세 경험과 메인 페이지 완성도를 높이기 위한 작업입니다. - 단순 스타일 수정이 아니라 상품 상세 인터랙션, 아이콘 SVG, 메인 비주얼 레이아웃, 국문/영문 메인 섹션까지 실서비스 화면 전반을 조정했습니다. 2) 담당 범위 - 기존 카페24 템플릿 구조를 분석하고 상품 상세용 zoo







