UI Laboratory

UI 개발을 위한 레퍼런스

반응형 웹 디자인 (Responsive Web Design)


반응형 웹 디자인을 만드는 비법

  1. ① CSS3 미디어쿼리

    현재 브라우저의 상태값을 분석하여 어떤 CSS를 사용할 지 결정한다.
  2. ② 유동적 그리드 레이아웃

    절대값 대신 상대적인 비율을 이용한 CSS로 페이지 레이아웃을 설정한다. 반응형 웹 디자인은 컬럼 크기를 비롯한 레이아웃 요소 설정에 픽셀 대신 퍼센트를 사용한다.
  3. ③ 유동적 이미지와 미디어

    몇 가지 CSS 기술을 이용하여 이미지와 미디어를 포함하고 있는 부모 요소의 크기에 따라 이미지와 미디어의 크기가 조절되도록 만든다.

조건에 따라 다른 CSS

@media는 조건에 따라 다른 CSS를 적용할 때 사용한다. CSS 파일안에서 다음 처럼 CSS 미디어 타입을 선언한다.

			@media screen {/*화면 처리를 위한 CSS 규칙 */} /*screen은 미디어 타입*/
		

또한 HTML 문서의 <link> 태그 안에 미디어 타입을 정의할 수 있다.

			
		

| 미디어 타입, 미디어 특징을 만나다

CSS3에 정의된 미디어 특징 중에는 width, color, orientation이 있으며, 모든 미디어 타입이 이 특징을 갖고 있다.

CSS 미디어 쿼리

CSS3 미디어쿼리는 사용자 브라우저의 미디어 특징을 사용하여 논리 연산을 수행한다. 만일 미디어쿼리 연산의 결과가 TRUE면 괄호 안의 CSS를 적용한다.

			@media screen and (min-width:480px) {/*화면 처리를 위한 CSS 규칙 */}
		

위 미디어 쿼리는 미디어 타입중 screen을 사용하며 'screen' 미디어 타입의 미디어 특징중 'width'를 사용한다.

즉, '해당 콘텐츠를 화면에 출력하나요? 그리고 창의 폭이 최소 480 픽셀인가요? 그렇다면 CSS 규칙을 적용하겠습니다.' 라는 뜻이다.

			@media print, screen and (monochrome) {/*화면 처리를 위한 CSS 규칙 */}
		

위 미디어 쿼리는 '프린터에서 또는 화면에서 흑백으로 출력할 건가요? 그렇다면 이 스타일을 적용하겠습니다' 라는 뜻이다.

			@media all and (orientation: landscape) {/*화면 처리를 위한 CSS 규칙 */}
		

위 미디어 쿼리는 '가로 방향 화면이라면 모든 미디어 타입에 이 스타일을 적용하겠습니다' 라는 뜻이다.

| 모바일 장치를 위한 레이아웃을 만들려면?

  1. ① 현재 페이지의 레이아웃을 보고 구조를 분석한다.

  2. ② 모바일 브라우저에 맞는 레이아웃을 위해 어느 부분을 변경할 지 결정한다.

  3. ③ 변경할 부분을 위한 모바일 전용 CSS를 만든다.

  4. ④ 미디어 쿼리를 이용하여 모바일과 데스크톱이 각각 다른 CSS를 사용하도록 만든다.

| 모바일에 맞는 CSS를 만드는 방법

아래 이미지처럼 960px 픽셀에 세컬럼 레이아웃인 데스크톱 전용 페이지를 모바일에 맞게 수정할려면 먼저 페이지와 구조적 요소를 320픽셀 폭 안에 들어가도록 고쳐야 한다. 모바일 장치에서 가장 일반적인 화면 해상도는 320픽셀이기 때문이다.

			body, .header, .navigation, .footer {width: 320px;}
			.navigation ul li {width:106px}
			#visit, #points, #main {width:320px;}
		

모바일 전용 Css를 만들었다면 스마트폰의 가로방향 화면의 해상도인 480px를 고려하여 480px 이하의 크기의 창을 갖는 브라우저는 이 CSS를 사용하도록 미디어 쿼리를 만든다.

완성된 CSS는 아래와 같이 색상, 폰트와 같은 기본 css와 공통된 구조적 CSS, 그리고 데스크톱 전용 구조적 CSS, 모바일 전용 구조적 CSS와 같은 모습일 것이다.

그림

마지막으로 name 속성이 viewport인 <meta>태그가 필요하다. 이것은 페이지 콘텐츠를 출력할 때 얼마만큼 확대/축소할지 브라우저에 알려주는 태그이다.

			<meta name="viewport" content="width=device-width, initial-scale=1" />
		

유동적 레이아웃

유동적 그리드 레이아웃은 폭 설정에 픽셀이 아니라 비율(퍼센트)을 사용한다.

고정적 그리드를 유동적 그리드로 css를 변경하기 위한 작업 목록은 다음과 같다.

| 유동적 레이아웃의 공식

픽셀 기반의 레이아웃에서 비율에 따른 유동적 레이아웃으로 바꾸려면 아래 공식을 사용해야 한다.

해당요소(의 크기)/전체 내용(의 크기) x 100% = 결과(퍼센트)

전체가 960px일 때 240px인 컬럼의 넓이는 240/960*100 = 25% 가 된다.

| 유동적 이미지

유동적 이미지와 미디어는 유동적 그리드처럼 레이아웃안에서 비율에 따라 크기 변환을 한다.

			img, object {max-width:100%;}
		

이 CSS 규칙은 이미지와 미디어가 자신을 포함하는 요소보다 커지지 않도록 막아준다. 최대 폭을 100%로 설정하면 이미지와 미디어가 부모 요소의 밖으로 벗어나지 않는다. 대신 width와 height 속성은 버려야 한다.

별도의 모바일 웹사이트


모바일 사용자 알아내기

사용자의 장치가 모바일인지 알아내려면 브라우저가 보내는 HTTP User-Agent 헤더를 이용해야 한다. 이것을 'user-agent 스니핑'이라고 한다. user agent는 줄여서 'UA'라고도 쓴다.

user agent에 대해서...

모바일 브라우저를 포함하는 모든 웹브라우저가 웹페이지나 관련 자원을 요청할 때 보내는 HTTP 요청 속에는 User-Agent 헤더가 들어 있다.

| user agent의 역사

현재 안드로이드를 제외한 웹킷 기반의 모든 모바일 브라우저는 user-agent 문자열에 'Safari'를 명시한다.(웹킷은 애플이 KHTML을 기반으로 만들었다.)

스크립트 넣기

http://detectmobilebrowsers.com/에 가면 간단한 모바일 장치 추적 스크립트를 다운받을 수 있다.

이 스크립트는 user-agent 문자열을 분석해서 모바일 브라우저인지 판단하고 그렇다면 모바일 사이트로 보낸다. 이 작업은 다음 세 단계로 이루어진다. ① 요청 브라우저의 user-agent 문자열을 가져온다. ② 정규표현식을 이용하여 ③ user-agent 문자열이 정규표현식과 일치한다면 모바일 사이트로 보낸다.

장치 데이터베이스와 클래스


모바일 장치 데이터베이스

모바일 장치 데이터베이스는 모바일 장치와 브라우저에 대한 하드웨어 기능, 플랫폼 등의 자세한 정보를 가지고 있다.

WURFL(Wireless Universal Resource FiLe, 워플)이란?

WURFL은 오픈 소스 장치 데이터베이스로서, 모바일 장치와 브라우저의 기능에 대한 방대한 정보를 가지고 있다. WURFL에서 말하는 장치는 플랫폼과 OS 그리고 브라우저를 모두 포함하는 단어로 이에 대한 모든 정보를 담고 있다.

ScientiaMobile 검색 페이지(http://www.tera-wurfl.com/explore)를 이용하면 웹브라우저로 Tera-WURFL 테이터를 검색할 수 있다. ScientiaMobile 검색 페이지는 WURFL 장치 데이터를 XML 파일 대신 데이터베이스로 구현해 놓은 것으로 Tera-WURFL이라고 부른다. Tera-WURFL은 모바일용 웹사이트를 위한 웹서비스로서, 모바일 웹사이트가 user-agent 문자열을 이용하여 장치의 정보를 구할 때 이용하도록 구현되었다.

프레임워크를 이용한 모바일 웹앱


앱 같은 웹사이트는 어떤 식으로 동작하는가?

앱 같은 웹사이트 모델은 클라이언트의 역할이 더 크고, 각 요청마다 전송되는 자원도 훨씬 적다. 마크업, 코드, 자원들은 재사용할 수 있도록 장치에 저장하고, 바뀐 콘텐츠나 데이터만 AJAX를 이용하여 비동기적으로 전송한다. 이처럼 무대 뒤에서 벌어지는 비동기 요청을 통해 전체 페이지를 로드할 필요없이 특정 콘텐츠나 자원만 가져온다. 전체 페이지를 다시 로드하지 않고 필요한 콘텐츠만 요청하기 때문에 대역폭이나 프로세싱이 덜 필요하고 더욱 향상된 상호작용이 이루어진다.