반응형 웹, 각기 다른 해상도에 대응
아직은 3스크린에 대응하지만 내년이후에는 활발해질 Smart TV 시장 역시 주목해야할 것이다.

• ie8이하.css – 해상도에 대응하지 않음(Conditional comments)
  • ie8이하에도 지원해야하는 요구사항이 있을 경우 respond.js 와 같은 스크립트 라이브러리를 이용
• presentation.css – 공통영역
• layout.css – 해상도 기준 선정에 의한 분리

RWD 프로젝트에 핵심은 Mobile First

1. 콘텐츠 프로토타입
2. 화면설계서 템플릿(사이트을 분석 패턴화)
3. UI Design Pattern(유형은 최소한으로 유지, 초기 작업부터 UI Design작업이 선행되어야함)
4. 퍼블리싱 가이드
   • 현황판
   • HTML 가이드

템플릿의 경우 될 수 있으면 개인판단에 따른 구조화를 해쳐서는 안될것이다.

• 웹폰트 사용유무
• 홈아이콘(터치 아이콘) – 앱아이콘과 중복되지 않도록 주의
• 인쇄(웹폰트를 사용시 인쇄환경에서는 웹폰트를 사용하지 않고 기본체나 내장되어 있는 폰트체를 사용한다.)

• 콘텐츠 구조 선형화
• 화면설계서에서 제목 영역의 확실한 구분

• 인코딩/캐릭터셋
• HTML5
• 콘텐츠에 대한 분리는 개발팀과 협의하여 HTML에서는 CSS로 숨김처리하고 개발팀에서는 분기처리한다.
• CSS파일에 들어가는 배경이미지에 주소가 개발작업시 주소가 수시로 바뀔 경우 CSS에 들어가는 배경 이미지 폴더만 CSS파일과 같은 경로에 위치시킨다.
• 분기방식
  • User-Agent
    • 장점 : 정확하게 요구하는 타겟 디바이스에 요구사항을 맞출 수 있다.
    • 단점 : User-Agent값이 정확하지 않으면 오히려 엉뚱한 콘텐츠를 노출 시킬 수 있다. 새로운 기기나 OS가 나올때마다 대응해야한다.
  • DDR
    • mobile ok에서 제공하는 단말정보저장소(DDR)를 이용
  • Media-Queries
    • 화면 해상도 체크하는 방법은 해상도만 체크하기 때문에 가장 간단한(?) 방법이긴 하나 가로, 세로 전환에 따라 보여주고 싶은 모바일용 레이아웃이 아닐 수 있다.
  • Mobile OS
    • OS만 체크할 경우 아이폰이나 아이패드같이 폰과 패드가 구분되는 경우와 안드로이드와 같이 폰과 패드(탭)가 구분이 안되는 경우가 있기 때문에 이를 구분할 방법이 있어야 할것이다.
  • 스크립트를 이용하여 해상도 체크
    • 스크린 해상도를 체크해야할 경우 스크린 사이즈를 구하는것은 다음과 같다.
    • 모바일에서 innerWidth, client.width, screen.width 중에 client.width의 값을 구해야한다. 이 이유에 대해서는 뷰포트에 설명을 참고한다.

• Simple-RESS(서버타입 샘플예제)

1. 무선환경 구축(WiFi)
2. HTML 가이드
   • 현황판(모바일 화면 체크)
   • 기획이나 디자인파트에서 작업된 화면을 모바일에서 직접 주소를 입력해서 들어가는것은 어렵기 때문에 스마트폰에 설치할 수 있는 QR Code 리더기를 설치하여 QR Code 인식시킨다.
   • 패턴 가이드(개발 가이드)
3. 브라우저 세팅
   • 사파리(환경설정-고급-메뉴 막대에서 개발자용 메뉴 보기(체크)) – 개발자용 메뉴 생성
   • 크롬(goo.gl URL Shortener(+QR Code, Site to Phone)

해상도나 기술적인 문제에 있어서 적지않은 이슈들을 만나게 되는데 이에 대한 해결책을 제시하고자 한다.

이미지의 퀄리티를 어디까지 유지할것이냐는 품질을 우선인가 페이지 로딩속도가 우선인가에 대한 선행 결정이 되어야 할것이다.

이미지 또한 데이터 용량과 관계있기 때문에 테이터 무제한 요금제를 사용하지 않는 고객을 위해서는 페이지 로딩속도를 우선시해야할 필요가 있다.

이미지 분기(Desktop용/Mobile용)
퍼블리싱 작업시에는 스크립트로 처리하고 개발작업시에는 서버단에서 처리한다.

<img src="hdpi_bzbcap05number.gif" alt="이미지" /><!-- desktop/pad 용 -->
<img src="mdpi_bzbcap05number.gif" alt="이미지" /><!-- mobile 용 -->

• 새창(모바일기기에서의 새창개수의 제한)
• 레이어팝업

현재 웹폰트로 상업적인 사용이 가능한것은 나눔고딕이며 가장 널리 사용되는것은 NHN에서 배포한 나눔고딕체이다.
주의사항 : 한글폰트는 파일 용량이 큰 단점이 있고, 또 하나는 웹폰트를 사용할때 라이센스를 꼭 확인해야한다.

• 나눔고딕
• 다음체

• 글꼴설정

@font-face {
    font-family: 'NanumGothicWeb';
    src: url('NanumGothicWeb.eot');
    src: local('NanumGothic'), 
         local('NanumGothic'), 
         url('NanumGothic.ttf') format('truetype'),
         url('NanumGothic.svg#font') format('svg'); 
}
body {
    font-family: 'Comfortaa Regular', 'NanumGothic', '맑은 고딕';
}

웹폰트의 파일용량때문에 문제라면 차선책으로 나눔고딕을 자동설치하거나, Windows Vista나 Office 2007이상 사용자에게 자동설치되는 맑은 고딕 설치 사용자를 위해서 다음과 같이 설정할 수 있다.

body {
    font-family: 'NanumGothic', '맑은 고딕';
}

이미지폰트는 모바일기기에서는 여러가지 이슈로 인해 제공하지 않는것이 원칙이나 디자인상의 이슈로 해야한다면 서버단에서 alt속성값을 가져와서 이미지를 대체하여 화면에 보여주는 방식이 될것이다.
alt값을 가져오는 방식은 개발팀과 협의후 진행

<img src="/images/title/h1.gif" alt="U+ 0505" class="jq_alttext_replace" />

데스크탑에서 사용하던 메뉴구현 방식은 좁은 해상도에 스마트폰에서는 사용하기 어렵기 때문에 다양한 대안에 방식이 구현되고 있다. 이에 다양한 패턴을 소개하고 구축중에 있는 사이트에 적합한 방식을 채택하길 바란다. 반응형 네비게이션 패턴 참고

• 가장 간단한 구현방식이다. 메뉴의 개수가 4~5개 이하의 소규모 사이트에 해당된다.

• 많이 구현되는 방식
• 탭메뉴 형태의 메뉴도 이용가능
• 제작 구현 방식

• 포털사이트와 같이 메뉴가 많을 경우 사용
• 예제 사이트 : 스타벅스

• 앱형태에서 많이 볼 수 있는 방식이다.
• 좀 더 복잡한 형태의 메뉴도 가능
• 상단영역의 불필요한 공간을 차지하지 않는다.
• 예제 사이트 : 버락오바마

• Audio
  • mp3
    • IE9
    • Safari
  • ogg
    • Firefox
    • Chrome
• Video
  • mp4
    • IE9
    • Safari
  • ogg
    • Firefox
    • Chrome
  • webm
    • Chrome

• 다양한 코덱지원
• 스트리밍(W3C에서도 논의되는 사항)
• DRM

• 코덱을 직접변환
  • 동영상을 일일이 변환해야하는 번거로움이 있다.
• 동영상 변환 솔루션
  • 사이트 주요 컨텐츠가 동영상이라면 자동으로 변환하는 솔루션을 도입하는것을 검토해보아야 할것이다.
• 유투브를 활용
  • 비용면이나 효율적인 면에서 가장 간단한 방법이다.

모바일의 경우 기기의 특성상 저장소가 없는 경우가 있기 때문에 다운로드나 업로드를 구현하지 않는다.
다만 PDF의 경우 대부분의 기기가 뷰어를 제공하기 때문에 제공 가능여부를 판단해야한다.(다운로드에 개념은 아니다.)

• 다운로드/업로드
• 파일종류 – PDF

안드로이드는 pdf viewer 가 갤럭시 나 국내 제조사는 기본내장하나 htc, 모토롤라 등에서는 제외 되는 경우가 있으므로 다운로드 후 viewer 로 보는것 자체는 다운받은 사람이 알아서 처리해야 한다.

iphone mime type application/pdf
android mime type application/download

뷰어링크가 필요한 경우 아래와 같이 처리가능하다.
PDF Viewer가 없는 경우

<a href="market://search?q=pdf+viewer">Market</a>

에서 PDF Viewer를 다운 받은 후 설치하세요

3단이상 복잡해지는 표의 경우 작은 스크린에서 보여주기 위해서는 어렵기 때문에 여러가지 안을 찾고자 한다.
스마트폰에서는 보통 줌을 조절하지 못하게 하는 제작하기 때문에 단순하게 재가공한다.
외국에서는 테이블에 대한 많은 시도가 이루어지고 있다 이에 대한 다양한 예제를 접해보도록 하겠다.

1. 필요한 셀만 노출 : 작은 해상도에서는 꼭 보여주어야하는 데이터셀만 노출시키고, 상단에 드롭다운메뉴에서 선택에 따라 숨김처리된 셀들을 보여지게 할 수 있다.
2. 캔버스로 변환 : 간단히 수치를 비교하는 테이터라면 캔버스 기반에 그래픽으로 표현하는것도 가능하다.
3. 썸네일 링크 : 작은 해상도에서는 썸네일처리가 되고, 썸네일부분을 클릭했을 경우 해당 테이블만 있는 페이지로 이동해서 확대줌이 가능하도록 한다.
4. 스크롤 영역(웹킷용 브라우저에만 해당)

html5에서는 별도에 코덱을 설치할 필요없이 브라우저에 지원만으로도 재생이 가능하다.
다만 별도의 코덱에 대한 표준이 없기 때문에 현재 비디오의 경우 지원되는 포맷으로 mp4, ogg, webm가 있다.

• 다양한 코덱
• 스트리밍
• DRM

• 코덱을 직접 변환
  • 동영상을 일일이 변환해야하는 번거로움이 있다.
  • HTML5용 동영상 인코딩의 비법
• 동영상 변환 솔루션
  • 사이트 주요 컨텐츠가 동영상이라면 자동으로 변환하는 솔루션을 도입하는것을 검토해보아야 할것이다.
• 유투브를 활용
  • 비용면이나 효율적인 면에서 가장 간단한 방법이다.
  • 다양한 포맷을 지원

html작업시에는 css만으로 코드 분기작업하게 되면 좀 더 유용하다고 보기 때문에 이런 방식을 추천한다.

<!-- 웹 및 패드용 -->
<div class="desktop_area_box">

</div>
<!-- //웹 및 패드용 -->
<!-- 스마트폰용 -->
<div class="mobile_area_box">

</div>
<!-- //스마트폰용 -->

• ㈜와 같은 한글형식의 특수문자는 한글을 지원하지 않는 OS에서는 표현이 되지 않기 때문에 HTML Entity를 이용한다.
  • iOS(5.0) – 버전확인 필요
  • Android() – 버전확인 필요

• UTF-8권장

• 프레임셋은 비권장
• 아이프레임
  • 모바일에서는 아이프레임 사이즈 지정에 상관없이 풀사이즈로 늘어나게 된다.(불러오는 페이지에도 뷰포트가 적용되거나 %기반에 레이아웃이여야 한다.)

• 단락에 개행을 하게되면 화면해상도에 따라서 불필요하게 여백이 생기게 된다.
• 안드로이드 기반의 사용자의 경우 사용자 선호도에 따라 폰트 변경이 가능하기 때문이다.
• 폰트 특성에 따라 letter-spacing이 달라진다.

분기할 규칙을 정의

• 600px 이하
• 1024px 이하
• 1025px 이상

• IE8이하, IE9이상
• Chrome
• Safari
• Firefox
• Opera

• 선정 기준 1
  • 가장 많이 판매된 기기
  • 전체 트래픽 점유율
  • 자사 사이트에 많이 접속하는것을 분석툴을 활용하여 통계치를 분석.
• 선정 기준 2
  • OS(iOS, Android OS, WindowPhone)
  • OS Version
    • iOS(3.2, 4.0, 5.0)
    • Android OS(2.2, 2.3, 4.0)
  • 해상도/화면크기

해상도/화면크기

• 퍼블리싱용
• 개발용

• 준비중

• 테스트기기 : Vega X(2.2)
• 투명 PNG를 사용할 경우 위 버전의 경우 Maximum 해상도 합이 523920(width x height) 보다 클 경우 이미지 뭉개침 현상이 생기 때문에 최소한에 이미지 사이즈로 잘라야한다.
• (예제보기)

• 테스트기기
  • 넥서스원(2.3)
  • 베가X(2.2)
• 레이어 밑에 폼요소가 클릭되는 문제
  • select(×)
  • input(×)
  • input[radio] (○)
  • input[checkbox] (○)
• 해결방법
  • 기본 선택효과를 비활성화 (-webkit-tap-highlight-color: rgba(0,0,0,0);)
  • custom으로 active효과를 준다.
  • form 비활성화
  • 영역전체를 숨긴다.
  • UI 화면구성을 되도록 피한다.

실전예제는 두가지 방안에 대한 예제화면을 다루게된다.

<html>
<head>
  <title>회사명 - 페이지명</title>
  <script type="text/javascript">
  // 접속 스마트폰 정보
  var userAgent = navigator.userAgent.toLowerCase();
  // 모바일 홈페이지 바로가기 링크 생성
  if(userAgent.match('iphone')) {
    document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />')
  } else if(userAgent.match('ipod')) {
    document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />')
  } else if(userAgent.match('android')) {
    document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />')
  }
  </script>
  <meta name="format-detection" content="telephone=no">
  <link rel="shortcut icon" href="/images/common/icon/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/images/common/icon/touch_icon.png" />
  <link rel="stylesheet" href="/css/desktop.css" type="text/css" media="only screen and (min-width: 601px), print">
  <link rel="stylesheet" href="/css/desktop/메뉴별.css" type="text/css" media="only screen and (min-width: 601px), print">
  <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-width: 600px)">
  <link rel="stylesheet" href="/css/mobile/메뉴별.css" type="text/css" media="only screen and (max-width: 600px)">
  <script type="text/javascript" src="/js/jquery.min.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui_메뉴별.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui_mobile.js" charset="euc-kr"></script>
  <!--[if lt IE 9]>
  <link rel="stylesheet" href="/css/desktop.css" type="text/css" media="screen, print">
  <link rel="stylesheet" href="/css/desktop/메뉴별.css" type="text/css" media="screen, print">
  <![endif]-->
</head>
<body>
</body>
</html>

<html>
<head>
  <title>회사명 - 페이지명</title>
  <meta name="format-detection" content="telephone=no">
  <link rel="shortcut icon" href="/images/common/icon/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/images/common/icon/touch_icon.png" />
  <link rel="stylesheet" href="/css/desktop.css" type="text/css" media="screen , print">
  <link rel="stylesheet" href="/css/desktop/메뉴별.css" type="text/css" media="screen , print">
  <script type="text/javascript" src="/js/jquery.min.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui_메뉴별.js" charset="euc-kr"></script>
</head>
<body>
</body>
</html>

<html>
<head>
  <title>회사명 - 페이지명</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no">
  <link rel="apple-touch-icon" href="/images/common/icon/touch_icon.png" />
  <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="screen">
  <link rel="stylesheet" href="/css/mobile/메뉴별.css" type="text/css" media="screen">
  <script type="text/javascript" src="/js/jquery.min.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui_mobile.js" charset="euc-kr"></script>
</head>
<body>
</body>
</html>

<html>
<head>
  <title>회사명 - 페이지명</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no">
  <link rel="shortcut icon" href="/images/common/icon/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/images/common/icon/touch_icon.png" />
  <link rel="stylesheet" href="/css/narrow.css" type="text/css" media="only screen and (max-width: 480px), print">
  <link rel="stylesheet" href="/css/normal.css" type="text/css" media="only screen and (min-width: 481px) and (max-width: 1200px), print">
  <link rel="stylesheet" href="/css/wide.css" type="text/css" media="only screen and (min-width:1201px), print">
  <script type="text/javascript" src="/js/jquery.min.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui.js" charset="euc-kr"></script>
  <script type="text/javascript" src="/js/ui_메뉴별.js" charset="euc-kr"></script>
  <!--[if lt IE 9]>
  <link rel="stylesheet" href="/css/desktop.css" type="text/css" media="screen, print">
  <link rel="stylesheet" href="/css/desktop/메뉴별.css" type="text/css" media="screen, print">
  <![endif]-->
</head>
<body>
</body>
</html>

최초로 반응형 웹 디자인(responsive web design)을 사용한 사람은, A List Apart에 Responsive Web Design을 기고한 Ethan Marcotte로 알려져 있습니다.
1) 반응형 웹 디자인을 짧게 정의하면, 하나의 코드로 모든 기기에서 적절하게 보여주는 것 입니다.
보다 긴 정의는, CSS3의 media-query, 유동형 그리드 (fluid grids), 반응형 또는 유연한 이미지 (responsive or flexible images), 반응형 레이아웃 등의 기술을 이용하여, 사용자가 여러 종류의 기기와 브라우져를 사용하여 접근하여도, 최소한의 크기조정/회전/스크롤을 통해서 쉽게 콘텐츠를 접근할 수 있도록 제공하는 것을 뜻합니다.

1) 모바일 퍼스트

웹 디자인을 할때, 모바일을 먼저 생각해서 디자인을 한다는 개념으로, Luke Wroblewski에 의해서 주장되었습니다.
대표적으로 media query를 사용할때, media query가 적용되지 않는 경우를 모바일 브라우져로 가정하는 것이 해당됩니다. 2)
가끔 점진적 향상 (progressive enhancement) 접근 방법과 같이 사용되기도 합니다.
Graceful degradation

우아한 퇴보?의 다른 용어는, 결함없는 작동 (fault-tolerance)이며, 웹 디자인에서는, 최신 기술/표준을 따르지 못하는 브라우져에서도 크게 문제없이 처리되는 것을 뜻합니다.
유동형 그리드

E.Marcotte에 의해서 최초로 제안된 유동형 그리드 (fluid grids)는, px 대신 em 또는 %를 사용하여, 스크린 크기에 상관없이 원래 의도한 형태의 그리드를 유지하는 것입니다.
반응형 또는 유동형 이미지

유동형 이미지 (fluid images)는 E.Marcotte가 A List Apart와 그의 블로그에서 제안한 (max-)width=100% 사용과, 이를 처리하지 못하는 IE7- 를 위한 javascript 코드로 지칭합니다.
반응형 (responsive) 또는 적응형 (adaptive) 이미지는, 스크린 크기나 기기 종류에 따라서 이미지의 크기 (width 와 실제 화일 크기)를 선택적으로 적용하여, (특히 모바일에서) 적절한 이미지 다운로딩과 표현을 하도록 유도하는 기술입니다.
특히 서버쪽에서 처리하는 기법이 같이 사용되어, 흔히 RESS (Responsive Web + Server Side Components) 접근 방법이 적용됩니다.
반응형 또는 가변형 레이아웃

반응형 레이아웃 이라는 단어는 실제로는 통용되지 않지만, 다른 반응형 * 용어들과 같은 맥락에서 보자면, 여러 스크린 크기/기기 들에 반응하는 레이아웃을 지칭합니다.
Luke Wroblewski가 제안한 다중기기 레이아웃 패턴글에서 보여준, 기기별로 변화하는 레이아웃을 일컫기도 합니다.
반응형 메뉴 또는 네비게이션

반응형 레이아웃과 더불어, 데스트탑 메뉴/네비게이션을 모바일에서 어떻게 표현할지 접근하는 기법입니다.
Brad Frost의 반응형 네비 패턴 참조
관련 기술

CSS3에서 도입된 @media를 이용하여, 보여지는 스크린 (해상도)의 최소/최대 크기등의 조건별로, 원하는 스타일을 적용할 수 있습니다.
RESS

Responsive Web + Server-Side Components의 줄임말로, (media-query와 javascript을 이용한 클라이언트 만에서의) 반응형 웹 디자인의 한계와 불편함을 극복하기 위하여, 서버쪽에서도 (user-agent 정보를 이용하여) 적절하게 처리된 내용을 제공하는 기법입니다. LukeW
특히 반응형 이미지 등 모바일 환경에서 통신횟수/양을 최소화하기 위한 선별적 이미지 화일 제공 기법이 이에 속합니다.
user-agent 문자열

브라우져 등의 통신 소프트웨어가 서버에 넘겨주는 일종의 인식코드로, 특정 브라우져별로 정해진 user-agent 문자열이 정해져 있습니다.
하지만, 해당 문자열은 전적으로 보내는 쪽에서 결정하므로, 그 정확도나 신빙성이 떨어지는 것으로 알려져 있습니다.
그럼에도 불구하고, 서버쪽에서 기기/브라우져 를 판단할 수 있는 유일한 근거이기에, http://detector.dmolsen.com/, http://wurfl.sourceforge.net/ 등 여러 유/무료 디비/api 등이 존재합니다.

• ress responsive design server side components – #1
• http://dev.paran.com/2011/10/07/ress-responsive-design-server-side-components-2/ress responsive design server side components – #2
• 반응형 웹 디자인 작업을 위한 10가지 유용한 도구
• Content Prototyping In Responsive Web Design: Related Resources
• How To Set Up A Print Style Sheet – print.css 설정시 참고
• web font gallery
• Fluid grids, orientation & resolution independence
• HTML5 Video Player
  • HTML5에 비디오플레이어를 Old Brower에서는 Flash나 Silverlight players로 fallback해준다. 주의)다운로드받은 파일을 로컬에서는 테스트할때는 플래시 세팅(?)을 해주어야한다.