최고보다,최선을...

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

1. iOS

2. 안드로이드(Android)

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

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

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

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

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

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

Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 1. 설치, 생성, 패키징, 빌드(device, simulator)

Sencha Touch는 아이폰, 안드로이드, 블랙베리 등 다양한 모바일 디바이스의 웹 앱 개발을 지원하는 자바스크립트 프레임워크이다. 자바스크립트 프레임워크라는 말에 촛점을 맞출 필요가 있는 이유는 Sencha Touch는 거의 대부분의 코드를 Javascript로 생성하기 때문이다. Appspresso(앱스프레소)를 이용해서 하이브리드 앱을 개발하는 방법에 대해서 포스팅하는 가운데 UI javascript 프레임워크 선정할때 후보로 Sencha Touch와 JQuery Mobile, JTouch 를 생각했는데 가장 네이티브 앱에 가까운 다양한 UI 제공과 MVC 프로그래밍을 할 수 있게 설계되어 있는 아키텍처 때문에 Sencha를 HTML5 를 이용한 하이브리드 앱 개발의 UI 프레임워크로 결정했다. (HTML5 기반 앱을 만들기위해서 미리 구입한 Sencha Touch 책이 있기 때문이기도 했는데 현재 판매되고 있는 것은 Sencha Touch 1.x 기반의 책들이다. Sencha Touch 2와 Sencha Touch 1은 구조 자체가 달라졌기 때문에 이전 책을 구입하면 조금 당항할 수도 있다. 물론 Sencha 공식 사이트에서 migration 정보를 문서로 제공하고 있지만 처음부터 Sencha Touch 2로 시작하는 것을 추천하고 싶다.) 하이브리드 앱 개발하는 과정에서 UI 프로그래밍은 필수 조건이다. 그래서 Appspresso에 관련된 포스팅에 연결해서 연재하려고 하다가 Sencha 자체만해도 내용이 방대하고 어렵기 때문에 Sencha라는 카테고리로 분리해서 작성하려고 한다. (참고로 jQuery 정로도 생각하면 정말 이해하는데 어려움을 겪을수 있다.)

[자세히 보기]

[관련 내용]