자연의 온기와 한방 성분을 담은 건강용품 브랜드의 쇼핑몰을 구축한 사례입니다. 고객사에서 완성된 디자인 시안을 제공했으며, 카페24 플랫폼 위에서 스킨 코딩과 퍼블리싱 작업을 담당했습니다. 브랜드 감성을 살리기 위해 스크롤할 때마다 화면 전체가 한 섹션씩 전환되는 풀페이지 스크롤 방식을 적용했고, 이 구현이 이 프로젝트에서 가장 집중한 부분입니다.
풀페이지 스크롤 구현
브라우저 세로 길이에 맞춘 섹션 전환
일반적인 쇼핑몰은 마우스 휠을 돌리면 페이지가 연속으로 흘러내립니다. 이 사이트는 스크롤할 때마다 다음 섹션이 브라우저 화면 전체를 채우며 전환됩니다. 어떤 기기에서 접속하더라도 현재 섹션이 화면을 꽉 채운 상태로 보이고, 스크롤 한 번에 다음 섹션으로 이동합니다. 자연 풍경 이미지, 원료 성분 이미지, 제품 소개 이미지가 각각 한 화면을 가득 채우며 순서대로 펼쳐지는 방식이어서, 스크롤하는 과정 자체가 브랜드 스토리를 읽는 흐름이 됩니다.
카페24 환경에서의 충돌 방지 처리
풀페이지 스크롤은 각 섹션의 높이를 브라우저 세로 길이에 맞게 동적으로 계산하고, 스크롤 이벤트를 감지해 섹션 단위로 이동하는 방식으로 구현했습니다. 카페24 스마트디자인 환경에서는 플랫폼 고유 스크립트와의 충돌을 피하는 것이 관건입니다. 풀페이지 스크롤에 필요한 스크립트가 카페24 모듈 구조 안에서 안전하게 동작하도록 실행 순서와 이벤트 처리 방식을 조정했습니다. 우측에 표시되는 섹션 인디케이터 점을 클릭하면 해당 섹션으로 바로 이동합니다.
브랜드 소개 섹션과 쇼핑 섹션의 스크롤 전환
풀페이지 스크롤이 끝나는 지점부터는 일반적인 스크롤 방식으로 전환됩니다. 상품 목록, 기획전 배너, 카테고리 섹션은 위아래로 자연스럽게 이어집니다. 브랜드 감성을 전달하는 앞부분과 실제 쇼핑이 이루어지는 뒷부분의 탐색 방식을 다르게 처리한 것으로, 두 영역의 성격 차이를 구조로 반영한 결과입니다.
메인 화면과 헤더 처리
풀스크린 이미지와 텍스트 배치
메인 슬라이더는 풀스크린 배경 이미지 위에 텍스트와 버튼을 겹쳐 표시하는 방식입니다. 브라우저 창 크기가 달라져도 이미지가 화면을 가득 채우도록 배경 이미지 처리 방식을 지정했고, 텍스트는 이미지 위에서 항상 같은 위치에 고정됩니다.
헤더와 공지 배너
상단 내비게이션은 풀스크린 이미지 위에 투명하게 올라가는 방식으로 처리했습니다. 브랜드, 쇼핑, 이벤트, 커뮤니티 메뉴와 회원가입, 로그인, 장바구니 아이콘을 함께 배치했고, 회원가입 버튼 아래 가입 적립금 안내 배지를 표시해 신규 방문자가 혜택을 바로 확인할 수 있도록 했습니다. 최상단 공지 배너는 닫기 버튼으로 숨길 수 있고, 한 번 닫으면 다시 나타나지 않도록 처리했습니다.
카페24 관리 기능 세팅
메인 슬라이더 이미지와 각 섹션의 배경 사진은 관리자 화면에서 직접 교체할 수 있습니다. 시즌별로 이미지를 바꾸거나 신제품 출시에 맞춰 메인 화면을 갱신할 때 개발자에게 요청하지 않아도 됩니다. 상품 목록, 이벤트 배너, 공지 배너도 카페24 관리자 기능과 연동되어 내용만 수정하면 화면에 바로 반영됩니다.
