카페24 쇼핑몰(자사몰) 디자인 수정 방법

카페24 쇼핑몰(자사몰)의 디자인은 카페24 관리자 페이지에서 [디자인 > 디자인 보관함]에서 관리할 수 있다. 계정에 생성되어 있는 멀티쇼핑몰 별로 디자인을 설정할 수 있으며, 대표 디자인으로 설정하거나 복사하거나, 상속 그리고 불필요한 경우 삭제 처리할 수 있다.

 

[카페24 관리자 - 디자인 보관함]

 

카페24 쇼핑몰(자사몰)의 디자인을 수정하는 방법은 2가지이다.

 

1. 카페24 디자인센터에서 디자인 구매 및 커스터 마이징.
2. 기본 디자인을 추가하여 직접 디자인 수정.

 

하지만 디자이너가 아니라면, 1번을 권장한다. 어느 정도 갖춰진 디자인을 수정하는 것과 백지상태에서 디자인을 하는 것과는 많이 다르기 때문이다.

 

디자인을 구매하는 방법에 대해서는 이전에 작성한 아래 포스팅에서 내용을 확인할 수 있다. 이번 글은 카페24 디자인을 커스터 마이징 시에 어떻게 작업을 하면 좋을지에 대해서 공유한다.

 

카페24 쇼핑몰 자사몰 디자인 적용하는 방법

카페24 쇼핑몰 자사몰 디자인 적용하는 방법

먼저 카페24의 디자인 보관함에는 각 디자인 단위로 리스팅이 된다. 그에 따라 번호가 붙는데 이 번호는 스킨 번호로, 미리 보기를 할 경우나 FTP 접속해서 디자인 폴더에 접근할 때 활용 가능하다.

 

[카페24 관리자 - 디자인 목록]

 

 

디자인 명에서는 해당 디자인의 특성에 대해서 확인할 수 있다. 디자인 명은 직접 수정할 수 있고 어떤 쇼핑몰에 적용되고 있는지 확인이 가능하다. Easy와 반응형으로 이지 편집이나 반응형 여부를 확인 가능하다. 썸네일도 수정이 가능하다.

[카페24 관리자 - 디자인 이름 수정]

 

 

디자인 편집에서는 디자인 편집 에디터를 열거나, 미리보기를 할 수 있다.

 

디자인 편집은 스마트 디자인 편집창에서 직접 작업을 하는 방법과, FTP를 통한 텍스트 편집기에서 수정하는 방법 2가지가 있다. 카페24의 스마트 디자인 편집창은 매우 불편하고, 소스코드를 찾는 것도 쉽지 않아 매번 헤매기 때문에, FTP 접속 정보로 vscode와 같은 개발툴을 사용하여 편집하는 것을 권장한다.

카페24 쇼핑몰(자사몰) 디자인 수정 순서

 

1. 디자인을 편집 수정하기 전에 현재 적용되고 있는 디자인을 선택하여 복사를 한다. 복사된 디자인을 수정하여, 현재 사이트에서는 작업 중인 디자인이 보이지 않도록 해야 한다.

 

[카페24 관리자 - 디자인 선택]

[카페24 관리자 - 디자인 복사]

[카페24 관리자 - 디자인 사본]

 

2. 모든 수정 작업이 완료되었다면, 저장하고 대표 디자인 설정을 한다.

 

[카페24 관리자 - 대표 디자인 설정

[카페24 관리자 - 대표 디자인 적용]

 

위 순서로 한다면 버전 관리와 함께, 안전하게 디자인 수정 작업을 완료할 수 있다.

 

[카페24 관리자 - 디자인 보관함]

 

스마트 디자인 편집창에서도 각 파일별로 저장하는 시점마다 히스토리를 남겨주긴 하지만, 개수 제한이 있어 계속 저장을 한다면 이전 버전으로 돌아가지 못할 가능성이 있다.

 

[스마트 디자인 편집창 - 수정 히스토리]

 

소소한 팁까지 공유하자면, 작업자는 수정하면서 수시로 사이트를 확인해야 한다. 수정한 소스코드가 잘 반영되고 있는지 수시로 확인하기 때문이다. 그런데 대표 도메인으로 설정한 도메인으로 확인을 하려하다 보면 반영이 느려, 확인하는데 시간이 소요될 수 있다.

 

미리 보기의 url은 https://[카페24 대표아이디].cafe24.com/skin-skin[디자인 번호] 로 구성되는데, 미리보기를 활용한다면 조금 더 빠르게 반영사항을 확인할 수 있다.

 

[디자인 미리보기]

 

[카페24 쇼핑몰(자사몰) 디자인 수정 방법 썸네일]