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 눈에 띄는 이벤트 아?