스마트디자인은 카페24의 쇼핑몰 디자인 편집 도구입니다. "코드를 몰라서 못 만진다"고 생각하는 분이 많지만, 실제 운영에서 가장 자주 하는 작업 몇 가지는 코드 지식이 거의 없어도 할 수 있습니다. 이 글에서는 운영자가 직접 해도 되는 작업과 건드리면 위험한 작업을 구분해 드립니다.

시작 전 — 이것만은 지키세요

운영자가 직접 해도 되는 작업 5가지

1) 메인 배너 이미지 교체

대부분의 스킨은 배너를 <img src="..."> 형태로 넣습니다. 파일 업로드 후 경로만 바꾸면 됩니다. 이때 alt 속성도 함께 채워주세요. 검색엔진이 이미지를 이해하는 유일한 단서입니다.

<img src="/web/upload/main_banner.jpg" alt="봄 신상 원피스 기획전">

2) 상단 공지 문구 수정

헤더 상단 띠배너 문구는 대부분 텍스트로 들어가 있어 그대로 수정하면 됩니다. "무료배송 기준", "배송 지연 안내" 등 CS 문의를 줄이는 문구를 넣어두면 효과가 큽니다.

3) 푸터 사업자 정보 수정

상호·사업자번호·주소·대표자·통신판매업신고번호는 법적으로 표기해야 하는 정보입니다. 스킨 적용 직후 데모 정보가 남아 있는 경우가 많으니 반드시 확인하세요.

4) 폰트 · 포인트 컬러 변경

대부분의 스킨은 CSS 상단에 색상 변수를 모아둡니다. 아래처럼 정의된 값 하나만 바꾸면 사이트 전체 포인트 컬러가 바뀝니다.

:root {
  --point-color: #a6ff00;
}

5) 상품 진열 개수 조정

메인 진열 모듈의 진열 개수는 대부분 관리자 화면(모듈 설정)에서 숫자만 바꾸면 됩니다. 코드를 만지지 않아도 됩니다.

건드리면 위험한 작업

• 모듈 태그 — <!--@layout(...)-->, module=... 형태의 카페24 전용 태그. 지우면 해당 기능이 통째로 사라집니다.
• 장바구니 · 결제 관련 스크립트 — 결제 실패로 이어질 수 있습니다.
• 회원가입 · 로그인 폼 구조 — 필수 항목이 빠지면 가입 오류가 납니다.
• 공통 레이아웃 파일 — 한 번의 실수로 전 페이지가 깨집니다.

이 영역을 수정해야 한다면 반드시 복사본에서 테스트하고, 가능하면 제작사에 문의하세요.

작업 효율을 올리는 습관

1. 수정 전 스크린샷을 찍어둔다 — 무엇을 바꿨는지 기억나지 않는 상황 방지
2. 브라우저 개발자도구(F12)로 요소를 먼저 확인한다 — 어떤 클래스인지 바로 파악
3. 수정 후 모바일에서 반드시 재확인한다
4. 큰 작업 전에는 디자인 백업(복사)을 하나 더 만들어둔다

자주 발생하는 문제와 해결

수정했는데 화면에 반영이 안 됩니다

브라우저 캐시일 가능성이 높습니다. Ctrl+F5(또는 시크릿 창)로 다시 확인해 보세요. 그래도 안 되면 대표 디자인이 아닌 다른 복사본을 수정하고 있는 경우입니다.

모바일에서만 레이아웃이 깨집니다

PC 전용 고정 폭(px)이 들어간 경우가 많습니다. width: 1200px 같은 값을 max-width: 100%로 바꾸면 해결되는 경우가 대부분입니다.

이미지가 흐릿하게 보입니다

실제 표시 크기의 2배 해상도로 업로드하세요. 예를 들어 600px 폭으로 보인다면 1200px 이미지를 올립니다.

정리

스마트디자인은 "전부 다룰 줄 알아야 하는 도구"가 아닙니다. 자주 하는 작업 5가지만 익혀도 운영 속도가 크게 달라집니다. 구조 변경이나 기능 추가처럼 위험 구간은 전문가에게 맡기고, 반복 작업만 직접 처리하는 것이 가장 효율적입니다. 커스터마이징이 필요하다면 올라운드샵에 문의해 주세요.