Login
      내용 x
      META Commerce
        • 인쇄
        • PDF
        내용

        META Commerce

          • 인쇄
          • PDF
          Article Summary

          VPC 환경에서 이용 가능합니다.

          META Commerce는 Linux 운영 체제, Apache Web Server와 MySQL을 활용한 쇼핑몰 구축 서비스 플랫폼입니다. META Commerce로 구축한 쇼핑몰 서비스는 안정성이 우수한 네이버 클라우드 플랫폼상에서 운영되며, 몇 단계의 설정을 통해 즉시 서비스를 시작할 수 있습니다.

          META Commerce 사용의 이점은 다음과 같습니다.

          • 네이버 클라우드 플랫폼의 인프라 서비스를 활용하여 안정적으로 쇼핑몰을 운영할 수 있습니다.
          • 오픈 소스이면서 무료 독립형으로 제공되므로, 사용자가 원하는 대로 서비스를 개인화할 수 있습니다.
          • 직접 개발하거나 디자인하기 어려운 경우, 전문 파트너사를 연결하여 협업할 수 있습니다.
          참고
          • META Commerce 웹 서비스는 기본적으로 안정적이고 보안이 강화된 HTTPS 프로토콜을 기반으로 설정되어 있습니다. HTTP로 접속하여도 HTTPS로 자동 리다이렉션됩니다.
          • 신규 도메인을 사용하려면 SSL 인증서 및 웹 서비스 도메인을 생성한 후 사용해 주십시오.
          • 네이버 클라우드 플랫폼의 META Commerce 사용 방법에 대한 자세한 내용은 다음 웹 사이트를 확인해 주십시오.

          서버 생성 및 접속

          서버 생성 및 접속 방법은 네이버 클라우드 플랫폼의 일반 서버 생성 방법과 유사하나 이외의 추가 작업을 포함합니다. 자세한 절차 및 참고할 만한 가이드는 다음과 같습니다.

          절차설명
          1. VPC 생성
          2. Subnet 생성
          • 참고 가이드: Subnet 생성
          • 설정 사항
            • 적용 VPC는 1번에서 생성한 VPC로 선택
            • 공인 IP 할당을 위해 Public Subnet로 설정
          3. 서버 생성
          • 참고 가이드: Server 생성
          • 이미지 타입 Application, Application 이미지 타입 META-Commerce
          4. ACG 설정
          • 참고 가이드: ACG
          • 포트 설정
            • 터미널 접속을 위한 TCP 22 포트
            • 웹 서비스 이용을 위한 TCP 80, 443 포트(변경 가능)
          5. 공인 IP 설정
          6. 호스트 매핑
          7. 관리자 비밀번호 확인
          8. 서버 접속
          참고
          • 서버에 접속하여 로그인한 후에는 root 계정의 비밀번호를 기억할 수 있는 다른 비밀번호로 변경하기를 권장합니다. passwd root 명령어를 입력하여 새로운 비밀번호를 설정해 주십시오.
          • 공인 IP 주소와 ACG에 문제가 없어도 META Commerce 웹 서비스에 접속되지 않는다면 웹 서버 프로세스가 정지된 것일 수 있습니다. 터미널 프로그램에서 재시작 명령어(systemctl start httpd)를 실행하여 프로세스를 다시 시작해 주십시오.

          호스트 매핑

          웹에서 META Commerce를 실행하려면 서버의 공인 IP 주소와 META Commerce URL을 매핑해야 합니다.
          매핑하는 방법은 다음과 같습니다.

          1. 네이버 클라우드 플랫폼 콘솔의 Region 메뉴와 Platform 메뉴에서 이용 중인 환경을 클릭해 주십시오.
          2. Services > Compute > Server 메뉴를 차례대로 클릭해 주십시오.
          3. META Commerce 서버의 공인 IP 주소를 확인해 주십시오.
          4. 메모장을 관리자 권한으로 실행해 주십시오.
          5. 메모장에서 파일 > 열기 메뉴를 차례대로 클릭한 후 C:\Windows\System32\drivers\etc로 이동해 hosts 파일을 열어 주십시오.
            • 경로에 진입해도 파일이 보이지 않으면 파일 형식을 모든 파일로 변경해 주십시오.
            참고

            hosts 파일에 대한 자세한 설명은 Microsoft의 호스트 파일 기본값 재설정 방법을 참고해 주십시오.

          6. 다음 내용을 hosts 파일에 입력한 후 저장해 주십시오.
            (공인 IP 주소)   ncloud.meta-commerce.co.kr
(공인 IP 주소)   admin-ncloud.meta-commerce.co.kr
            server-metacommerce_host
            참고

            실행 중인 백신(안티바이러스) 프로그램이 hosts 파일 변경을 제한할 수 있으므로, 백신 프로그램을 잠시 중지하거나 종료해 주십시오.

          관리자 계정 등록

          META Commerce를 이용하려면 서비스에 가입하고 관리자 계정을 등록해야 합니다.
          관리자 계정을 등록하는 방법은 다음과 같습니다.

          1. 서버에 접속한 상태에서 웹 브라우저를 열고 admin-ncloud.meta-commerce.co.kr에 접속해 주십시오.
            • META Commerce wizard 페이지가 표시됩니다.
          2. 라이선스 이용 약관 내용을 확인하고 동의한 후 [다음] 버튼을 클릭해 주십시오.
          3. 포털 계정 정보를 입력한 후 [로그인] 버튼을 클릭해 주십시오.
            • 포털 계정이 없다면 [회원 가입] 버튼을 클릭해 포털 회원 가입을 먼저 진행해 주십시오.
          4. 관리자 계정으로 등록할 정보를 입력하고 [저장] 버튼을 클릭해 주십시오.
          5. CMS(Cloud Managed Service) 서비스 사용 여부에 따라 [예] 또는 [아니오] 버튼을 클릭해 주십시오.
            • [예] 버튼을 클릭한 경우, 이용 중인 업체를 선택한 후 [다음] 버튼을 클릭해 주십시오.
            • [아니오] 버튼을 클릭한 경우, 사용할 CMS 서비스를 선택한 후 [다음] 버튼을 클릭해 주십시오.
          6. 결제 서비스 이용 약관 및 자동/정기 결제 동의에 체크 표시한 후 [결제수단 등록] 버튼을 클릭하여 결제 수단을 등록해 주십시오.
          7. 메타페이 결제 창이 나타나면 메타페이를 등록해 주십시오.
          8. 모든 설정이 완료되면 [쇼핑몰 관리자 이동] 버튼을 클릭해 주십시오.

          레이아웃 구조

          META Commerce를 이용해 생성한 쇼핑몰 사이트의 레이아웃 구조는 다음과 같습니다.

          참고

          여기에서는 Visual Studio Code 에디터를 기준으로 설명합니다.

          Head

          레이아웃의 head에는 파비콘, 메타 태그 및 CSS, 자바 스크립트 연결이 설정되어 있으며, 필요에 따라 추가할 수 있습니다.
          server-metacommerce_head

          주의

          jQuery 3.5.1이 내장되어 있어 추가 호출 시 충돌이 발생할 수 있습니다.

          Body

          레이아웃의 body는 다음과 같은 속성을 포함합니다.

          • header, content, footer로 구성되어 있으며, 각 구성 요소는 템플릿 언더바(Templet_) 문법의 정해진 변수명으로 연결되어 있습니다.
            • <예시> {#headerTop}
          • body id는 디렉터리명_페이지명으로 자동 생성됩니다. 페이지별로 구분하여 작업할 때 유용하게 활용할 수 있습니다.
            • <예시> ncloud.meta-commerce.co.kr/shop/goodsList일 경우: shop_goodsList
          • body 하단에 있는 각 페이지별 JS는 현재 페이지명과 동일한 JS 파일과 자동으로 연결됩니다.
            • <예시> ncloud.meta-commerce.co.kr/shop/goodsList의 JS 파일 위치: js/shop/goodsList.js

          클래스 규칙

          클래스 규칙은 BEM(Block Element Modifier) 방법론으로 작성되어 있습니다.
          BEM 방법론은 문제 요소에 대한 속성에 근거하여 클래스명을 정의할 수 있는 구조적인 방법을 제시합니다. ID에는 사용할 수 없고 클래스명에만 사용할 수 있습니다.

          항목설명예시
          B(Block)독립된 페이지 구성 요소.meta-main {border: 1px solid red;})
          E(Element)Block의 구성 요소로, Block 뒤에 2개의 언더바(__)를 사용해 연결.meta-main__head {}
          .meta-main__footer {}
          M(Modifier)Block 또는 Element의 속성 수식어(모양, 상태 등)로, Block 또는 Element 뒤에 2개의 하이픈(--)을 사용해 연결.meta-main--first {}
          .meta-main--last {}
          .meta-main__head--small {}
          .meta-main__head--big {}

          함수 및 변수

          함수 및 변수 사용 방법을 설명합니다.

          참고

          함수 및 변수에 대한 자세한 설명은 META Commerce 포털에 로그인한 후 교육센터 > 개발자 가이드에서 확인해 주십시오.

          Templet_

          Templet_ 사용 방법을 설명합니다.

          Templet_ "공통"

          Templet_ "공통" 사용 방법은 다음과 같습니다.

          Position: 레이아웃 인클루드

          항목설명
          {#headerTop}상단 레이아웃 /layout/header/header_top.htm
          {#headerMenu}상단 레이아웃 /layout/header/header_menu.htm
          {#contents}페이지 콘텐츠
          {#footerMenu}하단 레이아웃 /layout/footer/footer_menu.htm
          {#footerDesc}하단 레이아웃 /layout/footer/desc.htm
          {#leftMenu}좌측 메뉴 /layout/leftmenu/레이아웃 설정 파일

          Position: 공통 변수

          항목설명
          {layoutCommon.isLogin}로그인 여부 체크
          {coupon_use_yn}쿠폰 사용 여부 Y/N
          {is_use_reserve}적립금 유무 체크
          {mandatory_use}상품 정보 고시 여부 Y/N
          {layoutCommon.userInfo.name}회원명
          {layoutCommon.userInfo.cartCnt}장바구니 상품 개수
          {layoutCommon.bodyId}현재 페이지 ID
          {layoutCommon.routeUri}현재 페이지 URI
          {companyInfo.com_ceo}대표자명
          {companyInfo.com_addr1} {companyInfo.com_addr2}주소
          {companyInfo.com_number}사업자 등록 번호
          {companyInfo.online_business_number}통신 판매업 신고 번호
          {companyInfo.officer_name}개인 정보 관리 책임
          {companyInfo.cs_phone}C/S 전화번호(지역 번호 미포함)
          {companyInfo.com_phone}C/S 전화번호(지역 번호 포함)
          {companyInfo.opening_time}운영 시간
          {companyInfo.officer_email}officer 이메일
          {companyInfo.email}이메일

          Position: 공통 함수

          항목설명
          {=g_price(변수)}통화에 대한 3자리마다 콤마(,) 표시 및 외화 표시
          {=g_number_format(변수)}숫자에 대한 3자리마다 콤마(,) 표시

          Position: 하단 정보

          항목설명
          {talktalk_use_type}카카오 톡톡 사용 유무 Y/N
          {talktalk_script}카카오 톡톡 스크립트 내용

          Position: GNB 메뉴

          항목설명
          {@ headerMenu.gnbBanner}{bd_link}배너 링크
          {@ headerMenu.gnbBanner}{imgSrc}배너 이미지 경로
          {@ headerMenu.gnbBanner}{banner_name}배너명

          Position: 카테고리 리스트

          항목설명
          {@ .subCateList}
          {..cname} //1 depth
          {@ ..subCateList}
          {...cname} //2 depth
          {/}{/}          		{cname}

          Position: 통합 배너

          항목설명
          {@ get_schedule_banner_info (위치고유번호)}{bd_link}배너 링크
          {@ get_schedule_banner_info (위치고유번호)}{imgSrc}배너 이미지 경로
          {@ get_schedule_banner_info (위치고유번호)}{banner_name}배너명

          Templet_ "메인페이지/main/index.htm"

          Templet_ "메인페이지/main/index.htm" 사용 방법은 다음과 같습니다.

          Position: 메인 배너

          항목설명
          {@ mainBanner}{bd_link}배너 링크
          {@ mainBanner}{imgSrc}배너 이미지 경로
          {@ mainBanner}{banner_name}배너명

          Position: 전시 상품 리스트

          항목설명
          {@ 배너위치명.details}{group_name}전시 상품 그룹명
          {@ 배너위치명.details}{group_code}전시 상품 그룹 코드
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{banner_name}상품 브랜드명
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{pname}상품명
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{discount_rate}할인율
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{listprice}판매가
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{dcprice}실판매가
          {@ 배너위치명.details}
          {@ .goods}
          …
          {/}
          {/}          		{@ icons}
          { .value_}
          {/}          		아이콘 이미지

          Position: 기획전 리스트

          항목설명
          {@ exhitition}{imgPath}이미지 경로
          {@ exhitition}{event_title}이벤트/기획전 제목
          {@ exhitition}{dday}이벤트/기획전 기간
          {@ exhitition}{manage_title}이벤트/기획전 간단 설명

          Templet_ "상품리스트 페이지 /shop/goods_list/goods_list.htm"

          Templet_ "상품리스트 페이지 /shop/goods_list/goods_list.htm" 사용 방법은 다음과 같습니다.

          Position: 상품 리스트

          항목설명
          {nowCate.depth}현재 카테고리의 depth 0/1/2/3/4/5
          {nowCate.cname}현재 카테고리의 카테고리명

          Position: 상단 내비게이션

          항목설명
          {@ layoutCommon.breadcrumbs} {cname}상품 목록 내비게이션 카테고리명

          Position: 카테고리 배너

          항목설명
          {@ bannerData}{bannerLink}배너 이미지 링크
          {@ bannerData}{imgSrc}배너 이미지 경로
          {@ bannerData}{banner_width}배너 가로 길이
          {@ bannerData}{banner_height}배너 세로 길이
          {@ bannerData}{bd_title}배너 제목

          Templet_ "상품상세 페이지 /shop/goods_list/goods_list.htm"

          Templet_ "상품상세 페이지 /shop/goods_list/goods_list.htm" 사용 방법을 설명합니다.

          Position: 상단 내비게이션

          항목설명
          {@ categorys}
          {@ .value_}
          {/}
          {/}          		{cid}카테고리 아이디
          {@ categorys}
          {@ .value_}
          {/}
          {/}          		{isBelong}현재 페이지 카테고리 체크
          {@ categorys}
          {@ .value_}
          {/}
          {/}          		{cname}카테고리명

          Position: 상품 상세 정보

          항목설명
          {pname}-상품명
          {pid}-상품 아이디
          {pcode}-상품 코드
          {image_src}-상품 상세 대표 이미지 경로
          {brand_name}-브랜드명
          {shotinfo}-상품 간략 소개
          {discount_rate}-할인율
          {dcprice}-실판매가
          {listprice}-판매가
          {coupon_use_yn}-쿠폰 사용 여부 Y/N
          {couponApplyCnt}-쿠폰 다운로드 개수
          {com_name}-판매자
          {allow_basic_cnt}-최소 구매 수량
          {allow_byoneperson_cnt}-최대 구매 수량
          {is_use_reserve}-적립금 유무 체크
          {is_use_reserve}-적립금 유무 체크
          {save_reserve}-적립금
          {@ displayOptionInfos} |{dp_title}제조사
          {@ displayOptionInfos} |{dp_desc}추가 정보 내용
          {@ add_image_src} # {/}-추가 이미지 리스트 반복문
          {@ promotionInfos}
          {.event_title} {/}          		-관련 기획전 선택 박스

          Position: 카테고리 인기 상품

          항목설명
          {@ ranking}{brand_name}브랜드명
          {@ ranking}{pname}상품명
          {@ ranking}{listprice}판매가
          {@ ranking}{dcprice}실판매가

          Position: 추천 연관 상품

          항목설명
          {@ relationInfos}{brand_name}브랜드명
          {@ relationInfos}{pname}상품명
          {@ relationInfos}{listprice}판매가
          {@ relationInfos}{dcprice}실판매가

          Position: [상품 정보] 탭

          항목설명
          {@ mandatoryInfos}{.pmi_titile}상품 정보 고시 항목
          {@ mandatoryInfos}{.pmi_desc}상품 정보 고시 내용
          {sellerNotice}-판매자 공지 사항
          {mandatory_use}-상품 정보 고시 사용 여부 Y/N
          {=html_entity_decode(basicinfo)}-상품 상세 정보

          Position: [상품 후기] 탭

          항목설명
          {allReviewTotal}상품 리뷰 개수
          {avg.avg}고객 만족도 별점별 개수
          {avg.goodsAvg}상품 평가 별점별 개수
          {avg.deliveryAvg}배송 평가 별점별 개수
          {reviewTotal}일반 상품 리뷰 개수
          {premiumReviewTotal}프리미엄 상품 리뷰 개수

          Position: [상품 문의] 탭

          항목설명
          {qnaTotal}상품 문의 개수
          {myQnaTotal}나의 상품 문의 개수
          <select> {@ qnaDivs} <option value="{.ix}">{.div_name}</option> {/}</select>나의 상품 문의 개수

          Position: [교환/반품 안내] 탭

          항목설명
          {delivery.deliveryClaimText}교환/반품 안내

          Templet_ 마이페이지

          Templet_ 마이페이지 사용 방법은 다음과 같습니다.

          Position: 마이페이지 상단 공통

          항목설명
          {mypage.gpName}멤버십 등급
          {mypage.deliveryIngCnt}배송 중인 상품 개수
          {mypage.myMileAmount}마일리지
          {mypage.couponCnt}쿠폰 개수

          Position: 주문 내역

          항목설명
          {@ order_data.orderDetail}{pname}주문 상품명
          {@ order_data.orderDetail}{option_text}주문 상품 옵션명
          {@ order_data.orderDetail}{listprice}주문 가격
          {@ order_data.orderDetail}{pcnt}주문 개수
          {@ order_data.orderDetail}{status_text}주문 진행 현황

          Position: 최근

          항목설명
          {@ historyList}{brand_name}상품 브랜드명
          {@ historyList}{pname}상품명

          Position: 관심

          항목설명
          {@ wishList}{discount_rate}할인율
          {@ cartList}{listprice}판매가

          Position: 장바구니 상품 정보

          항목설명
          {@ cartList}{listprice}판매가
          {@ cartList}{dcprice}실판매가

          handlebars.js

          handlebars.js 사용 방법을 설명합니다.

          handlebars.js "상품리스트 페이지/shop/goods_list/goods_list.htm"

          handlebars.js "상품리스트 페이지/shop/goods_list/goods_list.htm" 사용 방법은 다음과 같습니다.

          Position: 상품 리스트

          항목설명
          {[brand_name]}브랜드명
          {[pname]}상품명
          {[discount_rate]}할인율
          {[listprice]}판매가
          {[dcprice]}실판매가

          Position: [상품 후기] 탭

          항목설명
          {[option_name]}상품 옵션명
          {[bbs_subject]}글 제목
          {[bbs_id]}작성자 아이디
          {[regdate]}글 작성 날짜
          {[{\bbs_contents}]}글 내용
          {[{\cmt.cmt_contents}]}관리자 댓글
          {[div_name]}게시글 분류

          신규 페이지 추가

          신규 페이지를 추가하는 방법은 다음과 같습니다.

          1. 신규 파일을 생성하려는 위치에서 마우스 오른쪽 버튼을 클릭한 후 Reveal in Explorer를 클릭해 주십시오.
            server-metacommerce_add_1
          2. 로컬 디렉터리에 리모트 서버와 동일한 디렉터리가 생성된 것을 확인해 주십시오.
            server-metacommerce_add-2_ko
          3. 마우스 오른쪽 버튼을 클릭하여 폴더 및 파일을 추가해 주십시오.
            • <예시> 폴더: new\new_product, 파일: new_product.htm
              server-metacommerce_add_3
          4. 마우스 오른쪽 버튼을 클릭하고 Sync Local을 클릭한 후 원격 서버에 업로드해 주십시오.
            server-metacommerce_add_4
          5. 원격 서버에 접속해 추가한 파일이 업로드되었는지 확인해 주십시오.
            server-metacommerce_add_5
            참고

            파일이 보이지 않으면 오른쪽 상단의 i-server_refresh을 클릭해 주십시오.

          6. htm 파일을 서버와 연결해 줄 php 파일을 추가하기 위해 www에서 마우스 오른쪽 버튼을 클릭한 후 Reveal in Explorer를 클릭해 주십시오.
            server-metacommerce_add_6
          7. php 파일을 생성해 주십시오.
            • 파일 이름에는 특수문자를 사용할 수 없으며, 카멜 표기법 형태로 입력해 주십시오.
              • <예시> newProduct.view.php
          8. php 파일이 생성되면 Sync Local > Remote를 차례대로 클릭하여 원격 서버에 업데이트해 주십시오.
            server-metacommerce_add-7_ko
          9. 생성된 php 파일을 열어 다음 소스를 입력하고 저장해 주십시오.
            <?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');

// Load Forbiz View
$view = getForbizView();

echo $view->loadLayout();
            server-metacommerce_add-8_ko
          10. 마우스 오른쪽 버튼을 클릭한 후 Sync Local > Remote를 차례대로 클릭하여 원격 서버에 업데이트해 주십시오.

          레이아웃 설정

          레이아웃을 설정하는 방법은 다음과 같습니다.

          1. META Commerce 관리자 포털(admin-ncloud.meta-commerce.co.kr)에 접속해 주십시오.
          2. System > 디자인 관리 > 레이아웃 디자인 메뉴를 차례대로 클릭해 주십시오.
          3. 레이아웃 디자인을 설정해 주십시오.
            • 새로운 레이아웃 디자인을 추가하려면, 화면 오른쪽 상단의 [추가] 버튼을 클릭해 주십시오. 등록 팝업 창이 나타나면 정보를 입력한 후 [저장] 버튼을 클릭해 주십시오.
            • 기존 레이아웃 디자인을 수정하려면, 수정할 디자인의 [수정] 버튼을 클릭해 주십시오. 수정 팝업 창이 나타나면 정보를 수정한 후 [저장] 버튼을 클릭해 주십시오.
            • 기존 레이아웃 디자인을 삭제하려면, 삭제할 디자인의 [삭제] 버튼을 클릭해 주십시오.
            참고

            등록 또는 수정 팝업 창에서 파일경로에는 디렉터리명, 접근 URL에는 php 파일명, 컨텐츠에는 html 파일명이 입력되어야 합니다.

          4. 설정이 완료되면 화면 오른쪽 상단의 [Export] 버튼을 클릭해 주십시오.
            • 수정 사항이 사이트에 반영됩니다.
          이 문서가 도움이 되었습니까?
          What's Next
          Change password!
          Changing your password will log you out immediately. Use the new password to log back in.
          Change profile
          Success!
          First name must have atleast 2 characters. Numbers and special characters are not allowed.
          Last name must have atleast 1 characters. Numbers and special characters are not allowed.
          Enter a valid email
          Enter a valid password
          Your profile has been successfully updated.
          Logout