모바일 웹사이트 구축과 반응형 웹

모바일 웹사이트 구축

1. 테스트 사이트

 http://troy.labs.daum.net/

 http://www.testiphone.com/

 http://www.springbox.com/mobilizer/

2. 브라우저의 부가 기능 활용 (User Agent Switcher)

User Agent Switcher

- 크롬의 부가서비스 user agent switcher 

- 자바스크립트를 통해 반응형 웹을 만든 경우 특성에 따른 결과물 테스트 

3. 에뮬레이터 활용

1) 윈도우폰

http://www.microsoft.com/ko-kr/download/details.aspx?id=27570

2) 안드로이드폰

http://developer.android.com/sdk/index.html

3) 오페라

http://www.opera.com/ko/developer

4) 파이어폭스

http://www.mozilla.org/ko/mobile/

4. 모바일 기기를 위한 설정

1) 뷰 포트 설정

<meta name="viewport" content="width=device-width, 

initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=no">

initial-scale : 초기 비율

minimum-scale : 최소 축소 비율

maximum-scale : 최대 확대 비율

user-scalable : 확대 축소 가능 여부

※ 모바일에서 전체화면으로 맞추지 말고 모바일에 맞게 1:1로 나오게끔 처리하는 메타태그.

<meta name="viewport" content="width=device-width,

 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

아이폰에서 가로세로 돌릴 때 사이즈 변경되지 않게 initial-scale=1.0, 

확대했을 때 크기 더이상 안커지게 maxium-scale=1.0 지정

2) 전화걸기 관련 마크업

1) 전화, 문자 걸기

- 안드로이드폰에서는 자동전화걸림이 안되므로 링크를 통해 선택시 전화걸기로 넘어가게 하는 태그를 넣는다.

<a href=“tel:02-111-2222”>전화걸기</a>

<a href=“sms:010-1111-2222”>문자보내기</a>

2) 아이폰에서의 전화번호 링크 방지

-  모바일에서 링크 걸지 않는 이상 자동전화 걸림 방지 메타테그. 

- 아이폰에서 전화번호는 무조건 클릭시 전화걸기로 넘어가는 것 방지한다.

<meta name=“format-detection” content=“telephone=no” />

5. 유동형 이미지를 위한 다양한 처리

1) 레티나 사용자를 위한 이미지 처리

- 해상력에 따른 배경 이미지 처리

#wrap {

background: url(bg_normal.gif) no-repeat;

}

@media all and (-webkit-min-device-pixel-ratio:1.5){

#wrap {

background-image: url(bg_retina.gif);

background-size: contain;

}

}

initial-scale : 초기 비율

3) 아이콘 이미지 (웹폰트)

- 웹에서 아이콘 등 작은 이미지를 쓸 때 하나의 이미지를 만들어 위치값을 바꿔며 쓰는 스프라이트 기법 외에 좀 더 쉬운 방법이 웹폰트 사용이다.

 - 웹폰트는 벡터형태의 아이콘 모음 글꼴을 이용해 이미지를 표현하는 방식이다.

- http://fontello.com 에서 필요한 모양을 누르면 오른쪽 위에 빨간색 바 뜸. 다음 빨간파 클릭하여 다운로드.

압축풀어보면 css와 폰트가 함께 들어있다.

- 글꼴 파일이므로 리소스 로딩 개선 가능

- 벡터 이미지

- CSS 효과 적용 가능

http://fontello.com/

4) SVG 이미지의 사용

- 일러스트레이터 이용하여 저장

- 벡터인 장점이 있는 대신 오류 있음.

https://code.google.com/p/svg-edit/

6. 반응형 웹 (Responsive Web Design)

-사이즈 따라 변화하는 반응형 모바일웹 (너비를 갖고 변화하도록 처리)

- 모바일웹은 통상 300px로 너비 지정

(1) Responsive Web Design

- 하나의 컨텐츠가 여러 기기에서 최적의 형태로 보이도록 하는 것

PC, 스마트폰, 태블릿, … / 해상도, 기기방향, 해상력, …

- OSMU(One Source Multi Use)

- 하나의 URL 사용

- Ethan Marcotte가 만든 용어

- 작은 기기를 위한 디자인 먼저

(2) 반응형 웹 구현을 위한 세 가지 핵심 기법

- flexible grid layout

- flexible image

- media query

(3) 미디어쿼리 (media query)

http://mediaqueri.es/

- 사이즈에 따라 달라지는 사이트 디자인. 기기의 너비에 따라 css 선택

1.html에서 link로 css 부를 때 media="only screen and (min-width:768px)" 이런식으로 각 css마다 사이즈의 규격을 정의하여 html에 불러들임. 

2. css에서 @import url() screen and (min-width:769px); 식으로 지정 가능

1) 기기의 너비에 따라 CSS 파일 선택 가능

<link rel=“stylesheet” media=“only screen and (minwidth:769px)” href=“pc.css” />

<link rel=“stylesheet” media=“only screen and (minwidth:401px) and (max-width:768px)” href=“tablet.css” />

<link rel=“stylesheet” media=“only screen and (maxwidth:400px)” href=“mobile.css” />

2) 기기의 너비에 따라 CSS 파일 import 가능

@import url(“pc.css”) screen and (min-width:769px) ;

@import url(“tablet.css”) screen and (min-width:401px) and (max-width:768px) ;

@import url(“mobile.css”) screen and (max-width:400px) ;

3) 기기의 너비에 따라 CSS 코드 선택 가능

@media screen and (min-width:769px) {

너비가 769px이상일 경우의 실행문

}

@media screen and (min-width:401px) and (max-width:768px){

너비가 401px에서 768px 사이일 경우의 실행문

}

@media all and (orientation:landscape) {

기기가 가로 방향일 경우의 실행문

}

(4) 미디어 쿼리 미지원 브라우저 대응

- 미디어쿼리는 지원안하는 브라우저 버전이 있다. js로 불러들여 처리하게 해야 한다.

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">

</script>

<![endif]-->

<!--[if lt IE 9]>

<script src="respond.min.js"></script>

<![endif]-->

7. 반응형 웹사이트 위한 Framework

1) html5up (http://html5up.net/)

- 반응형 웹을 만들어주는 사이트. html5 기반.

2) Bootstrap (http://getbootstrap.com/)

- 부트스트랩 개발자들이 많이 사용. 

- 반응형 웹

- 자바스크립트로 되어있다.  

- 받아서 소스수정하면 된다.

3) 워드프레스 wordpress (https://wordpress.org/)

- 관리자모드까지 존재하는 반응형 웹을 만들어주는 사이트.

- 관리자 화면과 다양한 테마 제공

- PHP + HTML5+ CSS + JAVASCRIPT

- 서버에 설치해야만 한다.

워드프레스의 자세한 설치 방법은 별도 포스팅으로 기술.

4) 기타 Framework

http://lessframework.com/

http://www.getskeleton.com/

http://foundation.zurb.com/

http://www.responsivegridsystem.com/

http://gumbyframework.com/