카페24 쇼핑몰 만들기 – 디자인관리 시작

2009.10.17 14:34:11

카페24 쇼핑몰 관리자 화면에서 상단에서 디자인 관리(1) 버튼을 클릭 합니다.

본 화면은 기본적으로 카페24에서 제공하는 기본적으로 화면 설정을 할 수있는 공간입니다.
하지만 아래 설정을 이용한다면 자신이 원하는 디자인으로 내맘에 맞게 수정이 불가능 합니다. 따라서 HTML디자인 설정으로 변경을 해야 합니다.
화면에 보여지는 메뉴중 템플릿 디자인설정 제일 하단에 있는 ‘HTML디자인 관리로 이동'(2)을 클릭해주세요.

다음과 같은 화면이 팝업으로 나오게 되는데요 여기 ‘HTML 디자인 설정 사용(3)’ 을 클릭해주세요.

화면의 왼쪽 메뉴를 보시면 기존의 메뉴와 달라진 것을 보실수 있는데요 화면 중앙을 보면 쇼핑몰의 각각의 페이지 별로 디자인을 수정 할 수있는 페이지 분류가 있습니다.

위 화면을 보시면 메인화면 부터 게시관련화면 까지 쇼핑몰에 들어가는 모든 페이지에 관한 HTML 파일을 수정 할 수있도록 되어 있어요 여기서 아니 머가 일케 많아 하고 놀라지는 않으셨나요..

절대 겁 먹을거 없습니다. 화면에 보여지는 페이는 상당히 많이 있지만 각각의 페이지는 서로 서로 연결이 되어 있어 하나를 수정 하면 모두 공통으로 적용이되는 부분이 많기 때문에 처음 부터 겁은 먹지 마세요.~

먼저 쇼핑몰의 디자인 기본 설정 부터 시작 하겠습니다.
왼쪽 메뉴중 디자인 기본환경설정을 클릭해주세요 여기에 보면 타이틀, 회원 인사말, 쇼핑몰 정렬, 쇼핑몰 배경, 움직인느 배너 좌측/상단 여백 설정, 최근 본 상품이 있습니다. 하나 하나 설명해드릴께요.

1. 타이틀 : 요녀석은 인터넷 웹사이트에 방문 했을때 모니터 화면 제일 왼쪽 상단에 나타나는 홈페이지 인사말 입니다. 기본의 “즐거운 온라인 쇼핑공간에 오신것을 환영합니다!” 일케 되어 있는데요 이부분을 수정 해서 자신의 쇼핑몰과 맞게 변경 해주시면 됩니다.

2. 회원 인사말 : 이부분은 쇼핑몰 방문 고객이 로그인을 했을때 나타나는 메세지 입니다.
앞부분에 영어로된 부분 “USERNAME” 요녀석은 변경하지 마시구요 뒤쪽에 “님! 환영합니다.”
요부분을 자신에 쇼핑몰에 맞게 수정 해주시면 됩니다. 예를 들어 “님! 즐거운 쇼핑되세요~ ” 등 센스있는 문구로 변경해보세요..^^

3. 쇼핑몰 정렬 : 이부분은 쇼핑몰의 전체 화면을 좌측에 붙힐 것인지 아니면 중앙에 위치 하도록 할것인가를 결정 하는 부분입니다. 내가 쇼핑몰을 어떻게 디자인 할것인가에 따라 달라지겠죠….

4. 쇼핑몰 배경 : 기본적으로 인터넷 화면에서 여백 공간은 흰색으로 표기 됩니다. 하지만 나는 흰색이 싫어 검은색이 좋아~ 그렇다면 색상을 변경해주시면 됩니다. 그리고 색상이 아닌 내가 직접 만든 배경 이미지 파일을 업로드 해서 적용 하실 수도 있습니다. 배경이미지 적용은 이미지 배경 선택 -> 배경이미지 등록 에서 찾아보기 클릭 후 먼저 만들어 놓은 자신의 이미지를 선택 하면 됩니다.

5. 움직이는 배너 좌측 / 상단 여백 설정
카페24 쇼핑몰에서는 기본적으로 좌측과 우측에 아래,위로 마우스 스크롤에 따라 움직이는 배너가 있습니다. 통상적으로 좌측에 움직이는 배너는 사용하지 않는데요 쇼핑몰 디자인에 따라 사용할 수도 있어요 여기서는 좌,우측 배너가 화면에서 상단에 얼마의 px만큼 벌어지게 할것인가를 설정 하는 부분입니다.

6. 최근 본 상품 : 여기는 쇼핑몰에서 상품을 클릭해서 구경을 하고 다른 상품으로 넘어 갔을때 내가 이전에 본 상품을 나타나게 하는 부분입니다. 기본으로 4개의 상품을 볼 수있게 되어있는데요 여기도 숫자를 입력해서 변경이 가능 합니다. 4개의 상품만 나온다고 그럼 10개를 보고 나도 4개만 나오는 건가?
그건 아니에요 화면 아래 와 위에 이전 상품 다음 상품을 클릭 할 수 있게 해서 화면에 보여지는 거는 4개 이지만 실제 10개의 상품을 보았다면 10의 상품 모두 확인 할 수가 있습니다.

이번시간에서 카페24 쇼핑몰 만들기 디자인관리 에서 HTML디자인 설정에 디자인 기본 환경 설정에 대해서 알아보았습니다.

다음 시간에는 HTML 디자인 설정 – 메인화면 꾸미기에 대해 알아보겠습니다.