반응형 웹디자인에 대해 아시나요? 실무 노하우를 먼저 쏙쏙 배우는 책을 기다리셨나요?

이 책은 반응형 웹디자인을 제작하는 기획, 디자인, 개발의 실무 노하우를 담은 책입니다. 실무에 도움되는 유용한 설명과 예제를 통해 초보자부터 고급 독자가 모두 쉽고 빠르게 이해할 수 있게 도와줍니다.

데스크톱 웹사이트, 태블릿 웹사이트, 모바일 웹사이트 제작까지, 이제는 반응형 웹디자인으로 한번에 모든 고민을 해결해 보세요. 모든 디바이스에서 최적화할 수 있는 실무 노하우를 단계별 과정을 통해 하나씩 자세히 소개합니다.

  • HTML5와 CSS3를 이용한 실무 예제
  • 해상도별로 구분된 미디어 쿼리 제작
  • 쉽게 따라 하며 배우는 실무 노하우

어비 송태민

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

<약력>

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

국민대 디자인대학원 시각디자인 석사과정 순천향대학교 국제문화학과 졸업 Adobe Creative Leader

<주요 저서>

《크리에이티브 디자이너를 위한 웹표준》 - 제우미디어, 2009 《어비의 모바일 HTML》 - 에세이, 2011 《어비의 모바일 웹》 - 길벗, 2012

  • ▣ 1장: 반응형 웹디자인 살펴보기
    • 1.1_PC와 모바일의 현실
      • PC 환경과 해상도의 이해
      • 모바일 환경과 해상도의 이해
    • 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
      • CSS3 벤더 프리픽스
      • CSS3에서 추가된 대표 기능
        • border-radius
        • text-shadow
        • box-shadow
        • multiple background images
        • opacity
        • RGBA
        • Gradient
    • 2.4_HTML5, CSS3의 브라우저 호환성
      • HTML5, CSS3 호환성 통계
      • Reset CSS
        • Reset CSS의 의미
        • 에릭 마이어’s Reset CSS2.0
        • HTML5 Doctor CSS Reset
        • Yahoo! (YUI 3) Reset CSS
        • Universal Selector ‘*’ Reset
        • Normailze CSS1.0
        • 국내 포털들의 CSS
        • UhBee Reset CSS
    •  
  • ▣ 3장: 반응형 웹디자인 기획부터 시작이다
    • 3.1_반응형 웹디자인 기획 방법
      • IA 설계
      • UI 설계
      • UI 디자인 기획
    • 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 영역 설정
        • footer 영역 설정
        • 미디어 쿼리 설정 완성 및 확인하기
    • 4.4_PC버전 마크업 하기
      • 헤더 완성하기
        • 디자인 파악하기
        • H1 로고 만들기
        • 내비게이션 만들기
        • 전화걸기 만들기
        • Follow 썸네일 만들기(고정영역 썸네일 목록)
        • 뉴스 목록 만들기
        • 블로그 최근 게시물 만들기
        • 헤더 완성 확인하기
      • 메인/푸터 완성하기
        • 디자인 파악하기
        • 이미지 배너와 검색창 영역
        • 어비 폰트 리스트 만들기
        • 주가정보 만들기
        • 유튜브 만들기
        • 콘텐츠 목록 만들기
        • 푸터 만들기
      • 전체 코딩 소스 확인하기
    • 4.5_반응형 웹디자인으로 완성하기
      • 1200픽셀 이하의 해상도에서 최적화 하기
      • 1024픽셀 이하의 해상도에서 최적화 하기
      • 768픽셀 이하의 해상도에서 최적화 하기
      • 600픽셀 이하의 해상도에서 최적화 하기
      • 480픽셀 이하의 해상도에서 최적화 하기
    • 4.6_최종 완성 및 확인하기
      • 전체 소스보기
      • 모든 브라우저에서 테스트해보기
    •  
  • ▣ 5장: 실무 팁&테크 모음
    • 5.1_반응형 웹디자인 사이트 테스팅하기
      • 사이트에 접속해서 확인하기
        • Mattkersley.com
        • Reponsinator.com
        • Screenqueri.es
      • Firefox 부가기능을 이용하여 테스팅하기
        • Web Developer - Responsive Layouts
        • Firebug
        • User Agent Switcher
    •  
  • ▣ 별책부록(동영상 강의)
    • 모바일 웹, 반응형 웹 실무 노하우 살펴보기
    • Adobe Edge Animate를 활용한 스마트 웹/모바일 만들기

예제코드 관련 GitHub 페이지

관련 글