만들면서 배우는 모던 웹사이트 디자인


웹 디자인을 위한 모던 테크닉
Modern Techniques for Web design
야무의 2nd BOOK
만들면서 배우는 모던 웹사이트 디자인

도서 소개

만들면서 배우는 모던 웹사이트 디자인 도서
이 책은 총 9장으로 구성되어 있으며, 크게 소양, 실무, 실습으로 분류할 수 있습니다. 먼저 소양은 1장과 9장으로 각각 작업 환경 최적화와 차세대 웹 벡터 그래픽에 관한 이야기입니다. 다음으로 실무에 해당하는 2장 웹 타이포그래피, 3장 웹 그리드 시스템, 4장 웹 컬러 매니지먼트, 5장 이미지 슬라이싱에서는 웹 디자이너가 실무에서 유용하게 활용할 수 있는 실전 테크닉을 자세히 설명합니다. 마지막으로 실습 위주의 내용이 담긴 6~8장에서는 책에서 소개한 다양한 실전 테크닉을 활용하여 웹 사이트의 프로토타이핑부터 웹 그래픽 디자인 작업, 그리고 반응형 디자인까지 직접 만들어 보면서 디자인 과정을 확인할 수 있습니다.

도서 카테고리 – 소양 / 실무 / 실습

도서를 보는 법 (카테고리 분류)


도서 가격 비교/구매

 


도서 예제 다운로드

각 장 아이콘을 클릭하면 예제 ZIP 파일을 다운로드 하실 수 있습니다. (주의! 1장은 예제가 없습니다) 개별 다운로드가 불편하신 분들은 모든 예제가 압축된 ZIP 파일을 다운로드 받으세요 :-)

예제 All download!

1장, 웹 디자인 준비

1장, 웹 디자인을 위한 준비

2장, 웹 타이포그래피

2장, 이미지가 아닌 웹 타이포그래피

3장, 웹 그리드 시스템

3장, 웹 그리드 시스템

4장, 웹 컬러 매니지먼트

4장, 차이를 줄이는 웹 컬러 매니지먼트

5장, 이미지 슬라이싱

5장, 업무 생산성을 높이는 이미지 슬라이싱

6장, 빠른 프로토타이핑

6장, 큰 그림을 그려 보는 빠른 프로토타이핑

7장, 웹 그래픽 디자인

7장, NEXT STEP! 웹 그래픽 디자인

8장, 반응형 웹 그래픽 디자인

8장, BUILD UP! 반응형 웹 그래픽 디자인

9장, 웹 벡터 그래픽

9장, 차세대 웹 벡터 그래픽 시대 개막


도서를 먼저 읽어 본 Reviewer의 반응!

리뷰 글 읽어보시고, 여러분의 리뷰도 덧글로 남겨주세요~ :-)


김수빈
1장 리뷰 – 김수빈

대부분 웹 디자이너들은 컴퓨터에 대해 잘 모르는 경우가 많은데 책을 통해서 컴퓨터 사양과 포토샵 버전의 궁합(?)에 대해 알고 나니 속이 시원한 것 같아요~ 항상 작업할 때 포토샵이 꺼지거나 느려지면 컴퓨터 탓만 했거든요;; 이번 기회에 포토샵에 꼭꼭 숨어 있던 설정들을 잘 알 수 있어서 좋았습니다 :) 어찌 보면 쉽게 간과할 수 있는 부분이었는데 덕분에 애증관계인 포토샵을 더 잘 알게 되었네요 ^^ ㅎㅎ 특히, 사용하지 않는 프리셋은 일일이 지우기 귀찮았는데 쉽게 지우는 방법을 알 수 있어서 좋았어요 ~


김효인
1장 리뷰 – 김효인

보통 포토샵은 설치하다가 지쳐서 설치만 하면 바로 사용에 들어가기 바빴는데 같은 포토샵을 쓰더라도 더 빠르고 편리하게 쓸 수 있는 방법이 있었다는 것에 놀랐고 아직도 인터페이스나 사용법이 다른 점이 부담스러워 낮은 버전을 쓰고 있는 사람들이 많은데 높은 버전일수록 그만큼 더 가치가 있구나 알게 되었습니다.


도나영
2-3장 리뷰 – 도나영

디자이너들은 늘 습관적으로 써오던 방법으로 디자인을 한다. 새로운 방식은 자료를 찾는게 번거럽고, 익숙해지는데도 많은 시간이 걸리기 때문이다. 디자인작업에 딱 중점을 두어 접근한 타이포, 그리드 파트는 그냥 그런 툴이 아니라 정말 필요한 방법을 이야기 해주고있다. 타이포의 CSS 구현설명은 실작업의 효율성을 올려 다른 팀과의 협업에 큰 도움이 될것같다. 베이직하지만 잘 몰랐던 정보와 레티나등의 최신 정보까지, 여러권의 디자인책에서 얻을 수 있는 지식이 이책 하나로 해결되는듯! 초보자뿐 아니라 상급자에게도 유용할것같다. 나만 알고 소장하고 싶은 책!


이진주
2-3장 리뷰 – 이진주

웹디자인의 가장 기본이 되는 타이포와 그리드 적용의 중요성을 다시 한번 느끼면서 이와 같은 컨텐츠 배열은 UI의 구성도를 훨씬 더 높일 수 있다는 장점을 알 수 있었고, 포토샵의 플러그인, 액션 스크릅트 기능의 활용 방법을 통해서 효율적인 업무를 지향하게 된 것 같아요.


최대일
2-3장 리뷰 – 최대일

실무자로서 툴의 기능을 100% 활용하는 작업 스킬을 배울 수 있어 도움이 많이 됐습니다. 덕분에 습관처럼 굳어진 불편한 방법들을 고칠 수 있는 좋은 계기가 될 것 같습니다.


강은혜
2장 리뷰 – 강은혜

사실 전문을 본것이 아니라서 정확히 백프로 만족!!! 이라고 할수는 없지만 2장, 이미지가 아닌 웹 타이포그래피부분은 만족~!입니다. 다음 내용이 막막!! 궁금한 그런 느낌~ 책을 덮는게 아니라 다음 장을 읽고 싶은 그런 느낌이랄까요~!


장미
3장 리뷰 – 장미

만족은 대만족~ 큰만족이라고 거침없이 쌍엄지를 치켜 들고 싶습니다. 비록 제가 리뷰한 것은 섹션 한꼭지였지만, 기본기가 약한 이들에게 분명 유용한 개념을 심어주리라 기대 되는 진짜 알찬 구성이였습니다.


곽대환
4장 리뷰 – 곽대환

책의 내용을 처음 받았을 때 개인적으로는 배색 원리라든가 웹 디자인에 있어 컬러의 적용방식, 예제 등을 기대했었습니다. 하지만 실제 웹 디자인을 하는데 있어 테크닉적 기술이라든가 배색에 대한 얘기가 아니라 말그대로 작업을 시작함에 있어 컬러 관리법에 대한 다양한 얘기가 들어있습니다. 집을 지을 때도 지반이 튼튼하고 기둥을 잘 세워야 집이 튼튼하게 잘 올라가듯 웹디자인을 하는데 있어 기본이 되는 웹 컬러 관리법에 대한 저자의 노하우와 상세 내용들이 담아져 있어 새롭기도 하고 좋았습니다. 웹 디자인은 타 디자인과 달리 OS와 브라우져에 따라 달라지는 색상 변화에 대한 설명은 모르고 지나칠 수 있는 부분 임에도 자세한 설명이 웹 디자인을 하는 독자에게 많은 도움이 될 듯합니다.


문효진
4장 리뷰 – 문효진

정말 기다렸던 책입니다!! 책 내용 중 웹 컬러 매니지먼트 파트는 저에게 많은 도움이 되었습니다. 실무 작업에서는, 디자인 뿐만 아니라 컬러에 대해 많은 고민을 합니다. 기업 아이덴티티를 지키면서 거기에 맞는 컬러들을 고민을 하다보면 다양한 경우의 수를 생각하게 됩니다. 이 책에서는 모니터, 브라우저별, 웹접근성에 맞는 컬러들의 다양한 비교 분석과 새로운 정보들로 보다 나은 디자인 환경을 제시해줘서 좋은 것 같습니다. 그리고 머릿속에 뒤엉켜져 있던 것들을 정리 할 수 있는 좋은 계기가 되었습니다.


유정식
4장 리뷰 – 유정식

내용은 이해하기 쉽도록 설명이 되어있어서 너무 좋았습니다. 독학에 가깝게 디자인을 공부해와서 그런지 여태 색을 다루는 부분이나 표현하는 것에 대해 민감하게 처리하지 못한 부분이 있었는데요, 원고에 있던 문장을 접하고는 머리가 아득해졌습니다. 이것은 단순히 색에 관한 이야기만은 아닌 것 같았거든요. 자신이 추구하는 것에 대한 태도에 관한 이야기이면서 그것이 저처럼 아직 공부하는 학생 입장에서 앞으로 쫒아가야 할 방향을 제시해 준다고 느껴졌습니다. 그래서 동시에 뭔가 구원을 받은 듯한 느낌도 받았습니다. 저뿐 아니라 습관적으로, 무심하게 지나치던 부분들을 짚어주는 이 책이 위의 문장을 보고 부끄러워할 디자이너들에게 하나의 구원이 될 수 있을 것 같습니다. 앞에서 원리를 설명하고 감마값을 조정하는 방법들, 그리고 포토샵에서 유용한 설정들, 색 추출하는 방법 등 모두 유용하고 실용적인 내용들도 자연스레 고개를 끄덕이면서 볼 수 있었던 것 같아요.


공효정
5장 리뷰 – 공효정

중간 중간의 깨알 TIP은 깨알이라고 하기에는 유용한 정보였고, ‘왜 똑같이 따라 한 것 같은데 난 왜 안되지?’ 라는 생각이 들게 되는 상황에서 다시 책의 앞으로 가지 않고도 문제를 해결 할 수 있어서 좋았습니다. 좀 더 깊이 있게 다가갈 수 있었던 것 같습니다~!


이제명
5장 리뷰 – 이제명

실무자들이라면… 책 한권 사서, 하나의 방법을 익혔다면~ 그것만으로도 충분하다…는 말이 무슨 말인지 알 것이다. 지금의 이 책은 하나의 작업을 방법을 가지고 1, 2, 3, 등의 여러가지 방법을 설명하고 있다. 즉, 실무에서는 무조건~ 절대적으로 필요한 작업 방법들을 자세하게 설명하고 있다. 인터넷에서는 1~2개의 방법 정도를 찾을 수 있을텐데 이 책은 하나의 작업에 대해 거의 모든 방법들을 설명하고 있으니… 그것만으로도 충분하다.


임국태
5장 리뷰 – 임국태

디자이너에게 PSD 파일을 전달받은 후 슬라이스 작업은 제가 알던 한가지 방법이 있었는데 제가 하던 방식은 늘 불편한 걸 알면서도 당장 일정이 급해 그 방법만 고집하였습니다. 책의 내용 중 ‘New Layer Based Sliced’등과 같이 레이어를 활용하거나 다른 유용한 방법이 있음에 많이 배웠습니다. 앞으로 실무에 많이 적용해서 업무효율을 높여야겠습니다 ^^


정수진
5장 리뷰 – 정수진

깨알 팁과 설명 후 요약정리 내용이 매우 유용하였고, 단순히 포토샵의 사용법만 알려주는 것이 아니라 플러그인과 CC버전의 놀라운 활용 정보까지 알려 주어서 좋았습니다.


김예슬
6장 리뷰 – 김예슬

moqups이 뭔지 모르는 사람도 한번만 읽고 따라 해보면 마스터 할 수 있을 정도로 쉽고 상세하게 나와있어서 좋았어요. 전체적인 목차도 웹 디자인이 뭐지? 하시는 분들이 보셔도 좋을 내용들이 그리고 나 웹 디자인 할 줄 알아 하는 사람들에게도 그냥 지나치면 안될 내용들이 담겨져 있을 것 같아서 기대됩니다!


이동윤
6장 리뷰 – 이동윤

제가 웹 관련 일을 처음한게 96년도이고, 거의 1세대 웹디자이너라고 할 수 있는데, 그동안 웹개발에 대한 방법론이나 개발프로세스가 참 많이도 변해왔습니다. 시대의 흐름에 따라 디자이너-교육자-기획자 등 제 직업도 참 많이 바뀌었네요. 여러 직업을 거치며, 웹이나 IT에 대해 바라보는 시각도 자연스레 변하여 왔습니다. ‘어느 방법이 좋다 나쁘다, 어떤 툴이 좋다 나쁘다’의 문제가 아니라, 협업을 하는 프로젝트에서 팀원들이 프로젝트 관리를 잘 할 수 있는가? 혹은 생산성이 높은가? 는 각자 회사 혹은 프로젝트마다 다를 겁니다. 전체 책의 내용은 다 보지는 못한 한 챕터의 리뷰였으나, 전체 목차의 구성으로 판단했을때, 야무님께서 집필하신 이번 책은 스타트업 회사나 웹기획자, 웹디자이너 , 혹은 퍼블리셔 등 최신 트랜드를 빨리 접하고자하는 모두에게 좋은 지침서가 될 것이라 확신합니다. 최근 트랜드만 쫓아서 내용없는 빈껍데기 (쓸데없는 코드만 페이지를 잡아먹는) 책이 많이 나옵니다. 그럴듯한 제목과 출판사의 마케팅으로 독자들은 현혹하죠. 처음보다는 두번째가 또 그 다음이 점차 더 발전하는 야무님이 되길 바랍니다. 아무쪼록 돈 많이 벌 수 있는 책보다는 진정 독자들이 원하는 컨텐츠로 가득 채워진 ‘착한 책’을 앞으로도 계속 집필할 수 있기를 바랍니다.


황희진
6장 리뷰 – 황희진

친근한 문체와 상세하고 직관적인 설명이 독자에게는 바로 옆에서 설명해주시는 것 같은 느낌이 듭니다. 초보자들에게 웹사이트 제작에 관한 전체적인 프로세스를 유추해 볼 수 있는 좋은 실습이 될 듯 합니다.


이현숙
7장 리뷰 – 이현숙

본인이 사용하고 있던 방식보다 시간절약할 수 있으면서도 더 효율적인 방식을 제시해주고 있다. 디자인만 생각하는 것이 아니라 html과 css의 스타일링까지 고려해서 효율성을 높였다는 점이 인상 깊다. 실무자에게는 보다 효과적인 방식으로 업무 시간을 줄여주고 입문자에게는 그리드 시스템부터 시작해 정확하고 제대로된 그래픽 작업의 토대를 만들어줄 것이다.


황구
7장 리뷰 – 황구

원고를 보면 디테일한 부분에 만족합니다. 다른 책들은 어느 정도는 넘어가거나 중간 중간 생략하는 부분이 있지만… 이 책은 쓸데없는 것보다는 실질적인 예제의 내용이니 바로 실전에도 접목할 수 있기에 좋습니다.


박재성
8장 리뷰 – 박재성

중간의 레이어 필터(Filter)팁에 대한 새로운 정보를 습득하게 되었습니다. 습관이 되어있지 않아 사용하는데 어색했지만 몇 번 사용해본 바 매우 활용도가 높다는 판단을 하게 되었습니다. 예제 또한 실습에 대해 크게 문제 없이 순탄히 진행해 보았습니다. 꼼꼼하고 디테일하며 정교하게 설명이 되어 있어 초보자를 비롯한 누구도 쉽게 따라 해볼 수 있을 것 같고 라이브러리 및 템플릿화 하여 다른 작업에도 유용하게 쓰일 수 있을 것 같습니다.


박종철
8장 리뷰 – 박종철

수 많은 책들을 접했고, 보았고, 느껴보았고, 초보자가 보기엔 다소 부담스런 부분도 포함되어 있지만.. 정말 중요한 부분만 쏙쏙 골라 정말 잘 써주신 것 같습니다.


정인영
8장 리뷰 – 정인영

다양한 디바이스에 대응할 수 있는 정보들이 담겨 있고, 레이어와 가이드 관련되어 잘 정리가 되어있어서, 실무에 유용하게 사용할 수 있을것 같아요.


김보형
9장 리뷰 – 김보형

역시 Javqscript 코드는 SVG영역을 지원하지 않는 웹 브라우져에서도 보완시켜 주네요 ㅋㅋ 또한 간혹 웹 폰트나 시스템 폰트가 아닌 디자인 된 텍스트 이미지를 반영해주어야 하는 상황인 UI 개발자 입장에서는 백터 그래픽인 svg를 사용한다면 좀더 업무의 효율성이 있겠네요~ UI 개발자 뿐만 아니라 그래픽 디자이너분들도 함께 보시면 앞으로 실무에서의 업무 효율을 높이는 정말 좋을 것 같습니다 ^^


김주희
9장 리뷰 – 김주희

SVG에 대해서는 오래 전부터 알고 있었지만 사용하기엔 어려운 점이 많았는데 이를 활용을 할 수 있는 방법을 제공한다는는 점에서 유익한 책입니다. 또한 중간 중간에 깨알 Tip은 정말 유용한 정보인것 같습니다.^^ URL과 방법까지 있어 좋았습니다. 마지막 Font Awesome 아이콘 포토샵 폰트를 활용하는 부분이 개인적으로 활용성이 좋은 것 같습니다. 이미지로 썼던 부분을 CSS 코드로 바로 사용이 가능하다는점이 쏙 들어오는 정보였습니다.


김진희
9장 리뷰 – 김진희

얼마 전 반응형 웹으로 디스플레이를 제작했던 저에게는 가장 큰 고민거리는 바로 이것 이였습니다. 야무님 덕분에 예쁜 로고와 아이콘을 선보이게 되어 행복합니다. 군더더기 없이 실무자들에게 필요한 문제만 콕콕 집어주신거 같아요. 책 내용도 동영상강좌도 깔끔!!


임철혁
9장 리뷰 – 임철혁

베스트 강사분 중 한 분으로 꼽고있는 야무님의 카페를 둘러보던 중, 새로 발간될 책의 리뷰어 모집 글이 있길래 지원하게 되었다. 첫 책은 마크업에 관련된 책이었는데, 이번책은 디자인 도서! 첫 책에서 느낀 점이지만 야무님이 디자이너 출신이셔서 그런지 강의나 게시물 책 등에서 관점이 나와 잘 맞아 떨어져 이해가 수월한 편이다. 하지만 아직 첫번째 책을 완독하지 못했다는 점~ 각설하고 내가 리뷰한 9장은 웹에서의 벡터 그래픽에 대한 내용이다. 지금까지 웹에서의 벡터 그래픽이 활성화되지 못한 배경에 대한 내용과 (그런 역사 같은 내용까지 알 필요 없다고 생각하시는 분들도 있지만, 감성적인 부분까지 신경써야 하는 디자이너로서 웹의 기본적인 역사 부분도 팍악하는것이 작업에 많은 도움이 된다고 생각한다) 사용 방법, 편집 방법 등이 즉시 벡터 기술을 사용할 수 있을 정도의 내용이 설명되어 있다.

top


Comments (11)

  1. 라임글라스

    오.. 정말 기다리고 기다렸던… 야무님 책! 출간했군요~ 얼렁 구입하러 갑니다~ 굿굿굿

    응답
  2. 김지혜

    ‘만들면서 배우는 HTML5 CSS3 Jquery’ 이 책에 대한 예제들은 어디서 다운받을 수 있나요???

    응답
  3. 이기만

    정말 내가 부족한 부분을 콕 꼬집어서 잘 알려주셔서 감사합니다.
    예제를 하나하나 해보고 있는데요 포토샵 스크립트(JSX)파일을 넣고 실행했는데 에러가 나네요. CS6버전에서는 안되나봐요.

    응답
    • yamoo9

      포토샵 CS6에서도 잘 작동하는데 오류가 난다고 말씀주신걸 보니 어딘가 잘못된 부분이 있는 듯 하네요 ^^
      어떤 오류가 발생하는지 말씀주시면 문제 원인이 파악이 가능할 것 같습니다. 오류 정보를 알려주세요~

      응답
  4. 정현진

    ‘만들면서 배우는 모던 웹 디자인’ 후속버전? 제작버전? 책은 언제 출간하시나요?

    응답
  5. 33

    cut & slice me 설치했는데, 윈도우 확장에는 안뜨네요? 뭐가 문제인지 모르겠어요 ㅠㅠ

    응답
  6. 333

    cut & slice me 설치했는데, 윈도우 확장에는 안뜨네요? 뭐가 문제인지 모르겠어요 ㅠㅠ……

    응답
  7. 로터스

    만들면서 배우는 모던 웹사이트 제작 중에서..

    안녕하세요. 야무님. 책 잘 보고 있습니다.

    질문)
    emmet 설정중 Lorem 한글 설정 관련해서 확장경로가 책 설명에서는 다음과 같습니다.
    - “extensions_path”: “c://emmet”,

    위와 같은 설정은 윈도우의 경우인데 저는 맥 사용자입니다. ssd / subHD를 이용중인데 subHD에 emmet 폴더를 생성하고 다음과 같이 확장 경로를 적었더니 안되더군요.
    - “extensions_path”: “subHD://emmet”,

    맥에서의 경로가 알고 싶습니다.

    ——————————
    contact 기능에 오류가 있어보이네요.

    응답
  8. 신철헌

    다른게 아니라 이책 인터넷 구매 말고 서점에 파나요 ??

    부산 서면 영광도서 라고 저희집에서 가까운 큰 매장인데 … ㅎㅎ

    응답