Do it! 웹 디자인 교과서(Do it! 시리즈)

웹 디자인의 핵심 이론부터 실무까지 한 권으로 끝내자!
근본 있는 디자인을 알려 주는 속 시원한 웹 디자인 개념서!

이 책은 20년 넘게 쌓은 실무 디자인 노하우와 10여 년간 대학에서 웹 디자인을 강의한 경험을 기반으로, 웹 디자이너라면 반드시 알아야 할 필수 내용을 모두 담았습니다. 기획부터 디자인 원리, 화면 설계까지 웹 사이트를 제작하고 디자인할 때 반드시 알아야 할 개념을 빠르게 배울 수 있습니다. 여기에 최신 디자인 트렌드와 웹 폰트, 포토샵, 피그마를 활용한 실습을 하면서 디자인 개념을 익힙니다.

1. 디자인에도 최소한의 정답은 있다!
디자인 원리에서 실전 화면 설계까지! 실무에서도 든든하게 쓰는 기본을 쌓아 보세요

이 책은 네 부분으로 나누어 웹 디자인의 기본기를 길러 줍니다. 첫째마당에서는 웹 디자인의 기초 개념을 배웁니다. 잘 만든 웹 사이트라면 다 갖추고 있는 6가지 요소와 사용자의 마음을 읽는 4가지 디자인 원리, 최신 웹 디자인 트렌드와 기술을 알아보며 웹 디자인의 기본기를 탄탄하게 쌓습니다.
웹 사이트는 사용자에게 정보를 효과적으로 전달하고 목적을 달성하도록 유도해야 합니다. 둘째마당과 셋째마당에서는 이를 위해 필수적인 레이아웃과 웹 그리드 시스템, 이미지, 색상, 타이포그래피를 배우며 웹 디자인의 구조와 요소를 자세히 살펴봅니다.
넷째마당에서는 앞에서 배운 것을 토대로 화면 설계를 위한 첫 단추인 웹 디자인 콘셉트를 정의하는 방법과 화면 정의서, UI 스타일 가이드라인 등 실무에서 활용하는 문서를 살펴봅니다. 또한 디자인 계획을 세우는 방법을 체계적으로 살펴보고 디자인 시스템을 피그마로 제작하면서 실무에서도 든든하게 쓰는 웹 디자인의 기본을 차근차근 익혀 봅니다.

2. 20년 경력의 디자이너가 모아 뒀던 노하우 대방출!
최신 트렌드를 읽을 수 있는 레퍼런스 사이트 15개와 활용법까지 알려 줍니다

웹 디자인을 시작할 때 많이 보고 많이 따라 만들어 보라고 말하지만, 초보자는 어떤 것을 보고 만들어야 하는지부터 고민하기 마련입니다. 20년 경력의 디자이너가 차곡차곡 모아 둔 디자인에 유용한 레퍼런스 사이트 15개와 웹을 구현할 때 활용할 수 있는 무료 소스 사이트 13개는 물론, 해당 사이트를 200% 활용하는 방법까지 확인해 보세요. 디자이너는 한번 공부해서 끝나는 것이 아니라 최신 트렌드를 꾸준히 읽어 낼 줄 알아야 합니다. 이 책에서는 시대의 흐름에 맞게 성장하는 디자이너가 될 수 있도록 보는 눈을 키울 수 있는 디자인 조사 방법과 도움이 되는 레퍼런스 사이트를 함께 소개합니다.

3. 10여 년 강의하면서 자주 받은 질문에 대한 답변을 모았다!
성장하는 시간을 아껴 주는 초보 탈출 팁!

10여 년간 강의를 진행하며 자주 받았던 질문을 모아 팁으로 구성했습니다. 디자인 벤치마킹하는 법, 실력 향상에 도움이 되는 웹 사이트 재현 방법, 웹 디자인 트렌드를 익히는 방법, 웹 사이트 타깃을 설정하는 법 등 중요하지만 해보지 않으면 알기 어려운 팁입니다. 여러분이 성장해 나가는 과정에서 고민하는 시간을 아껴 드립니다. 또한 웹 폰트, 아이콘 폰트 적용처럼 해봐야 아는 것은 실습으로 웹 사이트에 직접 적용해 보며 시행착오를 줄일 수 있습니다.

4. 실용적인 교재를 찾는 교강사에게도 추천!
15회 차 계획표와 실습 파일을 제공합니다

이 책에서 다루는 모든 실습 파일은 이지스퍼블리싱 홈페이지의 자료실에서 내려받을 수 있습니다. 실습에 필요한 준비 파일과 결과 파일은 물론, 각 장의 실전 과제의 답안도 제공하니 학원이나 대학 교재로 활용하기에 적합합니다. 책에서 소개하는 15회 차 학습 계획표도 적극 활용해 보세요!
- 실습 파일 내려받기: [이지스퍼블리싱(www.easyspub.co.kr) → 자료실 → 도서명 검색]

5. 함께 배우고, 나누고, 성장하는 'Do it! 스터디룸'으로 오세요!

혼자 계획을 세우고 공부하다 보면 금방 지치기 마련입니다. 어려운 내용은 나와 비슷한 고민을 하는 독자를 만나 공유해 보세요. 서로 도움을 주고받으며 공부하다 보면 더 보람차니까요. 내가 잘 이해한 내용은 남을 도와주고 내가 잘 이해하지 못한 내용은 도움을 받으면서 공부하면 복습 효과도 누릴 수 있습니다. 멀리 가려면 친구와 함께해 보세요.
- Do it! 스터디룸: cafe.naver.com/doitstudyroom


이 책, 이런 분께 추천해요!

★ 웹 디자이너가 되고 싶은 취업 준비생
★ 물어볼 사수가 없어서 막막한 초보 웹 디자이너
★ 웹 디자인 감각을 키우고 싶은 프런트엔드 개발자
★ 웹 디자이너로 전향하고 싶은 분 누구나!

첫째마당 기본기가 탄탄해야 응용할 수 있다

01장 웹 디자인이 뭐예요?
01-1 웹이란 무엇인가요?
01-2 웹 사이트의 개발 과정 6단계를 먼저 알아야 해요
01-3 디자인에도 기획이 필요하다! - 웹 디자인 5단계
01-4 웹 사이트 제작을 위한 어벤저스 - 기획자, 디자이너, 개발자

02장 웹 디자인의 기본기를 탄탄하게!
02-1 웹 디자인은 어떻게 해야 하나요?
02-2 잘 만든 웹 사이트는 다 갖췄다! - 웹 디자인의 6가지 요소
02-3 사용자의 마음을 읽는 4가지 디자인 원리
02-4 UI/UX란 무엇인가요?
실전 과제

03장 웹 디자인 감각 깨우기 - 디자인 리서치
03-1 아는 만큼 보인다! - 최신 웹 디자인의 트렌드와 기술
03-2 보는 눈을 키우자! - 유용한 7가지 벤치마킹 웹 사이트
실전 과제


둘째마당 오래 머무는 웹 사이트는 이것이 다르다

04장 정보 전달은 구성이 8할이다! - 레이아웃
04-1 웹 디자인 레이아웃이란 무엇인가요?
04-2 웹 디자인 레이아웃의 변화
04-3 좋은 레이아웃을 위한 3가지 디자인 원리
실전 과제

05장 레이아웃 구성 도우미 - 웹 그리드 시스템
05-1 웹 그리드 시스템이란 무엇인가요?
05-2 초보자는 놓치기 쉬워요 - 웹 그리드 시스템 최적화
05-3 포토샵으로 웹 그리드 시스템 활용하기
실전 과제


셋째마당 웹 사이트를 아름답게! 웹 디자인의 요소

06장 한 장의 마법 - 이미지
06-1 이미지에는 어떤 것이 있나요?
06-2 그래픽 요소에는 어떤 것이 있나요?
실전 과제

07장 각각의 색에는 의미가 있다! - 색상
07-1 웹 디자인에서 색상은 어떻게 표현할까요?
07-2 병원 웹 사이트는 왜 파란색을 많이 쓸까요? - 색상 활용법
07-3 색상 선택에 도움을 주는 8가지 레퍼런스 웹 사이트
실전 과제

08장 크기, 간격, 정렬 - 타이포그래피
08-1 폰트의 유형 - 세리프체와 산세리프체
08-2 웹 폰트와 가독성
08-3 가독성을 끌어올리는 3가지 방법
08-4 무료 폰트를 제공하는 4가지 웹 사이트
08-5 웹 사이트에 아이콘 폰트 적용하기
실전 과제


넷째마당 실전 웹 디자인을 위한 화면 설계

09장 화면 설계를 위한 첫 단추 - 웹 디자인 콘셉트
09-1 웹 디자인 콘셉트란 무엇인가요?
09-2 웹 디자인 콘셉트 정의하기
09-3 무료 스톡을 제공하는 9가지 웹 사이트
실전 과제

10장 웹 디자인 실무를 위한 화면 설계
10-1 화면 정의서란 무엇인가요?
10-2 UI 스타일 가이드라인 설계하기
10-3 피그마와 디자인 시스템
실전 과제

11장 실전! 피그마로 디자인 시스템 제작하기
11-1 컬러 시스템 만들기
11-2 타이포그래피 시스템 만들기
11-3 버튼 시스템 만들기
11-4 인풋 시스템 만들기
실전 과제

찾아보기

정경희 고려대학교에서 디지털정보공학과 석사 학위를, 서울과학기술대학교에서 디지털콘텐츠디자인 박사 학위를 취득했다. 웹 에이전시에서 웹 사이트 개발 팀장으로 근무하고 '블루픽스'라는 웹 에이전시를 설립하며 20여 년간 기획자 및 메인 디자이너로 일했다. 실무에서 쌓은 경험을 바탕으로 여러 대학에서 웹 디자인 관련 강의를 이어오고 있다.
10여 년 강의를 하면서 학생들이나 신입 디자이너에게는 단순히 기능 구현보다 주어진 시간 안에 직관적이고 감각적인 디자인을 해내는 것이 가장 어렵고 막막하다는 것을 백분 이해하게 되었다. 그래서 웹 디자인을 막 시작한 사람도 핵심이 되는 기본기와 노하우를 빠르게 익혀 담당 업무에서 또는공부할 때 바로 적용할 수 있길 바라며 이 책을 집필했다.
현재 서울시립대학교에서 웹 디자인 강의를 진행하고 있다.