몰리뉴얼 디자인 수정 가이드

1. 카페24 관리자 로그인

2. [디자인] > [디자인 보관함] > [카페24 PRO 스킨] 지원

3. 사용 중인 스킨의 "콘텐츠 편집" 버튼 클릭

4. 새 창으로 편집기가 열리며, 기본은 모바일 미리보기 화면

처음 진입 시 로딩이 5~10초가량 걸릴 수 있어요. 빈 화면이 보여도 잠시 기다려 주세요.

• 우측 편집 패널에서 편집하거나

• 미리보기 화면에서 수정하고 싶은 영역을 직접 클릭

• 섹션이 많을 땐 편집 패널 상단의 ◁ 섹션명 ▷ 버튼으로 이전/다음 섹션으로 빠르게 이동

선택한 섹션의 편집 패널 상단에 탭 또는 항목 목록이 나타납니다.

• 사진 변경 → 이미지 교체용

• 문구 · 버튼 변경 → 키워드, 헤드라인, 설명, 버튼 텍스트, 링크

수정이 막힌 하위 항목은 흐리게(비활성) 표시돼요.

(예: 프로덕트 배너의 상품 목록은 메인진열에서 관리하므로 편집기에서는 비활성 상태)

• 텍스트는 입력 즉시 미리보기에 반영

• 이미지는 업로드 완료 후 자동 표시

• 실수했을 땐 상단 되돌리기(↩) / 다시 실행(↪) 버튼 활용

우측 상단의 "디자인에 일괄 적용" 버튼을 누르기 전까지는 실제 사이트에 저장되지 않아요.

• 변경사항이 있으면 버튼이 활성화돼요

• 클릭 → 저장 완료 안내 메시지 확인 → 끝!

스킨에 포함된 6가지 대표 섹션의 수정 가능 항목과 활용 팁을 정리했어요.

쇼핑몰 헤더 최상단에 가로로 길게 들어가는 안내 띠입니다.

무료배송·세일·공지 등 짧은 안내를 노출할 때 사용해요.

가독성 팁

• 배경색과 텍스트 컬러는 명도 대비가 충분해야 잘 보여요. (예: 진한 배경 + 흰색 텍스트 / 밝은 배경 + 진한 텍스트)

• 문구는 한 줄에 들어가는 길이로 짧게 작성해 주세요. 모바일에서는 글자 수가 많으면 잘리거나 줄바꿈돼요.

쇼핑몰 헤더의 브랜드 로고 영역이에요. 편집기에서 두 가지 형태 중 선택해 사용할 수 있어요.

텍스트형 로고 설정

• 편집 패널에서 브랜드 텍스트 입력

• 입력 즉시 미리보기에 반영

• 길이가 길면 헤더가 비좁아 보일 수 있으니 짧고 명료한 표기를 권장해요.

이미지형 로고 설정

• 편집 패널에서 이미지 업로드 버튼 클릭

• PNG(투명배경) 파일 권장 → 배경색이 바뀌어도 어색하지 않아요

• 권장 사이즈: 세로 48px / 용량 5MB 이하

• 가로형 로고는 세로 여백을 최소화한 원본을 올리면 헤더에 깔끔하게 맞아요.

텍스트형 ↔ 이미지형 전환은 언제든 가능해요. 이벤트 기간에만 이미지형 로고(예: 시즌 배지)를 잠깐 적용하고, 평상시엔 텍스트형을 쓰는 운영도 자유로워요.

쇼핑몰 첫 화면을 채우는 메인 비주얼 영역이에요.

이미지 권장 사이즈

• PC: 가로 1920 × 세로 650px / 브랜드 강조형 가로 1920 × 세로 850px

• 모바일: 가로 1024 × 세로 1024px

• 용량: 5MB 이하 권장

핵심 오브젝트는 이미지 중앙 60~70% 영역에 배치하세요. PC↔모바일 화면 비율 차이로

가장자리가 잘릴 수 있어요. 사이즈가 모자라면 "이미지 업로드 > Step 2 > 배경 자동 확장" 로

보정 가능해요.

여러 장을 나란히 배치해 컬렉션·기획전·콘텐츠를 소개하는 영역이에요.

카드는 한 줄에 여러 개가 나란히 보이므로 각 카드의 헤드라인 길이를 비슷하게 맞춰야 깔끔해요.

이미지 권장 사이즈

• PC 2단: 가로 790 × 세로 395px

• PC 3단: 가로 520 × 세로 390px

• 용량: 5MB 이하 권장

상품 진열이 함께 노출되는 타이틀 영역이에요.

이 섹션의 상품 목록은 편집기에서 바꿀 수 없어요.

진열 상품을 바꾸려면 → 카페24 관리자 > 상품 > 메인진열에서

해당 모듈 번호의 상품을 교체해 주세요.

좌우 여백 없이 화면 전체를 채우는 와이드 배너예요.

하이와이드는 시선을 강하게 잡는 영역이라 이미지 단독보다 카피 + 버튼을

함께 배치하는 게 효과적이에요.

편집기는 "자주 바뀌는 콘텐츠"에 특화되어 있어요. 아래 항목은 각각 다른 경로로 진행해 주세요.

대부분의 고객이 모바일로 쇼핑하기 때문에 편집기는 모바일 화면을 기본으로 보여줘요. 미리보기 상단 중앙의 PC | Mobile 토글로 전환할 수 있어요.

편집기에서 수정한 텍스트와 이미지는 PC·모바일 양쪽에 동시 반영돼요. 즉, 모바일에서 수정해도 PC에서 다시 작업할 필요가 없어요.

디바이스 토글은 "어떻게 보이는지" 확인용이에요. 토글을 바꿔도 저장 동작은 일어나지 않아요.

미리보기 상단의 + / − 줌 버튼으로 화면을 확대·축소할 수 있어요.

• PC 모드에서 폰트 디테일 확인할 때

• 모바일에서 작은 버튼 위치 확인할 때

• 특히 헤드라인이 두 줄로 넘어가는지, 버튼이 잘리는지 미리 점검하기 좋아요.

저장은 2단계 구조예요. 헷갈리지 않도록 짚고 가세요.

• 입력하면 미리보기에 즉시 반영

• 단, 실제 사이트에는 아직 적용 전 단계

• 이 상태에서 다른 섹션으로 옮겨다녀도 작성한 내용은 남아 있어요.

• 우측 상단 버튼이 활성화되면 클릭

• 클릭 즉시 실제 쇼핑몰에 반영

• 미리보기에서 확인한 모습 그대로 사이트가 변경돼요.

저장 안 한 채로 닫으면? "디자인에 일괄 적용"을 누르지 않고 편집기를 종료하면 작업 내용이 사라져요. 종료 전 확인 메시지가 한 번 뜨지만, 실수를 막기 위해 저장 → 미리보기 새로고침 → 종료 순서를 권장해요.

배너·콘텐츠 카드·하이와이드 등 이미지가 들어가는 모든 섹션이 동일한 2단계 흐름으로 처리돼요.

상품 대표이미지 가져오기는 시간을 크게 줄여 주는 기능이에요.

• 신상품 입고 → 별도 배너 디자인 없이 대표컷 그대로 활용

• 콘텐츠 카드 → 이미지 + 상품 링크를 한 흐름에서 연결 가능

• 시즌 진열 변경 시, 디자이너 의뢰 없이 빠르게 메인 화면 갱신

업로드한 이미지를 배너 영역에 어떻게 맞출지 선택해요. 두 가지 모드 중 하나를 고르면 됩니다.

① 영역에 맞춰 자동 반영

• 배너 영역 비율에 맞게 자동으로 잘라(크롭) 반영

• 원본 이미지의 가장자리가 잘릴 수 있어요.

• 추천 상황

  • 핵심 콘텐츠(상품·텍스트·인물)가 이미지 중앙에 있을 때

  • 이미 배너용으로 디자인된 이미지를 그대로 사용할 때

  • 빠르게 적용하고 싶을 때

② 배경 자동 확장

• 원본을 기준으로 부족한 배경을 자동으로 채워 배너 사이즈에 맞춤

• 원본 자체는 잘리지 않고, 여백이 자연스럽게 확장돼요.

• 추천 상황

  • 정방형 상품컷을 가로 와이드 배너로 늘릴 때

  • 원본의 좌우/상하 여백이 모자라 잘림이 우려될 때

  • 디자이너 없이 상품 사진 한 장으로 배너를 완성하고 싶을 때

버튼이 있는 모든 섹션에서 링크는 3가지 방식 중 골라 설정할 수 있어요.

외부 사이트나 다른 페이지로 연결할 때 사용해요.

• 반드시 https:// 로 시작하는 전체 주소 또는 실제 존재하는 html 페이지의 절대경로로 입력해 주세요.

  • https://www.example.com/event

  • /board/notice.html

  • www.example.com/event (작동 안 함)

특정 상품 상세 페이지로 연결할 때 가장 빠른 방법이에요.

• 검색창에 상품명 또는 상품번호 입력

• 검색 결과에서 상품 선택 → 자동으로 링크 생성

• 검색창이 비어 있을 때 신상품을 우선 보여드려요. 신상품을 빠르게 연결할 수 있어요.

• 상품번호를 알고 있다면 검색 속도가 훨씬 빨라요. (관리자 > 상품 > 상품관리에서 확인)

상품분류(카테고리) 페이지로 연결할 때 사용해요.

• 등록된 카테고리 목록에서 클릭으로 선택

• 카테고리 구조가 변경되어도 링크가 깨지지 않아요. (URL 직접 입력 대비 장점)

Q1. 수정이 안 돼요. 미리보기가 안 바뀌어요.

A. 브라우저를 새로고침(Ctrl + F5 / Ctrl + Shift + R)해서 캐시를 비운 뒤 다시 시도해 주세요.

그래도 안 되면 다른 브라우저(크롬 권장)로 접속해 보시고,

그래도 해결되지 않으면 문의 채널로 알려 주세요.

Q2. 이미지가 흐리거나 잘려 보여요.

A. 권장 사이즈보다 작은 이미지를 올리면 확대되어 흐려질 수 있어요.

가능한 한 권장 사이즈와 동일하거나 큰 원본을 사용하시고,

핵심 콘텐츠는 중앙 60~70% 영역 안에 배치해 주세요.

Q3. 한 섹션만 모바일에서 다르게 보이게 할 수 있나요?

A. 편집기에서는 PC / 모바일 동시 반영만 지원해요.

디바이스별로 다른 이미지·문구가 필요하면 디자인센터 커스터마이징으로 진행해 주세요.

Q4. 실수로 잘못 저장했어요. 이전 상태로 돌릴 수 있나요?

A. 편집기 내 되돌리기(↩) 는 같은 세션에서만 동작해요.

이미 "디자인에 일괄 적용"을 누르고 창을 닫았다면 자동 복원은 어렵습니다.

Q5. "디자인에 일괄 적용" 버튼이 회색이에요. 클릭이 안 돼요.

A. 변경사항이 없을 때는 버튼이 비활성화돼요.

편집 패널에서 한 가지라도 수정하면 버튼이 활성화됩니다.

Q6. 배경 확장 결과가 이상해요. 다시 만들 수 있나요?

A. 같은 이미지로 다시 시도하면 다른 결과가 나와요.

만족스러운 결과가 안 나오면 "영역에 맞춰 자동 반영"으로 전환하거나,

배너 사이즈에 맞는 원본 이미지를 업로드해 주세요.

인물·로고·텍스트가 가장자리에 있는 이미지는 확장보다 영역 맞춤이 더 안전해요.

직접 수정이 어려우신가요? 구글 폼으로 수정을 요청하실 수 있습니다.

→ 수정 요청 구글 폼 바로가기

카페24 PRO에서 제공하는 스킨 5종의 경우 반응형 스킨으로 PC / 모바일 코드가 각각있어 각 스킨 및 영역별로 권장 이미지 사이즈가 다릅니다. 아래 사이즈 기준에 맞춰 이미지를 준비해 주세요.

영역별 위치 설명

권장 사이즈와 다른 비율의 이미지를 사용할 경우, 잘림 또는 여백이 발생할 수 있습니다.

이미지 링크(src)를 변경하기 전, 파일업로더를 통해 이미지를 먼저 업로드해 주세요.

1. 카페24 관리자 페이지 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 파일업로더 클릭 → 새로운 팝업창이 열립니다.

1. 상단 이미지 업로드 영역에 이미지 파일 등록

2. Start Upload 버튼 클릭

3. 업로드 완료 후 ROOT 하단에 등록된 이미지 목록 확인

• 이미지 목록에서 주소복사 필드의 복사 버튼 클릭

• 복사된 URL이 이미지 링크(src)로 사용됩니다.

1. 스마트 디자인 편집창에서 수정하고 싶은 위치로 이동

2. src="" 따옴표 안에 복사한 이미지 링크 붙여넣기

3. 저장 후 PC / 모바일 화면 각각 확인

이미지를 업로드하지 않고 로컬 경로를 입력할 경우 정상 노출되지 않습니다.

아래 경로에서 HTML을 직접 수정할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 버튼 클릭

4. 디자인 편집창에서 쇼핑몰 메인 화면으로 이동

5. 수정하고 싶은 영역에 마우스를 올리면(마우스 오버) 영역이 표시됩니다.

6. 해당 영역을 클릭하면 수정 가능한 편집 화면으로 이동합니다.

카테고리 영역은 기본적으로 카페24 관리자 > 상품분류에 등록된 카테고리가 자동으로 노출됩니다.

다만, 상품분류 외에 고객센터, 스토어 안내, 이벤트 페이지 등 별도의 메뉴를 추가하고 싶은 경우에는 디자인 편집창에서 HTML을 직접 수정하여 메뉴를 추가할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 클릭

4. 쇼핑몰 메인 화면에서 카테고리 영역 클릭 (header.html)

아래와 같은 구조로 카테고리 메뉴가 구성되어 있습니다.

• 고객센터 메뉴 이후에 <li></li> 태그를 추가하여 사용하시면 됩니다.

• 메뉴 텍스트는 <a></a> 태그로 감싸 주세요.

• 연결할 링크는 <a href="링크URL">메뉴명</a> 형태로 입력합니다.

로고는 디자인 편집창에서 별도로 관리되는 영역으로, 아래 두 가지 방법 중 하나로 변경할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 클릭

4. 디자인 편집창에서 로고 영역 클릭

5. 레이아웃 – 상단로고 팝업 노출

6. 속성 버튼 클릭

7. 이미지 파일 선택 후 업로드

이 방법은 로고 이미지를 간편하게 교체하고 싶은 경우에 적합합니다.

파일업로더를 통해 이미지를 업로드한 후,

이미지 링크(URL)를 사용하여 로고를 변경할 수도 있습니다.

1. 디자인(PC/모바일) > 파일업로더에서 로고 이미지 업로드

2. 업로드된 이미지의 주소복사 버튼 클릭

3. 디자인 편집창에서 로고 영역 클릭

4. 레이아웃 – 상단로고 > HTML 진입

5. 이미지 설정 영역에서 src="" 따옴표 안에 복사한 이미지 링크 붙여넣기

6. 저장 후 정상 노출 여부 확인

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인 페이지 상단의 띠배너 영역 클릭

3. HTML 코드에서 문구 직접 수정

4. 링크 변경 시 href="" 안의 URL만 교체

5. PC와 모바일 양쪽 모두 동일하게 수정

6. 저장 버튼 클릭

• 문구 텍스트 변경

• 링크 URL 변경

• 배경색/폰트 색상 변경은 커스터마이징 영역

상품상세 페이지 안에 구매하기 버튼 문구를 변경하고 싶을 때 활용해보세요.

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 상품 상세 페이지로 이동

3. 해당 버튼 영역 클릭하여 HTML 편집 진입 (detail.html)

4. 코드 내에서 변경할 문구를 검색 (예: "BUY IT NOW")

5. 원하는 텍스트로 변경 (예: "구매하기")

6. 모듈명이 module="product_action" 로 된 영역 모두 동일하게 수정

7. 저장 버튼 클릭

SNS, 블로그, 외부 이벤트 페이지 등으로 연결하는 링크를 추가하거나 변경하는 방법이에요.

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 수정할 링크가 있는 영역 클릭

3. HTML 코드에서 href="" 따옴표 안의 URL을 원하는 주소로 변경

4. 새 탭에서 열리게 하려면 target="_blank" 속성 추가

5. 저장 버튼 클릭

1. 디자인 편집에서 하단 SNS 아이콘 영역 클릭

2. 각 SNS 아이콘의 href=""에 해당 SNS 계정 URL 입력

3. 사용하지 않는 SNS는 해당 <li> 태그를 주석 처리하거나 삭제

외부 링크 연결 시 반드시 https://로 시작하는 전체 URL을 입력하세요.

(예: https://www.instagram.com/계정명)

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인, 상품분류 → 상품이 노출되는 영역 html 페이지 클릭

3. <div class="thumbnail"> 영역 위치 찾기

4. id="{$image_big_id}" → id="{$image_medium_id}

5. src="{$image_big}" →src="{$image_medium}"

6. 해당 부분 모두 변경 (2개 존재)

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인, 상품분류, 상품검색결과, 상품상세 페이지에 포함되어 있는 css 파일 접근

3. 썸네일 영역 코드에 aspect-ratio : 1; 로 되어 있는 부분을 주석처리

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인 페이지에서 메인진열 섹션을 클릭하여 HTML 편집 화면 진입

3. 코드에서 module="product_listmain_00" 부분을 찾습니다

4. 숫자 부분(1)을 원하는 메인진열 번호로 변경합니다

   • 예: module="product_listmain_2" → 메인진열 2번의 상품이 노출

   • 예: module="product_listmain_5" → 메인진열 5번의 상품이 노출

5. 저장 버튼 클릭

메인진열 번호는 어떻게 확인하나요?

[관리자] > 상품 > 상품 진열 > 메인진열 > [메인분류 관리] 버튼 클릭 > 모듈코드에서 확인할 수 있어요.

직접 수정이 어렵거나 지원 범위 내 작업을 요청하시려면 아래 채널을 이용해 주세요.

커스텀 요청건은 작업 범위에 해당되지 않습니다.

커스텀 디자인 작업이 필요한 경우,

카페24 디자인센터 → 디자인 유지보수 섹션에 등록된 에이전시를 활용하시는 방법을 안내드립니다.