메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

쇼핑몰 디자인 제작 북

포토샵으로 디자인하고, 카페24, 고도몰에서 오픈하기

한빛미디어

집필서

판매중

  • 저자 : 임화연 , 이해령
  • 출간 : 2017-12-05
  • 페이지 : 416 쪽
  • ISBN : 9791162240311
  • 물류코드 :10031
초급 초중급 중급 중고급 고급
4점 (3명)
좋아요 : 29

현장 밀착형 예제로 배우는 쇼핑몰 만들기 프로젝트

많은 사람들이 쇼핑몰 창업에 뛰어들면서 취급하는 상품도 유사하고, 품질이나 콘셉트까지 유사한 경쟁 쇼핑몰이 많아지고 있다. 이처럼 경쟁이 치열할수록 남과 다른, 특색 있는 나만의 쇼핑몰 디자인으로 고객의 눈길을 사로잡는다면 분명 매출 향상에 도움이 될 것이다. 그럼에도 많은 쇼핑몰에서는 시간이나 비용 때문에 디자인 업체나 솔루션에서 제공하는 기본 디자인을 사용하는 경우가 많다.

그렇다면 어떻게 해야 할까? 내 쇼핑몰 디자인을 내 손으로 해 보는 것은 어떨까? 이 책은 획일화된 쇼핑몰 디자인에 실증을 느끼고 자신만의 개성적인 쇼핑몰을 제작하고 싶은 쇼핑몰 운영자 여러분께 해결책을 제시한다. 수년간 쇼핑몰을 디자인하고 제작하면서 얻은 저자의 노하우를 그대로 담아냈다. 쇼핑몰 디자인&제작에 꼭 필요한 핵심 기능만 담아 시간을 절약할 수 있으며, 디자인아트 대표인 저자가 선별한 대표적인 트렌드 예제를 처음부터 끝까지 따라함으로써 쇼핑몰 디자인에 대한 실전 감각을 키울 수도 있다. 실습 프로젝트를 따라하는 것에 그치지 않고, 응용하고 변형해 본다면 자신만의 개성 있는 쇼핑몰을 완성할 수 있을 것이다. 

 

상세_733.jpg

 

 

저자

임화연

(주)디자인아트플러스 대표이며, 동양미래대학 경영학부 겸임교수입니다. 11번가와 네이버에서 상품 페이지 디자인, 디자인 마케팅 전략, 키워드 광고 컨설팅, 홈페이지 컨설팅 등을 주제로 활발한 강의 활동을 하고 있으며, 지은 책으로는 《실전 쇼핑몰 포토샵 북》, 《맛있는 디자인 포토샵 CS6》, 《쇼핑몰 디자인&제작 북》(한빛미디어) 등이 있습니다.

 

저자

이해령

현재 고도소프트에서 일하며, ‘1년에 1권 책 쓰기’를 목표로 세워 실천하고 있습니다. 자기계발 차원에서 시작한 포토샵과 드림위버 덕분에 책까지 집필하게 되었습니다. 소소하게 시작한 새로운 배움이 또 다른 기회가 되는 경험을 한 후 새로운 배움에 정진하고 있습니다. 참여한 책으로는 《맛있는 디자인 포토샵 CS6》, 《맛있는 디자인 드림위버 CC》가 있습니다.

[STEP 01 쇼핑몰 디자인 기본기 다지기]

PART 01> 쇼핑몰 디자인 & 제작 과정

SECTION 01 쇼핑몰과 홈페이지 디자인

SECTION 02 웹그리드 시스템과 레이아웃

SECTION 03 전체 분위기를 좌우하는 컬러

SECTION 04 다양한 용도의 타이포그래피

SECTION 05 쇼핑몰 업종에 따른 디자인 트렌드

SECTION 06 쇼핑몰 제작 및 오픈

 

PART 02> 쇼핑몰의 다양한 디자인 요소

SECTION 01 로고 디자인하기

SECTION 02 아이콘 디자인하기

SECTION 03 메인 이미지 디자인하기

SECTION 04 팝업 디자인하기

SECTION 05 쿠폰 디자인하기

 

[STEP 02 쇼핑몰 디자인하기 with 포토샵]

PART 01> 여성의류 쇼핑몰 디자인

SECTION 01 트렌드를 반영한 여성의류 쇼핑몰 기획하기

SECTION 02 상단 영역 : 로고와 메뉴로 심플하게 디자인하기

SECTION 03 중앙, 하단 영역 : 효과적으로 상품 및 정보 노출하기

SECTION 04 퀵 메뉴 영역 : 메뉴를 열고 닫는 동적 요소 만들기

SECTION 05 디자인 분할 및 저장

 

PART 02> 캠핑용품 쇼핑몰 디자인

SECTION 01 개성이 돋보이는 캠핑용품 쇼핑몰 기획하기

SECTION 02 상단 영역 : 검색 창 및 상품 분류를 위한 카테고리 만들기

SECTION 03 중앙 영역 : 메인 이미지와 이벤트 배너로 상품 노출하기

SECTION 04 하단 영역 : 방문자와 소통할 게시판 배치하기

SECTION 05 디자인 분할 및 저장

 

[STEP 03 디자인 코딩하기 with 드림위버]

PART 01 여성의류 쇼핑몰 코딩하기

SECTION 01 상단 영역 편집

SECTION 02 퀵 메뉴 영역 편집

SECTION 03 하단 영역 편집

 

PART 02 캠핑용품 쇼핑몰 코딩하기

SECTION 01 상단 영역 편집

SECTION 02 중앙 영역 편집

SECTION 03 하단 영역 편집

 

[STEP 04 디자인 세팅하기 with cafe24, 고도몰]

PART 01 여성의류 쇼핑몰 세팅하기 with cafe24

SECTION 01 솔루션 세팅 기본 설정하기

SECTION 02 스타일시트 및 공통 레이아웃 세팅하기

SECTION 03 상단/하단 영역 세팅하기

SECTION 04 중앙 영역 세팅하기

SECTION 05 cafe24 앱 활용하기

 

PART 02 캠핑용품 쇼핑몰 세팅하기 with 고도몰

SECTION 01 솔루션 세팅 기본 설정하기

SECTION 02 스타일 시트 등록 및 상단 세팅하기

SECTION 03 중앙 및 하단 세팅하기

 

[네이버 블로그 홈페이지처럼 꾸미기]

SECTION 01 메인 타이틀 및 배너 디자인하기

SECTION 02 네이버 블로그 세팅하기

① 쇼핑몰 디자인 제작을 위한 필수 기능만 담았다 

하나의 쇼핑몰을 완성하려면 포토샵은 기본이고, 웹언어인 HTML과 오픈을 위한 솔루션 사용 방법까지 알아야 한다. 각 도구 하나만 하더라도 제대로 익히려고 책 한 권으로 끝내기 힘들다. 하지만 이 책은 각 도구의 핵심 기능, 쇼핑몰을 디자인하고 제작하는 데 꼭 필요한 기능만 엮어 한 권으로 구성했다. 포토샵으로 디자인하고, HTML 언어를 쉽게 작성해 주는 드림위버로 코딩한 후 솔루션에 세팅해서 쇼핑몰을 완성해 본다. 

 

② 대표적인 쇼핑몰 스타일로 실습한다 

온라인 쇼핑몰은 취급하는 품목이나 핵심 고객에 따라 콘셉트나 디자인에 차이가 있다. 하지만 그 안에서도 쇼핑몰 종류에 따라 공통적인 특징이나 트렌드가 있기 마련이다. 이 책에서는 가장 대중적인 쇼핑몰인 여성의류 쇼핑몰과 다양한 품목을 취급하는 잡화 쇼핑몰 두 가지를 처음부터 끝까지 실습해 볼 수 있도록 구성했다. 최신 트렌드에 맞는 두 종류의 쇼핑몰을 완성해 본 후, 다양한 쇼핑몰의 특징이나 디자인 요소 등을 참고하여 프로젝트 실습을 응용, 발전시켜 나간다면 개성 있는 ‘나만의 쇼핑몰’을 완성할 수 있을 것이다.

 

③ 무료 솔루션으로 오픈하고, 네이버 블로그로 홍보한다

처음 쇼핑몰을 준비하고 창업하려면 많은 준비와 비용이 필요하다. 그러므로 최대한 아낄 수 있는 부분은 아끼는 것이 좋다. 쇼핑몰 운영자들의 고충을 잘 알고 있는 저자는 무료로 부담 없이 실습해 볼 수 있도록 대표적인 쇼핑몰 솔루션인 cafe24와 고도몰을 이용해 프로젝트 쇼핑몰을 오픈한다. 쇼핑몰을 운영하려면 솔루션의 다양한 기능을 속속들이 알고 있어야 하지만, 이 책에서는 처음 오픈 방법까지만 소개한다. 자세한 설명은 정식으로 오픈한 후 해당 솔루션에서 제공하는 다양한 무료 교육을 이용해도 늦지 않다. 또한, 이 책에는 쇼핑몰과 함께 검색 노출을 위해 필수로 운영해야 하는 네이버 블로그를 마치 홈페이지처럼 사용자화해서 꾸미는 방법을 포함하고 있다. 

 

▶ 이 책이 필요한 독자

- 개성 가득한 쇼핑몰을 직접 디자인하고 싶은 운영자

- 실무 경험이 부족한 신입 웹디자이너

- 웹디자이너를 꿈꾸는 취업 준비생

 

  • [도서리뷰] 쇼핑몰만들 때 도움되는 <쇼핑몰 디자인 제작북>
     
     
     
     
     
     
    쇼핑몰 디자인 제작북은 쇼핑몰디자인을 어떻게 하느냐만 나오는게 아니라
    어떻게 만들어야지 목적에 맞게 잘! 만들 수 있는지 알려주는 책입니다.
     
    이 책은 기획부터 디자인, 세팅까지 처음부터 끝까지 알려주는 친절한 책입니다.
    먼저 쇼핑몰디자인을 어떻게하면 잘 제작할 수 있는지 알려주며
    제작하고 나서 포토샵을 써서 디자인 하는지를 알려주고
    그 디자인을 드림위버로 코딩을하여 카페24나 고도몰에 세팅하는 법 까지 알려줍니다.
     
    아래 목차를 보면 
    기획, 디자인, 코딩, 세팅까지 잘 나와있습니다.
     



     
     
    포토샵, 드림위버 등 툴을 모르는 처음 사용자들은 따라가기 버겁겠지만
    신입웹디자이너라면 실제 프로젝트와 유사함으로 많은 도움이 될겁니다.
    요즘은 디자이너가 디자인만 할 줄 알아서는 안됩니다.
    기획부터 알려주기 때문에 신입웹디한테는 많은 도움이 될 책일거라 생각됩니다.
     
    스페셜로 네이버블로그 홈페이지처럼 꾸미기는 막간을 이용하여
    따라해보면 좋을 것 같습니다.
     
     
     
     
    쇼핑몰디자인제작북은 한빛미디어 홈페이지에서 확인 하실 수 있습니다.

  • design1.jpg

     

    한빛미디어에서 출간 된 <쇼핑몰 디자인 제작북>의 매력은 

    쇼핑몰 디자인부터 디자인 코딩, 솔루션 세팅까지 한 권으로 끝낸다는 점입니다.

    쇼핑몰 디자인의 가장 기본은 웹디자인에 대한 기본 이해와 쇼핑몰과 홈페이지 디자인의 차이점을 알고 시작하는 것입니다.

    그리고 프로그램 사용법에 대해 알고 있어야 합니다.

    가장 기본적으로는 사진 편집 관련은 포토샵을 사용할 줄 알아야 하고 로고 작업과 CI, BI 등은 일러스트레이터를 사용해야 합니다.

    그 다음은 내가 원하는 레이아웃으로 코딩을 해야 하는데 이 책에서는 HTML5와 CSS3를 메모장에 코딩하지 않고 드림위버 프로그램을 사용하여 사용자가 좀 더 쉽게 코딩할 수 있게 도와줍니다.
    그리고 나면 쇼핑몰 세팅에 많이 사용하는 cafe 24나 고도몰에 어떻게 적용하는지 보여줍니다.

    전반적으로 어떻게 디자인을 하고 코딩을 해서 쇼핑몰에 적용하는지 전체적인 흐름을 알 수 있게 해

    줘서 정확한 아웃풋이 잡히지 않은 사용자라면 꼭 활용해 볼 책 입니다.

     

     

    20180217_215254.jpg

     

    20180217_215301.jpg

     

    SECTION마다 설명이 잘되어 있습니다.
    가장 기본적으로 알아야 될 부분에 대한 설명이라 읽어보고 이해하고 디지인 할 때 참고하면 좋을 것 같습니다.


    SECTION 01 쇼핑몰과 홈페이지 디자인
    웹디자인(Web Design)은 인터넷에세 표현되는 웹사이트의 각 페이지를 디자인하는 작업입니다.

    대표적인 웹디자인으로 쇼핑몰과 홈페이지 디자인을 들 수 있습니다. 이 두가지 모두 상업적인 목적

    으로 쓰이는데, 사용자의 행동 패턴을 어떻게 유도하는가에 따라 다르게 활용됩니다.

    쇼핑몰 디자인의 특징과 홈페이지 디자인의 특징에 대해 설명하고 있고 두 개의 다른 점을 비교해서

    설명해 주고 있습니다.
    웹페이지 디자인이라고 하면 쇼핑몰 디자인과 홈페이지 디자인이 같다라고 생각하고 있는 사람들이

    대부분인데 그 점에 대해 쉽게 설명해 주고 있습니다.


    SECTION 02 웹그리드 시스템과 레이아웃
    레이아웃은 건물을 지을 때 설계와 기초 공사에 해당하는 것으로 내용을 배치하는 기본 구조를 정하

    는 작업입니다. 고객의 시선 흐름에 따라서 어떻게 배치해야 콘텐츠를 제대로 전달할 수 있을지에 대

    한 고민부터 시작합니다. 웹그리드 시스템은 이러한 레이아웃을 구성하는 수단으로 시각적인 질서와

    일관성을 유지하는 장치입니다.

    상단 메뉴 고정형 레이아웃, 카드형 레이아웃, 긴 스크롤 레이아웃, 전체 배경 레이아웃, 그리드 파괴

    레이아웃 중 우리가 많이 보는 웹페이지 레이아웃의 경우는 상단 메뉴 고형 레이아웃입니다.
    카드형 레이아웃의 경우 모바일 환경에 맞춰서 요즘 많이 사용하고 있습니다.

    SECTION 03 전체 분위기를 좌우하는 컬러
    컬러는 전체적인 웹사이트으 느낌과 분위기를 전달하는 역할을 하기 때문에 디자인 콘셉트를 정할

    때 우선적으로 결정해야 하는 요소 중 하나입니다. 같은 컬러라도 채도에 따라서 선호하는 고객층이

    달라지므로 중요하면서도 가장 어려운  부분이기도 합니다.

    SECTION 04 다양한 용도의 타이포그래피
    타이포그래피의 가장 큰 역할은 메시지 전달입니다. 사용하는 폰트 종류, 사이 간격, 크기, 색상 등의

    속성을 어떻게 설정하는가는 가독성에 큰 영향을 미칩니다. 타이포그래피는 단순히 정보를 전달하는

    용도가 아니라 디자인 요소로 활용되어 강력한 메시지를 전달하기도 하고, 디자인의 일부가 되어 그

    자체로 아름다움을 표현하기도 합니다.


    SECTION 05 쇼핑몰 업종에 따른 트렌드
    기업 홈페이지는 브랜드 신뢰성을 부각해야 하기 때문에 레이아웃이나 색상 선택에서 제한이 많습니

    다. 그에 비해 쇼핑몰 디자인은 판매하는 상품이나 고객에 따라 독특한 스타일을 연출할 수 있으며,

    종합몰이나 전문몰 등 쇼핑몰 종류에 따라서 다양한 스타일을 연출할 수 있습니다.


    SECTION 06 쇼핑몰 제작 및 오픈
    쇼핑몰을 포함하여 웹사이트를 제작할 때는 전체 제작 과정을 이해하고, 각 과정에서 작업 효율을 극

    대화할 수 있는 방안을 고민해야 합니다. 일반적으로 고객 미팅, 벤치마킹, 자료 수집, 콘셉트 회의,

    기획, 스토리보드, 디자인 목업, 디자인, 퍼블리싱, 쇼핑몰 오픈 과정으로 진행됩니다.

     

     

    20180217_213937.jpg

     

    이 책에서는 일러스트레이터 부분에 관한 로고 작업은 없지만 포토샵에서 설명하고 있습니다.
     

    로고, 배너, 아이콘, 메인 배너, 팝업, 쿠폰 등 하나의 쇼핑몰 디자인을 완성하는 데는 여러 가지 디자인 요소가 필요하며 그 부분에 대한 자세한 설명이 나와 있고 전체적인 레이아웃을 잡고 디자인을 분할해서 저장하는 방법까지 책에 설명한 대로 만들어 보면 좋은 공부가 될 것 같습니다.

     

    <네이버 블로그 홈페이지처럼 꾸미기>는 우선 책 내용을 전체적으로 따라하기가 어렵다면 먼저 시도해 보기 좋은 예제입니다. 개인 블로그를 먼저 꾸며보면 자신감이 생길 것입니다.
     

     

    이 책은 쇼핑몰 제작에 필요한 핵심 내용만 있기 때문에 초급자들이 보기에는 여러번 반복해야 하고 어느 정도 프로그램을 다룰 수 있는 사람들이 보기에 좋은 책입니다.


    한빛미디어 <나는 리뷰어다> 이벤트에 당첨되서 작성한 글입니다.

     

     

  • 쇼핑몰디자인제작북_img01.jpg

     

    파는 물건이 무엇이냐에 따라 필요없을 수도 있지만 쇼핑몰은 온라인판매를 하는 판매자입장에서는 가장 기본적으로 제작해야 할 것입니다. 많은 사람들이 이런 쇼핑몰을 제작할 줄 모르기때문에 대행업체를 통해서 제작을 하게 되지만 커스트마이징, 즉 내가 원하는대로 하려면 돈이 많이 듭니다. 아무래도 싼 가격으로 막 찍어내는 고만고만한 쇼핑몰 제작업체의 쇼핑몰 사이트를 보면 자꾸만 내가 직접 만지고 싶어지죠!

     

     

     

     

     

    쇼핑몰디자인제작북_img02.jpg

     

     

     

     

    쇼핑몰디자인제작북_img03.jpg

     

     

    <쇼핑몰 디자인 제작북>은 쇼핑몰 디자인을 어떻게 시작해야 될지 갈피를 못잡는 초보 디자이너들이 개념을 잡고 시작할 수 있도록 도와줍니다. 디자인 요소별로 기본기를 익혀서 포토샵으로 분야별로 디자인을 익힐 수 있도록 분류했고 이제는 필수가 된 사이트 운영과 관리, 그리고 자기가 원하는 형태로 퍼블리싱 할 수 있는 코딩 파트도 다루고 있습니다. 최종적으로는 호스팅업체를 통해 운영하는데 알고 있어야 할 세팅법들도 알려주네요.

     

     

     

     

    쇼핑몰디자인제작북_img04.jpg

     

     

    클라이언트의 의뢰를 받고 쇼핑몰을 제작함에 있어 무턱대고 포토샵부터 여는 어리석은 행동을 삼가해야 합니다. 모든 쇼핑몰들이 제대로 시작하는게 아니라 주먹구식으로 하기때문에 나중에 관리가 힘들어지고 자신의 판매하는 상품의 컨셉과 따로 놀아 브랜드의 가치가 저하되는 결과를 낫게 됩니다. 그래서 디자이너는 쇼핑몰 웹디자인을 할때 트렌드도 알고 있어야 하며 안정적인 레이아웃을 토대로 짜임새있으면서 개성있는 쇼핑몰로써의 모습을 디자인할 수 있을테죠.
     

     

     

     

    쇼핑몰디자인제작북_img05.jpg

     

     

    이 책은 포토샵 강좌를 위한 책이 아니기때문에 쇼핑몰 디자인 제작에 관련된 안내위주로 되어 있습니다. 각 단원별로 챕터가 끝나면 "디자인 특강"이라는 부분을 통해 주의할 점이나 팁, 그리고 단원에서 얘기못했넌 정보를 알려줍니다.
     

     

     

     

    쇼핑몰디자인제작북_img06.jpg

     

     

    페이지만 많아보이지 쇼핑몰 웹사이트를 들여다보면 핵심적인 페이지가 몇개만 제대로 잡고 가면 됩니다. 그렇다고 쇼핑몰 사이트가 단랑 서너 페이이로 운영된다고 생각하는 큰 오산입죠. 자질구레한 뒷단의 관리 페이지도 많고 단품 쇼핑몰이 아니라면 썸네일이라고 상품 대표 이미지에 따라 붙은 각종 기능들이 많습니다. 이번 단계에서는 각종 트렌드를 반영한 쇼핑몰 디자인을 어떻게 잡아나가야 될지 레이아웃을 잡아 보도록 할께요.
     

     

     

     

    쇼핑몰디자인제작북_img07.jpg

     

     

     

     

    쇼핑몰디자인제작북_img08.jpg

     

     

    판매할 상품을 방문하는 고객들에게 소개하는 것 외에 내 쇼핑몰에서 손쉽게 쇼핑을 할 수 있도록 해주는 기능중에 하나가 퀵 메뉴와 팝업창입니다. 고객입장에서는 거추장하고 보기 싫을지 모르지만 판매자 입장에서는 방문한 순간 고객에게 바로 판매와 관련한 이벤트나 공지를 인지시키기에 좋죠. 퀵 메뉴는 항상 모든 페이지에 측면 공간에서 떠다니면서 보았던 상품이나 빠른 메뉴의 실행을 할 수 있는 접근성을 높여줍니다.
     

     

     

     

    쇼핑몰디자인제작북_img09.jpg

     

     

     

    쇼핑몰디자인제작북_img10.jpg

     

     

    쇼핑몰 웹페이지 디자인만 제대로 한번 하고 나면 다른 일반 웹사이트 디자인에 큰 도움이 됩니다. 쇼핑몰이 뭐 그리 대단하다고? 할지 모르지만 실제 그렇습니다. 회원관리와 상품관리, 게시판과 검색 등 우리가 인터넷 웹사이트에 접하는 거의 대부분이의 기능이 합축됐다고 보면 되죠.
     

     

     

     

부록/예제소스
자료명 등록일 다운로드
예제소스 2017-12-12 다운로드
결재하기
• 문화비 소득공제 가능
• 배송료 : 0원배송료란?

배송료 안내

  • 책, 아이템 등 상품을 3만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
쇼핑몰 디자인 제작 북
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
쇼핑몰 디자인 제작 북
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
쇼핑몰 디자인 제작 북
구입처*
구입일*
부가기호*
부가기호 안내

* 회원가입후 도서인증을 하시면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한됩니다.

* 절판도서, eBook 등 일부 도서는 도서인증이 제한됩니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실