06. 심플 디자인

01. 공통 디자인 설정

  • 쇼핑몰 편집화면 영역에 기본적으로 메인화면 , 상품 상세화면 , 장바구니 화면 , 마이쇼핑 메인화 면 , 로그인 화면이 탭으로 제공됩니다 . – 디자인 요소는 ‘ 화면 , 색상 , 글자 , 버튼 , 테이블 ’ 총 5개로 나뉘며 , 선택 시 해당 디자인 요소를 편 집합니다 . 공통 디자인 설정에서는 쇼핑몰 디자인의 공통되 는 화면 레이아웃, 대표 색상, 글자 스타일, 버튼 스타일 등을 설정합니다 . – 또한 , 공통으로 설정된 디자인 항목은 화면별 상세 꾸미기 시 , 설정 항목을 불러와 쉽게 적용할 수 있습니다 .

02 화면별 상세 꾸미기

  • 상세 꾸미기를 하고자 하는 쇼핑몰의 화면을 선택할 수 있습니다.
  • 화면은 크게 주요화면, 기타화면, 팝업창으로 구성되어 있으며, 각 화면을 선택하면 상세 화면 목록이 표시됩니다.

– 모듈 설정/해제하기

  • 상단, 좌측, 컨텐츠, 하단 영역 중 하나의 영역을 선택하면, 해당 영역에 포함되어 있는 모듈이 오른쪽 화면에 표시됩니다.
  • On/Off 버튼으로 모듈의 노출을 개별적으로 설정할 수 있습니다. 설정하면 편집창에서 바로 확인하거나, 미리보기를 통해 확인합니다.

– 모듈 상세 꾸미기

  • 선택된 영역 내에서 여러 모듈 중 하나의 모듈을 선택하면 우측영역에 스타일 수정, 쇼핑몰 관리자 기능 설정 기능이 제공되어 각 화면별, 모듈별로 설정을 할 수 있습니다.
  • [ 스타일 수정 ]에서는 선택한 모듈 내 색상, 글자, 버튼 스타일, 여백 조정 등 상세한 디자인 설정을 할 수 있습니다. 또한, [ 쇼핑몰 관리자 기능 설정 ]은 선택한 모듈과 관련되는 관리자 기능 항목을 클릭하여, 바로 팝업을 띄어 빠르게 설정 할 수 있습니다.
  • 모듈에 따라 스타일 수정, 쇼핑몰관리자 기능설정이 함께 제공되거나, 각각 스타일 수정, 쇼핑몰관리자 기능설정만 제공하기도 합니다.

03. 다양한 모듈

  • 배너모듈
  • 상품목록 모듈
  • 글자 모듈
  • 버튼 모듈
  • 모듈 디자인 선택
  • 팝업창

[카페24 심플 디자인 사용자 메뉴얼 보기]

[수행과제]

  • 디자인 레이아웃 설정하기
  • 로고 디자인 하기 – https://www.canva.com
  • 로고 디자인 맞게 테마컬러를 지정해서 버튼모듈, 글자모듈 등 변경하기.
  • 메인화면, 목록화면, 상세화면 상세 꾸미기.