SISOLOGY
설명
니치 향수 — 자사몰 개편
기간
Aug 2026 - Sep 2026
역할
- 카페24 스마트디자인 스킨 기반 메인 5개 섹션 전면 개편.
- Behind Scent 저널 디자인·구축 — Archive와 Press 합계 64건.
- 상품 상세 상단 UI·이미지 슬라이드·옵션 시트·CTA 배너·재입고 알림.
- PC/모바일 반응형 작업 및 기존 스킨에 남아 있던 결함 수습.
기술
Cafe24 SmartDesign
JavaScript · HTML · CSS · Swiper
Vimeo Player
Figma
프로젝트 목적
"Joyful moment, Endless memory." 밀라노 ESXENCE에 참가하고 보그·르몽드에 실린 니치 향수 브랜드 시스올로지. 브랜드의 위상에 비해 자사몰이 따라오지 못하고 있었습니다. 요구 범위는 네 화면이었습니다 — 신규 2면(Behind Scent · Archive와 Press)과 개편 2면(메인 · 상품 상세). 이 작업에서 흥미로운 지점은 빈 화면이 아니라 거절당하는 지점들이었습니다. 카페24는 확장자 기준으로 영상 업로드를 막고, 템플릿 엔진은 주석 안의 마크업까지 끌어올리며, 브랜드가 쌓아 온 기록의 절반은 이미 상품 DB 안에 있었습니다. 판단의 대부분은 제약을 정확히 읽는 데서 나왔습니다.
배경과 과제
시스올로지는 밀라노 ESXENCE에 참가하고 보그·르몽드에 소개된 국내 니치 향수 브랜드입니다. 자사몰은 카페24로 운영 중이었고, 상품이 늘면서 브랜드의 결이 화면에서 드러나지 않는다는 문제가 있었습니다. 3분기 개편의 목표는 새로 짓는 것이 아니라 이미 쌓인 자산을 유지한 채 브랜드 경험만 다시 세우는 것이었습니다. 풀어야 할 제약이 셋이었습니다. 아카이브 51건과 이미지 743장이 이미 상품 DB에 들어 있어 게시판으로 옮기면 전부 재입력해야 했고, 카페24 디자인 서버가 확장자 기준으로 영상 업로드를 막아 브랜드 필름을 그대로 올릴 수 없었으며, 상품 상세의 옵션·재입고 알림 UI가 기본 스킨 그대로여서 브랜드 톤과 어긋났습니다.
범위
- · 메인 페이지 전면 개편 (5개 섹션)
- · Behind Scent 신규 — Archive 55건 · Press 9건
- · 상품 상세 상단 UI·옵션 시트·재입고 알림
- · 반응형 대응 및 기존 스킨 결함 수습
주요 기술 특징
플랫폼이 거부하는 지점 읽기
- · 카페24 디자인 서버는 용량이 아니라 확장자로 영상을 거부합니다. 9MB JPG는 올라가는데 1KB MP4는 막힙니다. 그래서 브랜드 필름은 임베드로 올리고, 플레이어 프레임을 원본 비율에 맞춰 영상 좌우에 검은 띠가 생기지 않게 했습니다.
- · 이후 갑이 가로·세로 두 벌을 따로 편집해 전달했고, 화면 폭으로 골라 넣되 중간에 폭이 바뀌면 소스까지 교체되도록 했습니다. 태블릿을 돌려도 세로 프레임에 가로 영상이 남지 않습니다.
- · 슬라이드가 뜬 뒤에 임베드를 넣던 구조라 재생이 3초 늦게 시작됐습니다. 한 슬라이드 먼저 미리 올려 두고 실제 도착 시점에 0초로 되감아, 도착했을 때 이미 돌고 있게 바꿨습니다.
이관하지 않기로 한 결정
- · 기존 아카이브 51건은 이미 상품 DB에 등록돼 있었고 그 안에 이미지가 743장 있었습니다. 게시판 모듈로 새로 만들면 전건을 다시 입력해야 했습니다.
- · 상품 카테고리를 그대로 두고 스킨만 새로 그렸습니다. 기존 콘텐츠는 손대지 않은 채 보이는 방식만 완전히 바뀌었고, 계약상 '건당 이미지 9장' 조항과도 충돌하지 않았습니다.
이미 있던 결함 수습
- · 재입고 알림이 세트상품 모듈 전용 변수에 연결돼 있어 품절 여부와 무관하게 뜰 수 없는 상태였습니다. 해당 영역에서 유효한 변수로 다시 만들고, 이 몰이 실제로 쓰는 이메일 신청 방식에 연결했습니다.
- · 주석 처리된 head 블록을 템플릿 엔진이 끌어올리면서 닫는 표시가 메인 화면에 글자로 노출되고 있었습니다. 히어로 인디케이터의 클릭 판정이 1px이던 문제, 모바일 상품 페이지가 가로로 밀리던 문제와 함께 정리했습니다.
디자인 포인트
카탈로그가 아니라 저널
Behind Scent는 인덱스·이미지·텍스트 3분할의 편집 지면으로 설계했습니다. 캠페인 기록 55건과 해외 매체 9건이 상품 목록이 아니라 하나의 작업 묶음으로 읽힙니다.
필름이라는 재료
About 섹션은 한 장의 사진을 35mm 필름 네 프레임으로 나눠 보여줍니다. 퍼포레이션과 가장자리 각인까지 넣되, 필름 제조사 표기 자리에는 브랜드명을 넣었습니다. 안전하기도 하고 디자인으로도 낫습니다.
결과
- 작업 범위
- 메인 5개 섹션 · Behind Scent 2면 · 상품 상세 · PC/모바일 반응형
- 기간
- 2026년 8월 — 9월 (약 6주)
- 비용대
- 카페24 자사몰 개편 기준 200만원대 후반부터
- 유지 자산
- 아카이브 51건 · 이미지 743장 재입력 없음
재입력 없이 개편을 마쳤고, 아카이브 55건과 프레스 9건이 브랜드 페이지 안에서 바로 읽히는 구조가 됐습니다. 이후 콘텐츠 추가도 기존 운영 방식 그대로 가능합니다.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.