• 반응형 웹디자인(증보판)
  • 어비가 들려주는 생생한 반응형 웹디자인 노하우

  • 송태민 지음

  • 어비의 실무노트_002
  • ISBN: 9788998139391
  • 27,000원 | 2013년 11월 30일 발행 | 324쪽



반응형 웹디자인 제작을 위한 실무 노하우를 알려드립니다!

이 책은 반응형 웹디자인을 제작하는 기획, 디자인, 개발의 실무 노하우를 담은 책입니다. 실무에 도움되는 유용한 설명과 예제를 통해 초보자부터 고급 독자가 모두 쉽고 빠르게 이해할 수 있게 도와줍니다. 데스크톱 웹사이트를 비롯해 태블릿 웹사이트, 모바일 웹사이트 제작까지, 이제는 반응형 웹디자인으로 한 번에 모든 고민을 해결해 보세요. 모든 디바이스에서 최적화할 수 있는 노하우를 단계별 과정을 통해 하나씩 자세히 소개합니다.

또한 저자가 직접 강의한 동영상 강좌를 직접 들을 수 있습니다. 아래 소개한 링크를 클릭하거나 책과 함께 제공하는 도서 앱을 내려받으면 저자분의 강의를 들을 수 있습니다.

  • 도서앱

QR 코드를 스캔해서 도서 앱을 내려받으면 책에서 설명한 웹사이트를 확인하거나 동영상 강좌를 들을 수 있습니다.

<책 속으로>

스마트 미디어 시대가 도래하면서 데스크톱용 사이트와 태블릿 및 스마트폰에서 사용하는 모바일 웹을 하나로 통합한 사이트의 필요성이 높아졌습니다. 반응형 웹디자인을 적용한 사이트는 기능적인 측면에서 사용자의 접근성을 확대하고 어떤 디바이스를 사용하든 최적화된 형태의 확장성을 제공합니다. 비용 측면에서도 데스크톱용 사이트와 모바일용 사이트를 따로 제작하지 않아도 되므로 제작 시간과 관리 비용을 절감할 수 있습니다.

반응형 웹디자인에서도 볼 수 있듯이 향후 웹디자인의 트렌드는 당장 신기술의 등장에 의존하기보다는 기존 기술을 융합하는 축으로 발전할 것입니다. 이른바 웹디자인 융합 현상이 시작되는 지금, 이 책은 디자이너, 개발자, 기획자에게 유용한 내용을 담고 있습니다. 특히 이론에서부터 실습과 예제로 이어지는 구성은 웹디자인을 처음 시작하는 초심자는 물론 기존 웹디자인에 익숙한 전문가의 내공을 향상시키는 데 기여할 것입니다.

마지막으로 이 책의 저자인 어비 님은 수십 차례의 강연과 개인전을 통해 학계와 산업계에서 인정받고 있는 웹디자이너로서, 이미 《크리에이티브 디자이너를 위한 웹표준》, 《어비의 모바일 HTML》, 《어비의 모바일 웹》 등의 베스트셀러로 기록된 책을 여러 번 출판한 바 있습니다. 따라서 ‘어비’라는 이름만으로도 이 책이 여러분들에게 줄 영향력이 적지 않으리라 확신합니다.

-- 양제민(정보통신 공학박사) 님의 추천사 중에서

<베타리뷰 서평>

“단순하게 마크업만 하는 것이 아닌 다양한 방법론을 제시하고 실무에 바로 적용하는 사례를 들어 설명하고 있습니다.”

-- 박찬혜, NHN 디자이너

“어느 정도 기초를 다진 전문가가 새롭게 변화하는 반응형 웹 트렌드를 이해하고 실무에서 활용하거나, 기초부터 닦아가려는 초급 사용자가 기초 자료들과 함께 응용해 발 빠르게 기본기를 닦기에 유용한 책이 될 것입니다.”

-- 류시형, UX 디자이너

“이 책의 특징을 한 문장으로 표현한다면 “궁금한 부분들을 디자이너 관점에서 풀어 놓았다”라고 표현하고 싶습니다.”

-- 박근용, 프리랜서 디자이너

“독자들은 단순하게 내용만 보고 넘어가는 것이 아니라 직접 코드를 작성해 보면서 공부해 나가기를 권장합니다.”

-- 오동우, 어비팩토리 UI 개발자 과장

“새로운 트렌드와 기술들이 끊임없이 발전하는 IT 시장에서 급격하게 변화하는 기술들과 트렌드 등을 쉽게 공부할 수 있게 도와주신 저자님께 감사를 표한다.”

-- 박성용, 프리랜서 UI개발자

송태민

새로운 트렌드를 실무에 맞게 받아들이고 배움을 공유할 줄 아는 한국예술원 교수이자 어비팩토리의 공장장입니다. 다양한 경험을 즐기면서 전문적인 업무 능력을 지니고 있습니다. 개발 작업과 동시에 디자인 작품을 전시하기도 하며, 음반 기획사를 운영하고 있습니다. 힙합그룹 왑듀오의 리더로서 작곡, 작사, 래퍼로도 활동하고 있습니다.

[약력]

  • 현) 어비 팩토리 공장장 (대표)
  • 현) 한국예술원 멀티미디어과 겸임교수
  • 전) SK플래닛 UX디자이너
  • 전) SK커뮤니케이션즈 UX, UI 디자이너
  • 전) eBay Korea UX 디자이너
  • 전) 그래텍 곰TV UI, GUI 디자이너

  • 국민대 디자인대학원 시각디자인 석사과정

  • 순천향대학교 국제문화학과 졸업
  • Adobe Creative Leader

[주요 저서]

  • <크리에이티브 디자이너를 위한 웹 표준> (제우미디어, 2009)
  • <어비의 모바일 HTML> (에세이, 2011)
  • <어비의 모바일 웹> (길벗, 2012)
  • (한빛미디어, 2013)

[주요 강의 경력]

한국예술원 출강, 디자인 정글, 국민대/경원대/순천향대 특강, 신한은행/신세계 I&C/능률교육/비즈델리/1인창조기업/웹어워드코리아/고려대사이버대학교/리얼메디/배움닷컴/메타컨텐츠 등 다수 회사 특강 진행

한국인터넷진흥원/한국인터넷전문가 협회/Adobe Korea 세미나/T아카데미/제주시/제주테크노파크/SK네트웍스/SK텔레콤 등 다수 세미나 스피커 진행

[개인 사이트]

[질문 사이트]

  • ▣ 1장: 반응형 웹디자인 살펴보기
    • 1.1_PC와 모바일의 현실
      • PC 환경과 해상도의 이해
      • OS 및 브라우저 점유율
      • 모바일 환경과 해상도의 이해
      • 모바일 OS 및 브라우저 점유율
      • HTML5 지원 브라우저 현황
    • 1.2_반응형 웹디자인이란?
    • 1.3_반응형 웹디자인의 예
      • 해외사례
      • 국내사례
    • 1.4_반응형 웹디자인의 3가지 핵심 기법
      • Fluid Grids
      • Flexible Image
      • Media Queries
    • 1.5_반응형 웹디자인의 단점
      • 미디어 쿼리를 지원하지 않는 브라우저
      • 필요없는 코드, 이미지의 비합리적인 사용
    •  
  • ▣ 2장: 퍼센트와 CSS3를 이용하자
    • 2.1_픽셀, 퍼센트, 이엠 단위
    • 2.2_뷰포트(viewport)
    • 2.3_CSS3
      • 시각효과
      • 폰트사용
      • 트랜지셔널(Transitional)
      • CSS3 벤더 프리픽스
      • CSS3에서 추가된 대표 기능
        • border-radius
        • 미리보기
        • text-shadow
        • box-shadow
        • multiple background images
        • opacity
        • RGBA
        • Gradient
    • 2.4_HTML5, CSS3의 브라우저 호환성
      • HTML5, CSS3 호환성 통계
      • Reset CSS
        • Reset CSS의 의미
        • 에릭 마이어의 Reset CSS 2.0
        • HTML5 Doctor CSS Reset
        • Yahoo! (YUI 3) Reset CSS
        • Universal Selector ‘*’ Reset
        • Normailze CSS 1.0
        • Naver.com Reset CSS
        • Daum.net Reset CSS
        • Nate.com Reset CSS
        • UhBee Reset CSS
    •  
  • ▣ 3장: 반응형 웹디자인 기획부터 시작이다
    • 3.1_반응형 웹디자인 기획 방법
      • IA(Information Architecture) 설계
      • UI(User Interface) 설계
      • UI(User Interface) 디자인기획
    • 3.2_반응형 웹디자인 패턴스타일
      • Mostly Fluid
        • 레이아웃
        • 디자인 예시
        • 실무 소스로 살펴보기
      • Column Drop
        • 레이아웃
        • 디자인 예시
        • 실무 소스로 살펴보기
      • Shifter
        • 레이아웃
        • 디자인 예시
        • 실무 소스로 살펴보기
      • Tiny
        • 레이아웃
        • 디자인 예시
        • 실무 소스로 살펴보기
      • Off Canvas
        • 레이아웃
        • 디자인 예시
        • 실무 소스로 살펴보기
    •  
  • ▣ 4장: 실무! 반응형 웹디자인 사이트 함께 만들어 보기
    • 4.1_디자인 살펴보기
      • 디자인 파악하기
    • 4.2_레이아웃 만들기
      • 레이아웃 파악하기
      • 기본 HTML 설정하기
        • meta태그, 아이콘, 파비콘 설정
        • 웹폰트 설정
        • 모바일 웹일 때 주소창 사라지게 설정
        • 기본 HTML 설정 완료
      • HTML로 만들어보는 레이아웃
      • CSS로 만들어보는 레이아웃
      • Reset CSS, Layout 최종 완성
      • 레이아웃 제작 실무 노하우
    • 4.3_반응형 웹으로 레이아웃 제작하기
      • 디자인 파악하기
      • 미디어 쿼리를 활용한 반응형 웹디자인 기초 설정
        • #wrap 영역 설정
        • #header 영역 설정
        • #main 영역 설정
        • #contents 영역 설정
        • #foot 영역 설정
        • 미디어 쿼리 설정 완성 및 확인하기
    • 4.4_PC버전 마크업 하기
      • 헤더 완성하기
        • 디자인 파악하기
        • H1 로고 만들기
      • 내비게이션 만들기
        • CSS3 활용 - nth-child, nth-last-child 구조적 가상 클래스 배우기
        • 전화걸기 만들기
        • Follow 썸네일 만들기(고정영역 썸네일 목록)
        • 뉴스 목록 만들기
        • 블로그 최근 게시물 만들기
        • 헤더 완성 확인하기
    • 4.5_메인/푸터 완성하기
      • 디자인 파악하기
      • 이미지 배너와 검색창 영역
        • 가변적인 검색창 배우기
        • max-width 배우기
        • 어비 폰트 목록 만들기
        • 주가정보 만들기
        • 유튜브 만들기
        • HTML5 활용 ? video, audio 배우기
        • 콘텐츠 목록 만들기
        • 푸터 만들기
      • 전체 코딩 소스 확인하기
      • 1200픽셀 이하의 해상도에서 최적화하기
    • 4.6_반응형 웹디자인으로 완성하기
      • 1200픽셀 이하의 해상도에서 최적화 하기
      • 1024픽셀 이하의 해상도에서 최적화 하기
      • 768픽셀 이하의 해상도에서 최적화 하기
      • 600픽셀 이하의 해상도에서 최적화 하기
      • 480픽셀 이하의 해상도에서 최적화 하기
    • 4.7_최종 완성 및 확인하기
      • 전체 소스보기
      • 모든 브라우저에서 테스트해보기
    •  
  • ▣ 5장: 실무 2탄! HTML5 보일러플레이트를 활용한 반응형 웹디자인 사이트 함께 만들어 보기
    • 5.1_HTML5 보일러플레이트란?
      • HTML5 보일러플레이트란
      • HTML5 보일러플레이트 활용법
      • 국내 사용자를 위한 어비의 HTML5 보일러플레이트
    • 5.2_디자인 살펴보기
      • 디자인 파악하기
    • 5.3_레이아웃 만들기
      • 레이아웃 파악하기
      • 어비의 HTML5 보일러플레이트 준비하기
      • HTML로 만들어보는 레이아웃
      • CSS로 만드는 레이아웃
      • 반응형 웹 레이아웃으로 만들기
    • 5.4_PC 버전용 코드 완성하기
      • 배경/헤더/떠 있는 배너 완성하기
      • 메인 배너 부분 완성하기
      • 콘텐츠 부분 완성하기
      • 푸터 완성하기
    • 5.5_반응형 웹디자인으로 완성하기
      • 480px 해상도에서 최적화하기
    • 5.6_최종 완성 및 확인
      • 전체 소스
    •  
    •  
  • ▣ 6장: 실무 팁 & 테크 모음
    • 6.1_반응형 웹디자인 사이트 테스팅하기
      • 사이트에 접속해서 확인하기
        • Mattkersley.com
        • Reponsinator.com
        • Screenqueri.es
      • Firefox 부가기능을 이용하여 테스팅하기
        • Web Developer - Responsive Layouts
        • Firebug
        • User Agent Switcher
    • 6.2_반응형 웹에 활용 가능한 HTML5 애니메이션 툴
      • 어도비 엣지 애니메이트
      • 구글 웹디자이너
    •  
  • ▣ 별책부록(동영상 강의)
    • 모바일 웹, 반응형 웹 실무 노하우 살펴보기
    • Adobe Edge Animate를 활용한 스마트 웹/모바일 만들기
  • P47, 본문에서

    그림 1-18 --> 그림 1-30 그림 1-19 --> 그림 1-31

  • P48, 본문에서

    그림 1-20 --> 그림 1-32 그림 1-21 --> 그림 1-33

  • P59, 본문에서

    그림 2-4 --> 그림 2-5 그림 2-5 --> 그림 2-6

  • P52, 코드에서

    @media all and (min-width:640px) and (max-width:640px) --> @media all and (min-width:480px) and (max-width:640px)

예제코드 관련 GitHub 페이지