카페24 HTML디자인 모드로 쇼핑몰 디자인 하기

오늘은 카페24 무료호스팅 솔루션의 기본템플릿을 사용자 디자인으로 변경하는 절차를 알아 보았습니다.

디자인 작업자 측면에서 3가지 방식이 있습니다.

1. 템플릿 모드(레이아웃을 변경하지 못합니다.)

2. HTML 디자인 모드(사용자 레이아웃을 적용 가능합니다.)

3. 스마트 디자인 모드(웹표준 방식의 레이아웃 기본 적용)

위 중에 2번 HTML 디자인 모드로 쇼핑몰을 만들시 작업순서를 적어 놓습니다.

======================================================================================================================

아래 사항을 요약하면 보통 약 20페이지 분량을 작업하게 됩니다. 즉, 페이지 작업시간이 20일 정도 예상을 하게 됩니다.

디자인 시안 확정 및 상품 이미지 등록에 1주일 정도로 생각 한다면, 디버그까지 약 1달 반-2달 정도의 작업시간이 필요하게 됩니다.

작업비용은 150 ~ 200 만원 정도 예상 하시면 됩니다. 참고로 쇼핑몰 디자인 시안을 올려 놓아 봅니다.

======================================================================================================================

모든 작업은 상품분류 등록 후 시작 한다.(왜냐하면, 상품분류가 등록되어야 상품카테고리링크값으로 페이지 링크값을 등록 가능하기 때문에)
* 디자인관리 > 템플릿 모드 -> HTML 디자인 설정 모드로 작업하기
1. 디자인 기본환경 설정 ( 디자인관리 > 디자인 기본환경설정:타이틀,쇼핑몰정렬,쇼핑몰배경이미지,배너간격 변경 )
2-1. 포토샵 레이아웃에 맞춰 메인화면 코딩 변경
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 메인화면 > html 코딩수정(등록) -->
2-2. 상단 영역 코딩 변경2
<!-- {{$a_6}} HTML 디자인 설정 > 공통모듈 리스트탭 > TOP탭 > 상단메뉴(모듈편집:a_32포함) > HTML편집 탭 -->
3. 상단 검색창 변경
<!-- {{$a_32}} HTML 디자인 설정 > 공통모듈 리스트탭 > TOP탭 > 검색창_B형(모듈편집) -->
4. 로그인/로그아웃 모듈 변경
<!-- HTML 디자인 설정 > 공통모듈 리스트탭 > TOP탭 > 상단메뉴(모듈편집) > HTML편집탭 > 로그인 전/후-텍스트 편집 -->
5. 메인화면 메인 이미지 변경(* 커뮤니티 > 게시판관리 > 메인화면 표시여부:표시안함)
<!-- {{$a_7}} HTML 디자인 설정 > 이미지 관리 > 화면상단이미지 > 상단게시판이 없는 경우(메인화면 이미지 업로드) -->
6. 진열상품 이미지 크기 변경
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 메인화면 > 페이지 모듈 리스트 > 4단 가로형(유닛>상품목록 클릭) -->
7-1. 메인화면 타이틀 이미지 변경
<!-- HTML 디자인 설정 > 이미지 관리 > 타이틀이미지 > 추천상품,신상품(업로드) -->
7-2. 메인화면 타이틀 이미지 변경2
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 메인화면 > 페이지 모듈 리스트 > 4단 가로형(목록타이틀-이미지 클릭) -->
8. 하단 회사정보 영역 코딩 변경
<!-- HTML 디자인 설정 > 공통모듈 리스트탭 > BOTTOM탭 > 하단회사정보(모듈편집) > HTML편집탭(등록버튼) -->
9. 우측배너 코딩 변경
<!-- HTML 디자인 설정 > 공통모듈 리스트탭 > 기타 탭 > 움직이는배너(우측:모듈편집) > HTML편집탭(등록버튼) -->
10. 최근본상품 변경
<!-- HTML 디자인 설정 > 공통모듈 리스트탭 > 기타 탭 > 최근본상품(모듈편집) > 이미지등록탭(등록버튼)+HTML편집탭 -->
11. 상품분류 페이지를 메인페이지 레이아웃에 맞춰 코딩 변경(파일위치:/front/php/category.php)
(*상품관리>분류별 상품관리>각 상품분류(디자인설정탭)>상품분류디자인탭>업로드:설정완료버튼)
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 상품분류 > 메인화면의 html 코딩으로 변경(콘텐츠 부분만 상품분류페이지 값으로 변경) -->
12. 상품 상세페이지를 메인페이지 레이아웃에 맞춰 코딩 변경
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 상품상세정보 > 메인화면의 html 코딩으로 변경(콘텐츠 부분만 상세페이지 값으로 변경) -->
13. 로그인 페이지를 메인페이지 레이아웃에 맞춰 코딩 변경
<!-- HTML 디자인 설정 > 페이지 리스트탭 > 로그인 > 메인화면의 html 코딩으로 변경(콘텐츠 부분만 로그인페이지 값으로 변경) -->
14. 기타 다른 부분도 11-13번 과 같은 방식으로 변경 작업
<!-- 상점운영 관련화면(3페이지)+회원관련화면(3페이지)+마이쇼핑화면(3페이지) -->

=============================================================================

=============================================================================

카페24 쇼핑몰의 주요 페이지 URL
1. 메인페이지 : 관리자 > 디자인설정 > HTML 디자인 설정 > 페이지 리스트탭 > 메인화면(html 코딩변경)
2. 회사소개 : /front/php/com_info.php
3. 이용안내 : /front/php/faq.php
4. 이용약관 : /front/php/member_agree.php
5. 개인정보취급방침 : /front/php/privacy_agree.php
6. 로그인 : /front/php/login/login_f.php
7. 회원가입 : /front/php/c/member_regist_f.php
8. 로그아웃 : /front/php/login/login_a.php?mode=logout
9. 회원정보 : /front/php/c/member_regist_f.php
10. 장바구니 : /front/php/basket.php
11. 주문조회 : /front/php/myshop/myshop_orders.php
12. 마이쇼핑 : /front/php/myshop/myshop.php
13. 관심상품 : /front/php/myshop/myshop_wishlist_f.php
14. 아이디찾기 : /front/php/lost_id/lost_id_f.php
15. 페스워드찾기 : /front/php/lost_pw/lost_pw_f.php
16. 게시판 메인화면 : /front/php/b/board_main.php?bm_idx=1&preview=T
17. 공지사항,뉴스/이벤트,이용안내FAQ,상품사용후기,자유게시판,상품Q&A,자료실,갤러리 :
/front/php/b/board_list_new.php?board_no=1(~8)
18. 공동구매 : /front/php/gonggu/gonggu.php?main_cate_no=14
19. 게시물관리 : /front/php/myshop/myboard_list.php
20. 온라인견적서 : /front/php/online_quotation/online_quotation.php
=========== 아래는 작업 제외 페이지목록 ===============================
21. 쿠폰보기 : /front/php/myshop_coupon.php
22. 쿠폰존 : /front/php/coupon_zone.php
23. 출석체크(페이지형) :/front/php/attend_event.php
24. 적립금조회 : /front/php/myshop/myshop_mileage.php
25. 1:1상담 : /front/php/myshop/cons_board_list.php?board_no=9
26. 운영일지 : /front/php/admindiary.php
27. 기획전 : /front/php/project/project.php?main_cate_no=13
28. 사은품보기 : /front/php/gift/gift.php