블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



       아이폰과 안드로이드 폰은 웹 페이지의 바로가기를 장치 화면에 추가하는 기능을 제공해주고 있다. 그래서 앱과 같이 아이콘을 설정해놔서 사용자가 앱 실행하는 방법과 같이 아이콘을 클릭해서 모바일 사이트에 접근할 수 있도록 할 수 있다. 아이폰과 안드로이드 아이콘 등록 방법은 link태그를 이용하면 되는데, 둘이 설정하는 방법은 조금 다르다.

1. iOS


<link rel=”apple-touch-icon” href=”/이미지경로/icon.png” />



2.
안드로이드(Android)


<link rel=”shortcut icon” href=”/이미지경로/icon.png” />


아이콘 사이즈는 안드로이는 같은 경우 72x72(px) png이미지를 지정하면 된다. 아이폰 같은 경우는 버전 별로 아이콘 이미지를 따로 지정해 주는 것이 좋다. 자동 리사이즈가 되긴 하지만, 리사이즈 하면 이미지가 깨져 보일 수 있기 때문이다. iOS 아이콘 사이즈는 아래 표를 참고 하길 바란다.

iPhone 3gs

57x57(px)

iPad

72x72(px)

iPhone 4/4s

114x114(px)

New iPad

144x144(px)


iOS
버전별 아이콘 지정하려면, sizes속성을 지정하면 된다. 아래 예제를 참고 하자.


<!-- iPhone icon -->

<link rel=”apple-touch-icon” sizes=”57x57” href=”/이미지경로/icon57x57.png” />

 

<!-- iPad icon -->

<link rel=”apple-touch-icon” sizes=”72x72” href=”/이미지경로/icon72x72.png” />

 

<!-- iPhone icon(Retina) -->

<link rel=”apple-touch-icon” sizes=”114x114” href=”/이미지경로/icon114x114.png” />

 

<!-- iPad icon(Retina) -->

<link rel=”apple-touch-icon” sizes=”144x144” href=”/이미지경로/icon144x144.png” />


아이폰은 자동으로 모서리가 둥글게 되고, 아이콘 위쪽은 밝게, 아래는 어둡게 자동으로 광택 효과가 적용이 된다. 그래서 아이콘 제작할 때 따로 효과를 주지 않아도 되고, 모서리를 둥글게 만들 필요가 없다.
 
아이폰의 자동 이미지 처리 기능을 원하지 않고 원본 이미지 그대로 아이콘을 적용하기 위한 방법도 존재한다. 이는 rel속성에서 apple-touch-icon대신에 apple-touch-icon-precomposed를 지정하면 된다.


<link rel=”apple-touch-icon-precomposed” href=”/이미지경로/icon.png” />

 




Posted by happydong
, |



 일반적으로 모바일 브라우져에서 URL주소를 입력하고, 사이트에 접근해보면 페이지 전체가 축소되어 보여질 것이다. 이것은 페이지의 내용이 스크린 사이즈보다 클 경우를 대비해서 브라우저가 자동으로 축소모드로 랜더링하기 때문이다. <meta>태그를 사용하면 페이지의 초기 비율과 최대/최소 비율, 그리고 사용자에 의한 스케일 조정 여부등을 설정할 수 있다.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” />


위 예제와 같이 메타(meta)태그의 이름(name)에 뷰포트(viewport)라고 지정되어 있으면 이는 스케일을 인식한다. 그리고 content라는 속성에 스케일링에 대한 내용을 기술하면 되다. Content속성 기술 할 수 있는 주요 내용은 아래와 같다.

Initial-scale

페이지가 처음 로딩될 때의 화면 확대 비율

Maximum-scale

최대 확대 비율 (0~1.0)

Minimum-scale

최대 축소 비율 (0~1.0)

User-scaleable

사용자가 줌으로 확대나 축소에 대한 가능여부 (yes,no)

width

너비(필셀) (device-width 디바이스 너비)

height

높이(필셀) (device-height 디바이스 너비)


(참고 비율 1.0 100%를 의미한다.)


Posted by happydong
, |




간혹 개발하다 보면, PC브라우져를 통해서 모바일로된 사이트를 봐야하는 경우가 생긴다. 그런데, 해당 모바일 사이트가 URL이 PC버전과 다르면 상관이 없는데, 서버에서 해당 Request Header 정보를 확인해서 현재 요청이 들어온 녀석이 어떤 OS인지, 어떤 브라우져인지 확인해서 모바일버전의 페이지 또는 PC버전의 페이지인지 확인해서 내려주면 백날 그냥 요청해 봤자 PC버전의 페이지만 보게 될 것이다. 그럼 후자의 경우처럼 서버에서 체크해서 페이지를 내려주는데 어떻게 볼수 있느냐?!! 방법은 간단할수도 있고 복잡할 수도 있다. 결론은 Request Header 정보를 변경해서 서버에서 마치 모바일 웹브라우져로 접속한 것 처럼 속이는 것이다. 그럼 어떻게 하면 될까라는 의문이 생길 것인데, 이는 브라우져 마다 설정해주는 기능이 따로 있다.

[파이어폭스 (Firefox)]
 파이어폭스 같은 경우는 부가기능 중에 이러한 처리는 해주는 녀석이 있다. 
 - User Agent Switcher 라는 것 인데 이를 설치를 하고, 도구로 가서 아래 그림과 같이 설정을 한다.

위 그림은 이미 iPhone3.0으로 선택을 한 것이다. 그냥 PC버전으로 보려면 Default User Agent를 선택하면 된다. 위와 같이 설정을 했다면 네이버로 들어가 보면, 모바일 네이버 페이지가 나타나는 것을 확인 할 수 있을 것이다.


파이어폭스를 이용해서 보는 방법은 여기까지다.


[사파리 (Safari)]
사파리 같은 경우는 파이어폭스 보다는 좀 쉽다!!
사파리브라우져에서 환경설정으로 간다. 그리고 고급메뉴를 선택을 한다. (아래 그림과 같이)


고급메뉴 맨 아래 보면 "메뉴 막대에 개발자 메뉴 보기" 체크 박스가 있는데, 이를 체크로 한다.(기본으로 체크가 안되어 있다.)
체크를 하고, 상태메뉴를 보면 아래와 같이 개발자용이라는 메뉴가 생겨져 있을 것 이다. 


개발자용 메뉴를 클릭해서 사용자 에이전트 내용을 변경하면 모바일 웹사이트를 볼 수 가 있다. 


위 내용중 아이폰,아이패드 관련을 선택을 한다. 그리고 네이버 사이트를 접속해 보자!


이로써 사파리에서도 모바일 웹사이트 보는 방법에 대해서 알아 봤다. 


[인터넷 익스플로러 (Internet Explorer)]
 인터넷 익스플로러 같은 경우는 시스템 레지스트리값을 변경하여야 확인 할 수 있다. 이는 정말 귀찮은 방법이 이므로 패스 한다.


Posted by happydong
, |