모바일웹, 반응형웹 핵심 정리 (하이브리드 앱 기초 지식)
1장 반응형웹 디자인
- 모바일웹은 서부 개척 시대나 다름없지만, 모험과 재미로 가득 찬 세상입니다. 모바일웹 브라우저의 형태는 매우 다양해서 가끔은 짜증스럽기도 합니다.
- 모바일 장치에서 전통적인 브라우저용 레이아웃을 사용해도 되지만 반드시 그럴 필요는 없습니다.
- 반응형웹 디자인(Responsive Web Design : RWD)은 고정된 형식의 페이지를 강요하지 않고 다양한 사용자들에게 맞는 웹 페이지를 만드는 방법을 통칭하는 말입니다.
- RWD는 CSS3 미디어 쿼리, 유동적 그리드 레이아웃, 유동적 이미지의 조합이며, 다양한 환경에 따른 페이지 콘텐츠와 레이아웃을 생각하는 배려의 마음입니다.
. CSS3 미디어 쿼리는 미디어의 특징을 바탕으로 사용자 환경에 따라 다른 CSS를 적용합니다.
. 미디어 타입(예를 들어 화면, 프린터, 프로젝션)은 미디어 특징(폭, 색상, 흑백, 방향)을 갖습니다. 미디어 쿼리는 이 특징의 값을 이용합니다.
. 반응형웹에서 CSS 미디어 쿼리는 논리식입니다. 검사한 값이 treu면 쿼리 안의 CSS를 적용합니다.
. 유동적 레이아웃은 페이지 콘텐츠의 크기를 결정하는 데 있어 고정된 폭이 아니라 비율에 따른 폭을 사용하기 때문에 그 크기가 창의 폭에 따라 자연스럽게 변합니다.
. 모바일웹에서 유동적 이미지는 부모 요소의 폭이 이미지(또는 미디어)의 폭보다 작은 경우 이미지가 부모 요소를 벗어나서 출력되지 않도록 하는 CSS 기술입니다. 유동적 이미지(또는 미디어)는 부모 요소의 크기에 맞게 크기가 변환됩니다.
. <body> 요소에 em이나 퍼센트를 이용한 폰트 설정을 추가하면 폰트를 만들 수 있습니다.
2장 모바일 우선의 반응형웹 디자인
. 데스크톱 사이트에 미디어 쿼리를 추가해서 모바일에서 볼 수 있도록 만들 수 있지만, 이것은 진정한 모바일 최적화가 아닙니다.
. 대부분의 모바일 브라우저가 플러그인을 지원하지 않기 때문에 모바일웹 개발자가 이용할 만한 도구는 많지 않습니다.
. 프록시 서버나 Blaze Mobitest 같은 테스트 서비스를 이용하면 모바일 브라우저로 무엇이 다운로드 되는지 확인할 수 있습니다.
. HTTP Archive 파일과 폭포형 그래프는 성능 테스트에 매우 중요한 부분입니다.
. 모바일 우선의 반응형웹 디자인(RWD)은 작은 자원을 먼저 다운로드 하기 때문에 웹 페이지 최적화에 도움을 줍니다.
. 모바일 우선의 RWD는 화면 크기에 따라 얼마만큼 향상된 페이지를 보여 줄지 결정하는 점진적 향상 방법의 한 가지 형태입니다.
. 모바일 우선의 디자인은 무엇이 정말 중요한지 생각하게 합니다. 따라서 페이지에서 쓸데없는 부분을 없애는 데 도움을 줍니다.
. IE8 이하 버전은 미디어 쿼리를 지원하지 않습니다. 조건부 주석이 차선책입니다.
. 자바스크립트로 미디어 쿼리를 작성해서 화면 크기에 따라 적당한 때에 콘텐츠를 추가하도록 만들 수 있습니다.
. 화면 해상도를 기준값으로 하는 틀에 박힌 디자인 대신 페이지의 콘텐츠가 레이아웃 변경을 결정하도록 만듭시다.
3장 그리 환상적이지 않은 현실과 만나기
. 모바일 세상은 매우 넓고 수많은 모바일 폰이 있지만 모두 스마트폰인 것은 아닙니다. 때로는 웹사이트나 웹앱이 그런 전화기에서도 잘 작동하도록 만들어야 합니다.
. 현실에서는 별도의 모바일웹 웹사이트가 필요한 구식 시스템이나 까다로운 고객 도는 특별한 프로젝트가 있습니다.
. 모바일 트래픽을 모바일 전용 웹사이트로 보내려면 서버 쪽의 모바일 장치 추적 기능과 모바일 트래픽 방향 지정 기능을 이용해야 합니다.
. user-agent 스니핑은 요청이 모바일 브라우저에서 온 것인지 검사하는 대표적인 기술입니다.
. 반응형웹에서 user-agent 스니핑은 브라우저가 보내는 HTTP 요청의 일부분인 User-Agent 헤더를 검사하는 것입니다. 사용자가 자신의 user agent를 조작할 수 있다는 것이 이 방법의 약점입니다.
. 일부 구식 모바일 브라우저(그리고 저급 모바일 장치)는 다른 표준의 HTML과 CSS를 사용해야 합니다.
. XHTML 모바일 프로파일(XHTML-MP)은 많은 모바일 브라우저에서 사용하는 모바일 전용 표준입니다. 이것은 XHTML과 비슷하지만, XHTML의 모든 기능을 지원하지는 않습니다.
. 그리고 CSS 모바일 프로파일(CSS-MP)은 모바일 전용 CSS입니다.
. XHTML-Basic 1.1은 XHTML-MP의 다음 버전으로서 몇 가지 새로운 요소가 지원된다는 점 외에는 거의 똑같습니다.
. 모바일웹 프로젝트에 알맞은 DOCTYPE 결정은 매우 중요합니다. 그리고 유효하지 않은 마크업을 사용하면 전화기가 이상하게 동작할 수 있으니 주의해야 합니다.
4장 어느 장치를 지원해야 할까요?
. 모든 프로젝트에서 어떤 장치를 지원할 것인지에 대한 선을 그어야 합니다.
. 어디에 선을 그을지 알려면 경험과 연구 그리고 직감이 있어야 합니다.
. 반응형웹을 지원하지 않는 장치와 지원할 수 없는 장치는 분명히 다릅니다. 프로젝트에 꼭 필요한 기능이 없는 장치는 결코 사용할 수 없습니다.
. 어디에 선을 그을지 결정하는 데에는 프로젝트 필요 사항과 대상 고객이 중요한 역할을 합니다.
. 점진적 향상 방법이 기본이 되어야 합니다. 그러면 여러분의 사이트가 공식적으로 지원하는 것보다 더 많은 장치에서 작동할 것입니다.
. 절대로 지원할 수 없다고 확신하지 않는 이상 그 장치를 고려 대상에서 제외하지 마세요. 계속 생겨나는 새로운 브라우저에서 제대로 작동할 수도 있습니다.
. 모바일이 복잡하다고 겁먹을 필요는 없습니다. 어디에 선을 그을지 판단하는 데 이용할 도구도 이미 가지고 있습니다. 경험과 직관력을 믿으세요.
출처 - 헤드퍼스트 모바일웹, 이수진, 이성희, 한빛
모바일웹, 반응형웹 핵심 정리 (하이브리드 앱 기초 지식)
댓글