코드 몰라도 카페24 스킨 수정하는 법 — 화면에서 바로 고치는 올라운드 에디터

카페24 스킨을 코드 없이 고치려면, 화면을 보면서 바로 고치는 편집기가 들어 있는 스킨을 쓰는 것이 가장 빠릅니다. 스마트디자인에서 HTML·CSS를 직접 고치는 방식은 코드를 알아야 하고, 한 줄만 잘못 지워도 화면이 깨질 수 있습니다. 올라운드샵의 올라운드 에디터는 쇼핑몰 화면에서 끌고 · 누르고 · 고르는 것만으로 영역 추가, 글자 수정, 순서 변경, 색·글꼴 변경을 할 수 있게 만든 스킨 편집기입니다.

올라운드 에디터란?

올라운드 에디터는 카페24 디자인센터 베스트파트너인 올라운드샵(AllroundShop)이 자사 카페24 스킨용으로 만든 화면 편집기입니다. 쇼핑몰 화면이 가운데에 그대로 보이고, 고치고 싶은 곳을 누르면 그 영역의 설정이 오른쪽에 열립니다. 코드 화면은 나오지 않습니다. 현재 카페24 디자인센터의 모티브(MOTIVE)와 루보라(RUBORA) 스킨에 들어 있으며, 이 글의 화면은 모티브 스킨입니다.

스마트디자인으로 고칠 때와 무엇이 다른가

스마트디자인이 나쁜 것은 아닙니다. 배너 문구나 색 몇 군데 정도는 운영자가 직접 고칠 수 있습니다(스마트디자인에서 직접 해도 되는 수정 5가지 참고). 다만 화면 구성을 바꾸려면 코드를 다뤄야 해서, 대부분 외주를 맡기게 됩니다.

에디터로 할 수 있는 5가지

1. 영역을 끌어다 넣기

오른쪽 [추가]를 누르면 이미지 · 상품 진열 · 상품 탭 · 사진+문구 · 카테고리 칸 · 사진 배너 · 리뷰 같은 영역 모양이 나옵니다. 원하는 모양을 누른 채 화면의 넣고 싶은 자리까지 끌어다 놓으면 됩니다.

2. 누르면 그 영역 설정이 열리고, 글자는 그 자리에서

화면에서 고치고 싶은 영역을 누르면 오른쪽에 그 영역의 설정만 열립니다. 상품 탭이라면 한 화면에 몇 칸을 보일지, 슬라이드로 넘길지, 탭마다 어떤 진열을 보여 줄지를 고릅니다. 제목 같은 글자는 화면에서 눌러 바로 고칩니다.

3. 순서 바꾸기 · 숨기기

[영역]을 누르면 메인 화면의 영역 목록이 나옵니다. 오른쪽 끝 ≡ 를 누른 채 위아래로 끌면 쇼핑몰 화면의 순서도 같이 바뀌고, 눈 모양을 누르면 그 영역을 지우지 않고 숨길 수 있습니다.

4. 색 · 글꼴은 고르기만

[색·글꼴]에서 배경색 · 글자색 · 포인트 색과 영문 · 국문 글꼴을 고릅니다. 바꾸면 왼쪽 화면에 바로 보이고, [바꾸기 전 보기]로 원래 모습과 비교할 수 있습니다.

5. 휴대폰 화면은 따로

위쪽에서 [휴대폰]을 누르면 휴대폰 화면으로 바뀝니다. 같은 상품 탭이라도 PC는 4칸, 휴대폰은 2칸처럼 따로 정할 수 있습니다. 쇼핑몰 매출의 대부분이 휴대폰에서 나오는 만큼, 이 부분을 코드 없이 맞출 수 있다는 점이 가장 큰 차이입니다.

자주 묻는 질문

코드를 전혀 몰라도 쓸 수 있나요?

네. 에디터에서는 코드 화면이 나오지 않습니다. 영역 추가 · 글자 · 사진 · 순서 · 색 · 글꼴을 모두 화면에서 누르고 골라서 바꿉니다.

카페24 무료 스킨에서도 쓸 수 있나요?

아닙니다. 올라운드 에디터는 올라운드샵 스킨에 들어가는 편집기라서, 에디터가 들어간 올라운드샵 스킨(모티브 · 루보라)에서만 쓸 수 있습니다. 무료 스킨과 유료 스킨의 차이는 카페24 무료 스킨 vs 유료 스킨에 정리해 두었습니다.

어떤 스킨에 들어 있나요?

지금은 카페24 디자인센터에서 판매 중인 [편집툴] 모티브와 [편집툴] 루보라 두 스킨에 들어 있습니다. 상품명 앞의 [편집툴]이 에디터가 들어간 스킨이라는 표시입니다. 다른 스킨 적용 일정은 문의 페이지로 남겨 주시면 안내해 드립니다. 올라운드샵 스킨 전체는 카페24 디자인센터 올라운드샵 페이지에서 볼 수 있습니다.

정리

카페24 스킨을 코드 없이 고치는 가장 쉬운 방법은 화면 편집기가 들어 있는 스킨을 고르는 것입니다. 올라운드 에디터는 영역 추가 · 글자 수정 · 순서와 숨기기 · 색과 글꼴 · 휴대폰 설정을 모두 쇼핑몰 화면 위에서 처리합니다. 스킨을 고르는 단계라면 카페24 디자인 템플릿 고르는 법도 함께 보세요.