카페24 스마트 코딩 사용법 정리 | 구조, CSS·JS 적용, 캐시 해결 방법

카페24 스마트 코딩은 별도 개발 없이 HTML, CSS 기반의 디자인을 편집할 수 있는 기능입니다.
하지만 기본 구조와 전용 문법을 모르면 사소한 수정도 전체 레이아웃에 영향을 줄 수 있어 실무에서 어려움을 겪기 쉽습니다.
카페24 쇼핑몰 디자인 구조와 전용 문법까지 실무 중심으로 정리했습니다.

카페24 디자인 기본 폴더 구조

/design/skin/스킨명/
├── config/              // 설정 파일 보관용 폴더
├── board/               // 게시판 템플릿 폴더
│   ├── list.html        // 게시판 목록 페이지
│   └── view.html        // 게시글 상세 페이지
├── supply/              // 공급사 관련 템플릿
├── layout/              // 전체 레이아웃 템플릿 폴더
│   └── layout.html      // 공통 레이아웃 파일 (header, footer 포함)
├── myshop/              // 마이쇼핑(주문조회, 찜목록 등) 템플릿
├── link/                // 바로가기 메뉴 템플릿
├── product/             // 상품 관련 템플릿 폴더
│   ├── list.html        // 상품 리스트 페이지
│   └── detail.html      // 상품 상세 페이지
├── poll/                // 설문조사 기능 관련 템플릿
├── shopinfo/            // 쇼핑몰 이용안내, 개인정보처리방침 등
├── SkinImg/             // 스킨 전용 이미지 업로드 폴더
├── estimate/            // 온라인 견적서 템플릿
├── intro/               // 인트로(소개) 페이지
├── order/               // 주문 관련 템플릿
├── attend/              // 출석체크 관련 템플릿
├── calendar/            // 캘린더 게시판 템플릿
├── coupon/              // 쿠폰 관련 템플릿
├── member/              // 회원가입/로그인 등 회원 관련 템플릿
├── css/                 // 스타일시트(CSS) 폴더
│   └── style.css        // 메인 스타일 파일
├── js/                  // 자바스크립트(JS) 폴더
│   └── script.js        // 메인 스크립트 파일
├── index.html           // 쇼핑몰 메인 페이지 템플릿

핵심 파일 역할 정리

layout/layout.html: 모든 페이지에 공통 적용되는 레이아웃 구조. 헤더, 푸터, 네비게이션 포함. 수정 전 반드시 백업 필요
index.html: 쇼핑몰 메인페이지. 메인 배너, 카테고리별 상품, 기획전 섹션 등 구성
product/list.html / detail.html: 상품 목록 및 상세보기 페이지. 상품 정보, 옵션, 장바구니 기능 포함
board/list.html / view.html: 게시판 목록 및 상세 페이지. 후기, 공지사항, Q&A 게시판에 공통 사용
order/*, member/*: 주문서, 결제, 로그인, 회원가입 등 전자상거래 핵심 프로세스 담당
css/style.css: 전체 사이트의 폰트, 색상, 여백, 버튼 등 스타일 정의. 커스터마이징 시 클래스 중복 주의
js/script.js: 탭, 슬라이더, 팝업 등 사용자 인터랙션 기능 구현. jQuery 기반 스크립트 포함 가능
SkinImg/: 스킨 전용 이미지 업로드 폴더. 디자인 이미지 파일은 이 경로로 통일하는 것이 관리에 용이

CSS / JS 불러오기 방식

1. 표준 방식 (<link>, <script>)

<link rel="stylesheet" href="/design/skin/myskin/css/style.css">
<script src="/design/skin/myskin/js/script.js"></script>

변경이 반영되지 않으면 ?ver=날짜 형식으로 캐시를 우회하세요.
예: style.css?ver=20250405

2. 카페24 전용 문법 - ``, ``

<!--@css(/css/style.css)-->
<!--@js(/js/script.js)-->

3. 전용 문법 비교

구분	<!--@css / @js-->	<link> / <script>
문법 형태	카페24 전용 태그	표준 HTML 태그
처리 위치	자동 위치 삽입	작성 위치 기준
사용 환경	카페24 전용	모든 환경 사용 가능
장점	구조 정리, 반복 제거	직관적, 제어 용이
단점	카페24 외 환경 미지원	순서·위치 오류 가능
권장 위치	layout.html 등 공통 템플릿	개별 페이지, 외부 테스트용

공통 HTML 파일 불러오기 - ``

<!--@import("/layout/_header.html")-->
<!--@import("/layout/_footer.html")-->

헤더, 푸터처럼 반복되는 HTML을 모듈화하여 삽입할 수 있습니다.
기준 경로는 /design/skin/스킨명/입니다.

@import vs link 비교

구분	<!--@import-->	<link rel="stylesheet">
용도	공통 HTML 구조 병합	CSS 스타일 연결
사용 위치	layout.html, 템플릿 내부	<head> 내부
적용 대상	헤더, 푸터, 사이드 영역	폰트, 여백, 색상 등 스타일
렌더링 방식	서버 측 병합	브라우저 외부 로딩
장점	모듈화, 유지보수 편리	스타일 분리, 캐시 활용
단점	경로 오류 시 출력 안됨	캐시로 인해 변경 반영 안될 수 있음

캐시 반영이 안 될 때 해결 방법

Ctrl + F5로 강력 새로고침
크롬 개발자 도구 → Network 탭 → Disable cache 체크 후 새로고침
관리자페이지 → 디자인 보관함 → 저장 후 즉시적용 클릭

스마트 코딩 실무 팁

1. 실시간 미리보기 적극 활용

디자인 수정 후 PC/모바일 각각에서 시각적으로 확인하세요.

2. 공통 레이아웃은 layout.html에서 관리

메뉴, 푸터 수정 시 일관성을 위해 반드시 layout.html을 수정하세요.

3. CSS 에디터 활용

배경색, 여백, 폰트 등 간단한 수정은 CSS 에디터에서 빠르게 가능.
단, 원본 스타일은 메모해두는 습관이 중요합니다.

4. 디자인 백업은 필수

관리자 > 디자인관리 > 디자인 백업을 통해 항상 사전 백업을 진행하세요.

5. 사용자 정의 코드 삽입

플로팅 배너, 광고 태그 등은 관리자에서 직접 삽입 가능

<style>
  .event-banner { background: #f2f2f2; padding: 10px; }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log("커스텀 JS 실행됨");
  });
</script>