(1) 까페24 홈페이지 제작 방법

쇼핑몰 설정

회사 소개 설정

간략한 회사 소개와 약도를 설정할 수 있어요.
입력한 정보는 쇼핑몰 푸터(Footer) 영역의 회사 소개 부분을 클릭 시 노출되어요.

고객 지원 정보 설정

고객센터 정보, 개인정보 보호 책임자, 서비스 문의 정보를 입력할 수 있어요.

쇼핑몰 사업자 정보 설정

사업자등록번호, 상호(법인명), 대표자 성명 등의 정보를 입력할 수 있어요.
여기에 입력한 정보는 쇼핑몰 푸터(Footer) 영역의 사업자 정보 표시에 사용되어요.

회사 소개 설정

간략한 회사 소개와 약도를 설정할 수 있어요.
입력한 정보는 쇼핑몰 푸터(Footer) 영역의 회사 소개 부분을 클릭 시 노출되어요.

고객 지원 정보 설정

고객센터 정보, 개인정보 보호 책임자, 서비스 문의 정보를 입력할 수 있어요.

업무 처리 관리

쇼핑몰 운영자, 부운영자, 공급사 운영자 계정의 업무 처리 내역을 확인할 수 있어요.
로그인 및 고객의 정보, 상품, 주문 관련 업무 처리 내역을 확인할 수 있어요.

업무 처리 내역 확인하기

2.
검색 조건을 입력한 후, '검색' 버튼을 눌러 주세요.
처리자에 대표 운영자, 부운영자, 공급사를 선택한 후, ID를 선택하여 검색할 수 있어요.
구분에 PC어드민, 모바일어드민, (구)스마트모드를 선택하여 검색할 수 있어요.
기간을 선택하여 검색할 수 있어요.
업무 내용을 입력하여 검색할 수 있어요.
3.
업무 처리 목록에서 검색 조건에 따른 업무 처리 내역을 확인할 수 있어요.
'업무 내용' 을 누르면, 업무 처리 내역 상세 보기 팝업에서 처리자, 처리 일시, 상세 내용을 확인할 수 있어요.
목록의 '엑셀 다운로드' 버튼을 누르면, 엑셀 파일을 다운로드할 수 있어요.
개인정보의 기술적·관리적 보호 조치 기준에 따라 운영자 권한의 부여, 변경, 말소에 대한 내역의 경우, '상세 내용'을 엑셀 다운로드 항목으로 제공해요.
그 외 업무 처리 내역의 상세 내용은 엑셀로 다운로드받을 수 없어요.

기본 설정 - 안열렸었는데, 승인 났나봄

회사소개 페이지 작성 - 완료
파비콘 설정
연관채널 설정
SEO 검색 설정 완료
아이콘 설정
사이트 접근 설정 완료
에이스카운터 ???
이건 구글 애널리스틱 붙여도 됨.

수수료 안내

결제 서비스
구분
수수료 (VAT별도)
카페24페이먼츠※ 계좌 이체/가상 계좌/에스크로는 제휴PG사를 통해 제공
카드 결제
2.0~3.5% (연 매출액 구간별 영중소 수수료 차등)자세히 보기
계좌 이체
1.8% (최저 200원)
가상 계좌
건별 300원
에스크로 (계좌 이체/가상 계좌) 도움말
수수료 없음
위챗페이
위챗페이
2.5% (VAT별도)

서비스 유의사항

카페24페이먼츠를 통해 카드 결제, 계좌 이체, 가상 계좌, 에스크로, 해외 결제의 서비스를 이용할 수 있어요.
카페24페이먼츠는 신청 시 바로 사용할 수 있으며 계좌 이체, 가상 계좌, 에스크로는 심사가 완료되어야 사용할 수 있어요.
카페24페이먼츠는 서류 제출 후 심사가 완료되어야 판매대금을 정산받을 수 있어요.
결제 수단의 표시 설정은 [쇼핑몰 설정 > 결제 설정 > 결제 방식 설정]에서 할 수 있어요.
위챗페이는 심사가 완료되면 사용할 수 있어요.
연동해제 시 이용 중인 정기 배송(결제) 서비스도 함께 초기화 되고, 등록된 고객의 정기결제 카드 정보도 일괄 삭제되어요.
더 자세한 내용은 자주 묻는 질문(FAQ)에서 확인해 주세요.궁금한 것이 있으면 언제든지 카페24페이먼츠 고객센터(1599-9025)로 문의해 주세요.

아이콘 설정

쇼핑몰에서 사용할 다양한 아이콘을 관리할 수 있어요.
기본으로 제공되는 아이콘을 사용하거나 직접 제작하여 개성 넘치는 아이콘을 사용할 수 있어요.

아이콘 설정

2.
아이콘 설정 목록에서 변경하려는 아이콘 이름 옆에 있는 '아이콘'을 선택해 주세요.
3.
'파일 선택' 버튼을 눌러 원하는 이미지 파일을 선택하고 저장해 주세요.
4.
기본 이미지로 되돌리려면 '초기화' 버튼을 눌러 주세요.

아이콘 설정 관련 안내

이미지 크기
PC: 344px * 48px
모바일: 292px * 64px
파일 형식: PNG
파일명: 한글, 영어, 숫자로 구성
특수 문자, 공백, 다른 나라의 언어가 포함되어 있다면 이미지 첨부가 불가능할 수 있어요.

Note

품절 상품, 추천 상품, 신상품 아이콘 사용 여부 설정은 [관리자] 쇼핑몰 설정> 상품 설정 > 상품 관련 설정 > 상품 아이콘 설정 에서 할 수 있어요.
결제 수단 로고 아이콘은 [관리자] 쇼핑몰 설정> 결제 설정> 결제 방식 설정 에서 결제 수단 표시 방식을 '로고 아이콘'으로 선택해야 사용할 수 있어요.

연관 콘텐츠

추천 서비스

상품 분류 관리

상품 분류를 통해 등록한 상품을 보다 체계적이고 깔끔하게 관리할 수 있어요.
대분류부터 상세 분류까지 총 4단계의 카테고리로 상품을 분류해서 관리할 수 있어요.

상품 분류 등록

쇼핑몰에 노출할 카테고리를 설정하는 기능이에요.
상품 분류는 대분류 하위에 중분류, 소분류, 상세 분류까지 세분화해서 설정할 수 있어요.

상품 분류 추가 및 위치 이동하는 방법

'대분류 추가'를 눌러 대분류를 추가할 수 있어요.
추가된 분류명을 눌러 우측의 '+' 아이콘을 누르면 하위 분류가 추가되어요.
분류명 좌측의 '+' 아이콘을 눌러 하위 분류를 확인할 수 있어요.
분류명을 누른 상태에서 드래그 앤 드롭하여 원하는 위치로 이동할 수 있어요.
이동한 후 '분류 이동 저장' 버튼을 눌러야 이동한 위치가 저장되어요.
추가 및 위치 이동한 순서대로 쇼핑몰 메뉴 영역에 노출되어요.

추가한 상품 분류의 상세 정보 설정

추가한 상품 분류의 정보를 확인하고 설정할 수 있어요.
상품 분류명은 쇼핑몰에 노출되므로 고객이 인지하기 쉽게 입력해 주세요.
분류 설명 항목에 부가 설명을 입력할 수 있고, 분류 URL을 눌러 쇼핑몰에 추가된 상품 분류를 확인할 수 있어요.

Info

글로벌 쇼핑몰에 번역된 상품 분류명을 설정하는 방법

글로벌 쇼핑몰의 상품 분류명은 기본적으로 국내 몰에 적용된 상품 분류명과 연동되도록 설정되어 있어요.
국내 몰과 연동을 해제한 후 번역된 분류명을 입력할 수 있어요.
1.
상품 분류명을 수정할 글로벌 쇼핑몰을 선택해 주세요.
2.
[관리자] 상품 > 상품 관리 > 상품 분류 관리 에서 번역할 상품 분류를 선택해 주세요.
3.
'분류명' 항목에서 '기본 쇼핑몰 정보 공통 사용' 선택을 해지해 주세요.
4.
번역된 분류명을 입력한 뒤, 페이지 아래에 있는 '저장' 버튼을 눌러 주세요.

즐겨찾기/바로 가기 설정

고객의 모바일 웹 브라우저에서 내 쇼핑몰 앱을 간편하게 홈 화면에 설치할 수 있어요.

홈 바로 가기 설정

2.
사용 설정을 '사용함'으로 선택해 주세요.
3.
현재 대표 도메인을 확인해 주세요.
4.
'바로 가기 배너 설정'에서 바로 가기로 설치될 이름을 입력해 주세요.
5.
모바일 화면 설정에서 스플래시 화면에 노출할 문구와 색상을 선택해 주세요.
6.
바로 가기에 사용할 아이콘 이미지를 등록해 주세요.

사용 도메인 확인

'https://'를 사용하지 않는 페이지에서는 홈 바로 가기를 사용할 수 없어요.
대표 도메인이 변경된다면 이전 도메인 정보로 홈 바로 가기를 설치한 고객을 위해 변경한 도메인으로 연결될 수 있도록 포워딩해 주세요.

스플래시 화면

홈 바로 가기를 통해 쇼핑몰에 접속할 때 앱과 동일한 초기 화면을 띄우는 화면이에요.
약 2초간 노출된 후 메인 화면으로 이동해요.
IOS 사파리 브라우저는 스플래시 화면을 지원하지 않아요.
스플래시 화면은 모바일 전체 화면과 모바일 위쪽 바, 2가지 형태로 설정할 수 있어요.

커스텀 디자인

좀 더 전문화된 커스텀 디자인을 원한다면 스마트디자인 사용을 권장해요.
스마트디자인은 HTML 지식이 필요하지만 그만큼 제약 없이 디자인을 편집할 수 있죠.
스마트디자인Easy와 스마트디자인 중에서 상황에 따라 적합한 디자인을 선택해 사용할 수 있어요.
편집 창 상세 기능 설명
폴더 추가/화면 추가
원하는 경로에 폴더, 화면을 생성할 수 있어요.
예를 들어 새로운 기능을 적용하기 위해 안내되는 내용이 있을 때 폴더 추가/화면 추가 기능을 이용할 수 있어요.
새 이름 저장
선택한 파일을 지정한 이름의 새 파일로 저장할 수 있어요.
최신 소스
현재 수정 중인 화면의 최신 버전을 볼 수 있어요.
수정 후에는 저장을 눌러 주세요.
소스가 반영되어요.
소스 일괄 변경
수정 중인 파일에서 특정 소스를 찾아 한 번에 수정할 수 있어요.
분할 보기, HTML 보기 모드에서만 가능해요.
해당 기능을 사용한 뒤 다시 변경 전으로 되돌리고 싶을 때는 히스토리 기능을 이용하면 되어요.
수정 화면 모드: 화면 보기
수정하는 화면을 미리 보기 형태로 볼 수 있어요.
수정 즉시 수정 내용이 반영되어요.
단, 저장된 게 아니기 때문에 저장하고 싶다면 저장을 눌러 주세요.
마우스 움직임에 따라 모듈 단위로 영역이 표시되어요.
원하는 영역의 편집 버튼을 눌러 수정할 수 있어요.
모듈 추가 기능은 지원되지 않아 모듈을 선택할 수 없는 상태로 표시되어요.
수정 화면 모드: 분할 보기
수정하는 화면을 화면 보기 영역과 HTML 영역으로 나누어 두 가지 상태를 동시에 볼 수 있어요.
화면 보기 영역에서 모듈 단위를 선택하면 선택한 모듈의 소스 위치가 HTML 영역에 표시어요.
HTML 영역에서 소스를 수정한 뒤 미리 보기 버튼을 누르거나 저장하면 화면 보기 영역에 수정된 내용이 반영되어요.
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.
수정 화면 모드: HTML 보기
수정하는 화면의 HTML 소스만 볼 수 있어요.
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.

모듈

모듈이란 프로그램을 이루는 최소 단위로 1개 또는 그 이상의 콘텐츠와 기능을 하나로 모은 묶음이에요.
각 모듈은 HTML과 변수가 한 덩어리로 모여 동작해요.
모듈은 하나의 독립된 완전한 프로그램으로 사용자가 입력한 module="모듈 아이디(모듈명)"에 따라 판단되고 동작해요.
카페24에서는 다양한 모듈을 제공하고 있어요.
모듈 코드를 HTML  소스 중 원하는 위치에 삽입하여 사용할 수 있어요.

모듈 추가/교체하기

모듈을 추가하거나 교체하는 방법은 두 가지예요.
1. 모듈 편집 창 이용
스마트디자인 편집 창에서 모듈의 편집 버튼을 눌러 주세요.
모듈 편집 창에서 추가할 모듈을 선택하고, 선택한 모듈이 추가될 위치를 선택한 뒤 적용해 주세요.
2. 모듈 추가 버튼 이용
스마트디자인 편집 창에서 분할 보기 또는 HTML 보기 상태로 모듈을 추가할 위치를 HTML 영역에서 선택해 주세요.
모듈 추가 버튼으로 모듈 편집 창을 열어 원하는 모듈을 선택하고 적용해 주세요.

디자인 구조

온라인 쇼핑몰을 비롯해 모든 웹 사이트는 전체적으로 공통된 구조가 있어요.
레이아웃은 전체 구조 중 공통으로 사용되는 영역을 가리키고, 크게 네 부분으로 나뉘어요.
1. 머리글(Header)
온라인 쇼핑몰의 모든 페이지 맨 위에 표시되는 영역이에요.
보통 로고, 로그인 정보, 검색 창, 바로 가기 등이 노출되어요.
2. 탐색(Side)
고객이 쇼핑몰을 둘러보는 데 도움이 될 만한 메뉴가 표시되는 영역이에요.
로그인, 마이 쇼핑, 사이드바형 검색 창, 상품 분류 메뉴, 기획전, 고객 상담 안내, 게시판 목록, 인기 상품 등이 노출되어요.
3. 본문 (Body)
머리글과 바닥글 사이 영역이에요.
머리글, 바닥글과 달리 고정되지 않고, 페이지마다 다른 디자인으로 노출될 수 있어요.
4. 바닥글(Footer)
온라인 쇼핑몰의 모든 페이지 맨 아래에 표시되는 영역이에요.
회사 정보, 이용 안내, 고객센터 안내 등이 노출되어요.
2. PC와 모바일 디자인 각각 제공하는 반응형 스킨
구매할 경우, 상품 구분에 PC, 모바일 디자인으로 표시되어 있어요.
대표 디자인으로 설정하는 경우, [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.그다음 '모바일 탭'에서 모바일 전용 디자인 사용 설정을 '사용함'으로 선택해 주세요.

배너/팝업

배너, 팝업은 사이트에 접속하면 나타나는 작은 창이에요.
쇼핑몰 페이지 어디든 표시할 수 있어요.
이목을 끌 수 있어 공지부터 각종 홍보, 행사 안내까지 다양한 곳에 사용되어요.
PC는 팝업, 모바일에서는 팝업 또는 배너로 표시 선택이 가능해요.

PC

2.
목록에서 '팝업 등록' 버튼을 눌러 주세요.
3.
진행 여부를 선택하고, 쇼핑몰 디자인은 반드시 현재 대표 디자인을 선택해 주세요.
4.
팝업 노출 기간을 설정해 주세요.설정한 기간 내라도 진행 여부가 대기 또는 종료일 경우 팝업이 노출되지 않아요.
5.
팝업 노출 위치는 화면 왼쪽 제일 윗부분을 기준으로 픽셀 단위로 설정할 수 있어요.

모바일

2.
목록에서 '등록' 버튼을 눌러 주세요.
3.
팝업 노출 기간을 설정해 주세요.설정한 기간 내라도 진행 여부가 대기 또는 종료일 경우 팝업이 노출되지 않아요.
4.
이미지를 등록하고, 해당 이미지를 선택할 때 연결될 페이지가 있다면 페이지 주소(URL)를 입력해 주세요.

쿠폰 알림 사용

쿠폰 알림 사용을 선택하고, 이미지 표시 설정을 '배너로 표시하기'로 설정하면 쿠폰을 보유한 회원에게만 해당 이미지가 나타나요.
해당 기능을 사용하려면 [관리자] 프로모션 > 쿠폰 관리 > 쿠폰 만들기 > 부가서비스 에서로그인 시 쿠폰 발급 알림을 '사용함'으로 선택해 주세요.
쿠폰 발급 이미지는 쇼핑몰 메인 화면에만 노출되어요.

이미지 설정

팝업 이미지를 2개 이상 등록했을 때 각 이미지를 보여 주는 방식을 선택할 수 있어요.
이미지 스와이프는 이미지를 1개씩 넘겨볼 수 있는 방식이에요.
세로 나열은 이미지를 세로로 모두 나열해 보여 주는 방식이에요.

이미지 표시 설정

이미지를 표시하는 형식을 설정할 수 있어요.
배너는 쇼핑몰 제일 윗쪽에 이미지가 노출되는 방식이에요.
팝업 창은 쇼핑몰에 접속하면 이미지가 창으로 띄워지는 방식이에요.
팝업 창의 형식 중에서도 팝업형이 작은 창이 띄워지는 것이에요.일반적으로 팝업 창이라 생각되는 형식이죠.
풀스크린형은 이미지가 화면에 꽉 차게 띄워지는 형식이에요.
이미지 크기는 핸드폰 종류에 따라 자동으로 조절되어요.

창 닫기 방법

창 닫기 방법에서는 쇼핑몰 고객이 팝업을 끌 수 있게 제공하는 버튼 종류를 설정할 수 있어요.
'닫기' 버튼은 기본으로 나타나고, 그 외에 추가로 나타날 버튼을 선택해 주세요.
PC에서는 '창 닫기 디자인 > 상세 디자인 설정' 을 통해 문구를 수정할 수 있어요.

Note

팝업 하나를 여러 페이지에 띄우거나 여러 팝업을 한 페이지에 띄울 수 있어요.
한 페이지에 팝업은 최대 5개까지 띄울 수 있어요.
인트로 화면이 설정되어 있으면 인트로 화면에는 팝업을 띄울 수 없어요.
팝업 크기가 작으면 내용이 잘려 보일 수 있어요.팝업 크기를 정확하게 확인하고 입력해 주세요.

Info

직접 만든 팝업에 '닫기' 버튼 추가하기

직접 만든 팝업 선택하기로 팝업 내용을 등록하면 팝업에 '닫기' 버튼을 노출하기 위해서 디자인 소스를 추가해야 해요.
[관리자] 디자인 > 디자인 보관함 에서 '디자인 수정하기' 버튼을 눌러 주세요.
스마트디자인 편집 창에서 popup_guide.html 파일을 열어 주세요.HTML 영역 제일 아래에 소스 <div module="Popup_footer"P$footer}</div>를 복사해 붙여 넣고 저장해 주세요.

Info

스마트 팝업 관리

기본으로 제공되는 앱으로 간편하게 팝업을 제작할 수 있는 기능이에요.
스마트디자인은 [관리자] 앱 > 마이 앱 의 설치한 앱 목록에서 확인할 수 있어요.

연관 콘텐츠

추천 서비스

[동영상가이드]디자인 백업/복구

카페24는 쇼핑몰 디자인 파일을 안전하게 관리할 수 있도록 백업 및 복구 기능을 제공해요.
자동 또는 수동으로 디자인 파일을 저장할 수 있어요.
저장된 디자인 파일은 복구할 수도 있어요.
실수나 오류로 발생하는 디자인 파일 손상을 방지하기 위해 사용해요.

디자인 백업하기

디자인 파일은 자동 또는 수동으로 저장할 수 있어요.
저장된 파일은 7일까지 보관되고, 다운로드할 수 있어요.
2.
저장하려는 디자인 스킨을 선택한 후, '백업하기' 버튼을 눌러 주세요.