개발자 웹 디자인에 뛰어들다(Programming Insight)

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 성능 바로잡기

브라이언 P. 호건 저자 브라이언 P. 호건은 1995년부터 웹사이트를 개발하는 프리랜서와 컨설턴트로 활동하였다. 온라인 HTML5 에디터인 Rendera를 개발하였으며, 이후로도 꾸준히 루비(Ruby), jQuery, HTML5, CSS3을 이용한 웹 애플리케이션을 개발 중이다. 『HTML5 & CSS3』(인사이트)의 저자이기도 하다.