📌 SISOLOGY - 향수 브랜드 웹사이트
🔹 프로젝트 개요
🔹 프로젝트 목적
시스올로지는 밀라노 ESXENCE에 참가하고 보그·르몽드·코스모폴리탄에 소개된 니치 향수 브랜드입니다. 브랜드의 위상에 비해 자사몰이 따라오지 못하고 있었고, 개편 범위는 네 화면으로 명확했습니다 — 신규 2면(Behind Scent의 Archive와 Press), 개편 2면(메인·상품 상세).
이 작업에서 흥미로운 지점은 빈 화면이 아니라 플랫폼이 거부하는 지점들이었습니다. 카페24는 용량이 아니라 확장자 기준으로 영상 업로드를 막고, 템플릿 엔진은 주석 안의 마크업까지 끌어올리며, 브랜드가 쌓아 온 기록의 절반은 이미 상품 DB 안에 있었습니다. 판단의 대부분은 제약을 정확히 읽는 데서 나왔습니다.
🔹 핵심 기술 및 구현 기능 (Key Technical Features)
플랫폼이 거부하는 지점 읽기 — 브랜드 필름:
카페24 디자인 서버는 용량이 아니라 확장자로 영상을 거부합니다. 9MB JPG는 올라가는데 1KB MP4는 550 Operation not permitted로 막힙니다. 브랜드 필름을 임베드로 올리되, 플레이어 프레임을 원본 비율에 맞춰 영상 좌우에 검은 띠가 생기지 않게 했습니다.
화면 폭에 따라 가로·세로 편집본 교체:
갑이 16:9와 3:4 두 벌을 따로 전달해 화면 폭으로 골라 넣습니다. 중간에 폭이 바뀌면 소스까지 교체되므로, 태블릿을 돌려도 세로 프레임에 가로 영상이 남지 않습니다.
재생 지연 제거:
슬라이드가 뜨는 순간에 임베드를 넣던 구조라 재생이 3초 늦게 시작됐습니다. 한 슬라이드 먼저 미리 올려 두고 실제 도착 시점에 postMessage로 0초로 되감아, 도착했을 때 이미 돌고 있게 바꿨습니다.
이관하지 않기로 한 결정:
기존 아카이브 51건은 이미 상품 DB에 등록돼 있었고 그 안에 이미지가 743장 있었습니다. 게시판 모듈로 새로 만들면 전건을 다시 입력해야 했습니다. 상품 카테고리를 그대로 두고 스킨만 새로 그려, 기존 콘텐츠는 손대지 않은 채 보이는 방식만 완전히 바꿉니다.
재입고 알림 원인 규명:
재입고 알림이 {$product_restock_button_display} — 세트상품 모듈 전용 변수에 연결돼 있어 품절 여부와 무관하게 노출될 수 없는 상태였습니다. 카페24 기본 스킨에도 그 블록 안에만 존재합니다. 구매버튼 영역에서 유효한 {$soldout_display}로 다시 만들고, 이 몰이 실제로 쓰는 이메일 신청 방식에 연결했습니다.
라이브에 남아 있던 결함 수습:
주석 처리된 head 블록을 템플릿 엔진이 끌어올리면서 닫는 표시가 메인 화면에 글자로 노출되고 있었습니다(검색엔진 인증 메타 중복도 함께 정리). 키비주얼 인디케이터의 클릭 판정이 1px이던 문제, 모바일 상품 페이지가 가로로 밀리던 문제도 같이 잡았습니다.
두 개의 jQuery가 공존하는 스킨:
이 스킨은 head에서 jQuery 3.6.4를 올리고 body 끝에서 noConflict로 전역 $를 카페24 내장 1.4.4로 되돌립니다. 실행 시점에 따라 $의 정체가 달라지므로, 메인 스크립트는 jQuery를 쓰지 않는 순수 JS로 작성했습니다.
🔹 디자인 포인트