목차 일부
Story 01 후회 없는 쇼핑몰 솔루션 선택하기
Shopping Mall Sense 01. 쇼핑몰 솔루션은 무엇이고, 왜 필요한가요? ... 26
쇼핑몰 솔루션이란? ... 26
쇼핑몰 솔루션의 장점 및 구성 ... 27
Shopping Mall Sense 02. 쇼핑몰 솔루션의 종류 살펴보기 ... 29
쇼핑몰...
더보기
목차 전체
Story 01 후회 없는 쇼핑몰 솔루션 선택하기
Shopping Mall Sense 01. 쇼핑몰 솔루션은 무엇이고, 왜 필요한가요? ... 26
쇼핑몰 솔루션이란? ... 26
쇼핑몰 솔루션의 장점 및 구성 ... 27
Shopping Mall Sense 02. 쇼핑몰 솔루션의 종류 살펴보기 ... 29
쇼핑몰 솔루션, 빌려 쓸까? 사서 쓸까? ... 29
임대형 솔루션과 독립형 솔루션의 꼼꼼 비교 ... 30
[Design Master] 쇼핑몰 솔루션, 이 정도쯤이야~ 원래 알고 있지! ... 33
Shopping Mall Sense 03. 쇼핑몰 솔루션 회사 현황 살펴보기 ... 34
쇼핑몰 솔루션 임대(EC hosting) 서비스 ... 34
메이크삽(http:／／makeshop.co.kr) ... 35
cafe24(http:／／echosting.cafe24.com) ... 36
후이즈몰(http:／／www.whoismall.com) ... 37
[Design Master] 고도몰(http:／／www.godo.co.kr) ... 38
Shopping Mall Sense 04. 3대 임대형 쇼핑몰 솔루션의 디자인 기능 비교하기 ... 39
국내 3대 임대형 쇼핑몰 솔루션의 주요 서비스 비교 ... 39
[Design Master] 임대형 쇼핑몰 솔루션을 잘 선택하는 방법 ... 40
쇼핑몰 솔루션의 디자인 원리와 변경 과정 ... 41
쇼핑몰 신청부터 제작까지의 단계 ... 43
메이크샵의 디자인 확장성 ... 44
cafe24의 디자인 확장성 ... 44
후이즈몰의 디자인 확장성 ... 45
이미지 파일 때문에 추가로 유료 호스팅 서비스를 신청해야 한다? ... 45
[Design Master] 이미지 호스팅 관련 용어 ... 46
Story 02 쇼핑몰 구축의 첫걸음, 디자인 감 잡기
Shopping Mall Sense 05. 운영자가 갖춰야 할 10가지 디자인 마인드 ... 50
1. 운영자가 아닌 고객의 입장에서 디자인을 점검하라 ... 50
2. 쇼핑몰은 개인 홈페이지가 아니라 영업장이다 ... 50
3. 효율적인 내비게이션의 중요성을 인식하라 ... 51
4. 예쁜 쇼핑몰보다는 편리한 쇼핑몰이 우선이다 ... 51
5. 경쟁 쇼핑몰의 디자인을 모방하는 것은 피하라 ... 51
[Design Master] 상품 설명도 콘텐츠다! ... 51
6. 쇼핑몰 디자인의 통일성을 중시하라 ... 52
7. 나무만 보지 말고 숲을 보라 ... 52
8. 가공을 거쳐 자신만의 이미지로 만들어라 ... 52
[Design Master] 서브 화면(서브 페이지) ... 52
9. 과다한 색상, 이미지, 폰트 사용을 자제하라 ... 53
10. 최고보다는 최선의 디자인을 선택하라 ... 53
[Design Master] 비전문가도 수정이 쉬운 XML 연동 플래시 ... 53
Shopping Mall Sense 06. 디자인 감각을 키우는 3가지 방법 ... 54
1. 많이 본다 ... 54
2. 많이 수집한다 ... 57
3. 많이 응용해 본다 ... 57
Shopping Mall Sense 07. 최신 쇼핑몰 디자인 트렌드 5가지 ... 58
1. 사이트의 전체적인 통일감과 밸런스를 중시한다 ... 58
2. 레이아웃이 다양화되고 있다 ... 59
[Design Master] 레이아웃이란? ... 59
3. 메인 이미지의 비중이 줄어들고 있다 ... 60
4. 플래시 상품 배너가 일반화되었다 ... 60
5. 디자인에 사용하는 이미지도 유행이 있다 ... 61
Shopping Mall Sense 08. 기획 없는 디자인은 사공 없는 배, 기획 포인트 11가지 ... 62
1. 인트로 화면 넣을까 말까? ... 62
2. 메인 이미지를 넣을까 말까? ... 63
3. 메인 페이지에 상품 진열은 몇 개 정도가 적합할까? ... 63
4. 상품 분류는 몇 단계가 적당할까? ... 64
5. 쇼핑몰에서 플래시는 어느 정도 사용해야 할까? ... 64
6. 상품 목록 페이지의 상품 노출은 몇 칸, 몇 줄이 적당할까? ... 65
7. 상품 사진 규격은 정사각형이 좋을까, 직사각형이 좋을까? ... 65
8. 상품 사진에는 배경이 있는 것이 좋을까, 없는 게 좋을까? ... 66
9. 상품 확대 보기는 만드는 게 좋을까, 안 만드는 게 좋을까? ... 66
10. 내용이 긴 경우 스크롤과 페이지 링크 중에서 어떤 것이 더 좋을까? ... 67
11. 디자인 템플릿으로 쇼핑몰을 만들어도 될까? ... 67
[Design Master] 쇼핑몰 디자인 작업의 다양한 방법 ... 68
Shopping Mall Sense 09. 고객을 사로잡는 메인 페이지 디자인 노하우 4가지 ... 69
1. 메인 페이지의 타이틀 이미지, 상품 사진의 매력을 부각하기 ... 69
2. 쇼핑몰의 특징이나 장점을 잘 부각할 수 있는 마케팅 전략 세우기 ... 69
3. 주요 고객의 성향에 맞춘 디자인과 메뉴 구성 ... 70
4. 자동 노출 상품과 배너의 적절한 조화 ... 70
Shopping Mall Sense 10. 매출을 올려주는 상세 페이지 디자인 노하우 8가지 ... 71
1. 상품 설명은 텍스트와 이미지를 적절히 조합하여 알기 쉽게 한다 ... 71
2. 사진 자료를 풍부하게 제공한다 ... 72
3. 상품의 사양은 일목요연하게 표로 정리한다 ... 72
4. 가독성을 높이기 위한 디자인 편집이 매우 중요하다 ... 72
5. 상세 설명 페이지에는 정지된 사진을 사용하는 것이 좋다 ... 73
6. 상세 설명도 웹 디자인이라는 점을 명심한다 ... 73
7. 구매자의 상품 평가를 노출시킨다 ... 73
8. 추천 상품이나 관련 상품을 상세 설명 페이지에 노출한다 ... 73
Shopping Mall Sense 11. 업종별 베스트 디자인 쇼핑몰 리뷰 ... 74
선물용품／디자인 소품 쇼핑몰-텐바이텐 ... 74
인테리어／가구／소품 쇼핑몰-봄봄하우스 ... 76
여성 의류 쇼핑몰-윰 ... 78
패션 잡화 쇼핑몰-홍대언니 ... 80
스포츠／건강／웰빙／레저 쇼핑몰-트래블 메이트 ... 82
Story 03 쇼핑몰 디자인 DIY(기초편)
Shopping Mall Sense 12. 쇼핑몰 디자인에 필요한 프로그램 ... 86
최강의 2D 그래픽 툴 포토샵 ... 86
웹 디자인에서 주로 사용하는 그래픽 파일 형식 ... 88
HTML 문서 제작 프로그램 드림위버 ... 90
[Design Master] 코딩과 코더 ... 90
메모장과 워드패드의 활용 ... 90
Shopping Mall Sense 13. 쇼핑몰 디자인을 위한 포토샵의 기본 기능 익히기 ... 91
작업 화면을 자신에게 최적화하기 ... 91
[Design Master] Resolution과 Color Mode ... 92
포토샵의 화면 구성 살펴보기 ... 93
포토샵의 화면 구성을 내 맘대로 바꿔 쓰기 ... 94
포토샵의 중요한 기능이 모두 담긴 툴 박스 살펴보기 ... 96
그래픽 작업 시 세부 옵션을 조절하는 팔레트 살펴보기 ... 98
이미지 불러오기 ... 101
[Design Master] 어도브 브릿지의 다양한 뷰 타입 ... 102
이미지와 캔버스 사이즈 조절하기 ... 103
이미지 저장하기 ... 106
[Design Master] 파일 형식에 따른 저장 옵션 ... 106
[Design Master] Save for Web 저장 옵션 ... 107
이미지 분할하여 저장하기 ... 108
[Design Master] 이미지에 따라 달라지는 최적의 저장 형식 ... 112
이미지 닫기 ... 113
포토샵의 필수 단축키 ... 113
[Design Master] 웹 이미지 캡처하기 ... 114
Shopping Mall Sense 14. 사진 보정의 기본, 이미지에서 원하는 부분만 깔끔하게 추출하기 ... 115
단순 영역 선택하기 ... 115
선택 툴의 옵션 바 살펴보기 ... 117
[Design Master] 선택 영역에 Feather 효과를 적용하는 또 다른 방법 ... 119
선택 영역의 해제와 이동 ... 121
불규칙한 영역 선택하기 ... 122
가장자리가 복잡하고 뚜렷한 영역 선택하기 ... 123
[Design Master] 펜 툴처럼 패스 개념을 갖고 있는 셰이프 툴 ... 124
가장자리가 복잡한 영역과 불분명한 영역 선택하기(퀵마스크) ... 125
머리카락을 자연스럽게 추출하기 ... 129
Shopping Mall Sense 15. 짧은 이미지를 긴 이미지로 감쪽같이 보정하기 ... 131
Shopping Mall Sense 16. 상품의 구도를 바꿔서 고급스럽게 표현하기 ... 134
상품 이미지를 자연스럽게 기울이기 ... 134
상품 이미지의 수평과 수직 정확하게 맞추기 ... 136
Shopping Mall Sense 17. 이미지의 밝기 보정 노하우 ... 137
밝기 감소 ... 137
맞기 증대 ... 138
이미지 일부분의 밝기 보정 ... 139
기타 간단한 밝기 조절 메뉴 ... 140
Shopping Mall Sense 18. 이미지의 색상 보정 노하우 ... 142
흰색 배경이 푸르게 나온 상품 사진의 보정 ... 142
이미지 보정에 유용한 보정 레이어 ... 144
흐릿한 색감의 이미지에서 채도를 높이고 싶을 때 ... 145
[Design Master] Hue／Saturation의 세 가지 슬라이더 살펴보기 ... 146
사진 분위기에 맞는 색상 톤으로 변경하기 ... 147
[Design Master] 다양한 색상 톤을 비교하며 설정할 수 있는 Variations 살펴보기 ... 148
Shopping Mall Sense 19. 이미지의 선명도 보정 노하우 ... 149
Sharpen, Sharpen more, Unsharp Mask 기능 ... 149
툴 박스의 사픈 툴 ... 150
[Design Master] 툴 박스의 블러 툴, 스머지 툴 ... 150
Shopping Mall Sense 20. 상품의 잡티와 원하지 않는 부분 제거하기 ... 151
툴 박스의 도장 툴 ... 151
툴 박스의 힐링 브러시 툴 ... 152
툴 박스의 스폿 힐링 브러시 툴 ... 152
툴 박스의 패치 툴 ... 153
Shopping Mall Sense 21. 사진에 감성과 가치 더하기 ... 154
분위기 있는 흑백 사진 만들기 ... 154
듀오톤 이미지 만들기 ... 155
흑백 사진에 컬러 포인트를 만들어 시선 사로잡기 ... 156
로모 사진 효과 내기 ... 157
반사 이미지로 고급스러움 더해주기 ... 160
Shopping Mall Sense 22. HTML의 개념과 원리 이해하기 ... 166
HTML이란? ... 166
HTML 제작 프로그램 ... 166
HTML의 기본 구조 ... 168
메모장, 드림위버에서 HTML 확인하기 ... 168
[Design Master] 자바스크립트(Java Script) ... 170
Shopping Mall Sense 23. HTML의 기본 태그 배우기 ... 171
폰트 태그 배우기 ... 171
[Design Master] 글자에 쓰고 싶은 색상의 코드를 어떻게 알 수 있나요? ... 172
이미지 태그 배우기 ... 173
하이퍼링크 태그 배우기 1 - 이미지에 링크 설정하기 ... 174
[Design Master] 이미지 맵이란? ... 175
하이퍼링크 태그 배우기 2 - 텍스트에 링크 설정하기 ... 176
표 만들기 태그 배우기 1 - 이용 안내 페이지 만들기 ... 177
표 만들기 태그 배우기 2 - 상품 설명 페이지 만들기 ... 180
[Design Master] 글씨, 이미지, 테이블 등의 위치를 정렬하는 태그 ... 182
Shopping Mall Sense 24. 디자인 작업에 자주 사용하는 포토샵의 6가지 기초 핵심 기능 ... 183
1. 작업 화면 마음대로 주무르기 ... 183
2. 레이어 다중 선택과 링크 ... 184
3. 선택 영역을 원하는 색상으로 간편하게 채우기 ... 184
4. 패스 자유롭게 그리기 ... 185
5. 글자 입력 자유롭게 하기 ... 187
6. 이미지 경로의 설정 ... 188
[Design Master] 디자인 구축 작업 순서 ... 189
Story 04 메이크샵으로 구축하는 편안하고 자연스러운 스타일의 쇼핑몰
Shopping Mall Sense 25. [메이크샵] 스타일 분석과 디자인 기획하기 ... 192
스타일 분석하기 ... 192
디자인 기획하기 ... 194
Shopping Mall Sense 26. [메이크샵] 메인 페이지의 레이아웃 디자인하기 ... 197
[Design Master] 가이드라인의 색상 바꾸기 ... 198
Shopping Mall Sense 27. [메이크샵] 메인 페이지의 상단 디자인하기 ... 200
메인 페이지의 상단 디자인 1 - 꽃과 하늘과 나무 디자인 ... 200
[Design Master] 선택 영역을 원하는 픽셀만큼 정확하게 이동하는 두 가지 방법 ... 201
메인 페이지의 상단 디자인 2 - 리본 바 디자인 ... 205
Shopping Mall Sense 28. [메이크샵] 쇼핑몰의 얼굴, 로고 만들기 ... 216
[Design Master] 레이어 스타일의 제거와 복수 적용 ... 217
[Design Master] 알파인의 크기를 각각 조절하여 디자인하기 ... 218
Shopping Mall Sense 29. [메이크샵] 메인 메뉴와 상품 검색 창 만들기 ... 220
메인 메뉴 만들기 ... 220
상품 검색 창 만들기 ... 223
Shopping Mall Sense 30. [메이크샵] 상품 카테고리 메뉴 디자인하기 ... 225
Shopping Mall Sense 31. [메이크샵] 고객센터 배너 만들기 ... 230
[Design Master] 벡터 파일을 불러올 때 'Open'과 'Place'의 차이점 ... 235
Shopping Mall Sense 32. [메이크샵] 중앙 메인 배너를 위한 4개의 이미지 만들기 ... 241
[Design Master] 'JPEG Options' 설정 ... 247
Shopping Mall Sense 33. [메이크샵] 메인 페이지의 중앙 디자인 완성하기 ... 249
메인 배너에 흐르는 텍스트 만들기 ... 249
메인 배너의 태그 클라우드 만들기 ... 250
공지 사항 게시판 텍스트 메뉴 만들기 ... 252
쇼핑몰 내의 다른 페이지로 이동하는 배너 만들기 ... 253
신상품／인기 상품 타이틀 배너 만들기 ... 257
Shopping Mall Sense 34. [메이크샵] 메인 페이지의 하단 디자인하기 ... 259
Shopping Mall Sense 35. [메이크샵] 상품의 설명이 담긴 상세 페이지 디자인하기 ... 264
상품 설명 이미지 꾸미기 ... 265
배송 정보 안내 글 꾸미기 ... 270
Shopping Mall Sense 36. [메이크샵] 메인 페이지 이미지를 분할하고 저장하기 ... 274
Shopping Mall Sense 37. [메이크샵] 상품 설명 페이지 이미지를 분할하고 저장하기 ... 278
[Design Master] 메이크샵의 파일 업로드용량 제한 ... 279
Shopping Mall Sense 38. [메이크샵] 홈인테리어용품 쇼핑몰 HTML 코딩하기 1 ... 281
상단 영역의 메인 메뉴 코딩하기 ... 281
이미지 맵을 이용한 링크 설정과 경로 코딩하기 ... 288
[Design Master] 각 페이지의 링크 주소는 어떻게 알 수 있나요? ... 290
[Design Master] 이미지의 경로 확인은 이렇게 하세요! ... 292
Shopping Mall Sense 39. [메이크샵] 홈인테리어용품 쇼핑몰 HTML 코딩하기 2 ... 294
로그인과 로그아웃 영역 코딩하기 ... 294
메인 페이지의 왼쪽 메뉴 코딩하기 ... 296
메인 페이지의 중앙 코딩하기 ... 298
메인 페이지의 하단 코딩하기 ... 305
Shopping Mall Sense 40. [메이크샵] 관리자에서 디자인 적용하고, 상품 등록하기 ... 307
쇼핑몰 화면 설정하기 ... 307
이미지 업로드하기 ... 309
상품 분류 생성하기 ... 311
상품 분류에 맞게 상품 등록하기 ... 312
메인 페이지의 플래시 효과 설정하기 ... 315
태그 클라우드 설정하기 ... 317
플래시 메인 배너 설정하기 ... 318
[Design Master] 한 번에 한 개의 이미지 등록하기 ... 318
Shopping Mall Sense 41. [메이크샵] 메인 페이지의 각 영역별 HTML 등록하기 ... 319
Story 05 cafe24로 구축하는 트렌디한 스타일의 쇼핑몰
Shopping Mall Sense 42. [cafe24] 스타일 분석과 디자인 기획하기 ... 324
스타일 분석하기 ... 324
디자인 기획하기 ... 326
Shopping Mall Sense 43. [cafe24] 메인 페이지 디자인 기본 세팅하기 ... 328
무료 디자인 신청과 세팅하기 ... 328
[Design Master] Cafe24에 회원 가입하기 ... 328
메인 페이지 간단하게 수정하기 ... 330
[Design Master] 모듈과 공통 모듈 ... 331
폰트 다운로드하고 설치하기 ... 337
Shopping Mall Sense 44. [cafe24] 메인 페이지의 상단 디자인 1-로고, 고객센터, 상품 메뉴 ... 338
로고 만들기 ... 338
[Design Master] 브러시의 표시 형식 선택하기 ... 340
고객센터 간단하게 디자인하기 ... 341
상품 메뉴 디자인하기 ... 343
[Design Master] 글자의 간격을 미세하게 조절하기 ... 344
Shopping Mall Sense 45. [cafe24] 메인 페이지 상단 디자인 2-타이틀 이미지 ... 345
타이틀 이미지 만들기 ... 345
[Design Master] 선택 영역을 원하는 위치에 정확히 지정하기 ... 351
타이틀 이미지 디자인을 GIF 애니메이션으로 만들기 ... 353
Shopping Mall Sense 46. [cafe24] 신상품／인기 상품 타이틀 이미지 디자인하기 ... 358
Shopping Mall Sense 47. [cafe24] 메인 페이지의 하단 디자인하기 ... 360
Shopping Mall Sense 48. [cafe24] 상품 설명 페이지 디자인하기 ... 366
Shopping Mall Sense 49. [cafe24] 여성 의류 쇼핑몰 HTML 코딩하기 ... 377
기본 이미지의 분할과 저장하기 ... 377
[Design Master] 롤오버 버튼의 이미지 저장하기 ... 380
Shopping Mall Sense 50. [cafe24] 여성 의류 쇼핑몰 HTML 제작하기 ... 383
메인 페이지의 상단 영역 코딩하기 ... 383
[Design Master] 페이지의 가장 위쪽으로 점프하는 'Top' 기능 ... 384
로그인 관련 모듈 코딩하기 ... 393
메인 페이지의 하단 영역 코딩하기 ... 396
Shopping Mall Sense 51. [cafe24] 관리자에서 디자인 적용하고, 상품 등록하기 ... 399
이미지 업로드하기 ... 399
상품 등록하기 ... 401
자바스크립트 수정하기 ... 404
메인 화면의 소스 수정하기 ... 405
상단과 하단 소스 수정하기 ... 405
화면 상단／신상품／추천 상품 타이틀 이미지 등록하기 ... 407
Story 06 후이즈몰로 구축하는 깔끔하고 모던한 스타일의 쇼핑몰
Shopping Mall Sense 52. [후이즈몰] 스타일 분석과 디자인 기획하기 ... 412
스타일 분석하기 ... 412
디자인 기획하기 ... 414
Shopping Mall Sense 53. [후이즈몰] 메인 페이지 상단 디자인하기 1-로고, 상품 분류, 톱 메뉴 ... 417
텍스트 로고 만들기 ... 417
상품 분류와 톱 메뉴 만들기 ... 418
Shopping Mall Sense 54. [후이즈몰] 메인 페이지 상단 디자인하기 2-메인 이미지 꾸미기 ... 421
메인 이미지 디자인하기 ... 421
[Design Master] Drop Shadow의 Use Global Light ... 425
메인 이미지에 결재 관련 정보 만들기 ... 431
Shopping Mall Sense 55. [후이즈몰] 메인 페이지의 좌측 디자인하기 ... 435
판매 상품의 브랜드 표시 디자인하기 ... 435
판매 상품의 조건 검색 메뉴 디자인하기 ... 439
Shopping Mall Sense 56. [후이즈몰] 메인 페이지의 중앙 디자인하기 ... 444
메인 페이지의 중앙에 신상품 표시하기 ... 444
메인 페이지의 중앙에 베스트셀러 상품 표시하기 ... 448
Shopping Mall Sense 57. [후이즈몰] 메인 페이지 하단 디자인하기 ... 453
Shopping Mall Sense 58. [후이즈몰] 상품 설명 페이지 디자인하기 ... 457
Shopping Mall Sense 59. [후이즈몰] 노트북용품 쇼핑몰의 이미지 분할과 저장하기 ... 462
메인 페이지의 이미지 분할과 저장하기 ... 462
상품 설명 페이지의 이미지 분할과 저장하기 ... 465
Shopping Mall Sense 60. [후이즈몰] 노트북용품 쇼핑몰의 HTML 코딩하기 ... 467
상단 영역 코딩하기 ... 467
[Design Master] 후이즈몰의 링크 주소 정보 ... 472
좌측 영역 코딩하기 ... 477
중앙 영역 코딩하기 ... 479
하단 영역 코딩하기 ... 484
Shopping Mall Sense 61. [후이즈몰] 관리자에서 디자인 적용하고, 상품 등록하기 ... 485
이미지 업로드하기 ... 485
상품 분류 생성과 상품 등록하기 ... 487
[Design Master] 대분류, 중분류, 가상 분류 등록 ... 488
Shopping Mall Sense 62. [후이즈몰] 쇼핑몰의 영역별 소스 수정하기 ... 493
상점 화면 구성하기 ... 493
레이아웃 소스 수정하기 ... 494
메인 화면의 영역별 소스 수정하기 ... 500
Story 07 구축보다 더 중요한 쇼핑몰 유지 보수 DIY
Shopping Mall Sense 63. 쇼핑몰 메인 페이지의 메뉴 수정하기 ... 506
간단하게 메뉴 수정하기 ... 506
[Design Master] 쇼핑몰에서 이미지를 수정하는 3가지 방법 ... 507
수정한 파일 대체하기 ... 509
Shopping Mall Sense 64. 이미지 맵 영역과 링크 수정하기 ... 511
새로운 메뉴 항목 추가하기 ... 511
이미지 맵을 이용하여 링크 설정 수정하기 ... 514
Shopping Mall Sense 65. 눈에 띄는 판촉 아이콘 만들기 ... 516
눈에 띄는 이벤트 아?
더보기 닫기
Export to Refworks
캠퍼스간대출
소재불명도서
자료배달서비스
인쇄
