추가 적립 안내

개발자들은 웹사이트가 어떤 언어로 작성되는지, 브라우저가 어떻게 렌더링을 하는지 등을 잘 이해하지만, 색상이나 글꼴 등에는 그리 신경을 쓰지 않는다.『개발자 웹 디자인에 뛰어들다』는 음식 레시피 웹사이트를 리뉴얼하면서, 디자인 시 고려해야 할 기본 사항들을 하나씩 짚어가며 설명한다. 웹사이트에 사용할 색상을 어떤 식으로 선택할지, 글꼴과 줄간격을 어떻게 지정해야 읽기 편한지 등을 설명하며, 이를 구현할 때는 어떤 프로그램(포토샵, 일러스트레이터 등)을 어떤 식으로 사용하는지 등도 알려준다. 또한 실제 시각 장애인들이 사용성과 접근성을 고려하지 않은 사이트를 어떻게 보게 되는지 사진으로 보여준다.

HTML과 CSS의 문법을 안다고 해서 웹 디자인을 잘 할 수 있을까?

개발자들은 웹사이트가 어떤 언어로 작성되는지, 브라우저가 어떻게 렌더링을 하는지 등을 잘 이해하지만, 색상이나 글꼴 등에는 그리 신경을 쓰지 않는다.
이 책은 음식 레시피 웹사이트를 리뉴얼하면서, 디자인 시 고려해야 할 기본 사항들을 하나씩 짚어가며 설명한다. 웹사이트에 사용할 색상을 어떤 식으로 선택할지, 글꼴과 줄간격을 어떻게 지정해야 읽기 편한지 등을 설명하며, 이를 구현할 때는 어떤 프로그램(포토샵, 일러스트레이터 등)을 어떤 식으로 사용하는지 등도 알려준다. 또한 실제 시각 장애인들이 사용성과 접근성을 고려하지 않은 사이트를 어떻게 보게 되는지 사진으로 보여준다.
웹 디자인에 뛰어들지는 않았더라도, 웹 디자이너와 좀더 깊이 있게 대화하고 싶다면 이 책이 꼭 필요할 것이다.

이 책이 다루는 내용
- 색상 설계(color scheme), 글꼴
- 이미지, 디자인 목업
- 디자인을 HTML과 CSS로 구현하기
- 웹표준과 접근성
- 검색 엔진 최적화
- 모바일 기기용 디자인
- 성능 개선

이 책에 수록된 모든 예제 코드는 출판사 스프링노트인 http://insightbook.springnote.com/pages/10882588에서 다운받을 수 있습니다.

옮긴이의 글

1장 들어가며
__1.1 시작하기 전에
__1.2 디자인 프로세스 따라가보기
____요구사항 수집하기
____포토샵 작업
____코딩
____준비 완료
____항상 쉬운 것만은 아니다
__1.3 YourFoodbox.com
__1.4 시작해볼까?
__1.5 감사의 말

1부 디자인의 기본

2장 사이트 리디자인의 기본: 푸드박스 재설계하기
__2.1 기존 사이트
__2.2 요구사항 수집하기
__2.3 목적을 분명히 하자
__2.4 다음에 할일
__2.5 아이디어 스케치하기
____레이아웃 규칙
____세 개의 스케치
__2.6 스케치 선택
__2.7 정리
3장 색 선택하기
__3.1 색의 기초
____색상, 채도, 명도
____가산 혼합과 감산 혼합
__3.2 색 컨텍스트
__3.3 감정을 일깨우는 색상
____따뜻한 색
____빨강
____차가운 색
____자연색
____색과 사용자
__3.4 색상 계획
____단색 색상 계획
____인접 색상 계획
____보색 색상 계획
____인접 보색 색상 계획
__3.5 웹 안전 색 팔레트
__3.6 색상 계획 만들기
____기술적인 방법을 사용해 색을 선택하기
____자연적인 방법을 사용해 색상 선택하기
__3.7 색상 계획 선택하기
____전경색과 배경색
____링크
__3.8 요약
4장 글꼴과 타이포그래피
__4.1 글꼴의 구조
__4.2 글꼴 유형
____세리프 글꼴
____산세리프 글꼴
____고정폭 또는 단일폭(monospaced) 글꼴
__4.3 글꼴 사용시 제약사항
____웹 안전 글꼴
____이미지 대체
____글꼴 스택에서 대체 글꼴 지정하기
__4.4 글꼴 선택하기
____콘텐츠 글꼴
____표제 글꼴
__4.5 기준선 그리드 사용하기
____행 간격
____측정 단위
____Foodbox에 적용할 글꼴 선택하기
__4.6 요약

2부 이미지 추가하기

5장 Foodbox 로고 디자인하기
__5.1 작업 폴더 설정하기
__5.2 Foodbox 로고
__5.3 나만의 로고를 원한다면?
__5.4 요약
6장 목업 디자인: 페이지 구조
__6.1 레이어 살짝 살펴보기
__6.2 기본 구조
____화면 크기
____고정폭 레이아웃
____그리드 설정하기
____가이드로 영역 지정하기
____상자 그리기
__6.3 로고 배치
__6.4 레이어 그룹으로 화면 조직화하기
__6.5 로고에 반영(Ref lection) 효과 추가하기
__6.6 푸터
__6.7 요약
7장 목업 디자인: 콘텐츠
__7.1 검색창 만들기
__7.2 레시피 태그 클라우드
__7.3 점점 늘어나는 작업 범위
____재료 태그 클라우드
__7.4 맛있어 보이는 마스터헤드 목업
__7.5 메인 콘텐츠
____본문 텍스트
__7.6 브라우저 테스트
__7.7 요약
8장 목업 다듬기
__8.1 검색 아이콘 만들기
____아이콘의 배경 만들기
____돋보기 만들기
____검색 아이콘 배치하기
__8.2 회원 가입과 로그인 버튼 만들기
____텍스트 추가하기
____회원 가입 버튼 추가하기
__8.3 콘텐츠가 도착했다!
____더미 텍스트 대체하기
____최근 추가된 레시피 영역 추가하기
__8.4 요약

3부 사이트 만들기

9장 HTML로 홈페이지 만들기
__9.1 웹 표준으로 작업하기
__9.2 홈페이지 구조
__9.3 시맨틱 마크업
__9.4 홈페이지 구조
____Doctype
____HTML 태그
____속성
____Head와 Body
____닫는 태그가 없는 태그
____페이지 타이틀
__9.5 헤더
__9.6 사이드바
____검색 폼
____레시피 태그 클라우드
____재료 태그 클라우드
__9.7 메인 콘텐츠
____파스타 이미지
____텍스트 콘텐츠
____회원 가입과 로그인 버튼
____최근 레시피 섹션
__9.8 푸터
__9.9 마크업 유효성 검사
____웹 페이지 개발을 위한 파이어폭스 설정하기
____웹 개발자 툴바
____문서의 유효성 검증하기
__9.10 HTML 5
__9.11 요약
10장 목업에서 이미지 만들기
__10.1 그래픽 최적화
____작은 이미지는 최종 사용자가 좀더 사용하기 쉽다
____작은 이미지는 대역폭에 주는 장점도 있다
____작은 이미지는 물리적인 공간도 덜 차지한다
____다운로드 시간
__10.2 다양한 그래픽 포맷 다루기
____GIF
____PNG
____JPEG
__10.3 문서 잘라내기
____목업에 대한 재확인
__10.4 슬라이스 만들기
____나머지 이미지 잘라내기
__10.5 투명한 PNG로 배너 만들기
____레이어 감추기
____슬라이스 저장하기
__10.6 나머지 요소 내보내기
__10.7 요약
11장 CSS로 레이아웃 설정하기
__11.1 브라우저는 무시무시하다
__11.2 CSS의 기초
____선택자
____선언부 : 속성과 값
____겹치는 부분
__11.3 브라우저에서는 CSS를 어떻게 사용하나
____인라인 스타일
____Style 태그
____외부 CSS 파일
__11.4 새로운 스타일시트를 만들고 링크 걸기
__11.5 기본 구조, 헤더, 푸터 정의하기
____브라우저 기본값
____박스 모델
____콘텐츠 가운데 정렬
____헤더와 푸터 지정하기
__11.6 하나의 컬럼을 두 개로 나누기
____문서 플로우
____띄우기
____배경과 띄우기의 문제
__11.7 콘텐츠에 마진 적용하기
____사이드바 요소 빠르게 포맷 지정하기
__11.8 메인 콘텐츠
____메인 텍스트
____회원 가입 영역
____최근 레시피
__11.9 푸터 다시 보기
__11.10 요약
12장 커버업 기법으로 타이틀 영역을 대체하기
__12.1 커버업 기법 설명
__12.2 대체할 HTML 준비하기
__12.3 텍스트 덮기
__12.4 다른 타이틀 대체하기
__12.5 링크 대체하기
____투명도
__12.6 대체 기법의 부정적인 면
__12.7 요약
13장 스타일 적용하기
__13.1 색상과 글꼴 설정하기
____스타일 가이드의 중요성
____가상 클래스
__13.2 태그 클라우드
__13.3 검색 양식
__13.4 푸터
__13.5 미진한 부분 정리하기
____이미지 경계선 제거하기
____배너 색상 확장하기
__13.6 요약
14장 인쇄에 적합한 페이지 만들기
__14.1 인쇄 준비하기
__14.2 인쇄 스타일시트 연결하기
__14.3 필요하지 않은 요소 제거하기
____noprint 클래스
__14.4 마진, 넓이, 글꼴 설정하기
____페이지 마진
____글꼴 집합(Font Family) 선택하기
____구분자 추가하기
__14.5 링크 고정시키기
__14.6 놀란 사용자 다루기
__14.7 요약

4부 오픈 준비하기

__15장 인터넷 익스플로러와 다른 브라우저 다루기
__15.1 어떤 것을 지원할지 결정하기
____브라우저 지원
____기능 지원
__15.2 브라우저 통계
__15.3 인터넷 익스플로러: 무시할 수 없는 악
____약간의 균형감
__15.4 인터넷 익스플로러 7
____IE에서 Quirks 모드
__15.5 인터넷 익스플로러 6
____깨진 요소 고치기
____컬럼 고정하기
____투명도 수정하기
____헤더 이미지 아래 여백 수정하기
__15.6 인터넷 익스플로러 8
____접근 방식의 문제점
__15.7 다른 브라우저
__15.8 요약
16장 접근성과 사용성
__16.1 접근성은 당신에게 어떤 의미인가?
__16.2 기본적인 접근성 이슈
____시각 장애가 있는 사람
____색맹 사용자
____시력 장애가 있는 사람들
____청각 장애가 있는 사람들
____근육 장애와 마우스를 사용하지 않는 경우
__16.3 모두를 위해!
____내비게이션
____오류 처리
____크로스 브라우저 테스트
__16.4 심각한 비즈니스 문제
__16.5 사이트의 접근성 향상시키기
____건너뛰기 링크 추가하기
____스크린 리더와 display:none
____네거티브 포지셔닝으로 건너뛰기 링크 숨기기
____폼에 라벨 추가하기
__16.6. 탭
____tabindex 피하기
__16.7 접근성 테스트 점검 목록
__16.8 요약
17장 파비콘 만들기
__17.1 간단한 아이콘 만들기
__17.2 파비콘 만들기
__17.3 요약
18장 검색 엔진 최적화
__18.1 콘텐츠가 왕이다
____검색 엔진 속이기
____콘텐츠란 무엇인가?
__18.2 키워드 선택하기
____그들이 당신을 어떻게 찾을지를 생각해보자
____어떤 식으로 찾아지기를 원하는지 결정하자
____경쟁사 스파이
____키워드 추가하기
__18.3 콘텐츠 조화시키기
__18.4 사용자들이 떠날 만큼의 최적화는 피하자!
__18.5 링크
__18.6 모든 것은 상식으로 귀착된다
__18.7 요약
19장 모바일 디바이스를 위한 디자인
__19.1 모바일 사용자
__19.2 (매우) 작은 화면을 생각해보기
__19.3 자바스크립트
__19.4 모바일 콘텐츠 제공하기
____모바일 스타일시트
____유저 에이전트(User Agent) 탐지
____여러 하위 도메인 사용하기
__19.5 무엇을 지원할지 결정하기
____콘텐츠를 복사하지 않고 사이트를 미러링하기
____콘텐츠 변경
____핸들러 작성하기
____개선할 점
__19.6 모바일 사용자를 위한 구조 개선
__19.7 요약
20장 테스트와 성능 향상
__20.1 성능 향상을 위한 전략
__20.2 결정적인 성능 이슈
____속도 테스트
____YSlow
__20.3 성능 바로잡기