메뉴 바로가기 본문 바로가기

  1. 스마트디자인은 에디봇디자인보다 심화된 디자인 방식입니다. 쇼핑몰 운영자가 직접 HTML을 수정해 제약 없이 원하는 디자인을 적용할 수 있습니다.
  1. 쇼핑몰 사이트 접속 속도를 빠르게 할 수 있고 어느 브라우저에서나 쾌적한 쇼핑 환경을 유지하는 데 용이합니다.

스마트디자인 편집창

  1. 스마트디자인 편집창은 쇼핑몰 디자인의 HTML 소스를 수정할 수 있는 곳입니다.
  1. 직접 HTML 소스를 수정하거나 카페24에서 제공하는 모듈을 이용해 디자인을 커스터마이징 할 수 있습니다.
  1. 　
  1. 편집창 상세 기능 설명
  1. 　
  1. 1. 폴더 추가 / 화면 추가
  1. 　원하는 경로에 폴더 또는 화면을 생성할 수 있습니다.
  1. 　예를 들어 신규 기능 적용을 위한 디자인 가이드에 아래 같은 내용이 있을 경우 폴더 추가 / 화면 추가 기능을 이용합니다.
  1. 　위 상황에서는 화면 추가 선택 후 신규 생성 경로와 동일하게 폴더를 선택한 뒤 파일명에는 경로 마지막 값인 ec-base-layer.css 를 입력, 저장하면 신규 파일이 생성됩니다.
  1. 　
  1. 2. 새 이름 저장
  1. 　선택한 파일 이름을 변경해 신규 파일로 저장합니다.
  1. 　
  1. 3. 최신 소스
  1. 　현재 수정 중인 화면에 적용할 수 있는 최신 버전을 보여줍니다. 최신 소스가 없으면 최신 소스 버튼이 활성화되지 않습니다.
  1. 　최신 소스를 확인, 수정한 뒤 저장해야 실제 적용됩니다.
  1. 　
  1. 4. 소스 일괄 변경
  1. 　수정 중인 파일에서 특정 소스를 찾아 한 번에 치환할 수 있으며 분할 보기 및 HTML 보기 모드에서만 제공됩니다.
  1. 　해당 기능 사용 후 변경 전으로 되돌리고 싶다면 히스토리 기능을 이용합니다.
  1. 　
  1. 5-1. 수정 화면 모드: 화면보기
  1. 　수정하는 화면을 미리보기 형태로 볼 수 있으며 수정 즉시 수정 내용이 반영됩니다. 반영된 내용은 저장해야 실제 적용됩니다.
  1. 　마우스 움직임에 따라 모듈 단위로 영역이 표시됩니다. 원하는 영역의 편집 버튼을 선택해 수정할 수 있습니다.
  1. 　모듈 추가 기능을 지원되지 않으므로 모듈이 비활성화된 상태로 표시됩니다.
  1. 　
  1. 5-2. 수정 화면 모드: 분할보기
  1. 　수정하는 화면을 화면보기 영역과 HTML 영역으로 나누어 두 가지 상태를 동시에 볼 수 있습니다.
  1. 　화면보기 영역에서 모듈 단위를 선택하면 선택한 모듈의 소스 위치가 HTML 영역에 표시됩니다.
  1. 　HTML 영역에서 소스를 수정한 뒤 미리보기 버튼을 선택하거나 저장하면 화면보기 영역에 수정된 내용이 반영됩니다.
  1. 　모듈 추가 기능이 지원되므로 원하는 위치에 마우스 커서를 위치시키고 모듈추가를 선택해 원하는 모듈을 추가할 수 있습니다.
  1. 　
  1. 5-3. 수정 화면 모드: HTML보기
  1. 　수정하는 화면의 HTML 소스만 볼 수 있습니다. 수정한 내용을 확인하고 싶을 경우 다른 수정 화면 모드로 변경해야 합니다.
  1. 　모듈 추가 기능이 지원되므로 원하는 위치에 마우스 커서를 위치시키고 모듈추가를 선택해 원하는 모듈을 추가할 수 있습니다.

모듈

  1. 모듈이란 전체 시스템 혹은 프로그램을 기능별로 분할한 최소 단위로 다른 구성 요소와는 독립된 요소입니다.
  1. 모듈은 HTML과 변수 조합으로 이루어져 있고 사용자가 입력한 module="모듈아이디(모듈명)" 로 판단되고 동작합니다.
  1. 모듈을 조합해 원하는 시스템 혹은 프로그램을 만들 수 있습니다. 카페24에서는 다양한 모듈을 제공하고 있으며 모듈 코드를 HTML 소스 중 원하는 위치에 삽입해 사용합니다
  1. 　
  1. 웹 상에서 표현한 모듈
  1. 　
  1. 모듈 예시
  1. 1. 미리보기 영역에 마우스 커서를 올렸을 때 한 영역으로 잡히는 부분이 모듈 하나입니다.
  1. 2. 미리보기 영역에서 모듈을 클릭하면 해당 모듈의 소스가 HTML 영역에 표시됩니다. 이미지 속 모듈의 모듈명은 Layou_category 입니다.

모듈 추가/교체하기

  1. 모듈을 추가하거나 교체하는 방법은 두 가지 입니다.
  1. 　
  1. 1. 모듈 편집창 이용
  1. 　(1) 스마트디자인 편집창에서 모듈을 선택하면 나오는 편집 버튼을 선택합니다.
  1. 　(2) 모듈 편집창에서 추가할 모듈과 추가할 위치를 선택한 뒤 적용합니다.
  1. 　
  1. 2. 모듈추가 버튼 이용
  1. 　(1) 스마트디자인 편집창에서 분할보기 또는 HTML보기 상태에서 모듈을 추가할 위치를 HTML 영역에서 선택합니다.
  1. 　(2) 모듈추가 버튼으로 모듈 편집창을 열어 원하는 모듈을 선택, 적용합니다.
  1. 　
  • 디자인 편집 중 해당 모듈을 찾을 수 없습니다. 라는 문구가 나타나고 소스 수정이 불가할 경우에는 1:1문의를 통해 접수 바랍니다. 오류 화면을 캡처에 첨부하면 빠른 확인이 가능합니다.
  1. [1:1문의 바로가기 ]

디자인 구조

  1. 온라인 쇼핑몰을 비롯해 모든 웹사이트는 이미지, 링크 등을 원하는 대로 제작, 변경할 수 있지만, 전체를 놓고 보면 공통되는 구조가 있습니다.
  1. 레이아웃은 전체 구조 중 공통으로 사용되는 영역을 가리키며 크게 네 부분으로 나눌 수 있습니다.
  1. 1. 머리글(Header)
  1. 　온라인 쇼핑몰 모든 페이지 맨 위에 표시되는 영역입니다. 보통 로고, 로그인 정보, 검색창, 바로가기 등이 노출됩니다.
  1. 　
  1. 2. 탐색(Side)
  1. 　고객이 쇼핑몰을 둘러보는 데 도움이 될만한 메뉴가 표시되는 영역입니다.
  1. 　로그인, 마이쇼핑, 사이드바형 검색창, 상품 분류 메뉴, 고객 상담 안내, 게시판 목록 등이 노출됩니다.
  1. 　
  1. 3. 본문(Body)
  1. 　머리글과 바닥글 사이 영역입니다. 고정되어 있지 않으며 페이지마다 다른 디자인으로 노출될 수 있습니다.
  1. 　
  1. 4. 바닥글(Footer)
  1. 　온라인 쇼핑몰 모든 페이지 맨 아래에 표시되는 영역입니다. 회사 정보, 이용 안내, 고객 센터 안내 등이 노출됩니다.

반응형 설정하기

  1. 스마트디자인 반응형 스킨은 크게 두 가지로 나뉩니다.
  1. 　
  1. 1. PC 디자인만 제공하는 반응형 스킨
  1. 　(1) 구매할 경우 상품 구분에 PC디자인 만 표시되어 있습니다.
  1. 　(2) 대표디자인으로 설정할 경우 [모바일쇼핑몰 > 모바일 환경설정 > 모바일 전용 디자인 사용 설정]을 사용 안 함으로 선택, 저장해야 합니다.
  1. 　
  • 모바일 전용 디자인 사용 설정을 사용안함으로 설정할 경우 모바일 전용 기능에 제약이 있을 수 있으므로 충분히 테스트하기 바랍니다.
  1. 　
  1. 2. PC와 모바일 디자인 각각 제공하는 반응형 스킨
  1. 　(1) 구매할 경우 상품 구분에 PC 및 모바일 디자인으로 표시되어 있습니다.