포트폴리오
해비 — 카페24 쇼핑몰 퍼블리싱
카페24 스킨을 활용해 데스크 인테리어 쇼핑몰의 메인 화면을 구성한 웹 퍼블리싱 프로젝트입니다.
- 프로젝트 유형
- 퍼블리싱
- 역할
- 웹 퍼블리싱·카페24 스킨 구성
- 문제
- Cafe24 쇼핑 기능을 바탕으로 데스크 인테리어 브랜드의 메인 화면을 구성하고자 했습니다.
- 해결
- 메인 배너·카테고리·상품 진열·화보와 공통 헤더·푸터를 스킨 안에서 구성했습니다.
- 결과
- 화면 구성과 탐색을 확인할 수 있는 개인 쇼핑몰 시안을 공개했습니다.
문제
기존 쇼핑몰 스킨의 기능을 활용하면서 상품을 탐색하는 영역과 브랜드 분위기를 보여주는 화보를 하나의 메인 화면으로 연결해야 했습니다.
제약
- 상품·회원·장바구니·주문 기능은 Cafe24 플랫폼 영역이며, 이 사례의 직접 담당 범위는 스킨의 화면 구성과 퍼블리싱입니다.
- AI로 제작한 임시 상품·화보 이미지를 사용하는 개인 시안입니다. 표시된 가격·추천 진열은 실제 판매·리뷰 성과가 아닙니다.
담당 범위
- 메인 배너와 카테고리 영역 퍼블리싱
- 상품 진열·화보 섹션과 공통 헤더·푸터 구성
핵심 결정
- 메인 배너에서 카테고리·추천 상품·화보로 이어지는 순서로 콘텐츠 구성
- 신상품·데스크 조명·데스크 소품 등 기존 카테고리와 상품 링크를 활용해 탐색 연결
- 상품 진열과 정지 이미지 화보를 별도 영역으로 구분해 쇼핑 정보와 스타일 장면을 함께 제공
구현
- 메인: 컬렉션 슬라이드와 카테고리 탐색 영역 퍼블리싱
- 상품: 추천·신상품·베스트·소품 진열과 상품 링크 구성
- 화보·공통 영역: HEBI FILM 선택 화면, 스타일 콘텐츠와 헤더·푸터 구성
검증 방법
- 현재 PC 시안에서 메인 컬렉션, 카테고리, 상품 진열과 HEBI FILM 영역 확인
- HEBI FILM에서 두 번째 화보를 선택했을 때 02/04 표시·제목·선택 상태가 함께 바뀌는 동작 확인
- 이 사례의 검증 범위는 공개 시안의 화면 구성과 탐색 동작입니다. 실제 주문은 제공하지 않습니다.
결과
- 메인 배너·카테고리·상품 진열·화보로 이어지는 Cafe24 쇼핑몰 시안 구성
한계와 다음 개선
- 실제 서비스로 확장할 때는 임시 상품·이미지를 운영 자료로 교체하고 주문·결제 흐름을 별도로 검증해야 합니다.
기술 기록과 근거
사용 기술
- Cafe24
- HTML
- CSS
- JavaScript
구현 화면
