책소개

현업에서 활동하고 있는 많은 웹 디자이너들의 현실을 들여다보면 주먹구구식으로 웹사이트를 디자인하고 있는 경우가 많다. 그러다 보니 더 나은 방법, 더 효율적인 방법이 있음에도 오랜 시간을 낭비하면서 비효율적으로 디자인하고 있는 상황이다. 이 책은 웹 디자이너들이 현장에서 부딪치는 문제에 대해 오프라인 강의를 통해 검증받은 야무 저자가 자신의 경험을 바탕으로 한 디자인 테크닉과 노하우를 중심으로 구성함으로써 웹 디자이너들의 작업 환경을 개선하고, 업무의 효율성을 높이기 위해 쓰여졌다.

이 책은 웹사이트 디자인을 위한 단순한 이론적 지식이나, 단순하게 배워 대충 써먹을 수 있는 디자인 기술을 설명하고 있는 책이 아니다. 웹 디자이너가 기본적으로 갖추어야 할 소양은 물론, 현장에서 지향하는 지식과 기술을 바탕으로 플러스 알파가 되는 실전 테크닉을 배울 수 있다. 거기에 그치지 않고 가상의 웹사이트를 프로토타입부터, 실제 디자인을 거쳐 반응형 웹사이트로 변환하는 과정을 실습해 보면서 책에서 다룬 웹사이트 디자인 소양과 테크닉이 어떤 과정에서 어떻게 활용되는지 확인할 수 있다.

저자소개

목차

[1장 웹 디자인을 위한 준비]
포토샵 성능을 향상시키는 컴퓨터 하드웨어 설정
-. 포토샵의 성능을 좌우하는 강력한 CPU 준비하기
-. 이미지를 빠르게 처리하는 메모리 준비하기
-. 부족한 부분을 채워 주는 고속/대용량 저장 드라이브 준비하기
포토샵 성능을 더욱 높여 주는 환경 설정
-. 포토샵 메모리 사용량 최적화하기
-. 스크래치 디스크 설정하기
-. 히스토리/캐시 최적화하기
-. GPU 활성화하여 렌더링 속도 향상하기
안전하게 파일을 저장/복구하는 포토샵 설정
포토샵 성능을 최적화하는 알찬 팁(Tip)
-. 사용하지 않는 프리셋 지우기
-. Layers 패널의 이미지 썸네일 기능 끄기
-. 이미지 프리뷰를 제외하고 저장하기
-. 폰트 미리 보기 기능 끄기
-. 퍼지로 메모리 쾌적하게 관리하기
-. 포토샵에서 복사한 내용은 포토샵에서만 사용하기
mission 01 : 포토샵 성능 최적화 복습하기
효율적인 웹 디자인을 위한 포토샵 작업공간 설정
-. 툴바 오른쪽으로 이동하기
-. Color 패널의 컬러 모드를 RGB에서 HSB로 변경하기
-. 웹 디자인에 필요한 패널 중심으로 작업공간 조정하기
-. Info 패널 설정 값을 웹 디자인에 최적화하기
-. 나만의 작업공간 저장하기
-. 웹 디자인에 적합한 단위로 변경하기
-. 사용자 편의에 따라 가이드 색상 및 그리드 설정하기
효율적인 웹 디자인을 위한 일러스트레이터 작업공간 설정

[2장 이미지가 아닌 웹 타이포그래피]
웹 디자인의 기본은 웹 타이포그래피
-. 보는 것만이 아닌 읽는 것
-. 웹 디자인을 구성하는 95%는 타이포그래피
읽기 쉬운 본문 타이포그래피 디자인
-. 디자인용 스타일 가이드 문서 만들기
-. 본문 텍스트 입력하고 정렬하기
-. Anti?Aliasing 설정하기
읽기 쉬운 하이퍼링크 타이포그래피 디자인
읽기 쉬운 제목 타이포그래피 디자인
mission 02 : 웹 타이포그래피 스타일 가이드 문서 만들기
이미지 텍스트 작업에서 고려할 레티나 디스플레이

[3장 웹 그리드 시스템]
정교한 디자인의 필수 조건, 그리드 시스템
짜임새 있게 웹 디자인을 쌓는 기초 공사, 그리드
-. 가이드라인으로 그리드 그리기
-. 그리드 시스템 용어 알고 넘어가기
웹 사이트 디자인을 위한 그리드 시스템 설계
-. 그리드 시스템 설계를 위한 사용자 정보 분석
-. 960 그리드 시스템 설계하기
-. 960 그리드 시스템을 활용한 웹 디자인 데모 작성하기
단축키를 활용한 그리드 토글
-. 액션을 활용하여 그리드 토글하기
-. 포토샵 스크립트(JSX)를 활용하여 그리드 토글하기
mission 03 : 한글 웹 그리드 시스템 디자인하기

[4장 차이를 줄이는 웹 컬러 매니지먼트]
보는 사람에 따라 천차만별로 바뀌는 색
-. 색을 결정하는 주체는 빛
-. 정확한 색 작업을 위한 주변 환경
-. 모니터의 색 표현 능력을 담고 있는 컬러 프로파일
웹 브라우저마다 컬러가 다르게 보이는 이유
-. 같은 컬러지만 다르게 보이는 Windows와 Mac OS
-. 색 표현 능력에 차이가 나는 웹 브라우저
-. 색 표현 능력에 차이가 나는 모바일 기기(스마트폰 & 태블릿PC)
웹 컬러 작업을 위한 포토샵 설정 및 컬러 스워치 활용
-. 웹 디자인 작업을 위한 포토샵 컬러 설정하기
-. 포토샵 컬러 프루핑
-. 웹 이미지를 최적화하여 저장하기
-. 컬러 스워치 초기화하고 컬러 샘플링하기
mission 04 : 이미지 컬러 샘플링 액션 만들기

[5장 업무 생산성을 높이는 이미지 슬라이싱]
이미지 자르기의 기초, Slice Tool
-. 배경 그룹/레이어 감추고, 슬라이스 설정하기
-. 슬라이스 결과를 웹용 이미지로 저장하기
가이드라인을 활용한 이미지 자르기
-. 가이드라인에서 슬라이스 생성하기
다이싱 기법으로 이미지 자르기
복제 그룹/레이어, 트리밍 이미지 자르기
단축키 한 번으로 이미지가 잘리는 액션 등록
레티나 디스플레이를 고려한 이미지 자르기 액션 등록
-. 스마트 오브젝트를 적극 활용하여 크기가 큰 원본 파일 보존하기
-. 이미지 자르기 액션을 복제하여 레티나 디스플레이용 액션 만들기
플러그인을 활용한 이미지 자르기
-. Cut & Slice Me 플러그인 설치하기
-. Cut & Slice Me 플러그인 활용하기
포토샵 CC의 놀라운 Image Assets 기능
-. [Generate 」 Image Assets] 활성화하기
-. 자동 이미지 슬라이싱의 기본 규칙
-. Image Assets의 다양한 옵션 활용하기

[6장 큰 그림을 그려 보는 빠른 프로토타이핑]
HTML5 기반의 웹 프로토타이핑 도구 - moqups
-. moqups 서비스 가입 및 설정하기
-. moqups 프로젝트 생성 및 관리하기
랜딩 페이지 프로토타이핑 실습
-. 콘텐츠 선정 및 구성하기
-. 모던 웹, 맨투맨 클래스 C 강의 랜딩 페이지 - 프로토타이핑
-. 헤더(Header) 영역 작업하기
-. 비디오(Video) 영역 작업하기
-. 헤드라인(Headline), 소개 문구, CTA 작업하기
-. 강의에서 다루는 내용(Features) 영역 작업하기
-. 강의 후기(Testimonials) 영역 작업하기
-. 저작권 정보(Copyright) 영역 작업하기
-. 프로토타이핑 결과물을 PDF/PNG로 출력하기
멀티 페이지 프로토타이핑 실습 1 ? 홈페이지
-. 프로젝트 생성하고 로고 불러오기
-. 메뉴 작업하기
-. 캘리그라피 프로젝트, 모집 강좌, 배너 영역 작업하기
-. 공지사항, 수강생 작품 영역 작업하기
-. 푸터 영역 작업 및 홈페이지 완료하기
멀티 페이지 프로토타이핑 실습 2 ? About MonoD 페이지
-. 기존 페이지 복사하기
-. 활성 페이지 변경 및 타이틀 변경하기
-. 브레드크럼(Breadcrumb) 내비게이션 그리기
-. 슬로건(Slogan) 및 소개 영역 작업하기
-. 사이드 바 영역 작업 및 마무리하기
멀티 페이지 프로토타이핑 실습 3 ? 업무진행과정 페이지
-. 페이지 복사 후 활성 페이지 변경하기
-. 타이틀/브레드크럼 변경하기
-. 프로세스 소개, 제작의뢰 바로 가기 버튼 작업하기
-. 프로세스 테이블 작업 및 마무리하기
멀티 페이지 프로토타이핑 실습 4 ? 제작의뢰 페이지
-. 페이지 복사 후 활성 페이지 변경하기
-. 타이틀/브레드크럼/버튼 내용 변경하기
-. 의뢰 폼 영역 작업하기
-. 의뢰 요청 버튼 작업 및 마무리하기
프로토타이핑 페이지 인터랙션 설정

[7장 NEXT STEP! 웹 그래픽 디자인]
만들 웹 그래픽 디자인 미리 보기
프로토타이핑을 기반으로 한 웹 그래픽 디자인
-. 프로젝트 Preparing
-. 헤더(Header) 영역 디자인하기
-. 비디오(VIDEO) 영역 디자인하기
-. CTA(Call To Action) 영역 디자인하기
-. 기능(Features) 영역 디자인하기
-. 추천(Testimonials) 영역 디자인하기
-. 푸터(Footer) 영역 디자인하기
-. 활성화 상태(Active State) 디자인하기

[8장 BUILD UP! 반응형 웹 그래픽 디자인]
다양한 모바일 기기를 고려한 중단점 설정
-. 모바일 기기의 뷰포트 집계
-. 중단점 설정하기
반응형 웹 디자인 중단점 1 ? 1000px
반응형 웹 디자인 중단점 2 ? 760px
반응형 웹 디자인 중단점 3 ? 480px
반응형 웹 디자인 중단점 4 ? 320px

[9장 차세대 웹 벡터 그래픽 시대 개막]
벡터 그래픽과 관련된 웹 디자인 역사
-. 벡터 그래픽 포맷 표준화 전쟁
-. HTML5 벡터 그래픽 표준 포맷 ? SVG
-. SVG 벡터 그래픽 포맷의 웹 브라우저 지원율 체크하기
-. 웹 사이트 디자인에 SVG 적용 사례와 미적용 사례
-. SVG 사용에서 고려할 점
SVG를 편집할 수 없는 포토샵, 편집할 수 있는 일러스트레이터
포토샵 Vector Path를 SVG로 내보내는 방법
-. 포토샵에서 작업하고 일러스트레이터에서 저장하기(PSD to SVG)
-. PSD to SVG 스크립트 활용하기
-. Zeick 플러그인 활용하기
Font Awesome 아이콘을 포토샵 폰트로 활용
-. Font Awesome 폰트 파일 다운로드 및 시스템 등록하기

[질문으로 찾는 목차]
Anti?Aliasing 설정 값에 따라 어떻게 다른가요? CPU 정보는 어디서 확인하죠?
Layers 패널에서 마우스 오른쪽 버튼을 눌러도 썸네일 옵션이 안 보여요?
PNG로 저장할 때 PNG-8과 PNG-24 방식에 따라 어떤 차이가 있나요?
가이드라인에서 간격은 어떻게 결정하나요?
가이드라인을 정확하면서도 빠르게 그리는 방법이 있나요?
가이드라인을 좀 더 쉽게 그릴 수는 없을까요?
가이드라인으로 나눈 영역에서 나뉘면 안 되는 영역을 다시 붙일 수 있나요?
감마 처리가 다르다고요? 감마가 뭐죠?
그리드 시스템은 웹 디자인에서만 유용한가요?
단락을 배치할 기준선을 쉽게 그릴 수 없나요?
단락의 공간 설정을 효율적으로 하려면 어떻게 하나요?
동일한 이미지를 여러 개의 확장자로 동시에 자를 수는 없나요?
디지털 이미지는 감마와 관련이 있나요?
레티나 디스플레이에 적합한 이미지 텍스트는 어떻게 저장하나요?
레티나 디스플레이에서 이미지 텍스트 처리는 어떻게 다른가요?
레티나(고해상도) 이미지 저장도 가능할까요?
마스크로 만든 슬라이스는 크기 조정이 불가능한가요?
메모리가 충분하지는 어떻게 확인할 수 있나요?
모니터 밝기 단위인 칸델라는 어떻게 확인하나요?
모니터의 컬러 정보를 직접 계측하여 컬러 프로파일을 만들 수도 있나요?
반사가 적은 모니터가 더 좋은 건가요?
백그라운드 저장/자동 저장/복구 기능으로 성능이 느려지지 않을까요? 
솔리드 스테이트 드라이브(SSD)와 하드 디스크 드라이브(HDD) 중 어떤 것을 사용해야 하나요?
슬라이스가 많아 복잡해 보이는데 필요한 슬라이스만 볼 수는 없을까요?
슬라이스를 그리기가 쉽지 않은데 다른 방법은 없나요?
액션에 설정한 단축키는 어떻게 변경하나요?
운영체제도 감마와 관련이 있나요?
운영체제에 모니터의 정보를 알려 주려면 어떻게 해야 하나요?
워드(Word)나 한글 프로그램처럼 스타일 관리는 안 되나요?
웹 디자인 = sRGB 색역인가요?
웹 사이트의 컬러도 샘플링해서 등록할 수 있나요?
이미지가 원하는 모양으로 잘리지 않으면 어떻게 하나요?
인용문에 사용하는 따옴표는 어떻게 처리하나요?
인터넷 익스플로러는 컬러 매니지먼트를 지원하지 않나요?
자간과 어간은 어디서 세부 조정 할 수 있나요?
자를 이미지의 포맷이나 압축률을 조정할 수 있나요?
주관적인 판단보다 객관적으로 계측하여 수치를 얻을 수는 없나요?
충분한 성능을 내려면 얼마만큼의 메모리를 갖춰야 하나요?
캐시의 역할과 설정 기준은 무엇인가요?
컬러를 빠르게 샘플링한 후 Swatches 등록하는 방법은 없나요?
텍스트를 정렬하는 설정 옵션도 Paragraph 패널에 있나요?
파일을 저장하는 동안 무작정 기다려야 하나요?
포토샵에는 자동 저장/복구 기능이 없나요?
포토샵의 메모리 설정을 최적화하려면 어떻게 해야 하나요?
하이픈 처리가 웹 타이포그래피에서도 가능할까요?
효율적이고, 유연하게 대처할 수 있는 텍스트 입력 방법이 있나요?
히스토리 개수는 최대로 설정해도 될까요?