메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

한빛랩스 - 지식에 가능성을 머지하다 / 강의 콘텐츠 무료로 수강하시고 피드백을 남겨주세요. ▶︎

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

한빛미디어

집필서

절판

  • 저자 : 야무(지훈)
  • 출간 : 2014-03-17
  • 페이지 : 392 쪽
  • ISBN : 9788968480904
  • 물류코드 :2090
  • 초급 초중급 중급 중고급 고급
4.2점 (5명)
좋아요 : 41

웹 디자인을 위한 실전 테크닉 위주의 실전 활용서!!

현업에서 활동하고 있는 많은 웹 디자이너들의 현실을 들여다보면 주먹구구식으로 웹사이트를 디자인하고 있는 경우가 많다. 그러다 보니 더 나은 방법, 더 효율적인 방법이 있음에도 오랜 시간을 낭비하면서 비효율적으로 디자인하고 있는 상황이다. 이 책은 웹 디자이너들이 현장에서 부딪치는 문제에 대해 오프라인 강의를 통해 검증받은 야무 저자가 자신의 경험을 바탕으로 한 디자인 테크닉과 노하우를 중심으로 구성함으로써 웹 디자이너들의 작업 환경을 개선하고, 업무의 효율성을 높이기 위해 쓰여졌다.

이 책은 웹사이트 디자인을 위한 단순한 이론적 지식이나, 단순하게 배워 대충 써먹을 수 있는 디자인 기술을 설명하고 있는 책이 아니다. 웹 디자이너가 기본적으로 갖추어야 할 소양은 물론, 현장에서 지향하는 지식과 기술을 바탕으로 플러스 알파가 되는 실전 테크닉을 배울 수 있다. 거기에 그치지 않고 가상의 웹사이트를 프로토타입부터, 실제 디자인을 거쳐 반응형 웹사이트로 변환하는 과정을 실습해 보면서 책에서 다룬 웹사이트 디자인 소양과 테크닉이 어떤 과정에서 어떻게 활용되는지 확인할 수 있다.


이 책의 특징

① 웹 디자이너의 현장 밀착형 실전 테크닉을 배운다
웹 타이포그래피, 웹 컬러 매니지먼트, 이미지 슬라이싱, 웹 그리드 시스템은 웹사이트 디자인을 위해 반드시 알아야 할 필수 소양이다. 웹사이트 디자인 시 활용 방안과 사용자에 따라 선택해서 활용할 수 있는 다양한 테크닉을 전수한다. 

② 프로토타입부터 반응형 웹사이트까지 실습으로 배운다
무엇인가 새로운 것을 배울 때 가장 쉽고, 재미있게, 그리고 확실히 배울 수 있는 방법은 직접 손을 움직여 몸으로 체득하는 것이다. 세 개의 장에 걸쳐 moqups를 이용한 프로토타입부터 포토샵을 이용한 실제 디자인 작업, 마지막으로 다양한 뷰포트에 따른 반응형 웹사이트를 제작해 본다.

③ 디자인 작업 환경을 개선하고 차세대 웹 디자인을 위한 기본 소양을 다진다
웹 디자인 작업의 대부분은 포토샵에서 이루어진다. 그럼에도 많은 웹 디자이너들이 포토샵 성능 향상에는 무덤덤하다. 포토샵의 성능을 최대로 끌어내면 작업 시간을 단축할 수 있음에도 말이다. 이 책에서는 웹 디자이너가 컴퓨터와 포토샵의 궁합을 최적으로 끌어내어 작업 속도를 단축할 수 있는 작업 환경 개선 방법은 물론 차세대 웹 디자인을 위한 벡터 그래픽에 대해서도 알려 준다. 이로써 새로운 영역을 바라보는 안목을 기를 수 있다.


어떤 독자를 위한 책인가?

  • 처음부터 제대로 된 웹사이트 디자인 방법을 배우고 싶은 웹 디자이너
  • 웹사이트 디자인에 필요한 모던 테크닉을 배우려는 웹 디자이너
  • 웹사이트 디자인 과정이 궁금한 웹 기획자나 퍼블리셔

야무(지훈) 저자

야무(지훈)

웹을 사랑하는 비주얼 디자이너로 웹 표준과 웹 그래픽 관련 강의를 하고 있습니다. 전공인 비주얼 디자인뿐만 아니라 프론트-앤드 프로그래밍에도 관심이 많습니다. 웹 표준 플랫폼 테크닉을 활용하여 UI를 구현하는 것을 즐거워하며, 늘 새롭고 놀라운 것을 익히기를 좋아합니다. 아카데미 정글을 비롯 신한은행, 매일유업, 한국인터넷전문가협회(Kipfa)에서 웹 디자인/표준 강의를 진행했으며 현재는 모노디(monod.co.kr)에서 교육 기획/운영을 하고 있습니다.

홈페이지_ yamoo9.com
커뮤니티_cafe.naver.com/webstandardproject
SNS_ facebook.com/yamoo9

[1장 웹 디자인을 위한 준비]

포토샵 성능을 향상시키는 컴퓨터 하드웨어 설정
  - 포토샵의 성능을 좌우하는 강력한 CPU 준비하기
  - 이미지를 빠르게 처리하는 메모리 준비하기
  - 부족한 부분을 채워 주는 고속/대용량 저장 드라이브 준비하기
포토샵 성능을 더욱 높여 주는 환경 설정
  - 포토샵 메모리 사용량 최적화하기
  - 스크래치 디스크 설정하기
  - 히스토리/캐시 최적화하기
  - GPU 활성화하여 렌더링 속도 향상하기
안전하게 파일을 저장/복구하는 포토샵 설정
포토샵 성능을 최적화하는 알찬 팁(Tip)
  - 사용하지 않는 프리셋 지우기
  - Layers 패널의 이미지 썸네일 기능 끄기
  - 이미지 프리뷰를 제외하고 저장하기
  - 폰트 미리 보기 기능 끄기
  - 퍼지로 메모리 쾌적하게 관리하기
  - 포토샵에서 복사한 내용은 포토샵에서만 사용하기
mission 01 : 포토샵 성능 최적화 복습하기
효율적인 웹 디자인을 위한 포토샵 작업공간 설정
  - 툴바 오른쪽으로 이동하기
  - Color 패널의 컬러 모드를 RGB에서 HSB로 변경하기
  - 웹 디자인에 필요한 패널 중심으로 작업공간 조정하기
  - Info 패널 설정 값을 웹 디자인에 최적화하기
  - 나만의 작업공간 저장하기
  - 웹 디자인에 적합한 단위로 변경하기
  - 사용자 편의에 따라 가이드 색상 및 그리드 설정하기
효율적인 웹 디자인을 위한 일러스트레이터 작업공간 설정


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

웹 디자인의 기본은 웹 타이포그래피
  - 보는 것만이 아닌 읽는 것
  - 웹 디자인을 구성하는 95%는 타이포그래피
읽기 쉬운 본문 타이포그래피 디자인
  - 디자인용 스타일 가이드 문서 만들기
  - 본문 텍스트 입력하고 정렬하기
  - Anti-Aliasing 설정하기
읽기 쉬운 하이퍼링크 타이포그래피 디자인
읽기 쉬운 제목 타이포그래피 디자인
mission 02 : 웹 타이포그래피 스타일 가이드 문서 만들기
이미지 텍스트 작업에서 고려할 레티나 디스플레이


[3장 웹 그리드 시스템]

정교한 디자인의 필수 조건, 그리드 시스템
짜임새 있게 웹 디자인을 쌓는 기초 공사, 그리드
  - 가이드라인으로 그리드 그리기
  - 그리드 시스템 용어 알고 넘어가기
웹 사이트 디자인을 위한 그리드 시스템 설계
  - 그리드 시스템 설계를 위한 사용자 정보 분석
  - 960 그리드 시스템 설계하기
  - 960 그리드 시스템을 활용한 웹 디자인 데모 작성하기
단축키를 활용한 그리드 토글
  - 액션을 활용하여 그리드 토글하기
  - 포토샵 스크립트(JSX)를 활용하여 그리드 토글하기
mission 03 : 한글 웹 그리드 시스템 디자인하기


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

보는 사람에 따라 천차만별로 바뀌는 색
  - 색을 결정하는 주체는 빛
  - 정확한 색 작업을 위한 주변 환경
  - 모니터의 색 표현 능력을 담고 있는 컬러 프로파일
웹 브라우저마다 컬러가 다르게 보이는 이유
  - 같은 컬러지만 다르게 보이는 Windows와 Mac OS
  - 색 표현 능력에 차이가 나는 웹 브라우저
  - 색 표현 능력에 차이가 나는 모바일 기기(스마트폰 & 태블릿PC)
웹 컬러 작업을 위한 포토샵 설정 및 컬러 스워치 활용
  - 웹 디자인 작업을 위한 포토샵 컬러 설정하기
  - 포토샵 컬러 프루핑
  - 웹 이미지를 최적화하여 저장하기
  - 컬러 스워치 초기화하고 컬러 샘플링하기
mission 04 : 이미지 컬러 샘플링 액션 만들기


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

이미지 자르기의 기초, Slice Tool
  - 배경 그룹/레이어 감추고, 슬라이스 설정하기
  - 슬라이스 결과를 웹용 이미지로 저장하기
가이드라인을 활용한 이미지 자르기
  - 가이드라인에서 슬라이스 생성하기
다이싱 기법으로 이미지 자르기
복제 그룹/레이어, 트리밍 이미지 자르기
단축키 한 번으로 이미지가 잘리는 액션 등록
레티나 디스플레이를 고려한 이미지 자르기 액션 등록
  - 스마트 오브젝트를 적극 활용하여 크기가 큰 원본 파일 보존하기
  - 이미지 자르기 액션을 복제하여 레티나 디스플레이용 액션 만들기
플러그인을 활용한 이미지 자르기
  - Cut & Slice Me 플러그인 설치하기
  - Cut & Slice Me 플러그인 활용하기
포토샵 CC의 놀라운 Image Assets 기능
  - [Generate > Image Assets] 활성화하기
  - 자동 이미지 슬라이싱의 기본 규칙
  - Image Assets의 다양한 옵션 활용하기


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

HTML5 기반의 웹 프로토타이핑 도구 - moqups
  - moqups 서비스 가입 및 설정하기
  - moqups 프로젝트 생성 및 관리하기
랜딩 페이지 프로토타이핑 실습
  - 콘텐츠 선정 및 구성하기
  - 모던 웹, 맨투맨 클래스 C 강의 랜딩 페이지 - 프로토타이핑
  - 헤더(Header) 영역 작업하기
  - 비디오(Video) 영역 작업하기
  - 헤드라인(Headline), 소개 문구, CTA 작업하기
  - 강의에서 다루는 내용(Features) 영역 작업하기
  - 강의 후기(Testimonials) 영역 작업하기
  - 저작권 정보(Copyright) 영역 작업하기
  - 프로토타이핑 결과물을 PDF/PNG로 출력하기
멀티 페이지 프로토타이핑 실습 1 - 홈페이지
  - 프로젝트 생성하고 로고 불러오기
  - 메뉴 작업하기
  - 캘리그라피 프로젝트, 모집 강좌, 배너 영역 작업하기
  - 공지사항, 수강생 작품 영역 작업하기
  - 푸터 영역 작업 및 홈페이지 완료하기
멀티 페이지 프로토타이핑 실습 2 - About MonoD 페이지
  - 기존 페이지 복사하기
  - 활성 페이지 변경 및 타이틀 변경하기
  - 브레드크럼(Breadcrumb) 내비게이션 그리기
  - 슬로건(Slogan) 및 소개 영역 작업하기
  - 사이드 바 영역 작업 및 마무리하기
멀티 페이지 프로토타이핑 실습 3 - 업무진행과정 페이지
  - 페이지 복사 후 활성 페이지 변경하기
  - 타이틀/브레드크럼 변경하기
  - 프로세스 소개, 제작의뢰 바로 가기 버튼 작업하기
  - 프로세스 테이블 작업 및 마무리하기
멀티 페이지 프로토타이핑 실습 4 - 제작의뢰 페이지
  - 페이지 복사 후 활성 페이지 변경하기
  - 타이틀/브레드크럼/버튼 내용 변경하기
  - 의뢰 폼 영역 작업하기
  - 의뢰 요청 버튼 작업 및 마무리하기
프로토타이핑 페이지 인터랙션 설정


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

만들 웹 그래픽 디자인 미리 보기
프로토타이핑을 기반으로 한 웹 그래픽 디자인
  - 프로젝트 Preparing
  - 헤더(Header) 영역 디자인하기
  - 비디오(VIDEO) 영역 디자인하기
  - CTA(Call To Action) 영역 디자인하기
  - 기능(Features) 영역 디자인하기
  - 추천(Testimonials) 영역 디자인하기
  - 푸터(Footer) 영역 디자인하기
  - 활성화 상태(Active State) 디자인하기


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

다양한 모바일 기기를 고려한 중단점 설정
  - 모바일 기기의 뷰포트 집계
  - 중단점 설정하기
반응형 웹 디자인 중단점 1 - 1000px
반응형 웹 디자인 중단점 2 - 760px
반응형 웹 디자인 중단점 3 - 480px
반응형 웹 디자인 중단점 4 - 320px


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

벡터 그래픽과 관련된 웹 디자인 역사
  - 벡터 그래픽 포맷 표준화 전쟁
  - HTML5 벡터 그래픽 표준 포맷 - SVG
  - SVG 벡터 그래픽 포맷의 웹 브라우저 지원율 체크하기
  - 웹 사이트 디자인에 SVG 적용 사례와 미적용 사례
  - SVG 사용에서 고려할 점
SVG를 편집할 수 없는 포토샵, 편집할 수 있는 일러스트레이터
포토샵 Vector Path를 SVG로 내보내는 방법
  - 포토샵에서 작업하고 일러스트레이터에서 저장하기(PSD to SVG)
  - PSD to SVG 스크립트 활용하기
  - Zeick 플러그인 활용하기
Font Awesome 아이콘을 포토샵 폰트로 활용
  - Font Awesome 폰트 파일 다운로드 및 시스템 등록하기


[질문으로 찾는 목차]

Anti-Aliasing 설정 값에 따라 어떻게 다른가요? CPU 정보는 어디서 확인하죠?
Layers 패널에서 마우스 오른쪽 버튼을 눌러도 썸네일 옵션이 안 보여요?
PNG로 저장할 때 PNG-8과 PNG-24 방식에 따라 어떤 차이가 있나요?
가이드라인에서 간격은 어떻게 결정하나요?
가이드라인을 정확하면서도 빠르게 그리는 방법이 있나요?
가이드라인을 좀 더 쉽게 그릴 수는 없을까요?
가이드라인으로 나눈 영역에서 나뉘면 안 되는 영역을 다시 붙일 수 있나요?
감마 처리가 다르다고요? 감마가 뭐죠?
그리드 시스템은 웹 디자인에서만 유용한가요?
단락을 배치할 기준선을 쉽게 그릴 수 없나요?
단락의 공간 설정을 효율적으로 하려면 어떻게 하나요?
동일한 이미지를 여러 개의 확장자로 동시에 자를 수는 없나요?
디지털 이미지는 감마와 관련이 있나요?
레티나 디스플레이에 적합한 이미지 텍스트는 어떻게 저장하나요?
레티나 디스플레이에서 이미지 텍스트 처리는 어떻게 다른가요?
레티나(고해상도) 이미지 저장도 가능할까요?
마스크로 만든 슬라이스는 크기 조정이 불가능한가요?
메모리가 충분하지는 어떻게 확인할 수 있나요?
모니터 밝기 단위인 칸델라는 어떻게 확인하나요?
모니터의 컬러 정보를 직접 계측하여 컬러 프로파일을 만들 수도 있나요?
반사가 적은 모니터가 더 좋은 건가요?
백그라운드 저장/자동 저장/복구 기능으로 성능이 느려지지 않을까요? 
솔리드 스테이트 드라이브(SSD)와 하드 디스크 드라이브(HDD) 중 어떤 것을 사용해야 하나요?
슬라이스가 많아 복잡해 보이는데 필요한 슬라이스만 볼 수는 없을까요?
슬라이스를 그리기가 쉽지 않은데 다른 방법은 없나요?
액션에 설정한 단축키는 어떻게 변경하나요?
운영체제도 감마와 관련이 있나요?
운영체제에 모니터의 정보를 알려 주려면 어떻게 해야 하나요?
워드(Word)나 한글 프로그램처럼 스타일 관리는 안 되나요?
웹 디자인 = sRGB 색역인가요?
웹 사이트의 컬러도 샘플링해서 등록할 수 있나요?
이미지가 원하는 모양으로 잘리지 않으면 어떻게 하나요?
인용문에 사용하는 따옴표는 어떻게 처리하나요?
인터넷 익스플로러는 컬러 매니지먼트를 지원하지 않나요?
자간과 어간은 어디서 세부 조정 할 수 있나요?
자를 이미지의 포맷이나 압축률을 조정할 수 있나요?
주관적인 판단보다 객관적으로 계측하여 수치를 얻을 수는 없나요?
충분한 성능을 내려면 얼마만큼의 메모리를 갖춰야 하나요?
캐시의 역할과 설정 기준은 무엇인가요?
컬러를 빠르게 샘플링한 후 Swatches 등록하는 방법은 없나요?
텍스트를 정렬하는 설정 옵션도 Paragraph 패널에 있나요?
파일을 저장하는 동안 무작정 기다려야 하나요?
포토샵에는 자동 저장/복구 기능이 없나요?
포토샵의 메모리 설정을 최적화하려면 어떻게 해야 하나요?
하이픈 처리가 웹 타이포그래피에서도 가능할까요?
효율적이고, 유연하게 대처할 수 있는 텍스트 입력 방법이 있나요?
히스토리 개수는 최대로 설정해도 될까요?

 

 

 

다양한 형태의 플랫폼이 많은 콘텐츠를 쏟아내고 있는 요즘,

인쇄면에 익숙한 나에게 '디자인'하면 떠오르는 단어는 

단 한 장에 담기는 정지형태의 그래픽이었다

 

 

이번에 읽은 야무 님의 책 <만들면서 배우는 모던 웹사이트 디자인>은

웹사이트 제작에 앞서

어떻게 웹사이트를 디자인할 것인지에 대해 가이드를 주는 책이라고 생각한다.

단지 웹사이트 디자인이 궁금했던 나에게는 

꽤 심도 깊은 책이었다.

.

CAM00618.jpg

 

CAM00619.jpg

 

undefined

 

 

차례는 

[1장 웹 디자인을 위한 준비]

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

 [3장 웹 그리드 시스템]

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

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

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

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

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

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

[질문으로 찾는 목차]

 

그 중에서 질문으로 찾는 목차가 꽤 인상적이었다

질문으로 찾는 목차가 인상적이었는데,

보통 책 맨뒤에 인덱스로 자기가 궁금했던 단어가 포함된 그 페이지를 찾아가곤 함,

하지만 이책에서는 궁금한 질문을 바로 찾아본다는거..!!

 

CAM00702.jpg

 

 

 

또 인상적이었던 3장의 그리드 관련 내용!!

 

너무 기본적이어서 넘어갈 수 있는 웹디자인에서의 

그리드 작업이나 타이포그래피의 자간과 행간의 조정의 디테일을

콕콕 찝어내는 내용이 인상적이었다.


 

CAM00735.jpg

 

 

 

5장의 이미지 슬라이싱 같은 경우

웹디자인을 할 때도 유용하지만, 개인적으로

업무상 보고서에 필요한 이미지를 잘라내서 쓸 때도 유용하겠다는 생각이 들었다..!!

 

 

CAM00742.jpg

 

 

특히, 6장부터는 maoqups 라는 홈페이지를 통해

직접 웹 페이지를 디자인하는 연습을 할 수 있다!

프로토티이핑이라고 하는 단어를 처음 들었는데,

양산에 앞서 제작해 보는 시스템 개발상의 기법을 일컫는 것으로

위에 언급했듯이 연습하는 의미로 쓰이는 것 같다

(웹디자인잘알지못하는1인)

그럼에도 불구하고 책에서 하라는 대로 따라하면서

웹페이지 디자인의 스케치를 해볼 수 있어 재미있었다!!

 

CAM00743.jpg

 

 

 

 

이 책을 읽으면서 문득 작년에 전자책을 일러스트와 포토샵으로 배웠던 기억이 났다.

가로와 세로의 길이에 맞게, 다양한 기계의 형태에 맞춰 전자책을 디자인하는 수업이었는데

그때 당시에는 시키는 대로 제작했고 초짜였던지라 

웹 페이지에 대한 디자인을 어떻게 시작해야하는지 아예 알지 못했다.

 

이 책을 읽으면서 느낀 것은,

웹을 직접 만드는 사람들, 또 직접 제작은 하지 않지만 웹페이지를 디자인하는 디자이너 두 사람 모두가

기초적인 디자인 지식뿐만 아니라

웹 전반을 제작하는 것에 기초 지식을 갖춘다면 정말 멋진 웹페이지를 만들 수 있다는 생각!!

 

책을 덮고 나니 웹페이지를 어떻게 디자인할 지 기초적인 그림이 머릿속에 그려지는 듯하다! 

이 책의 후속으로 <만들면서 배우는 모던 웹사이트 제작> 도 무척 궁금해졌다.

 

 

+

웹디자이너로 일을 하면서 보통 보게 되는 책은 포토샵, 일러스트, 프로그램 관련 책들인데 대부분 실무에서 바로 써먹을 수 있는 실습위주의 책들을 보게 된다. 포토샵의 경우 이미지 작업과 관련된 스킬 작업 , 일러스트의 경우 드로잉과 관련된 스킬 작업 등등. 물론 이러한 책들도 분명 도움이 되고 필요하다. 그러다가 한빛미디어의 <모던 웹사이트 디자인>이란 책을 보게되었는데 구성이 참 독특했다. 뭐랄까? 분명 필요하고 알아야 하는 것들인데 그 동안 간과해 왔던 것들이랄까? 그런 내용들을 이 책을 통해 알게 되었다.

 

+

책에도 소개되어 있지만 이 책은 총 9장으로 구성되어 있다. 크게 소양, 실무, 실습으로 분류되어 있다. 혹 이 책에서 어떤 이미지 작업 스킬을 배울 수 있을까?를 기대한다면 다른 책을 찾아보길 바란다. 이 책은 그런 유의 스킬을 배우기에 앞서 웹디자이너라면 기본적으로 알고 넘어가야 하는 것들을 주로 다루기 때문이다. 첫째 작업 효율성을 높이기 위한 작업 환경 설정포토샵 성능을 최적화하는 알찬 팁 등등 웹 디자인을 하기에 앞서 준비해야 할 것들을 배우게 된다. 나의 경우 그냥 포토샵 프로그램에서 바로 이미지 작업으로 넘어가는 경우가 대부분이었는데, 그래서 그런지 어쩔 땐 로딩 속도가 느려 제때 퇴근조차 하지 못하고 야근업무까지 해야 했던 경우가 조금 있었다. 일종의 귀차니즘을 기반으로 한 무지였달까? 분명 무슨 일을 할 때 준비과정은 반드시 필요하다. 그런데 이 준비과정을 대수롭지 않게 생각하고 바로 본론으로 넘어가는 경우들이 꽤 있다. 그런데 이게 또 실무에서는 크게 문제가 되진 않는다. (물론 디자이너 본인은 피곤할 수 있다.) 그냥 제대로 된 결과물만 나오면 어쨌든 된 거니까. 그래도 기왕 이 책을 보고, 읽게 되었으니 앞으론 보고 익힌 내용들을 토대로 작업을 해보려 한다. 사상누각만큼 어리석은 일은 없으니까.

 

둘째 <이미지보단 타이포그래피> 이 소제목에 대해선 나도 꽤 공감한다. 웹디자인, 뭔가 디자인이라고 하면 대부분의 사람들은 텍스트보다는 이미지를 먼저 떠올리는 것이 보통이다. 그러나 웹디자인 영역은 특히나 텍스트 즉 타이포그래피가 굉장히 중요하다. 웹 디자인을 구성하는 95%가 타이포그래피라 해도 과언이 아닐 정도로. 속된 말로 이미지는 거들 뿐. 웹 디자인과 비슷한 영역의 편집 디자인도 마찬가지이고. 가끔 웹 서핑을 하다 보면 다양한 웹 사이트를 방문하게 되고 보게 되는데 <지나치게 화려한 폰트>를 사용한다든가, 복잡하고 장식적인 요소들로 도배를 한다든가 하는 경우들을 본다. 이는 가독성에 영향을 미치고 정확한 정보도 얻기 힘들고 결과적으로 잘~ 된 웹 디자인이라고도 할 수 없다. 이렇듯 간혹 타이포그래피의 중요성에 대해 간과하고 지나가는 많은 디자이너들에게 분명 도움이 될 장이다.

 

셋째 <웹 그리드 시스템> 아주 예외적인 경우들은 빼고, 대부분 우리가 보는 이미지들은 어떤 규칙에 의해 구성되어 있는데 그것이 바로 그리드 시스템이다. 들쭉날쭉해 보이는 디자인들도 자세히 관찰하면 그리드 시스템을 기반으로 하고 있음을 알 수 있다. 그만큼 웹 디자인을 쌓는 기초 공사가 그리드인 셈이다. 포토샵의 가이드 라인을 활용해 콘텐츠가 짜임새 있게 들어갈 부분과 여백이 있어야 할 부분을 나눈다. 그래서 뭔가 휑해 보이는 이미지들도 이상하게 여백의 미가 돋보이고, 뭔가 꽉 차 있어서 굉장히 답답해 보일 것 같은데도 균형감과 안정감이 느껴지는 이미지들을 본 적이 있을 것이다. 이런 이미지들이 바로 실제 이미지에선 보이지 않는 그리드 시스템을 활용한 것들이다. <모던 웹사이트 디자인>에서는 웹 사이트 디자인을 위한 그리드 시스템 설계 및 단축키를 활용한 그리드 토글에 대해 배울 수 있다.

 

넷째, 다섯째, 여섯째, 일곱째 장에서는 웹 컬러 매니지먼트 <웹 브라우저마다 컬러가 다르게 보이는 이유>, <웹 컬러 작업을 위한 포토샵 설정 및 컬러 스워치 활용>등을 배울 수 있고, 업무 생산성을 높이는 이미지 슬라이싱, 큰 그림을 그려 보는 빠른 프로토타이핑, 웹 그래픽 디자인 등도 배울 수 있다. 일곱째 장까지는 웹 디자이너로서 반드시 알아야 하지만 간과하고 지나칠 수 있는 것들을 아주 자세하게 배울 수 있는 장이다. 나 역시 이 책으로 그동안 놓쳤던 기본기를 탄탄하게 만들 수 있게 되었다. 마지막 여덟 번째, 아홉 번째 장은 최근 웹 디자인 트렌드를 볼 수 있는 장이다. 바로 반응형 웹 그래픽 디자인과 차세대 웹 벡터 그래픽 디자인이 그것인데, 나 역시 최근 아카데미를 통해 반응형 웹을 배웠던 터라, 더욱 반가웠다. 해외 사이트의 경우 반응형 웹사이트를 많이 만나 볼 수 있는데, 아직까지 국내 웹 사이트들은 PC를 기반으로 한 웹 사이트와 별도의 모바일 사이트가 주를 이루고 있다. 반응형 웹이란 내가 어떤 디바이스를 통해 웹사이트에 접속을 하더라도 동일한 정보를 얻을 수 있는 것을 말한다. <즉 디바이스의 해상도에 반응함으로써 그 화면에서 보여줄 수 있는 최적, 최상의 모습으로 표현되는 것>

 

이렇듯 웹 디자이너로서 갖춰야 할 기본기, 웹 시장 최신 동향까지 이 책 <모던 웹 사이트 디자인>한 권으로 익힐 수 있다. 그런 후에 퀄리티 있는 이미지 작업이나, 개성을 살린 드로잉 작업물들은 다른 책을 통해 배우고 익히면 될 것이다.

포토샵 패널은 어느정도 알지만, 전문적으로 사용하지는 못하는 분들이거나,
혹은 html 코딩을 하고 있지만, 협업을 위한 가이드를 제작해본 경험이 없는 디자이너분들은,
이 책을 읽고 나면 똑똑한 사수를 만난 것 같은 기분이 드실 것 같습니다.
9장의 내용 중 단 한 장의 내용만 알아도 뭔가, 전문가 같다는 느낌이 드실 만한 내용들이 담겨 있습니다.

각 장의 내용 중에서 도움이 많이 되었던 내용들을 중심으로 소개하고자 합니다.


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


저는 포토샵과 html을 주로 사용하는 웹 디자이너입니다.


집에서는 주로 탭북 z-160을 사용하는데,

얼마 전부터 스크래치 공간이 부족해서 저장이 안된다는 메시지가 생겼습니다.



스크래치가 뭔지 제가 어찌 알았겠어요. ㅠ.ㅠ

영문을 몰라, 불필요한 프로그램들만 정리를 했는데, 한참 디스크를 지워야 겨우 저장이 되더라구요.

(아까운 제 미드를 다 지워야했...다는)



무슨 이유 때문인지 몰랐는데, 스크래치 공간을 환경설정에서 다시 설정할 수 있었던 걸 이제야 알게 되었어요.

스크래치 디스크를 새로 설정하고, 불필요한 프리셋, 블러시 등을 삭제해서

이제는 포토샵 처음 설치했던 때처럼 쌩쌩~~ 자~~알 돌아갑니다.





2장. 웹 타이포 그래피



웹디자인에서 타이포 그래피가 얼마나 중요한 것인지는 아마 다들 아시리라 생각이 들어요.



이미지가 아무리 예뻐도, 어울리지 않는, 흐릿한 글씨 투성이라면,

사용자는 1초도 사이트에 머무르지 않을지도~!




가이드 문서는 웹 사이트 전체에서 동일한 폼을 유지하도록 하는 데 중요한 기준이 될 수 있습니다.



2장에서는 스타일 가이드 만드는 법이,



3장에서는 2장에서 만든 그리드를 쉽게 만들 수 있도록 플러그 인을 사용하는 법을 소개하고 있습니다.






3장. 웹 그리드 시스템


플러그 인이 생소한 분도 계시겠지만, 플로그인 사용은 폰트 설치처럼 간단합니다. 파일은 다운 받고, 더블 클릭만 하면 설치 완료.



책에서 소개된 guideguide.me 에서 그리드 파일을 받아서 설치해봤는데요, 신세계를 경험했습니다. ㅋㅋ

구도 잡기가 한결 쉬워지겠어요.

설치가 완료되면

문자 설정 채널처럼 가이드 채널이 생깁니다. 원하는 수치를 넣고 GG 버튼을 누르면 끝.

설정한 간격만큼 다큐먼틍 가이드 라인이 자동으로 생깁니다.


다만 한가지 함정은,

책에서 제시한 수치를 그대로 사용하시는 편이 여백의 수치를 소수점 없이 조정하기에 가장 간편하다는 것이죠.

(고로... 이전에 작업했던 사이즈는 width 값이 달라서 .... ㅎㅎ ;;

지금 하던 대로 할 수밖에 없을 것 같아요. ㅠ.ㅠ

진작에 알았으면 좋았을 걸, 다음 작업에는 꼭 적용해 보겠습니다. :) )





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


또 한 가지 중요한 정보를 바로 캘리브레이션 사용법이 제시되어 있다는 것이었습니다.



모니터마다 기본 색상에 조금씩 차이가 있습니다.

하얀색에 노랑이나 파랑이 더 느껴지는 경우나, 화이트가 그레이처럼 느껴지는 경우 등

모니터 색상 차이를 한번씩은 느껴보셨을 거에요.



컬러 샘플링 같은 경우는, 쿨러도 있고, 사실 순간순간 어울리는 색상을 찾아서 쓰는 경우도 많은데요,

하지만 모니터 자체의 색상이 다르다면 아무리 샘플링을 잘 하고,

쿨러에 많은 샘플을 보관하고 있더라도 소용이 없겠죠.



캘리브레이션은 모니터의 색상은 실제와 비슷하도록 조정해주는 기구입니다.



저는 비싼 모니터를 쓰고 있지는 못해서(언젠간 꼭 애플 모니터를 마련하고 싶지만요.)

캘리브레이션을 꼭 사용해 보고 싶었어요.

정확한 사용법을 구글이나 지식인도 잘 가르쳐주지 않더라고요. ㅠ.ㅠ

(너무 어려운 설명으로 어지러울 뿐 ;;;)

좌절하고 캘리브레이션을 포기했었는데

이렇게 책에서 다뤄주니, 깜짝 선물을 만난 것처럼 기뻤습니다.


책에서 소개한 캘리브레이션 도구는 국내 사이트는 33~42만원 선에서 판매되더군요.

데탑, 왠만한 모니터의 가격을 생각하면 결코 싼 가격이 아니죠.

하지만 내 작업의 퀄리티가 올라간다는데, 충분히 투자의 가치는 있을 것 같습니다.

(아마존에서 주문하시면 180$ 선에서 구매하실 수 있습니다. ^^)
하반기에는 캘리브레이션을 하나 구매해야겠어요. ^^


5장. 업무 생선성을 높이는 이미지 슬라이싱

그동안 슬라이싱 선을 하나하나 그렸던 것이 얼마나 ㅠ.ㅠ 불필요한 일이었던 것인지!!
가이드 라인을 슬라이싱 선으로 쓸 수 있는 걸, 혹시 아셨나요?

(저만 몰랐을 수도... ㅠ.ㅠ)



또 슬라이싱 선을 병합할 수도 있고요,

그리고, 그룹별로 웹용 파일 저장을 자동으로 해주는 plug-in도 있더군요.



이건 정말 작업시간을 1/3은 줄여줄 수 있는 소중한 기능인 것 같습니다.

또 그룹명에 파일로 사용할 레이블을 적어두면, 슬라이싱 할 때마다 파일명을 고칠 필요도 없어집니다.





아쉽게도 cs4 이상 사용자에게만 가능한 플러그인이지만,

cs4 이상 사용자가 아니라면 액션을 등록해서 사용해도 간단히 슬라이싱 하실 수 있으니,

슬라이싱에 드는 작업시간을 줄이고 싶으셨던 분들은

꼭~~ 꼬~~~~~~~~~옥 읽어 보시기를 추천합니다.





6~7장. 웹 프로토타이핑, 프로토타이핑을 기반으로 한 웹 그래픽 디자인


프로토타이핑이란 용어가 낯설었는데요,

html 시안을 간단히 만들어 보는 것 정도로 생각할 수 있을 듯 하네요.



이미지 디자인을 완성하고, html 로 컨펌을 받자면 시간이 많이 걸리죠.

그럴 때 moqups를 사용하면메인 페이지와 서브 페이지의 프레임을

짧은 시간에 만들어 보여줄 수 있는 장점이 있습니다.



그런데, 이 경우는

전체적인 웹 사이트 구도가 머리에 잡혀 있고

최소 2~3명의 서브 디자이너가 있는

경력있는 웹 디자이너에게 유용할 것 같네요.



저같은 신입의 경우에는 디자인을 하면서 홈페이지 목적에 맞게 변경하는 경우가 많아서

프로토 타이핑을 만드는 것이 오히려

더 작업시간을 더 길게 만들 수도 있다는 생각입니다.



그러나 프리랜서로의 전향을 꿈꾸고 있는 디자이너라면
moqups로 간단히 고객 컨펌을 얻을 프로토타이핑을 마칠 수 있으니 많은 도움이 되실 수 있으리라 생각이 듭니다.





8장. 반응형 웹 디자인


반응형 웹 RWD, 요즘 많이 듣게 되는 용어이시죠?


PC , 태블릿, 모바일 각각의 플랫폼 width값에 맞춰

일정 수준 이하의 크기로 떨어질 때 그에 맞춘 웹을 보여주는 것이 바로 RWD입니다.



요즘은 삼성그룹의 홈페이지가 RWD로는 가장 샘플링 해볼 만 하지 않나 싶습니다~

(rwd를 처음 들어보시는 분은 삼성그룹 홈을 여시고, 브라우저 창의 사이즈를 늘렸다 줄였다 반복해 보세요~~)



저는 아직 한번도 RWD를 제작해 보지는 않았지만 올해 안에 꼭 배워보고 싶은 기술 중에 하나였죠.

디자인 하는 법은 이제 배웠으니, 코딩을 배우면 되겠어요. ^^



짧게 8장을 요약하자면 "실 사이즈", 1000px, 760px, 480px, 320px 총 5개의 이미지를 제작하는 것이

반응형 웹사이트를 디자인하는 방법이라는 것입니다.



디자인 페이지가 총 100페이지 짜리 볼륨이라면 총 500장의 페이지가 ;;;

이 어머어마한 작업을 어떻게 하면 빠르게 할 수 있을지가 바로

8장의 내용이랍니다.

야근없이 반응형 웹을 제작하시려면 꼭 보셔야겠죠? ^^:





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

포토샵 작업물을 그대로 벡터 파일로 만들고 싶다는 생각을 해보신 분들이 있으실 거 같아요.
9장에서는 포토샵의 패스 작업을 그대로 AI에서도 할 수 있도록 해주는 방법이 소개 되어 있습니다.

벡터이미지, 웹타이포 그래피까지 조절이 되면
어떤 모니터에서도 선명하게 잘 보이는 작업 결과물을 확인하실 수 있겠네요.



프로페셔널 웹디자이너를 향해서~~
즐거운 독서 되시길~!

포토샵 패널은 어느정도 알지만, 전문적으로 사용하지는 못하는 분들이거나,
혹은 html 코딩을 하고 있지만, 협업을 위한 가이드를 제작해본 경험이 없는 디자이너분들은,
이 책을 읽고 나면 똑똑한 사수를 만난 것 같은 기분이 드실 것 같습니다.
9장의 내용 중 단 한 장의 내용만 알아도 뭔가, 전문가 같다는 느낌이 드실 만한 내용들이 담겨 있습니다.

각 장의 내용 중에서 도움이 많이 되었던 내용들을 중심으로 소개하고자 합니다.


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


저는 포토샵과 html을 주로 사용하는 웹 디자이너입니다.


집에서는 주로 탭북 z-160을 사용하는데,

얼마 전부터 스크래치 공간이 부족해서 저장이 안된다는 메시지가 생겼습니다.



스크래치가 뭔지 제가 어찌 알았겠어요. ㅠ.ㅠ

영문을 몰라, 불필요한 프로그램들만 정리를 했는데, 한참 디스크를 지워야 겨우 저장이 되더라구요.

(아까운 제 미드를 다 지워야했...다는)



무슨 이유 때문인지 몰랐는데, 스크래치 공간을 환경설정에서 다시 설정할 수 있었던 걸 이제야 알게 되었어요.

스크래치 디스크를 새로 설정하고, 불필요한 프리셋, 블러시 등을 삭제해서

이제는 포토샵 처음 설치했던 때처럼 쌩쌩~~ 자~~알 돌아갑니다.





2장. 웹 타이포 그래피



웹디자인에서 타이포 그래피가 얼마나 중요한 것인지는 아마 다들 아시리라 생각이 들어요.



이미지가 아무리 예뻐도, 어울리지 않는, 흐릿한 글씨 투성이라면,

사용자는 1초도 사이트에 머무르지 않을지도~!




가이드 문서는 웹 사이트 전체에서 동일한 폼을 유지하도록 하는 데 중요한 기준이 될 수 있습니다.



2장에서는 스타일 가이드 만드는 법이,



3장에서는 2장에서 만든 그리드를 쉽게 만들 수 있도록 플러그 인을 사용하는 법을 소개하고 있습니다.






3장. 웹 그리드 시스템


플러그 인이 생소한 분도 계시겠지만, 플로그인 사용은 폰트 설치처럼 간단합니다. 파일은 다운 받고, 더블 클릭만 하면 설치 완료.



책에서 소개된 guideguide.me 에서 그리드 파일을 받아서 설치해봤는데요, 신세계를 경험했습니다. ㅋㅋ

구도 잡기가 한결 쉬워지겠어요.

설치가 완료되면

문자 설정 채널처럼 가이드 채널이 생깁니다. 원하는 수치를 넣고 GG 버튼을 누르면 끝.

설정한 간격만큼 다큐먼틍 가이드 라인이 자동으로 생깁니다.


다만 한가지 함정은,

책에서 제시한 수치를 그대로 사용하시는 편이 여백의 수치를 소수점 없이 조정하기에 가장 간편하다는 것이죠.

(고로... 이전에 작업했던 사이즈는 width 값이 달라서 .... ㅎㅎ ;;

지금 하던 대로 할 수밖에 없을 것 같아요. ㅠ.ㅠ

진작에 알았으면 좋았을 걸, 다음 작업에는 꼭 적용해 보겠습니다. :) )





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


또 한 가지 중요한 정보를 바로 캘리브레이션 사용법이 제시되어 있다는 것이었습니다.



모니터마다 기본 색상에 조금씩 차이가 있습니다.

하얀색에 노랑이나 파랑이 더 느껴지는 경우나, 화이트가 그레이처럼 느껴지는 경우 등

모니터 색상 차이를 한번씩은 느껴보셨을 거에요.



컬러 샘플링 같은 경우는, 쿨러도 있고, 사실 순간순간 어울리는 색상을 찾아서 쓰는 경우도 많은데요,

하지만 모니터 자체의 색상이 다르다면 아무리 샘플링을 잘 하고,

쿨러에 많은 샘플을 보관하고 있더라도 소용이 없겠죠.



캘리브레이션은 모니터의 색상은 실제와 비슷하도록 조정해주는 기구입니다.



저는 비싼 모니터를 쓰고 있지는 못해서(언젠간 꼭 애플 모니터를 마련하고 싶지만요.)

캘리브레이션을 꼭 사용해 보고 싶었어요.

정확한 사용법을 구글이나 지식인도 잘 가르쳐주지 않더라고요. ㅠ.ㅠ

(너무 어려운 설명으로 어지러울 뿐 ;;;)

좌절하고 캘리브레이션을 포기했었는데

이렇게 책에서 다뤄주니, 깜짝 선물을 만난 것처럼 기뻤습니다.


책에서 소개한 캘리브레이션 도구는 국내 사이트는 33~42만원 선에서 판매되더군요.

데탑, 왠만한 모니터의 가격을 생각하면 결코 싼 가격이 아니죠.

하지만 내 작업의 퀄리티가 올라간다는데, 충분히 투자의 가치는 있을 것 같습니다.

(아마존에서 주문하시면 180$ 선에서 구매하실 수 있습니다. ^^)
하반기에는 캘리브레이션을 하나 구매해야겠어요. ^^


5장. 업무 생선성을 높이는 이미지 슬라이싱

그동안 슬라이싱 선을 하나하나 그렸던 것이 얼마나 ㅠ.ㅠ 불필요한 일이었던 것인지!!
가이드 라인을 슬라이싱 선으로 쓸 수 있는 걸, 혹시 아셨나요?

(저만 몰랐을 수도... ㅠ.ㅠ)



또 슬라이싱 선을 병합할 수도 있고요,

그리고, 그룹별로 웹용 파일 저장을 자동으로 해주는 plug-in도 있더군요.



이건 정말 작업시간을 1/3은 줄여줄 수 있는 소중한 기능인 것 같습니다.

또 그룹명에 파일로 사용할 레이블을 적어두면, 슬라이싱 할 때마다 파일명을 고칠 필요도 없어집니다.





아쉽게도 cs4 이상 사용자에게만 가능한 플러그인이지만,

cs4 이상 사용자가 아니라면 액션을 등록해서 사용해도 간단히 슬라이싱 하실 수 있으니,

슬라이싱에 드는 작업시간을 줄이고 싶으셨던 분들은

꼭~~ 꼬~~~~~~~~~옥 읽어 보시기를 추천합니다.





6~7장. 웹 프로토타이핑, 프로토타이핑을 기반으로 한 웹 그래픽 디자인


프로토타이핑이란 용어가 낯설었는데요,

html 시안을 간단히 만들어 보는 것 정도로 생각할 수 있을 듯 하네요.



이미지 디자인을 완성하고, html 로 컨펌을 받자면 시간이 많이 걸리죠.

그럴 때 moqups를 사용하면메인 페이지와 서브 페이지의 프레임을

짧은 시간에 만들어 보여줄 수 있는 장점이 있습니다.



그런데, 이 경우는

전체적인 웹 사이트 구도가 머리에 잡혀 있고

최소 2~3명의 서브 디자이너가 있는

경력있는 웹 디자이너에게 유용할 것 같네요.



저같은 신입의 경우에는 디자인을 하면서 홈페이지 목적에 맞게 변경하는 경우가 많아서

프로토 타이핑을 만드는 것이 오히려

더 작업시간을 더 길게 만들 수도 있다는 생각입니다.



그러나 프리랜서로의 전향을 꿈꾸고 있는 디자이너라면
moqups로 간단히 고객 컨펌을 얻을 프로토타이핑을 마칠 수 있으니 많은 도움이 되실 수 있으리라 생각이 듭니다.





8장. 반응형 웹 디자인


반응형 웹 RWD, 요즘 많이 듣게 되는 용어이시죠?


PC , 태블릿, 모바일 각각의 플랫폼 width값에 맞춰

일정 수준 이하의 크기로 떨어질 때 그에 맞춘 웹을 보여주는 것이 바로 RWD입니다.



요즘은 삼성그룹의 홈페이지가 RWD로는 가장 샘플링 해볼 만 하지 않나 싶습니다~

(rwd를 처음 들어보시는 분은 삼성그룹 홈을 여시고, 브라우저 창의 사이즈를 늘렸다 줄였다 반복해 보세요~~)



저는 아직 한번도 RWD를 제작해 보지는 않았지만 올해 안에 꼭 배워보고 싶은 기술 중에 하나였죠.

디자인 하는 법은 이제 배웠으니, 코딩을 배우면 되겠어요. ^^



짧게 8장을 요약하자면 "실 사이즈", 1000px, 760px, 480px, 320px 총 5개의 이미지를 제작하는 것이

반응형 웹사이트를 디자인하는 방법이라는 것입니다.



디자인 페이지가 총 100페이지 짜리 볼륨이라면 총 500장의 페이지가 ;;;

이 어머어마한 작업을 어떻게 하면 빠르게 할 수 있을지가 바로

8장의 내용이랍니다.

야근없이 반응형 웹을 제작하시려면 꼭 보셔야겠죠? ^^:





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

포토샵 작업물을 그대로 벡터 파일로 만들고 싶다는 생각을 해보신 분들이 있으실 거 같아요.
9장에서는 포토샵의 패스 작업을 그대로 AI에서도 할 수 있도록 해주는 방법이 소개 되어 있습니다.

벡터이미지, 웹타이포 그래피까지 조절이 되면
어떤 모니터에서도 선명하게 잘 보이는 작업 결과물을 확인하실 수 있겠네요.



프로페셔널 웹디자이너를 향해서~~
즐거운 독서 되시길~!

야무(yamoo9, 지훈)님이 저술하신 "만들면서 배우는 모던 웹사이트 디자인" 이라는 책 입니다.


이 책은 2014년 3월에 발행한 따끈따끈한 책이지요^^


책을 처음 딱! 보았을 때 세련되어 보이지 않나요?
표지 타이포그래피가 적박으로 되어 있어서 실제로 보면 정말 예쁘고 깔끔합니다.
책 제목 처럼 모던한 느낌도 물씬 듭니다.

먼저, 이 책을 저술하신 야무님은 오늘 소개할 책 이전에도 2012년에 만들면서 배우는 HTML5 + CSS3 + jQuery (만들면 쉽다 만들면 재밌다 만들면 놀랍다) 라는 책을 저술하셨죠.


이 책을 리뷰하면서 느낀 점은,

"웹 디자인 작업 시 고려하지 못하고 지나갈 수 있는 점들을 하나하나 짚어주고 있다는 점이 가장 인상적이었다" 는 것입니다. 그리고 깨알 Tip, 야무샘! 코너 등을 보며 저자님의 꼼꼼함을 느낄 수 있었습니다.

무엇보다 Windows, Mac 둘 다 고려해서 설명을 해주셔서 제 개인적으로 많은 도움이 되었습니다.

웹디자인 실무에 대해서 알고 싶거나 현재 능력을 향상 시키고 싶으신 분들에게 꼭 추천하고 싶은 책입니다.

한번쯤 꼭 봐야할 필독서라는 생각이 듭니다.


좀 더 자세한 리뷰는 http://wisdomh.tistory.com/119 를 참고해 주세요^^

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 상품명 :
만들면서 배우는 모던 웹사이트 디자인
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
만들면서 배우는 모던 웹사이트 디자인
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
만들면서 배우는 모던 웹사이트 디자인
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실

최근 본 상품1