(Last Updated On: 2017-03-29)

시작하면서…

DIY 쇼핑몰 따라하기는 커스텀 DIY쇼핑몰을 제작하는 방법을 쉽게 따라하실 수 있도록 도움을 드리는 가이드 입니다. 본 가이드에서는 워드프레스(WordPress) + 우커머스(WooCommerce)를 사용한 커스텀 쇼핑몰 제작을 설명합니다. 반복적으로 커스텀 이라는 단어를 사용하는 이유는 워드프레스(WordPress) + 우커머스(WooCommerce) 조합으로 쇼핑몰을 제작하면 기능이나 디자인을 여러분의 비지니스 환경에 맞도록 커스터마이징이 가능하기 때문입니다. 쇼핑몰을 시작하면서 최소한의 비용으로 멋진 쇼핑몰을 만드는 가장 적합한 방법입니다.

본 가이드에서는 ,  Flatsome 이라는 디자인테마를 사용하고 있습니다. 본 DIY가이드를 진행 하시기 위해서는 Flatsome 디자인테마를 구입하셔야 합니다. 물론, 우커머스 쇼핑몰을 만들기 위한 무료 디자인테마도 있습니다. 그러나, 멋진 기능과 디자인을 적용하기 위해서는 수많은 유료 플러그인을 별도로 설치해야합니다. Flatsome은 이런 기능과 디자인을 이미 충분히 가지고 있기 때문에 실제로 쇼핑몰을 제작하는 시간과 비용을 Save하도록 해줍니다.
또한,  아래와 같이 최고의 웹디자이너들이 미리 만들어 놓은  15개의 멋진 디자인 중 하나를 선택해서 시작할 수 있고, 나중에 다른 디자인으로 변경도 가능합니다.


각각의 디자인을 클릭 해보면 Live 웹사이트를 보실 수 있습니다.

Contents

  1. 웹호스팅 및 도메인
  2. Flatsome 디자인테마 구입 및 설치
  3. Flatsome 디자인테마 설정 (Setup wizard)
  4. 우커머스(WooCommerce) Quick Setup
  5. 우커머스(WooCommerce) 상세설정
  6. 상품등록
  7. 페이지 만들기.
  8. 메뉴 만들기
  9. 쇼핑몰 헤더(Header) 및 푸터(Footer)
  10. 쇼핑몰 프론트 페이지 디자인
  11. 상품진열 페이지 디자인
  12. 상품상세 페이지 디자인
  13. 마케팅관련 플러그인 설치
  14. 쇼핑몰 Launch

1.웹호스팅 및 도메인이름

웹호스팅 이란?

웹사이트를 운영하기 위해서는 웹사이트가 운영될 서버, 사용자들의 접속을 감당할만한 네트워크, 데이터 센터 (서버와 네트워크가 있을장소)가 필요합니다. 그러나, 이러한 환경을 모두 갖추기 위해서는 많은 비용이 들어가기 때문에 개인이나 스몰비지니스가 감당하기가 어렵습니다. 그래서 이러한 환경을 모두 갖춘 웹호스팅 회사에서 저렴한 월 비용만 지불하고 웹호스팅 서비스를 받게 됩니다. 특희, 쇼핑몰의 경우는 사용자의 민감한 개인정보를 다루기 때문에 일반 웹호스팅 보다는 보다 안전하고 속도가 빠른 웹호스팅이 필요합니다.

도메인(Domain)이름 이란?

웹사이트를 인터넷에서 구별하는 이름입니다. 흔희 URL 이라고도 얘기하는 경우가 있습니다. 예를들어 GOOGLE.COM AMAZON.COM, DAUM.NET 등이 있습니다. 도메인 이름은 보통 1년 단위로 도메인 등록 회사에서 임대해서 사용하게 됩니다.

웹호스팅 구입 및 설정하기 (도메인 이름 설정 포함)

쇼핑몰을 제작 할 때 웹호스팅의 선택은 아주 중요합니다. 본인에게 적합한 예산과 요구사항을 고려해서 신중하게 구입하셔 야 합니다.
어떤 웹 호스팅을 선택해야 할 지 판단이 서지 않으면, 워드프레스 웹호스팅 선택하기를 참조하시면 더욱 상세한 정보를 얻을 수 있습니다.
저희가 조금 쉽게 판단을 하실 수 있도록 도움을 드리면 아래 2가지 중 한가지 선택을 하시는 것 입니다.

  1. 시작단계에서 적은 비용으로 일단 시작을 하실 경우는  SiteGround
  2. 1번의 경우가 아니라면  WPEngine을 선택 하시면 좋습니다.

SiteGround WPEngine
권장대상 저렴한 비용 / 꽤 쓸만한 성능 모든 쇼핑몰에 권장 
간단한 설명 일반 SHARED HOSTING 중
가장 가격대비 성능이 가장 우수함
World Class 쇼핑몰을 위한 웹호스팅
가격 $3.95/월
(1년 단위 결제, $59.40/1년 )
$29/월
(월단위 결재가능, 1년 결제, $290/1년)
구입 및 설정 SiteGround 웹호스팅 구입 및 설정 방법 WPEngine 웹호스팅 구입 및 설정 방법

위의 호스팅 서비스를 구입하시고 설정이 완료되면 다음 단계인 Flatsome 디자인테마 구입 및 설치를 진행하세요.

SSL이란?

SSL (Secure Sockets Layer)은 인터넷 상에서 사용되는 표준 보안 기술중의 하나로 사용자와 서버(웹사이트) 사이에 전송되는 데이터를 암호화해서 해커로 부터 중요한 데이터를 안전하게 지키는 기술입니다. 보통 쇼핑몰의 경우 결제를 하기 바로 직전에 HTTP://MYDOMAIN.COM 으로 되있던 웹사이트 주소가 결제 버튼을 클릭하면 HTTPS://MYDOMAIN.COM로 변경 되는것을 볼 수 있는데 SSL이 설치되 있기 때문 입니다. SSL은 Free가 아닙니다. 대부분의 경우 별도의 SSL을 구입해서 웹사이트에 설치하게 됩니다. SSL의 가격은 1년 $69 부터 다양 합니다.

wp_affiliate_ad_728x90

2. Flatsome 디자인테마 구입/설치

1) Flatsome 디자인 테마 구입하기

본 가이드에서는 쇼핑몰 제작시 가장 많이 사용되는 Flatsome 디자인테마를 사용합니다. 다음의 링크를 참조하셔서 다음 단계를 진행 하기 전에 구입을 하시기 바랍니다.   (이미 Flatsome 디자인테마를 가지고 계시면 별도로 구입하실 필요가  없습니다.)

Flatsome 디자인테마 구입하기

2) Flatsome 디자인테마 설치하기

먼저 워드프레스 관리자 화면으로 로그인 합니다. 워드프레스 관리자 주소(URL)는 원래 웹사이트 주소 뒤에 “/wp-admin”을 붙여주면 됩니다. 예를들어 웹사이트 주소가  “MYDOMAIN.COM” 이라면 다음과 같이 해주시면 됩니다.  관리자주소 URL )  MYDOMAIN.COM/wp-admin  “/wp-admin”는 반드시 소문자로 입력하셔야 합니다.인터넷 브라우져에서 위와 같이 주소(URL)를 입력하고 이동하면 아래 화면이 나타 납니다.

아래 화면에서 Username or Email Address 에 관리자 아이디 혹은 이메일을 입력 하시고, Password란에 패스워드를 입력하신 후 Log In 버튼을 클릭 합니다.

 

Flatsome 디자인테마를 설치하기 위해서 Appearance > Themes  화면으로 이동 합니다.

 

아래 화면과 같이 Add New 버튼을 클릭 합니다.

 

아래 화면과 같이  Flatsome 설치 화일을 업로드하기 위해서 ‘Upload Theme‘을 클릭 합니다. 

 

아래 화면과 같이
(1) Flatsome 설치화일을 업로드 하기 위해서 ‘Choose File‘을 클릭합니다.
(2) 본인이 Flatsome 디자인테마를 구입 후 다운로드 받은 폴더를 선택 합니다. 거기서 설치 화일을 찾아서 선택해 줍니다.
(3) ‘Install Now’를 클릭 합니다.

 

아래 그림과 같이 ‘Activate’를 클릭합니다

3. Flatsome 디자인테마 설정 (Setup wizard)

아래 그림과 같이 Flatsome의 Welcome 화면이 나타납니다.
여기서 Setup wizard for Flatsome 과정이 시작됩니다. 이 과정을 지금 생략하고 나중에 해도 됩니다. 그럴경우는 아래와 같이 ‘Not right now‘를 클릭하세요. 여기서는  ‘Let’s Go!’를 클릭하세요.

 

아래 그림과 같이 Purchase code를 입력하고 ‘Active’를 클릭합니다. ( Purchase code를 찾는 방법은 이어지는 2개의 화면을 참조하세요)theme-activate2

 

Flatsome 디자인테마를 구입하신 ThemeForest.net으로 로그인 합니다. 구입하신 Flatsome 다운로드 페이지로 이동합니다. 4가지 다운로드 옵션중 가장 아래에 있는 ‘License certificate & purchase code (text)‘를 다운로드 합니다.theme-activate3

 

다운로드받은  ‘License certificate & purchase code (text)‘를 오픈합니다. 아래 그림처럼 화면 하단에서 ‘Item Purchase Code‘를 확인 할 수 있습니다.theme-activate4

 

다음화면은 ‘Child Theme‘을 설치하는 과정 입니다. 여기서는 ‘Skip this step‘을 클릭합니다.

Child Theme 이란?

Child Theme은 디자인테마의 복사본이라고 생각 하시면 됩니다. 그러나, 실제로는 원본 디자인테마의 위치만을 가지고 있는 것입니다. 즉, 디자인테마의 특정 부분의 소스코드를 수정할 필요가 있을때 원본 소스코드는 그대로 보존 하면서 원하는 부분의 소스코드만을 변경하는 것입니다. 설명이 조금 복잡 할 수 있지만, 소스코드를 수정할 필요가 있을때만 사용한다고 생각하시면 간단합니다. 본 가이드에서는 Child Theme을 사용하지 않습니다.

 

아래 화면처럼 필수 플러그인 설치 화면이 나타납니다.
Continue‘를 클릭 합니다. 설치되는데 시간이 조금 걸립니다.

 

이전 화면에서 필수 플러그인 설치 과정이 끝나면 ‘Demo Contents‘를 설치하는 화면이 나타납니다. Demo Contents를 설치하기 위해서, 모두 체크를 하고 ‘Continue’를 클릭 합니다.

Demo Contents란?

디자인테마를 구입한 후 설치를 해보면 판매할때 SAMPLE로 보여 주었던 웹사이트와 차이가 나서 당황할 수 있습니다. Sample 웹사이트는 Demo Contents가 설치된 상태로 보여지게 됩니다. 따라서, 여러분도 Demo Contents를 설치한 후에 본인의 비지니스에 맞도록 뺄것은 빼고, 수정할 것은 수정하는 방식으로 작업을 진행 하시는것이 훨씬 쉽습니다.

 

Demo Contents가 설치된 후에는 Logo를 업로드 하는 화면이 나타납니다. 또한, 화면 중앙에 보면 이미 만들어진 쇼핑몰 디자인중 하나를 선택할 수 있습니다.
로고를 업로드 후 ‘Continue’를 클릭 합니다.
(로고의 이미지 사이즈는 가로395px X 세로 84PX입니다). 

 

여기까지 Flatsome 디자인테마의 기본설정 완료됬습니다.
‘Agree and Continue’를 클릭 합니다.

 

이제 Flatsome 디자인테마의 설치와 셑업이 완료됬습니다.
아래 그림처럼  ‘Setup WooCommerce‘ 를 클릭해서 WooCommerce Quick Setup으로 이동합니다.

 

여기까지 진행 후 실제로 웹사이트를 보면 아래 화면과 같습니다. 보시는 바와 같이 이미 쇼핑몰의 기본틀을 모두 갖추고 있습니다.temp_website_overview

4. 우커머스(WooCommerce) Quick Setup

위 화면에서  ‘Setup WooCommerce‘를 클릭하면 아래 화면과 같이 WooCommerce Quick Setup화면이 나타납니다. ‘Lets Go!‘를 클릭 합니다.

 

아래는 WooCommerce  Default 페이지들을 설치하는 화면 입니다.  ‘Continue‘를 클릭 합니다.

 

사업장 위치 및 상품부피 측정 단위를 입력한 후 ‘Continue‘를 클릭합니다. (아래 예제는 미국에 사업장이 있는 경우 입니다)

 

Shipping & Tax는 조금씩 다를수 있으니 여기서는 ‘Skip this step‘을 클릭합니다. (향후에 우커머스(WooCommerce)설정에서 본인의 비지니스 환경에 맞도록 설정합니다)

 

아래 화면은 결제관련 세팅 화면 입니다. PayPal Standard 의 경우는 사용료가 무료입니다. 단, 매 주문건당 Fee가 발생 합니다.  미국에 사업장이 있는 경우 PayPal Transaction Fee 를 참조하세요. PayPal 이메일만 입력한 후 ‘Continue‘를 클릭하세요.theme-install13

 

여기까지 진행이 되셨으면 ‘WooCommerce Quick Setup‘이 완료된 것입니다. 아래 그림과 같이 ‘Create your first products!‘를 클릭하면 바로 상품을 입력하실 수 있습니다.

여기까지 Flatsome 디자인테마 설정과 WooCommerce Quick Setup을 완료하였습니다

5. 우커머스(WooCommerce) 상세설정

이전 단계인 4.우커머스(WooCommerce) Quick Setup을 통해서  다음과 같은 설정이 이미 완료 됬습니다.

  • 사업장 설정
  • 우커머스(WooCommerce) 기본 페이지 설정
  • 기본결제 수단설정 (PayPal)

위 3가지 설정 이외에도 실제로 쇼핑몰을 운영하기 위해서 꼭 필요한 설정들이 있습니다.
배송관련설정, 결제관련설정, 고객어카운트관련설정, 이메일관련설정등 중요한 설정들을 하셔야 합니다.

위 설정들은 내용이 너무 방대해서 별도의 글로 정리했습니다. 아래 링크를 클릭하세요.

(WooCommerce) 상세설정 – VER. 2.6.14 기준

6. 상품(Products) 등록.

쇼핑몰을 운영하시면서 가장 중요한 정보 중 하나인  상품등록에 대해서 알아보겠습니다.
우커머스의 상품등록은 저희가 제공해드리는 설명을 보시면 크게 어렵지 않게 하실 수 있습니다.
본인이 판매하고자 하는 상품타입이 어떤 것인지 잘 판단하셔서 등록을 하시기 바랍니다.

상품등록 및 관리관련 글도 내용이 길어서 별도의 글로 정리했습니다. 아래 링크를 클릭하세요.

우커머스(WooCommerce) 상품등록 – VER. 2.6.14 기준

7. 페이지 만들기.

대부분의 쇼핑몰들은 공통적으로 가지고 있는 페이지들이 있습니다.
쇼핑몰에 따라서 추가적인 페이지가 더 있을 수는 있지만, 일반적으로 About us, Contact us, FAQ, Terms & Condition등의 페이지는 꼭 필요한 페이지들이라 할 수 있습니다.

  • About (us) : 우리 쇼핑몰에 대한 소개를 제공하는 페이지 입니다. 보통 고객들은 About (us) 페이지를 보고 쇼핑몰의 신뢰성을 판단하기도 합니다. Company 혹은 Who we are 등의 제목을 갖기도 합니다.
  • Contact (us) : 고객의 문의사항이나 문제해결을 위한 연락 방법을 제공하는 페이지 입니다. 배송이 필요한 상품을 판매한다면 반품(Return)을 받을 주소등이 제공되야 합니다.
  • FAQ : 배송(Shipping) 혹은 반품(Return), 환불(Refund)등 쇼핑몰 이용시 자주 질문하는 내용들을 모아서 고객에게 편리하게 정보를 제공하도록 하는 페이지 입니다.
  • Terms & Condition : 쇼핑몰을 운영하는 회사의 내부 정책(Policy)을 보여주는 페이지 입니다. 향후 고객과의 분쟁 발생 시 책임소재등을 따질 때 참고가 되는 페이지 입니다. 보통 쇼핑의 마지막 단계인 결제(Checkout)페이지에서 이러한 T&C를 읽어야만 주문(Order)이 완료 되도록 설정을 해놓습니다. 

페이지를 만들기 위해서는 먼저 워드프레스 페이지 만드는 방법을 알아보아야 합니다.
워드프레스는 쉽게 페이지를 만들고 만든 페이지를 헤더(Header)의 메인메뉴(Main Menu) 혹은 푸터(Footer), 사이드바(Sidebar)등에 링크형태로 연결 할 수 있습니다.

 

페이지 만들기

 Pages > Add New 화면으로 이동 합니다.

아래 화면에서 페이지 제목내용을 입력합니다. 다음 이어지는 화면들의 이미지 업로드까지 완료되면 ‘Publish를 클릭 합니다.
(Tip) 이미지 업로드는 마지막에 하시는 것이 좋습니다. 먼저 글을 입력 하시고 글의 원하는 위치에 마우스를 한번 클릭하시고 이미지업로드를 하시면 이미지의 위치를 설정하기가 수월합니다.

 

페이지에 이미지 업로드하기.
(1) ‘Add Media’ 를 클릭합니다.
(2) 오픈되는 창에서 ‘Upload File’을 선택한 후 ‘Select Files’를 클릭 합니다.
(3) 원하는 이미지 화일(들)을 선택 합니다.
(4) ‘Open’ 버튼을 클릭 합니다.
(5) ‘Insert into page’ 를 클릭 합니다.

 

이미지가 업로드 된 후에는 이미지위에 마우스를 한번 만 클릭 합니다. 그러면 아래 화면과 같이 이미지의 위치를 조절하는 옵션이 나타날 것입니다. Left, Right, Top, No align과 같이 4개의 우치 조절 옵션이 있습니다. 연필모양의 아이콘을 클릭하면 이미지를 변경, 사이즈조절, 이미지를 클릭 했을때 링크, 링크가 새창에서 열릴지 현재 창에서 열릴지 등을 설정 가능 합니다.

 

아래 화면은 이미지를 Left Align으로 했을때입니다. 아래와 같이 그림은 왼쪽으로 글은 오른쪽으로 Align이 잘 맞추어졌습니다. 이렇게 작성이 끝나면 ‘Publish’ (이미 한번 Publish을 했으면 ‘Update’)를 클릭 합니다.

 

 페이지를 메뉴에 연결하기

위에서 만든 페이지는 아직 메뉴에 연결되있지 않기 때문에 사용자가 볼 수가 없습니다. 페이지를 메뉴에  연결하는 방법은 아래와 같습니다.
워드프레스에서 메뉴를 만들고 관리하는 것은 아주 쉽습니다. Drag & Drop 방식으로 쉽게 메뉴의 순서나 계층구조를 변경 가능 합니다. 또한, 페이지, 글, 카테고리, 상품, 상품 카테고리, 특별한 링크등 여러가지 소스를 메뉴에 직접 추가 할 수 있습니다.

  Appearance > Menus화면으로 이동 합니다.
아래 화면과 같이 조금전에 만든 About us 페이지가 가장 위에 보이는것을 알 수 있습니다. About us 페이지를 체크하고 ‘Add to menu’를 클릭합니다.

 

  기존 메뉴에 새 메뉴 아이템을 추가 하면 기본값으로 메뉴의 가장 아래에 위치하게 됩니다.
아래 화면은 2가지 방식으로 메뉴를 원하는 위치에 이동 시킨 결과 입니다.

  •  Drag & Drop 방식으로 ‘Blog’ 와 ‘Element’ 사이에 위치 시킨후 메뉴를 Save한 결과 입니다.
  •  위와 마찬가지로 Drag & Drop 방식으로 ‘Blog’ 와 ‘Element’ 사이에 위치 시킨면서 조금더 안쪽으로 이동시킨 후 메뉴를 Save한 결과 입니다.

이와 같이 메뉴의 위치를 마음대로 Drag & Drop 방식으로 원하는대로 만들 수 있습니다.

 

Flatsome UX Builder로 페이지 꾸미기

페이지를 만들 때 보통은 워드프레스에서 기본적으로 제공하는 기본 Editor로 작성을 합니다.  그러나 워드프레스  기본 Editor를 이용해서 페이지를 멋지게 꾸미는 것에는 한계가 있습니다.
그래서 보통 Flatsome과 같은 유료 디자인테마들은 대부분 유료페이지빌더(Visual Composer와 같은) 혹은 자체적으로 개발한 페이지빌더를 제공합니다.

페이지빌더란?

워드프레스 기본 Editor를 사용하지 않고 페이지를 멋지게 꾸밀수 있도록 돕는 도구입니다. 보통은 html, css, javascript등을 이용해서 직접 코딩을 해야하는 디자인 요소들을 코드를 몰라도 쉽게 Drag & Drop 방식으로 적용 가능 하도록 해줍니다.

Flatsome의 경우는 자체적으로 개발한 UX Builder 라는 Drag & Drop 방식의 페이지 빌더를 제공 합니다.
아래는 UX Builder의 자세한 사용 방법관련 동영상 입니다.
(계속 진행하시기 전에 아래 동영상을 먼저 보시는것이 다음 단계를 진행하는데 도움이 됩니다)


  Pages> All pages 로 이동해서 원하는 페이지를 선택해서 마우스를 페이지 제목위로 가져갑니다. 그러면 ‘Edit’이라는 링크가 나타납니다. ‘Edit’을 클릭합니다.
그러면 아래와 같은 화면이 나타납니다. 아래 화면과 같이 ‘UX Builder’를 클릭 합니다.

 

  아래와 같이 왼쪽에 UX Builder의 컨트롤 판넬이 나타납니다. 현재 오픈된 About us 페이지에는 이전 예제에서 우리가 입력했던 이미지와 텍스트가 포함된 Text라는 Element 하나만 보여질 것 입니다.
UX Builder 컨트롤 판넬에 있는 ‘Text’ Element 바로 아래 ‘Add to Content’라는 버튼을 클릭 합니다.

 

  ‘Add to Contents’ 를 클릭하면 아래 화면과 같이 ‘LAYOUT’, ‘CONTENT’, ‘SHOP’ 이라는 사용가능한 기능들이 나열됩니다.

  • LAYOUT : 웹페이지의 구조를 잡아주는 기능들을 나열합니다. 배너 슬라이더도 기능도 여기에서 사용 가능 합니다.
  • CONTENT : 웹페이지를 다양하게 꾸며주는 기능들을 선택하실 수 있습니다.
  • SHOP : 사용 가능한 우커머스 관련 기능들을 보여줍니다.

 

  먼저 LAYOUT 중 하나를 선택 합니다.

 

  아래는 LAYOUT 중 ‘Large Media Left’라는 것을 선택한 경우의화면 입니다. 오른쪽에 Upload Image, Element Add등 2개의 컬럼(Column)이 만들어 진것을 보실 수 있습니다.

 

  ‘Upload Image’ 컬럼위에 마우스를 가져가면 왼쪽 위에 ‘Row’라고 표시되면서 우측에 톱니바퀴 아이콘이 나타 납니다. 톱니바퀴 아이콘을 클릭하면 아래 화면과 같이 여러가지 옵션메뉴가 나타 납니다. 그리고 화면 좌측의 UX Builder 컨트롤 판넬에 있는 각각의 톱니바퀴 아이콘들도 클릭을 하면 동일하게 옵션메뉴가 보여집니다.
아래 화면과 같이 ‘Upload Image’더블클릭 합니다.
그러면 왼쪽위의 RowImage로 변경 됩니다. (정확히 말하면 Row 안에 들어있는 Column 안의 Image Element로 변경되는 것입니다)
Image를 한번만 클릭하면 왼쪽의 UX Builder 컨트롤 판넬이 이미지 설정 화면으로 변경 됩니다.
Select Media를 클릭해서 원하는 이미지를 업로드 합니다.

 

 이미지가 업로드되면 이미지 관련 옵션들을 설정 할 수 있습니다. 자세한 설정은 아래 화면의 왼쪽의 이미지 컨트롤 판넬에서 테스트 해보시기 바랍니다.
원하는 설정들을 완료한 후에는 화면 하단 왼쪽의 ‘Apply’를 클릭 합니다.
그러면 왼쪽 컬럼의 이미지 업로드가 완료 됩니다.

 

 이미지 업로드가 왼료되면 텍스트를 입력하기 위해서 오른쪽 컬럼의 + 아이콘을 클릭합니다. (왼쪽의 UX Builder 컨트롤 판넬의 Row 아래에 있는 2번째 Column의 톱니바퀴를 클릭한 후 나오는 메뉴에서 ‘Option’을 클릭해도 됩니다.)

 

 왼쪽 UX Builder 컨트롤 판넬의 CONTENT 중 ‘Text’를 클릭 합니다.

 

위에서  ‘Text’를 클릭하면 텍스트를 어떤 식으로 구성할 것인지를 미리 정해 놓은 PRESET중 하나를 선택 할 수 있습니다.  ‘Apply’를 클릭하기 전까지는 Save가 되지 않기 때문에 하나씩 클릭해서 원하는 PRESET을 찾아서 원하는 것을 선택 합니다. 여기에서는 Paragraph with Headline을 선택 했습니다. 그러면 화면 우측과 같이 가장 윗줄에 Bold Headline이 보이고 그아래 Text가 보이는 형태의 PRESET이 선택 됩니다.

 

아래 화면과 같이 텍스트를 Element가 나타납니다. 오른쪽의 Text Element를 더블 클릭하거나 왼쪽 UX Builder의 ‘Open Text Editor’을 클릭하면 워드프레스 기본 Editor가 나타납니다. HTML에 익숙하지 않은경우 워드프레스 기본 Editor를 활용해서 텍스트를 입력 합니다.

 

이제 이미지와 텍스트 입력이 모두 완료 되었습니다. 왼쪽 UX Builder 의 가장 윘쪽에 있는 ‘Text’ Element 는 우리가 UX Builder를 사용하기 전에 워드프레스 기본 Editor로 입력한 자료 입니다. 이 내용은 우리가 방금 만든 자료와 중복이 됩니다. 따라서 삭제를 해야 합니다. 오른쪽의 톱니바퀴를 클릭해서 메뉴가 나타나도록 합니다. 메뉴중 ‘Delete’를 클릭합니다. ‘Update’를 클릭 합니다.

 

위 과정까지 진행이 완료되면 화면 왼쪽상단의 X 아이콘을 클릭해서 UX Builder를 Close합니다.

 

현재까지의 작업내용을 Save하기 위해서 반드시 ‘Update’를 클릭해 주세요.

 

 FrontPage에 가서 변경한 사항이 잘 적용 되었는지 확인 합니다. 아래 화면과 같이 잘 적용이 되었습니다.

 

UX Builder를 통해서 새로운 Row를 추가해서 그것을 2개의 컬럼으로 나누고 컬럼의 PRESET으로 이미지와 텍스트가 나타나도록 설정해서 이미지, 텍스트 Element를 입력하는 과정을 함께 진행해 보았습니다. 또, 필요없는 ‘Text’ Element를 삭제하는 것도 해보았습니다.
조금 복잡해 보이지만 실제로 사용해보면 아주 직관적인 UX(Use Experience)를 제공 합니다.
UX Builder에 대한 보다 자세한 정보가 필요한 경우아래 링크를 클릭하시면 보다 자세히 알아볼 수 있습니다.

UX Builder 자세히 알아보기 (영문자료)

 

UX Builder 를 이용한 FAQ 페이지 만들기

이전 단계에서 UX Builder 를 이용한 페이지 꾸미기를 알아보았습니다. 사실 이전과 같은 경우는 워드프레스 기본 Editor를 이용해서도 만들 수 있는 페이지입니다. UX Builder의 사용방법에 익숙해 지도록 도움을 드리기 위해서 진행한 과정 입니다. 그러나 FAQ페이지와 같은 경우는 페이지빌더가 없으면 만들기 어려운 기능적인 요소들이 있습니다. 이번과정에서는 FAQ페이지를 통해서 UX Builder를 조금더 활용하는 방법에 대해서 알아보도록 하겠습니다 .

  Pages> Add New 로 이동해서 FAQ페이지를 새로 만듭니다. 아래 화면과 같이 페이지 이름을 FAQ라고 주고 ‘Publish’를 클릭 합니다. Save가 된 후 같은 화면에서 UX Builder를 클릭 합니다

 

  ‘Add to Content’를 클릭합니다. (새 페이지를 만들고 처음 UX Builder를 클릭하면 아래와 같이 이미 만들어진 Template 페이지중에서 하나를 선택해서 시작을 할 수 있습니다. )

 

  LAYOUT 중에서 ‘One Column Row’를 추가 합니다.
‘Add elements’를 클릭합니다.


  UX Builder CONTENT Accordion을 클릭 합니다.

 아래 화면과 같이 Accordion item 3개를 가진 Accordion Element가 추가 됬습니다. 먼저, Accordion의 이름을 입력 합니다. 여기에서는 FAQ라고 입력 합니다. ‘Apply’를 클릭 합니다.

Accordion item 1 을 클릭하면 왼쪽 UX Builder 컨트롤 판넬에 Accordion item 1의 질문을 입력하는 텍스트 박스가 나타 납니다.  여기에서는 ‘How to Order?’ 라고 입력 합니다.이름을 입력 합니다. 입력후에는 ‘Apply’를 클릭 합니다. 다음에는 Accordion item 1 의 내용을 입력하기 위해서 Add element를 클릭 합니다

 

‘Text’를 클릭 합니다.

 

PRESET 중 하나를 선택 합니다. 여기서는 Paragraph를 선택 합니다.

 

Text 를 입력하기 위해서 Open Text Editor를 클릭 합니다.

 

Text 입력이 완료되면 ‘Apply’를 클릭 합니다.

 

위와 같은 과장을 반복해서 원하는 만큼의 FAQ항목을 만듭니다. 작업이 완료되면 ‘Update’를 클릭 합니다.

 

UX Builder 를 Close 한 후 반드시 ‘Update’를 클릭해서 변경 사항을 Save를 하시기 바랍니다.

 

FrontPage 에서 작업 내용을 확인해 봅니다. 아래 화면과 같이 우리가 일반적으로 많이 봤던 Accordion형식의 FAQ를 보실 수 있습니다.

 

UX Builder 를 이용한 Contact us 페이지 만들기

Contact us 페이지에는 보통 다음과 같은 정보들이 포함되게 됩니다.

  • Store Address(Google Map)
  • Business Hours
  • Email
  • Customer Support Phone
  • Contact Form

 Pages> Add New 로 이동해서 Contact us페이지를 새로 만듭니다. 아래 화면과 같이 페이지 이름을 Contact us라고 주고 ‘Publish’를 클릭 합니다. Save가 된 후 같은 화면에서 UX Builder를 클릭 합니다.

 

LAYOUT 중에서 One Column Row를 하나 추가 해줍니다. 아래 화면과 같이Map을 추가 합니다.

 

LAYOUT 중에서 One Column Row를 하나 추가 해줍니다. 아래 화면과 같이Map을 추가 합니다. 아래화면에서 위도(Latitude) 와  경도(Longitude)를 입력해 줍니다.
Google Map에서 Latitude and Longitude 값 가져오는 방법
‘Apply’를 클릭 해줍니다

 

Map을 추가한 Row 바로 아래에 2개의 Column을 가진 Row를 새로 추가 합니다. 왼쪽의  Column에 Accordion을 추가 해주고 Phone, Email, Business Hour등을 추가 합니다.
아래 화면을 참조하세요. (Accordion 사용방법은 이전 단계인 FAQ 페이지 만들기를 참조하세요)

 

오른쪽 Column에는 Contact Form을 추가 합니다.
Add element 를 클리한 후 UX Builder 컨트롤 판넬에서 Form(CF7) 을 클릭 합니다.

 

사용가능한 Form 중 하나를 선택 합니다. (Contact Form 만드는 방법은 조금 있다가 설명 드리겠습니다. 여기에서는 먼저 ‘Contact Form 1’을 선택 합니다)

 

아래 화면과 같이 오른쪽 Column에 Form이 입력이 됬습니다. Apply를 클릭합니다. 그리고 UX Builder를 클릭하고 기본 Editor로 돌아가서 ‘Update’를  클릭합니다.

 

 Frontpage에서 확인 한 Contact us 페이지 입니다.

Contact Form 만들기

Contact Form은 사용자들의 정보를 입력받고 소통을 하기위한 도구 입니다. 일반적으로 입력받는 내용은 아래와 같습니다. 너무 많은 정보의 입력을 요구하는 것은 사용자에게 거부감을 주기 때문에 가능한 꼭 필요한 정보 위주로 간단하게 만드시는 것이 좋습니다.

  • 이름
  • 이메일
  • 전화 (옵션)
  • 제목
  • 내용

Contact > Contact Forms 로 이동 합니다.
리스트된 Form중 하나를 선택 합니다. 여기서는 Contact form 1을 선택 했습니다(위 Contact us 페이지를 만들때 Contact Form 1을 선택했기 때문에 여기서는 Contact Form 1을 가지고 설명 드립니다. Contact Form 1은 보통 Contact form 7 플러그인을 설치하면 기본적으로 만들어져 있는 Form입니다.)

 

Preset 은 기본 Format을 미리 만들어 놓은 것 입니다. Copy & Paste로 쉽게 사용 가능 합니다. 여기서는 상단의 Tab중 Form을 클릭 합니다.

 

아래와 같이 Form의 입력 항목을 선택해서 실제 Form에 추가하는 방식으로 Form을 만들 수 있습니다. 여기서는 선택박스(여러개중 하나의 값을 선택), 라디오버튼, 체크박스등 다양한 Form element를 사용 가능 합니다. 보다 상세한 정보가 필요한 경우 여러분의 요구 사항에 맞도록 Form을 만들 수 있습니다. 즉, 원하는 위치에 마우스를 한번 클릭하고 위의 Form element중 하나를 클릭 합니다. 여기서는 Email 과 Subject 사이에 Tel을 추가하는 작업을 기준으로 Form을 수정하는 방법에 대해서 알아보겠습니다. 

 

아래와 같이 Email 과 Subject 사이에 조금 공간을 두고 상단의 Form element중 ‘Tel’을 클릭합니다. 필수 항목이면 ‘Required field’를 클릭합니다. ‘Insert tag’를 클릭 합니다.

 

아래 (2)번 화면과 같이 이미 등록된 Form element 를 하나 Copy해서 제목을 Phone으로 변경하고 원래 항목 대신 방금 추가한 Tel 항목으로 변경 해주고 Save 를 합니다.

 

Email Tab을 클릭해서 이메일이 어떻게 전송될 것인지 설정 해줍니다..

 

Flatsome 디자인테마 구입하기

8. 메뉴만들기.

메뉴 만들기는 아래 포스팅을 참조하세요.

워드프레스 메뉴만들기 

9. 쇼핑몰 헤더(Header) 및 푸터(Footer).

준비중입니다.

10. 쇼핑몰 프론트(홈) 페이지 디자인.

준비중입니다.

11. 상품진열 페이지 디자인.

준비중입니다.

12. 상품상세 페이지 디자인.

준비중입니다.

13. 마케팅관련 프러그인 설치.

1) 웹사이트 접속통계 플러그인 설치하기

웹사이트를 운영하면서 접속자에 대한 통계정보를 기록하는 것은 아주 중요합니다. 웹사이트를 접속한 사용자의 위치(국가), 어떤 검색엔진을 통해서 접속했는지, 어떤 키워드를 입력해서 접속을 했는지, 하루/일주일/한달간의 접속 통계는 어떻게 되는지…등의 통계 정보를 잘 모니터링 하면 웹사이트 컨텐츠를 어떻게 운영해야 하는지, 온라인 마케팅을 어떤 방향으로 해야 하는지 실마리(Clue)를 얻게 됩니다. 그래서 WP Statistics라는 유용한 웹사이트 접속 통계정보를 제공하는 플러그인을 소개 해드립니다..

웹사이트 방문통계 플러그인(WP Statistics)설치 및 리포트보기

Plugins > Add New 를 클릭 합니다.

weblog1

 

Keyword를 ‘wp statistics’라고 입력 합니다. 그런후 아래와 같이 리스트가 나오면 첫번째 플러그인인 WP Statistics의 ‘Install Now’를 클릭 합니다.

weblog2

 

‘Activate’을 클릭합니다.

weblog3

 

WP Statistics가 정상적으로 설치 된후 아래와 같이 WP Statistics > Overview를 클릭 합니다.

weblog4

 

아래 그림과 같이 다양한 웹사이트 방문 통계 정보를 확인 하실 수 있습니다.

weblog5

 

wp-affiliate_ad_300x250_2

 

 

 

(Last Updated On: 2017-03-29)