지금까지 고집해온 쇼핑몰 디자인은 버려라!
컬러 마케팅부터 포토샵까지, 제대로 배우는 쇼핑몰 디자인 전략『쇼핑몰 포토샵&레이아웃』. 치열한 쇼핑몰 전쟁에서 컬러와 디자인으로 승부하는 법을 다양한 예제를 통해 설명한 책이다. 쇼핑몰 기획의 첫 단계부터 더 좋고 예쁘게 보이는 상품 촬영방법, 깔끔한 이미지를 위한 포토샵 작업, 구매자의 입장을 고려한 페이지 제작 등 온라인 쇼핑몰을 운영하는 데 필수적인 디자인 기술을 배울 수 있다. 무작정 따라하기에서 더 나아가 스스로 생각하고 새로운 디자인을 창조할 수 있도록 이끌어주며, 잘 된 디자인을 볼 수 있는 눈과 좋은 디자인을 컨트롤할 수 있는 감각을 키워준다.

Stylish 01 성공하기 위한 쇼핑몰의 시작

GOGO >>> 01 쇼핑몰을 시작하기 전에
1. 쇼핑몰 기획하기
판매 아이템 결정하기
타깃 설정하기
디자인 컨셉 잡기
2. 디자인 컨셉을 위한 벤치마킹하기
벤치마킹하기 좋은 사이트
3. 디자인 세부사항 정리하기
로고
레이아웃
컬러 및 서체
참고 웹사이트
4. 사이트 디자인하기
업체에 맡겨 웹 작업을 할 경우
개인이 직접 웹 작업을 할 경우

GOGO >>> 02 사이트의 인상을 결정하는 레이아웃
1. 웹 레이아웃
2. 사이트 레이아웃의 종류
좌측 정렬 레이아웃
중앙 수평 정렬 레이아웃
중앙 수평 수직 정렬 레이아웃
화면 전체 정렬 레이아웃
3. 상품에 따른 상세 페이지 레이아웃
패션의류 및 잡화
전자제품 및 기능성 제품
식품
인테리어 관련 제품

GOGO >>> 03 구매를 결정하는 컬러 디자인
1. 컬러에 따라 느끼는 이미지 알아보기
귀여운 느낌의 컬러
다이내믹한 느낌의 컬러
내추럴한 느낌의 컬러
우아한 느낌의 컬러
고풍스러운 느낌의 클래식한 컬러
모던한 느낌의 컬러
화려한 느낌의 컬러
2. 성공한 컬러 마케팅 사례 알아보기
사랑스럽고 귀여운 여성의 컬러-Pink
심플하고 고급스러운 남성의 컬러-Black
경쾌하고 신나는 컬러-Yellow
정열적이고 에너지 넘치는 컬러-Red
엔티크하고 자연에 가까운 컬러-Brown
자유롭고 상쾌한 컬러-Blue
자연의 푸르름을 가진 컬러-Green
신비롭고 비밀스러운 컬러-Purple
3. 적절한 컬러를 쇼핑몰에 적용한 사례 알아보기
Pink 컬러 적용 사례
Black 컬러 적용 사례
Yellow 컬러 적용 사례
Red 컬러 적용 사례
Brown 컬러 적용 사례
Blue 컬러 적용 사례
Green 컬러 적용 사례
Purple 컬러 적용 사례

GOGO >>> 04 세상 모든 게 디자인 소스
1. 센스가 돋보이는 아이디어
작은 간판

메뉴판
모래 위의 낙서
나무 판넬
이 외의 아이템
2. 광고 속의 색다른 아이디어
유명 브랜드의 광고
일본 스트리트 브랜드의 광고
미국의 잡지 광고
다국적 기업의 잡지 광고
3. 폰트만으로도 완성되는 디자인
Vogue의 홈페이지
Tomoki Uematsu의 포트폴리오 표지
패션매거진 1AM의 화보
WORKSHOPDENIM의 화보
L’EDITO의 목록 부분

Stylish 02 쇼핑몰의 레이아웃을 완성하는 포토샵

GOGO >>> 01 웹용 파일 확장자
1. 상세 페이지의 기본, JPG
2. 움직이는 목록 이미지, GIF
3. 나만의 작업소스, PSD
4. 웹 기본 프로그래밍, HTML
5. 비트맵 파일과 벡터 파일

GOGO >>> 02 쇼핑몰 포토샵의 기본 메뉴 알아보기
1. 편리한 작업환경 만들기
2. 툴 박스 알아보기
3. 자주 쓰는 메뉴 살펴보기
File
Edit
Image
Layer
Select
Filter
View
Window
4. 패널 살펴보기
LAYERS 패널
PATHS 패널
ANIMATION 패널
CHARACTER 패널
HISTORY 패널

GOGO >>> 03 가장 많이 쓰이는 포토샵 효과
1. 그림을 그리는 Brush
2. 도형을 완성하는 Shape
3. 필터의 일인자 Sharpen
Sharpen
Sharpen Edges
Sharpen More
Smart Sharpen
UnSharp Mask
4. 이미지의 다양한 변형을 위한 Transform

GOGO >>> 04 상품 사진 리터칭
1. 이미지 리사이즈
Image Size
2. 불필요한 배경 잘라내기
Image Crop
Crop Tool
3. 잡티 제거하기
4. 흰 배경 만들기
5. 펜 툴 이용하기
6. 그림자 만들기

GOGO >>> 05 모델 사진 리터칭
1. 깨끗한 피부 만들기
상처 없애기
도자기 피부 만들기
2. 모델의 몸매 보정하기
3. 롱다리 만들기

Stylish 03 정보 전달의 필수 배너 디자인하기

GOGO >>> 01 빠르게 정보를 전달하는 공지사항
1. 간단한 디자인으로 완성되는 팝업 디자인
팝업이란?
팝업의 역할
디자인 시 주의사항
2. 배송지연 공지 배너
배경 그러데이션
그레이디언트 툴을 사용하는 경우
Layer Style을 사용하는 경우
다양한 컨셉을 적용한 예
3. 새해 인사 배너
‘복’ 강조하기
전통문양 만들기
다양한 컨셉을 적용한 예
4. 여름휴가 공지
바다 그리기
구름 그리기
다양한 컨셉을 적용한 예
5. 신상품 입고 공지
노트 만들기
모델의 그림자 만들기
다양한 컨셉을 적용한 예

GOGO >>> 02 눈을 사로잡는 이벤트 배너
1. 다양한 이벤트 배너 만들기
배너란?
배너의 역할
디자인 시 주의사항
2. 1+3 이벤트
복고 스티커 만들기
현수막 만들기
다양한 컨셉을 적용한 예
3. Day Day 이벤트
책장 넘기는 효과 만들기
큐빅이 박힌 글자 만들기
다양한 컨셉을 적용한 예
4. 크리스마스 세일 이벤트
크리스마스 카드 만들기
눈 내린 마을과 크리스마스 트리 만들기
다양한 컨셉을 적용한 예
5. 게릴라 세일 이벤트
입체감 있는 글자 만들기
다양한 컨셉을 적용한 예
6. 구매 금액별 사은 이벤트
폴라로이드 사진 만들기
다양한 컨셉을 적용한 예

Stylish 04 내가 만드는 상세 페이지

GOGO >>> 01 패션의류 디자인
1. 계절에 따라 어울리는 여성복 레이아웃 - 봄
메인 컷. 화려한 컬러의 글자 디자인
| Point 1 | 글자 디자인
이미지 컷. 글자를 이용한 다양한 디자인
| Point 1 | 글자로 꾸미는 이미지
사이즈 컷. 포스트 잇을 응용한 사이즈 컷
| Point 1 | 전신 모델 컷을 이용한 컬러감 있는 디자인
2. 계절에 따라 어울리는 여성복 레이아웃 - 여름
메인 컷. 심플한 폴라로이드와 원고용지의 느낌 활용하기
| Point 1 | 심플한 폴라로이드 만들기
| Point 2 | 원고용지의 느낌 만들기
| Point 3 | 클립 만들기
이미지 컷. 신나고 재미있게 그려보는 선
| Point 1 | 손으로 자유로운 그림 그리기
목록 컷. 클릭을 유도하는 목록 이미지
| Point 1 | 목록 경계선 만들기
| Point 2 | 클릭 돋보기 만들기
3. 계절에 따라 어울리는 여성복 레이아웃 - 가을
메인 컷. 화보처럼 강렬한 이미지 만들기
| Point 1 | 유리창에서 찍은 듯한 이미지 만들기
이미지 컷. 이미지 자체만으로 빛나게 만드는 페이지
| Point 1 | 얼굴만 밝게 만들기
| Point 2 | 빛바랜 느낌으로 분위기 있게 보정하기
| Point 3 | 채도로 느낌 있는 사진 만들기
목록 컷. 상세 이미지와 어울리는 목록 이미지 만들기
| Point 1 | 잡지를 펼친 것처럼 만들기
4. 계절에 따라 어울리는 여성복 레이아웃 - 겨울
메인 컷. 페이지 모양의 움직이는 메인 이미지
| Point 1 | 페이지 디자인
이미지 컷. 아기자기한 이미지의 배치와 포인트 주기
| Point 1 | 심플한 상세 이미지에 포인트 주기
사이즈 컷. 조명에서 시작하는 사이즈
| Point 1 | 불이 켜진 조명
5. 제품 컷만을 이용한 남성복 레이아웃
메인 컷. 심플한 메뉴 내비게이션 모양과 사이즈 표 만들기
| Point 1 | 쇼핑몰의 메뉴바 만들기
| Point 2 | 해외기준 사이즈 표 만들기
이미지 컷. 군더더기 없이 깔끔하게 상품 보여주기
| Point 1 | 중앙 정렬로 이미지 배치하기
목록 컷. 쇼핑몰의 상품을 목록처럼 보여주기
| Point 1 | 메인 이미지 활용하기
6. 브랜드의 컨셉을 살린 스포츠웨어 레이아웃
메인 컷. 브랜드의 이미지를 살린 메인 컷과 픽토그램
| Point 1 | 픽토그램으로 기능성 설명하기
이미지 컷. 상품에 충실하면서 포인트 주기
| Point 1 | 그룹을 이용한 상품 컷 정렬하기
디테일과 사이즈 컷. 익숙한 사이즈 표와 옅은 컬러로 공간 나누기
| Point 1 | 의류 일러스트와 사이즈 표 만들기
7. 상품 정보를 한눈에 볼 수 있는 유아복 레이아웃
메인 컷. 깔끔하게 배너처럼 설명하기
| Point 1 | 깔끔한 설명의 배너 만들기
| Point 2 | 깔끔한 빈티지 상품 설명 배너 만들기
이미지 컷. 상품을 최대한 귀엽게
| Point 1 | 패턴을 이용한 배경 만들기
| Point 2 | 크레파스 느낌의 구름으로 장식하기
사이즈 컷. 심플한 디테일과 사이즈 표 만들기
| Point 1 | 사이즈 표 만들기

GOGO >>> 02 패션잡화 디자인
1. 섹시하고 세련된 느낌의 여성 구두 레이아웃
메인 컷. 흑백 이미지와 포인트 컬러
| Point 1 | 마스크를 이용한 흑백 이미지 만들기
이미지 컷. 상품 컷, 이미지 컷, 디테일 컷을 깔끔하게 배열
| Point 1 | 과하지 않게 텍스트 활용하기
사이즈 컷. 그림자로 보다 분위기 있게 완성
| Point 1 | 그림자 만들기
2. 빈티지를 강조한 운동화 레이아웃
메인 컷. 옛 신문처럼 상품 설명하기
| Point 1 | 산뜻한 빈티지 타이틀 만들기
| Point 2 | 신문 만들기
이미지 컷. 빈티지한 사진 틀 활용하기
| Point 1 | 빈티지하게 더 빈티지하게
3. 다양한 컬러가 눈에 띄는 따스한 겨울 모자 레이아웃
메인 컷. 엽서의 느낌으로 만든 메인
| Point 1 | 글자 배경으로 문구 강조하기
| Point 2 | 밋밋한 문단에 줄긋기를 통하여 강조하기
모델 컷. 오리고 붙여 심플한 빈티지 모델 컷
| Point 1 | 찢어진 종이 효과
| Point 2 | 사진 꾸미기
상품 컷. 지그재그로 상품의 컬러 보여주기
| Point 1 | 나만의 브러시 만들기
디테일 컷. 빈티지 노트로 깔끔한 마무리
| Point 1 | 빈티지 색감의 종이 만들기
4. 깔끔하고 여성스러운 느낌의 머리띠 레이아웃
메인 컷. 오픈마켓에서 개인 쇼핑몰 메인처럼
| Point 1 | 베이지컬러의 투톤 하늘 만들기
| Point 2 | 코르크 바탕의 액자 만들기
제품 컷. 심플한 제품 컷 393
| Point 1 | 비행기 경계 라인 만들기
5. 화려한 액세서리를 더욱 눈에 띄게 하는 레이아웃
메인 컷. 화려함이 돋보이는 메인 이미지
| Point 1 | 화려한 액세서리로 보정하기
| Point 2 | 느낌이 있는 설명 페이지 만들기
분류 배너 컷. 깔끔한 분류 배너
| Point 1 | 주얼리 배너
상세 상품 컷. 실크와 2단 상품 목록
| Point 1 | 주얼리에 실크 배경 입히기
| Point 2 | 연결 고리로 목록 만들기

GOGO >>> 03 기타 잡화 디자인
1. 디테일을 잘 표현한 메이크업 박스 레이아웃
메인 컷. 별 비가 내리는 반짝이는 메인 이미지
| Point 1 | 별 비 내리는 모자이크 배경 만들기
이미지 컷. 정확한 상품의 모습과 간결한 설명
| Point 1 | 노트를 이용한 상품 설명하기
| Point 2 | 곡선라인으로 여성스러운 느낌 강조하기
디테일 사이즈 컷. 정확한 디테일과 심플한 사이즈 컷
| Point 1 | 라인 셰이프로 사이즈 표시하기
2. 제품의 포인트를 부각시킬 수 있는 패션 이어폰 레이아웃
메인 컷. 강렬한 물결 이미지
| Point 1 | 세로 선으로 물결 모양 만들기
| Point 2 | 블링블링 반짝이는 글자 만들기
이미지 컷. 은은하고 우아한 느낌의 배경
| Point 1 | 은은하고 우아한 느낌의 배경 만들기
스펙 컷. 지그재그 깔끔한 스펙 컷
| Point 1 | 반복되는 설명 라인 만들기
3. 신뢰도를 높이는 건강식품 선물 세트 레이아웃
메인 컷. 골드 배경의 고급스러운 메인
| Point 1 | 골드컬러를 이용한 고급스러움 강조하기
설명 컷. 관련 이미지와 마크로 믿음직스러운 설명 만들기
| Point 1 | 품질보증 마크 만들기
| Point 2 | 부드럽게 곡선으로 마무리하기
4. GIF 애니메이션을 이용한 인테리어 소품 레이아웃
메인 컷. 폰트만을 이용한 깔끔한 메인 컷
| Point 1 | 폰트로 꾸미기
이미지 컷. 다양한 느낌의 이미지 컷
| Point 1 | 화이트 배경의 깔끔한 이미지
| Point 2 | 빈티지하고 어두운 느낌의 이미지
| Point 3 | 초원 위의 자유롭고 상쾌한 이미지 만들기
마무리 컷. GIF 애니메이션으로 마무리하기
| Point 1 | 움직이는 애니메이션 이미지 만들기
5. 호감도를 높일 수 있는 다이어트 용품 레이아웃
메인 컷. 상큼함이 돋보이는 메인 이미지
| Point 1 | 물에 빠진 제품 표현하기
| Point 2 | 둥근 라인으로 집중력 높이기
이미지 설명 컷. 제품의 이해도를 높이는 설명 페이지
| Point 1 | 알록달록 이미지와 컬러를 이용한 감성 페이지
| Point 2 | 움직이는 것처럼 보이는 정지 이미지
디테일 컷. 포인트 점선 원과 픽토그램
| Point 1 | 포인트 점선 원
| Point 2 | 포인트 픽토그램 만들기

김현미