스마트폰을 이용한 모바일 쇼핑이 급증하고 있다는 사실은 벌써 오래전 이슈입니다. 그런데도 여전히 컴퓨터 화면에 맞춰 상세 페이지를 만들고 있지는 않나요? 모바일에서 잘 보이는 상세 페이지는 컴퓨터 화면에서도 잘 보입니다. 이제 모바일, 컴퓨터 구분하지 않고 어떤 기기에서나 잘 보이는 상세 페이지를 만들어 보세요.

[목 차]

머리말 • 008
감사의 글 • 009
이 책의 구성 • 010
포토샵 설치하기 • 012
한글/영문 버전 전환하기 • 014
독자 지원 페이지 및 실습 파일 다운로드 • 015

[알고가기] 구매를 부르는 상품 상세 페이지 • 016
SECTION 01 타깃에 맞는 기획이 우선이다! • 018
SECTION 02 또 하나의 언어, 색으로 말하다 • 023

[연습 01] 포토샵 기본기 다지기 • 028
SECTION 01 나만의 작업환경 설정하기 • 030
_ 새로운 작업 창으로 새로운 파일 불러오기 • 030
_ 눈금자 단위 변경하기 • 031
_ 글꼴 표현 방식 변경하기 • 031
_ 레거시 브러시, 모양, 패턴 추가하기 • 032
SECTION 02 파일 만들기, 열기, 저장하기 • 034
_ 새 파일 만들기 • 034
_ 파일 열기 • 035
_ 파일 저장하기 • 035
_ 불러온 이미지 복제/배치하기 • 037
SECTION 03 다양한 형태로 영역 선택하기 • 038
SECTION 04 도형 만들기와 펜 도구 • 042
_ 도형 그리기 • 042
_ 펜 도구 • 044
SECTION 05 크기 변경 및 자르기 • 045
_ 크기 변경하기 • 045
_ 이미지 자르기 • 047
SECTION 06 레이어 패널 자유자재로 다루기 • 050
_ 레이어 패널 기본 기능 • 050
_ 클리핑 마스크 설정하기 • 055
SECTION 07 레벨 기능으로 본래의 색상 찾기 • 056
_ 선명한 색상 되살리기 • 056
_ 흰색 배경 되살리기 • 057

[연습 02] 상세 컷으로 간단하게 완성하는 의류 상세 페이지 • 058
SECTION 01 메인 이미지 영역 • 060
SECTION 02 기본 이미지 영역 • 065
SECTION 03 디테일 이미지 영역 • 073
SECTION 04 제품 사이즈 표 영역 • 077

[실전 01] 고급과 엔틱을 지향하는 전자 제품 • 082
SECTION 01 그림자 효과가 돋보이는 로고 디자인 • 085
SECTION 02 영문 카피를 장식처럼 활용한 카피 영역 • 089
SECTION 03 깔끔하면서 엔틱한 메인 이미지 영역 • 092
SECTION 04 일상 소품임을 표현하는 콘셉트 사진 영역 • 096
SECTION 05 사진과 한 줄 텍스트로 표현하는 제품 특징 영역 • 103
SECTION 06 주요 기능을 강조하는 제품 설명 영역 • 112
SECTION 07 배경을 흑백으로 처리한 세부 명칭 영역 • 122
SECTION 08 제목 행에 포인트를 준 제품 사양 영역 • 129

[실전 02] 청결하고 정성스런 먹거리 • 134
SECTION 01 제품 사진이 돋보이는 메인 이미지 영역 • 137
SECTION 02 그레이디언트 배경으로 만든 카피 영역 • 144
SECTION 03 깔끔하면서 단조롭지 않은 재료 소개 영역 • 148
SECTION 04 믿을 수 있는 먹거리 인증 마크 및 제작 과정 영역 • 159
SECTION 05 신뢰감을 높이는 브랜드 스토리 영역 • 166
SECTION 06 구매자를 배려한 먹는 방법(사용 방법) 영역 • 170
SECTION 07 빠른 정보 전달을 위한 간단한 인포그래픽 • 173

[실전 03] 젊은 층을 겨냥한 뷰티 제품 • 182
SECTION 01 패키지 디자인과 글꼴을 맞춘 카피 영역 • 185
SECTION 02 사선 디자인을 활용한 메인 이미지 영역 • 188
SECTION 03 메인 디자인 포맷으로 활용할 효과 영역 • 197
SECTION 04 간단한 일러스트로 표현한 제품 효과 영역 • 204
SECTION 05 신뢰도를 높여줄 SNS 후기 영역 • 209
SECTION 06 친환경성과 안전함을 표현한 재료 영역 • 215
SECTION 07 말풍선으로 귀엽게 표현한 사용감 영역 • 222
SECTION 08 해시태그 느낌으로 꾸민 추천 영역 • 229
SECTION 09 안정성을 보여줄 피부자극 테스트 영역 • 234
SECTION 10 깔끔하게 정리한 필수 입력 정보 영역 • 238

[실전 04] 일상에서 소화하는 여성 의류 • 244
SECTION 01 대표 사진으로 간단하게 완성한 메인 이미지 영역 • 247
SECTION 02 잡지 스타일로 연출한 디테일 컷 영역 01 • 253
SECTION 03 잡지 스타일로 연출한 디테일 컷 영역 02 • 257
SECTION 04 단순 디테일 컷 & 쇼핑 체크 영역 • 264
SECTION 05 섬유 조직 사진으로 강조한 재질 표시 영역 • 268
SECTION 06 색상 종류 및 사이즈 표 영역 • 274

찾아보기 • 289

급증하는 온라인 창업으로 경쟁이 더욱 치열해진 요즘!
열 마케터 부럽지 않은 나만의 상품 상세 페이지를 만들어 보세요.

1. 모바일 시대, 모바일에서 잘 보이는 상세 페이지가 대세!
스마트폰을 이용한 모바일 쇼핑이 급증하고 있다는 사실은 벌써 오래전 이슈입니다. 그런데도 여전히 컴퓨터 화면에 맞춰 상세 페이지를 만들고 있지는 않나요? 모바일에서 잘 보이는 상세 페이지는 컴퓨터 화면에서도 잘 보입니다. 이제 모바일, 컴퓨터 구분하지 않고 어떤 기기에서나 잘 보이는 상세 페이지를 만들어 보세요.

2. 20년 경력 쇼핑몰 전문 디자이너의 ‘찐’ 노하우를 배울 수 있습니다.
임화연 작가는 20년 경력의 쇼핑몰 전문 디자이너로, 11번가, 네이버, 여러 대학 등에서 강의하면서 예비 운영자 혹은 실제 쇼핑몰 운영자들의 생생한 이야기를 들었습니다. 쇼핑몰 운영자 대부분의 바람은 매출 향상이었으며, 저자는 오랜 강의 및 실무 경험을 바탕으로 매출 증가에 도움이 되는 상세 페이지 디자인 노하우를 이 책에 담았습니다. 단순히 포토샵을 활용해 실습만 하는 것이 아니라, 왜 이런 디자인을 하게 되었는지 기획 단계부터 살펴볼 수 있습니다.

3. 다섯 가지 대표 스타일을 실습하고, 나만의 스타일을 찾아보세요!
이 책에는 상세 컷으로 빠르게 완성하는 의류 상세 페이지부터 고급과 엔틱을 지향하는 전자제품, 청결하고 정성스러운 먹거리, 젊은 층을 겨냥한 뷰티 제품, 일상에서 소화하는 여성 의류 총 다섯 가지 스타일을 실습할 수 있습니다. 책에서 제공하는 디자인 스타일은 이미지, 일러스트, 내용, 자격 증명 등을 실제 여러분이 다루는 상품 내용으로 변경한다면 상업적으로 활용해도 좋습니다. 하지만 학습 후 각자의 쇼핑몰에 맞게 발전시켜서 ‘나만의 스타일’을 찾아서 활용하길 권장합니다.

 저자 제공 유튜브 동영상 강의(순차적으로 업데이트 예정)
https://bit.ly/detail_design

임화연
㈜디자인아트플러스 대표이며, 동양미래대학교 겸임 교수이다. SKT 11번가와 네이버에서 쇼핑몰 디자인과 마케팅 관련 강의를 진행하면서 고객과 소통하는 상품 상세 페이지 제작 노하우를 알려 주고 있다. 주요 저서로는 《쇼핑몰 디자인 제작 북》, 《실전 쇼핑몰 포토샵 북》, 《맛있는 디자인 드림위버 CC》, 《맛있는 디자인 포토샵 CS6》 등이 있다.

김소영
㈜디자인아트플러스에서 기획/PM 일을 하고 있으며, 끊임없는 자기 개발과 노력으로 세상을 향한 새로운 도전을 준비 중이다.