추가 적립 안내

초보와 프로는 기본기의 유무로 나뉜다!
웹 디자인 에이전시 20년 실무 노하우와 10년 강의 경험을 담은 웹 디자인 개념서!

내 눈에만 좋은 디자인은 그만! 이제 모두가 고개를 끄덕이는 웹 디자인을 해 봅시다. 20년간 웹 디자인 트렌드의 최전선에서 디자이너와 기획자로 일한 저자가 10년간의 강의 경력을 토대로 웹 디자인의 기본기를 쌓아 줍니다. 웹 디자인의 정의부터 구조, 구성 요소 같은 기본 개념을 자세히 살펴보며 기초를 탄탄하게 쌓고, 실전에서 디자인 계획을 세우는 방법부터 디자인 시스템을 만드는 방법까지 체계적으로 배울 수 있습니다. 이 책은 정답이 없는 디자인의 세계에서 헤매고 있는 초보 디자이너에게는 좋은 길잡이가 되고, 디자인 감각을 키우고 싶은 실무 디자이너에게는 최신 트렌드와 기술을 알려 줍니다. 기본 개념에 실무 활용 팁을 익히고 피그마와 포토샵을 활용한 실습까지 배우고 나면 자연스럽게 자신만의 디자인 해답을 찾을 수 있을 것입니다!

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

이 책은 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


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

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

김수연(트웬티온스 책임연구원)
실무에서 필요한 웹 디자인의 기본과 핵심 기술을 익혀 실무 경쟁력을 강화하고자 하는 디자인 입문자와, 웹 디자인을 이해하고 디자인 감각을 익히고 싶은 모두에게 친절한 멘토 역할을 해줄 것으로 기대합니다.

노주희(삼육대학교 아트앤디자인학과 조교수)
이 책은 웹 디자인 분야에서 성공적인 커리어를 구축할 수 있도록 안내해 줍니다. 웹 디자인에 입문하는 학생들에게 좋은 길잡이가 될 것이며, 전문가들에게는 최신 트렌드와 기술을 안내해 줄 것입니다.

서연경(인천재능대학교 컴퓨터소프트웨어학과 학과장)
이 책은 웹 디자인 기초는 물론 UI/UX 디자인의 개념을 다뤄 개발자도 웹 디자인의 이해도를 높일 수 있도록 도와줍니다. 필자의 실무 경험을 바탕으로 한 실전 팁과 예제는 학교 수업에서도 유용하게 활용할 것으로 기대합니다.

이혜수(한남대학교 융합디자인학과 초빙교수)
웹 디자인의 기본 개념부터 실전 활용 방법까지 웹 디자인의 핵심을 한 권에 담은 것은 이 책이 처음인 것 같습니다. 웹 디자인을 공부하는 학생, 교사뿐 아니라 웹 디자인 분야에서 일하는 모두에게 유용한 필독서입니다.

김지연(서울예술실용전문학교 웹툰창작과 학과장)
디자인을 처음 공부할 때 이런 책이 있다면 얼마나 좋았을까요? 이 책은 트렌드를 쫓는 것이 아니라 스스로 트렌드를 만드는 디자이너가 되도록 기본기를 키워 줍니다.

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

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 인풋 시스템 만들기
실전 과제

찾아보기