모바일웹을 직접 기기에서 일일이 모두 테스트하기란 생각보다 쉽지 않다


우선 모든 기기를 구할수 없다는게 가장 큰 이유 이기도 하다.


과거 포스팅에서 관련 내용으로 몇번 소개했던 프로그램으로도 가능하지만 최근에 사용하는 두가지 방법을 소개하고자 한다.


> 다음 트로이 ( Troy ) - 모바일웹의 사이즈만 테스트 한다면 추천

- 단순히 모바일 기기의 사이즈만 규격화 한 테스트만 가능하다.

- 하지만 여러기기 에대한 정리가 잘되어있고, 멀티스크린 모드로 (모니터만 크다면) 많은 기기를 동시에 볼수있다.

- 제법 국내 지원 기기들을 지원(사이즈만..)한다.

- 물론 트로이는 반응형 웹 테스터 이다  그리고 약 2년전에 다음 labs 에서 제공한 서비스 이다.



1. 우선 트로이 접속 ( http://troy.labs.daum.net )


- 접속하면 아래와 같은 화면을 볼수있다. 여기서 위에 주소란에 원하는 사이트 주소를 입력하고 좌측에 디바이스를 선택만 하면 

바로 우측공간에서 확인이 가능하다.

- 이때 좌측 상단에 멀티스크린모드 스위치를 켜주면 여러 디바이스를 동시에 확인해 볼수 있다.

직접 user_agent 를 적용하거나 수정 할수 있는 기능은 없어 내 블로그 주소를 넣었지만 모바일 페이지로 보여지지는 않고 있다;;




2. 상세 기능 사용법


- 1. 회전 을 클릭하면 기기가 가로 형태로 변경되는것을 볼수있다.

- 2. 주소창보이기 는 클릭시 실제 기기내 브라우져의 주소창을 재연하여 반응형 구현 내용을 디테일하게 확인해 볼 수 있다.



총평 : 반응형 사이트를 운영중이라면 여러 기기에서 동시에 테스트를 진행해 볼수 있는점은 장점 이라 하겠다.



> 크롬 카나리 ( Chrome Canary ) - 추천


- 크롬은 크롬이지만 '강심장에게만 권장', '야간업데이트', '병렬 설치' 등의 카피로 소개 하고 있는 크롬의 카나리 이다.

- 사용중인 크롬 정식 버전과 '병렬 설치' 가능하다 ( 같이 쓸수있다는 말을 참 어렵게 표현한  구글..

-  위에서 소개한 다음 트로이와 는 달리 user_agent 를 직접 반영한 테스트가 가능하며, 통신망 을 선택하여 실제 기기에서의 모바일웹페이지의 상태를 제법 유사하게 테스트 해볼수 있다.

- 트로이에 비해 기기 종류는 다양하진 않지만~! user_agent 수정과 디바이스 사이즈를 직접 조정 할수 있어 테스트 하려는 기기의 스팩만 안다면 얼마든지 테스트 해볼수 있다.


1. 우선 크롬 카나리 다운로드 페이지 에서 프로그램을 다운로드 하여 설치 한다 (설치 과정은 생략)

: https://www.google.co.kr/chrome/browser/canary.html



2. 사용방법

- 우선 설치후 카나리를 실행하면 일반 크롬의 영문버전으로 밖에 보이지 않는다.

F12 를 눌러 개발자 도구를 열고 아래 그림에 왼쪽 맨하단에 파란색 스마튼폰 모양을 클릭하면 아래와 같은 UI 를 볼수있다.

- UI가 단순 하여 대충 봐도 다 아시리리 생각된다.




3. 상세 기능 사용법

- 우선 Device 옆 셀렉트박스를 클릭해보면 여러 디바이스가 정의 되어있다. 원하는 기기를 선택하면

- 내용은 해당기기의 사이즈로 설정되고 UA 에는 해당기기의 일반적인 user_agent 가 자동으로 작성되고, 실제 기기의 접속 화면과 같은 모습을 볼수있다. ( 즉, user_agent 로 구분하여 사이트를 보여주는 경우에도 실제 구동 화면을 확인할수 있다.)

- Portait : 카나리 역시 가로형 변형 모드가 존재한다.




- Network 는 예상하는것처럼 실제 통신사 에서 제공할법한 속도를 제현 하여 테스트 해볼수 있다 ( 3G, 4G, wifi 등)

그외에 하단에 Screen 에서는 원하는 사이즈를, UA 에서는 원하는 실제 user_agent 를 설정하여 테스트 해볼수 있다.

- 그외에 아래 기기 모양에서도 가로 세로르 직접 수정 할수도 있다.


- 조금더 디테일한 기기 테스트도 가능하다. 스크린샷에서는 안나왔지만 하단부를 좀더 열어보면 아래와 같은 화면을 볼수있다.

- 특히 Emulation > Sensors 에서는 터치스크린, GPS 는 물론 스마트폰 기울기 까지 테스트가 가능하다 !

- Rendering 에서도 Show paint rectangles , Show composited layer borders , Show FPS meter , Enable continuous page  repainting , Show potential scroll bottlenecks 등의 내용을 적용할수 있다.



총평 : 크롬 카나리 에서는 제법 실제 기기와 비슷한 많은 테스트가 가능하다! 적극 추천!


끝~


 

1. 우선 당연히 -_-; 크롬을 설치하고 실행시킨 오른쪽상단에 스패너 모양의 크롬 설정 및 관리 클릭.

사용자 삽입 이미지

2. 메뉴중 도구 > 확장프로그램 을 차례대로 선택 클릭.

사용자 삽입 이미지

3. 설치된 확장프로그램이 없는 경우 아래처럼 보이고, 갤러리를 찾아보시겠습니까? 링크 클릭.

사용자 삽입 이미지

4. 크롬확장프로그램 에서 qrcode 로 검색 하면 아래처럼 보이는데, 그중에 QR-Code  tag Extension 을 클릭.(개인적인 취향을 통한 선택 ㅋ)

사용자 삽입 이미지

5. 프로그램 설명 페이지에서 설치를 클릭.

사용자 삽입 이미지

6. 설치를 클릭하면 하단 상태표시줄에서 다운로드 상태가 표시되고 완료후 아래와 같은 메시지가 출력. 물론... 설치를 클릭.

사용자 삽입 이미지

7. 설치가 완료되면 아래와 같이 주소표시줄과 스패너 사이에 QRcode 아이콘이 생긴다.

사용자 삽입 이미지

8. 이제 아무사이트나 접속후 QRcode 아이콘을 클릭하면 아래와 같이 QRcode 가 자동으로 생성된다.

사용자 삽입 이미지

- Share QR code on : 옆에 F 아이콘은 페이스북으로 바로 올릴수있는 기능.
- Save QR-code to disk.. 은 적혀있는데로 컴퓨터에 바로 저장하는 기능이다.

- code 아이콘에 오른클릭후 옵션을 선택하면 아래와 같이 기본설정을 변경할수도 있다.

사용자 삽입 이미지

- 이제 웹서핑중 스마트폰(아이폰/안드로이드폰 등) 으로 봐야하는 경우 일일이 스마트폰 자판으로 힘들게 입력할 필요없이 간단한 클릭 과 스마트폰의 qrcode 스캐너를 통해 쉽게 접속 가능하다~

 

Stoyan Stefanov씨는 아이폰/아이팟 터치에서 제공하는 사파리 브라우저(이하 모바일 사파리)용 웹페이지를 구축할 때 알아두면 유용한 팁 12가지를 작성했습니다. 아시다시피 모바일 사파리는 데스크탑용 브라우저와 견주어도 손색없을 정도의 풀브라우징을 지원하며, 작은 화면에서 효과적으로 컨텐츠를 조작 및 조회할 수 있도록 추가적인 특수한 API를 제공하고 있습니다. 지금부터 소개할 12가지 팁과 트릭은 기존의 사이트를 모바일 사파리에 최적화하거나, 새롭게 구축할 때 유용하게 사용할 수 있을 것입니다.

1. 관련 문서와 아이폰 시뮬레이터

Peter-Paul Koch씨는 모바일 사파리를 가지고 연구하기 시작했을 무렵에는 그 어디에도 관련 개발 문서를 찾을수 없었다고 불평했습니다. 애플은 한참이 지나서야 모바일 사파리 브라우저의 명세인 iPhone-specific web development information 문서를 공개했습니다.

모바일 사파리용 웹사이트를 만들기 위해서 아이폰이나 아이팟 터치를 꼭 가지고 있어야 하는 것은 아닙니다. 아이폰 SDK(맥 버전만 제공됨)에서 제공하는 시뮬레이터로도 테스트 할 수 있으니까요. 이것을 설치하기 위해서는 애플측에 아이폰 개발자로 등록절차를 거친 후 SDK를 다운로드해야 합니다. 설치에 성공했다면 아래의 경로에서 아이폰 시뮬레이터를 찾을 수 있습니다.
/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications

2. 작은 화면용 CSS

PC 또는 맥과 아이폰의 분명한 차이점은 아이폰이 훨씬 작은 화면을 가지고 있다는 점입니다. 만약 이미 데스크탑 브라우저에서 잘 작동하는 웹사이트가 있다면 모바일 사파리로의 가장 간단한 최적화 방법은 아래와 같은 전용 스타일시트를 추가하는 것입니다.
<!--[if !IE]>-->
<link  
   rel="stylesheet"  
   href="small-screen.css"  
   type="text/css"  
   media="only screen and (max-device-width: 480px)"  
/>
<!--<![endif]-->

<link> 요소는 최대 너비가 480픽셀인 기기를 타깃으로 지정한 media query를 사용하여 스타일시트를 로드합니다. 이 크기는 아이폰을 가로로 보았을 때의 크기입니다. IE 조건부 코멘트는 IE 버전 5.5 또는 이하 버전이 여기에 해당하며 이 브라우저들은 media query를 지원하지 않기 때문에 우회하도록 하기 위한 것입니다. 몇가지 예제를 살펴봅시다.

예제 1에는 두가지 색상을 가진 박스가 작성되어 있습니다. 하나는 빨간색 박스이고 다른하나는 파란색 박스입니다. common.css에는 모든 브라우저를 위한 파란색 박스 스타일이 포함되어 있습니다. small-screen.css는 모바일 사파리에만 적용되는 빨간색 박스 스타일이 포함되어 있습니다. 예제를 아이폰에서 실행하면 빨간색 박스를 볼 수 있고 데스크탑에서는 파란색 박스를 볼 수 있을 것입니다.

만약 하나의 스타일시트만 사용하고 싶다면, 아래와 같이 @media 블럭을 사용하여 아이폰만을 위한 스타일을 추가 할 수 있습니다.
@media only screen and (max-device-width: 480px) {
  #test-block { 
    background: red;
  }
}

예제 2에서는 인라인 스타일 예제를 보여주고 있습니다. onestyleforall.css 스타일시트에서 @media 블럭 안에 박스의 배경을 빨간색으로 지정하는 코드를 발견할 수 있습니다.

3. 뷰포트 <meta> 요소

모바일 사파리는 기본으로 큰 화면을 가진 데스크탑 브라우저 처럼 페이지를 렌더링 합니다. 이를테면 너비가 980픽셀인 페이지를 작은 화면에 맞추기 위해서 컨텐츠의 스케일을 줄이고 있는 것입니다. 결과적으로 사용자에게는 아주 작고 읽기 어려운 문자들로 가득찬 페이지를 제공하게 되며 관심있는 부분을 보기 위해 확대해야 합니다. 웹페이지 자체에는 문제가 없어 보이지만 당신이 웹 애플리케이션을 설계하는 입장에서는 이러한 일을 받아들이기가 쉽지 않을 것입니다.

다행히도 이것은 아래와 같이 <meta> 요소에 viewport 속성을 사용하여 바로 잡을 수 있습니다.
<meta name="viewport" content="width=device-width" />

이는 너비가 980픽셀을 축소하여 그려지는 대신에 아이폰의 가로 크기를 사용할 수 있도록 합니다. 다음 두 예제를 통하여 직접 비교할 수 있습니다.

1. 예제 3에서는 <meta> 요소에 viewport 속성을 사용하지 않은 기본 단락입니다. 여기에 사용된 문자는 거의 보이지 않습니다.
2. 예제 4에서는 <meta> 요소에 viewport 속성을 포함하고 있습니다. 기기의 가로 크기는 320픽셀로 문자를 보기가 더욱 편해졌습니다.


또 다른 방법으로는 원하는 값으로 화면이 축소되도록 기기의 가로 크기를 device-width에 지정하는 것입니다. 예를 들어, 당신의 블로그가 800 x 600픽셀 화면에 맞는 가로 750픽셀 레이아웃으로 고정되어있다고 가정해 봅시다. 예제 5에서는 부가적인 빈공간을 없애기 위해, 화면영역 <meta>요소를 사용하여 가로 크기를 780픽셀로 지정하였습니다.
<meta name="viewport" content="width=780" />

예제 6에서는 이 <meta> 요소에 viewport 속성을 가진 고정 레이아웃을 볼 수 있습니다.

<meta> 요소의 viewport 속성 내용은 여러개의 콤마로 구분하여 기본 스케일 값, 줌 레벨, 스케일링 가능 여부 등을 기입할 수 있습니다. 일반적인 값들은 다음과 같습니다.
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

모바일 사파리의 가로는 기기의 최대 가로 크기로 지정되었고 줌 레벨을 1로 지정하여 사용자가 컨텐츠를 확대/축소하는 것을 방지하고 있습니다. 마치 모바일 사파리에 최적화된 웹사이트처럼 보이게 할 수 있는 것이죠.

4. 기울기(Orientation) 변화

당신의 웹 페이지 또는 애플리케이션들은 아이폰의 기울기에 따라 세로형과 가로형 이 두가지 방향으로 모드를 전환해 가며 볼 수 있습니다. 모바일 사파리에서는 자바스크립트를 사용하여 window.orientation 프로퍼티에 접근 할 수 있으며 아래와 같은 값을 가지고 있습니다.

  • 0 : 일반적인 세로 화면(홈 버튼이 아래에 있음)
  • -90 : 시계 방향으로 회전된 가로 화면(홈 버튼이 좌측에 있음)
  • 90 : 시계 반대 방향으로 회전된 가로 화면(홈 버튼이 우측에 있음)
  • 180 : 180도 뒤집힌 화면(홈 버튼이 위에 있음)

사용자가 기기를 회전할 때 이벤트를 발생시키기 위해서 orientationchange를 사용할 수 있습니다. 다음은 가로/세로 방향이 변할때마다 alert을 실행하는 예제입니다.
window.onorientationchange = function() {
  alert(window.orientation);
}

예제 7에서는 위 코드가 어떻게 작동하는지 볼 수 있습니다. alert이 실행되기 위해서는 아이폰을 회전시켜야 합니다. 아이폰 시뮬레이터에서는 하드웨어 메뉴에서 기기를 회전하는 메뉴를 찾을 수 있습니다.



5. 스타일시트의 기울기 명세

기울기에 대하여 조금 더 알아봅시다. 때때로 방향에 따라서 컨텐츠가 가진 스타일을 별도로 지정할 필요가 있을 지도 모릅니다. 이를 위해서는 아래와 같은 세가지 간단한 단계가 필요합니다.

1. 마크업에서 <body> 요소에 클래스를 추가합니다.(예: portrait와 landscape)
2. 스타일시트에 body.portraitbody.landscape에 관련된 서로 다른 스타일을 지정합니다.
3. 자바스크립트를 사용하여 회전이 발생할때마다 <body> 요소의 클래스 값을 변경합니다.

첫번째 단계는 아래처럼 기본 클래스를 추가하는 것입니다.
<body class="portrait">

그리고 스타일을 추가 합니다.
body.portrait p {
   color: red;
}

body.landscape p {
   color: blue;
}

끝으로 다음과 같은 자바스크립트 코드들이 필요합니다.

1. 최초 클래스 이름을 정의하기 위한 'load' 이벤트 리스너 추가
2. 아이폰의 회전을 감지하기 위한 'orientationchange' 이벤트 리스너
3. 'orientationchange' 이벤트가 발생할때마다 클래스명을 바꿔주는 함수

아래 코드는 위 이벤트 리스너들 할당한 것입니다.
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

다음은 <body> 요소에 클래스명을 변경하기 위한 setOrientation 함수입니다.
function setOrientation() {
  var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
  var cl = document.body.className;
  cl = cl.replace(/portrait|landscape/, orient);
  document.body.className = cl;
}

예제 8은 방향에 따라 지정된 스타일이 보여지고 있습니다.



6. 툴바 감추기

최초 모파일 사파리에 페이지가 로드되기 시작하면 URL 툴바가 보이고 페이지를 아래로 스크롤하면 URL 툴바는 사라지는 것을 알 수 있습니다.



만약 모바일 사파리에 최적화된 웹 애플리케이션을 만들고 싶다면 페이지 로드가 완료 된 후 곧장 툴바를 없애고 싶을 것입니다. 이 문제를 해결하기 위해서는 window.scrollTo메서드를 사용하여 1픽셀 아래로 페이지를 스크롤하여 해결할 수 있습니다.
window.addEventListener('load', function(){
  setTimeout(scrollTo, 0, 0, 1);
}, false);

예제 9는 아래처럼 보이게 됩니다.



페이지가 너무 짧아서 스크롤 할 내용이 없다면 어떻게 해야죠? 이럴땐 <meta>요소를 추가하세요. viewport 속성에 높이 값을 지정하여 페이지가 스크롤 될 수 있게 합니다.
<meta name="viewport" content="height=device-height,width=device-width" />

7. 둥근 모서리들

특정한 박스를 둥글게 만들어야 한다면 데스크탑용 브라우저에서 작업했던 방식으로 할 수도 있습니다. 하지만 단지 사파리 브라우저만을 위한 것이라면 -webkit-border-radius CSS속성을 사용할 수 있고 비슷한 방법으로 파이어폭스에서도 -moz-border-radius를 사용할 수 있습니다. 파이어폭스나 사파리에 border-radius CSS 속성을 사용하고 IE나 오페라일 때에는 보통 사각형으로 보이게 할 수도 있겠습니다.
.box {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   background: #ddd;
   border: 1px solid #aaa;
}

예제 10번에서는 이 CSS속성들을 이용하여 <div>요소의 가장자리를 둥글게 만들었습니다.



8. 터치 이벤트

아이폰은 마우스가 아닌 손가락으로 제어합니다. 터치하고 탭하기 위해 여러개 손가락을 사용할 수도 있습니다. 아이폰에서는 마우스 이벤트 대신에 다음과 같은 터치 이벤트를 사용할 수 있습니다.

  • touchstart
  • touchend
  • touchmove
  • touchcancel (시스템이 터치한 것을 취소하는 경우)

위와 같은 이벤트를 사용할 때 리스너는 event 객체를 전달 받습니다. event 객체는 다음과 같은 중요한 프로퍼티를 가지고 있습니다.

  • touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
  • targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.

다음은 터치를 이용한 드래그와 드랍에 대한 간다한 예제입니다. 빈 페이지에 놓여진 박스에 손가락을 올려놓고 드래그 되도록 할 것입니다. 다음 코드는 touchmove 이벤트를 등록하여 손가락으로 움직일 때마다 박스의 포지션을 업데이트 합니다.
 window.addEventListener('load', function() {
 
  var b = document.getElementById('box'),
      xbox = b.offsetWidth  / 2, // half the box width
      ybox = b.offsetHeight / 2, // half the box height
      bstyle = b.style; // cached access to the style object
 
  b.addEventListener('touchmove', function(event) {
    event.preventDefault(); // the default behaviour is scrolling
    bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';
    bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';
  }, false);
     
}, false);

touchmove 이벤트 리스너는 최초 손가락 움직임에는 반응하지 않습니다. 이것은 모바일 사파리의 페이지를 스크롤 컨트롤과 중복되기 때문입니다. event.targetTouches는 타깃 <div> 요소 위에 있는 각 손가락에 대한 데이터 목록들을 가지고 있습니다. 우리는 그중 하나에 대한 것만 필요하므로 event.targetTouches을 사용합니다. pageX는 손가락 위치의 x 좌표값입니다. 손가락이 박스의 중간에 위치할 수 있게 하기 위해 <div>의 가로 크기의 반을 x 좌표값에서 뺐습니다.

예제 11번은 위 코드로 작성되었습니다.

9. 제스처들

아이폰에는 손가락 하나 이상의 동작에 대한 제스쳐가 있습니다. 스케일링(줌-인과 줌-아웃) 그리고 회전 입니다. 기기에 터치하고 있는 각 손가락에 대한 정보를 가지고 있는 touchestargetTouches 이벤트에 관하여 우리는 이미 배웠습니다. 줌과 팬(파노라마)과 같은 제스쳐를 다루기 위해서도 위와 같은 이벤트들을 사용할 수 있지만, 조금 더 편리한 제스처 이벤트 들이 있습니다. 다음을 살펴 봅니다.

  • gesturestart
  • gestureend
  • gesturechange

다음 예제에서 gesturechange 이벤트에 반응하고 WebKit 전용 CSS 스타일 프로퍼티인 webkitTransform을 사용하여 div를 스케일링도 해보고 회전도 시켜볼 것입니다. 마찬가지로 이벤트 리스너는 이벤트 객체를 넘겨 받습니다. 이벤트 객체는 다음과 같은 프로퍼티를 가지고 있습니다.

  • event.scale : 값 1은 스케일링이 전혀 없습니다. 값이 1보다 작을 때는 줌-아웃(<div> 요소를 작게 만듦)이며 줌-인일때 1보다 값이 큽니다.
  • event.rotate - 이것은 회전 각도입니다.

아래 코드는 이전에 살펴봤던 터치 앤 드래그 코드와 매우 흡사합니다.
window.addEventListener('load', function() {
  var b = document.getElementById('box'),
      bstyle = b.style;
  b.addEventListener('gesturechange', function(event) {
    event.preventDefault();
    bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
                             'rotate('+ event.rotation + 'deg)';
  }, false);
}, false);

예제 12번은 위 코드에 대한 액션을 보여줍니다. <div>요소를 스케일링하고 회전할 수 있습니다.

만약에 아이폰 시뮬레이터로 이 예제를 확인 하는 경우, 옵션키를 활성화 하면 손가락 모양의 두 회색 점이 나타날 것입니다. 마우스를 드래그하여 그 점들을 좁히거나 늘릴 수 있습니다.



10. 특수한 링크들

아이폰에서 전화번호가 나온 페이지를 조회하다가 이 전화번호를 일일이 타이핑하지 않고 클릭만으로 전화가 걸린다면 얼마나 좋을까요? 모바일 사파리에서는 이것이 가능합니다. 전화번호 링크를 생성하기를 원한다면 tel: 스키마를 사용할 수 있습니다.
<a href="tel:12345678900">Call me</a>

SMS 문자도 문제없습니다. 아이폰 텍스트 메세지 어플에 연결되는 sms: 스키마를 사용하세요.
<a href="sms:12345678900">Send me a text</a>

다음은 특별한 URI 스키마를 사용하지는 않지만 때때로 어떠한 링크들은 아이폰에서는 특별한 액션을 취하기도 합니다.
  • 아이튠즈 스토어 링크는 아이튠즈와 연결됩니다.
  • 구글맵 링크는 지도 애플리케이션과 연결됩니다.
  • 유튜브 링크는 유튜브 애플리케이션과 연결됩니다.
  • 이메일 주소 링크는 메일 애플리케이션에 연결됩니다.

11. 홈 아이콘

기쁘게도 어떠한 방문자가 당신의 사이트를 홈스크린(아이폰애플리케이션 실행 화면)으로 등록하고 싶어할 지도 모릅니다. 일반적으로 당신의 사이트를 홈스크린으로 추가하면, 아이폰은 당신의 사이트를 스크린샷해서 아이콘처럼 사용할 것입니다. 하지만 이보다는 아이폰에 최적화된 개인 아이콘을 제공하는 것이 더 좋지 않을까요?

그렇게 하기 위해서, 57x57픽셀의 PNG 파일을 만들고 apple-touch-icon.png라고 이름 짓습니다. 그리고 패비콘과 마찬가지로 웹서버의 root에 그 이미지를 넣으면 됩니다. 아이폰은 자동으로 이미지를 글로시하게 효과를 주고 라운드 박스로 만들기 때문에 일부러 제작할 필요까지는 없습니다.



<link> 요소를 사용하여 그 아이콘의 파일 이름이나 위치를 변경할 수도 있습니다. CDN처럼 다른 웹서버에서 이미지를 호스트하는 경우라면 <link> 요소에 아이콘의 위치를 지정하기 위해 다음과 같이 작성하세요.
<link rel="apple-touch-icon" href="http://www.example.com/my-filename.png" />

12. 디버깅: 소스 보기와 콘솔

아이폰에서 어떻게 소스를 볼 수 있을까요? 불행하게도 모바일 사파리만으로는 불가능합니다. 하지만 다행스럽게도 북마클릿은 모바일 사파리에서도 사용할 수 있기 때문에 소스를 조회하는 기능을 가진 북마클릿을 사용 할 수 있습니다.

자바스크립트document.documentElement.innerHTML를 사용하여 페이지의 소스를 출력할 수 있고 이러한 내용을 북마클릿으로 만들어 새 창으로 소스를 볼 수 있습니다. iPHoneWebDev에서는 이미 이런 소스보기 관련 북마클릿를 여럿 제공하고 있으며 이 밖에도 모바일 사파리의 디스플레이를 최적화 하는데 도움을 주는 다른 것들도 많습니다. 이 북마클릿을 사용하기 위해서는 데스크탑용 사파리에서 즐겨찾기에 추가하고 아이튠즈로 동기화하면 됩니다.

모바일 사파리는 디버깅 콘솔을 가지고 있습니다. 환경설정 > 사파리 > 개발자용 > 디버그 콘솔 옵션을 활성화하면 아이폰에서 디버깅 콘솔을 작동시킬 수 있습니다. 자 이제 디버그 콘솔이 사파리 브라우저 URL 툴바 아래에 나타날 것입니다. 페이지에 대한 에러를 보여주고 자바스크립트에서 디버그 메세지를 작성하기 위해 콘솔객체가 사용될 겻입니다.
console.log('Something');
console.error('Oops');
console.warning('Beware!');

이 것을 끝으로 흥분되고 도전할 만한 새로운 아이폰애플리케이션 개발에 조금이나마 도음이 되셨으면 좋겠습니다. 당신만의 특별한 아이디어로 승부하여 이루고자 하는 것들을 모두 이뤄내시길 바랍니다.
------------------------------------------------------------------------------------------------------------
출처 : http://firejune.com/1506

'퍼담기' 카테고리의 다른 글

무한도전 비빔밥 광고  (0) 2010.11.26
sendmail  (0) 2010.08.16
Pots Of Gold  (0) 2010.06.21

 

[사파리 를 이용한 아이폰/아이패드/아이팟 터치 모바일웹 테스트 하기]

1.우선 사파리5 를 설치합니다. (http://www.apple.com/kr/safari/download/)
  설치되어있다면 pass~

2. 설치한 사파리의 메뉴중 오른쪽 상단의 톱니바퀴 메뉴를 클릭 > 메뉴 중 기본설정을 클릭합니다.

사용자 삽입 이미지
 

3. 기본설정 > 고급탭 의 [메뉴 막대에서 개발자용 메뉴보기] 를 체크해줍니다.

사용자 삽입 이미지

4. 다시 사파리창으로 돌아와서 이번에는 페이지 모양의 아이콘을 클릭하면 개발자용 메뉴가 보이게 됩니다.
   개발자용 > 사용자 에이전트 를 차례대로 선택하면
   스샷에서 보이는것 처럼 여러가지 플랫폼으로 간단하게 전환이 가능합니다.

   훌륭합니다.

   단, 크기는 직접 손으로 조정해야한다는거 말고는 -_-;;(크기까지 해당 플랫폼과 맞게 딱 고정되었다면 좋겠다는!!)

사용자 삽입 이미지

사용자 삽입 이미지



5. 사파리깔기도 귀찮고, 이것마저도 귀찮다~면 그냥 다른 사람들이 만들어둔 사이트를 접속하는게 좋겠네요

- 아이폰 테스트 사이트
http://www.iphonetester.com/
http://www.testiphone.com/

- 아이패드용 테스트 사이트
http://www.ipadpeek.com/


6. 아니면 윈도우용 시뮬레이터를 설치해서 테스트~
  이전 포스팅가기



[아이폰용 모바일웹 제작 팁]

1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기

<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />

2. 툴바숨기기

<script type="text/javascript">
 window.addEventListener("load",function(){
  setTimeout(scrollTo,0,0,1);
 },false);
</script>

3. 화면 회전시 폰트사이즈 고정

auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
 
 html {

      -webkit-text-size-adjust:none;

  }

4. 모바일웹페이지를 가로 크기에 딱 맞추기

user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0  : 페이지 로딩시 확대비율
maximum-scale=1.0  : 최대확대비율
minimum-scale=1.0  : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.

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

 5. 회전에 따라 다른 css 적용하기

 <script type="text/javascript">
 function orient()
 {
  switch(window.orientation){
   case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
    break;
   case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
   case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
  }
 }
 window.onload = orient();
  </script>

 <body onorientationchange="orient();">
 </body>

 6. 기본 어플 호출하기

 - 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>

 - 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
 - 문자보내기실행 : <a href="sms:">문자보내기</a>

 - 메일보내기실행 : <a href="mailto:">메일보내기</a>
 - 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
 - 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>

 

모바일웹을 제작 할때의 가장 큰 문제는 만드는 환경은 PC이지만 실제 제공되는 환경은 스마트폰을 필두로한 개인 단말기들입니다. 모든 단말기를 소유하고 있어 테스트가 가능하다면야 전혀 문제가 되지 않겠지만, 그렇지 않다면 PC에 설치되어 테스트해볼수있는 시뮬레이터는 큰 도움이 될것입니다.

단, 맥기반의 PC 를 소유하고 있다면~ 당연히 SDK 설치하고 거기서 쓰는 진짜 시뮬레이터 ( 개발한 앱까지 테스트해볼수있는 -ㅅ-;) 가 100만배 당연한 일이겠지요~

하지만 그렇지 않다면~ 모바일웹 제작시에(앱은 테스트 불가능합니다.) 아이폰/아이패드 테스트로는 쓸만 할듯합니다.

Adobe 사의 Air 를 기반 Air 가 작동되는 환경이라면 구동이 가능합니다.
이름 :
ibbdemo2
제작 : http://labs.blackbaud.com/NetCommunity/Page.aspx?pid=249
구글 프로젝트 : http://code.google.com/p/ibbdemo2/

단축키를 통해 아이폰/아이패드 시뮬레이터간 전환이 가능하며, 회전, 플래쉬 온/오프 (실제 아이폰OS 브라우저인 사파리에서는 플래쉬가 구동불가입니다만) 기능 외 몇몇 기능이 주어집니다.

[설치 방법]
간단합니다. Adobe Air가 없다면 설치하고 그리고 iBBdemo2 를 설치하면 끝입니다.

1. Adobe air 다운로드 및 설치.

다운로드 : Get ADOBE AIR(http://get.adobe.com/kr/air/)
 

사용자 삽입 이미지


사용자 삽입 이미지



2.iBBDemo2 다운로드 및 설치
다운로드 :
http://code.google.com/p/ibbdemo2/downloads/detail?name=iBBDemo2.air&can=2&q=

사용자 삽입 이미지


사용자 삽입 이미지


3. 완료

설치 완료후 바로 실행을 체크 하셨다면 바로 아이패드 화면을 보실수 있습니다.
012



[시뮬레이터 사용법]

- 마치 맥에 설치된 SDK 마냥 단축키를 통해 제어 가능합니다. (처음 아이패드 실행시 떠있는 사이트가 단축키 설명 페이지)

- 단축키
CTRL + 1 : 아이패드로 전환
CTRL + 2 : 아이폰으로 전환
CTRL + 좌/우 방향키 : 아이폰/아이패드 회전
CTRL + D : 주소표시줄 토글  (마우스를 상단에 가져가도 나옵니다.- 아이폰 전용)
CTRL + + : 확대
CTRL + - : 축소
CTRL + SHIFT + F : 플래쉬 지원 기능 ON/OFF (실제 아이폰엔 없는기능이죠;;)

- 기타 기능
홈키 클릭 : 제작홉페이지로 돌아갑니다 가로 상태에서는 프로그램 종료
스크롤 : 화면 빈공간 클릭후(즉 포커스를 주고나서) 방향키 로 혹은 마우스 휠로 스크롤이 가능합니다.(웹브라우져와 동일하네요)
주소표시줄의 아이폰상의 새로고침/주소삭제 아이콘도 동일하게 작동합니다.
단, 그외에 키보드 입력, 이전/이후 즐겨찾기, 브라우저 화변 전환 등의 아이폰 브라우저 기능은 빠져있습니다.

다음엔 안드로이드용을 한번 찾아봐야겠네요 ^^;

 

스마트폰이나 각종 휴대기기로 웹페이지 접근시 지원하는 모바일웹페이지로 연결하기

<SCRIPT LANGUAGE="JavaScript">
<!--
 var strGoto = "http://m.blueweb.co.kr/"; //모바일접근시 이동원하는 페이지주소
 var str = window.navigator.userAgent.toLowerCase();
 if(/iphone/.test(str) || /android/.test(str) || /opera/.test(str) || /bada/.test(str)) document.location.replace(strGoto);
 //-->
</SCRIPT>

소스 아래 출처에서 가져와서 아주 조금 수정.

출처 :  http://pakaeuro.blog.me/110093238441

 



(주)블루웹 에서 모든 호스팅에 대해 모바일웹 모두를 지원한다.
제작에 대한 지식이없어도 간단하게 신청시 자동으로 셋팅되어 진다.
메인페이지/서브페이지의 텍스트의 간단한수정및 문의 메일 보내기 다음 지도 api를 통한 약도 서비스 까지 지원된다.

skyand96.com



기존의 호스팅 사용자에게도 무료로 지원된다고 한다.

모바일웹 지원대상

- 블루웹 모든 호스팅을 신규로 신청하거나 현재 이용중인 고객.

신청방법

- 기존고객:

마이페이지 > 호스팅관리 > 모바일웹신청/관리 페이지에서 신청가능

마이페이지 > 호스팅관리 > 모바일웹 신청/관리 페이지에서 사용할 모바일웹 주소와 디렉토리명 두가지 사항만 입력 하면 신청 된다.
 

skyand96.com


- 신규고객:

호스팅 신규신청시 신청 가능.

호스팅 신청 페이지에서 사용할 모바일웹 주소와 디렉토리명 두가지 사항만 입력 하면 자동으로 호스팅 세팅 완료 시 모바일웹도 세팅.

사용자 삽입 이미지


관련 이벤트

모바일웹 서비스 오픈과 함께 스마트폰 관련하여 이벤트도 진행중이다.

하단의 이미지를 클릭하면 이벤트 페이지로 이동 할수있다.

skyand96.com

skyand96.com



블루웹 : http://www.blueweb.co.kr/
블루웹 모바일웹 무료지원 안내페이지 : http://www.blueweb.co.kr/2010_mobile01.html
블루웹 이벤트 페이지 : http://www.blueweb.co.kr/2010_mobile04.html

'정보공유' 카테고리의 다른 글

pe.kr 도메인 할인 이벤트  (0) 2010.11.12
충전기없이 충전하는 USB 건전지  (0) 2010.09.06
텍스트큐브 로그인시 딜레이현상  (0) 2010.08.25

 

아이폰을 11말 구매후 지속적으로 사용하는건 앱이 아닌 사이트다~
Jquery 를 사용한 사이트인데~ 모바일 브라우져에서만 열람 가능한듯하다~

프로야구 포켓정보 : http://overfloweb.com/baseball/#home

skyand96.com skyand96.com




당일 치뤄지는 경기의 대전표와 선발 투수 정보를 기본으로 제공하고 ( 토토할때 아주유용 -_-;)

현재 팀순위, 타자순위, 투수순위, 선수정보 등등의 여러가지 정보를 조회해 볼수있다.

Jquery 프레임웤 을 사용해서 아이폰 플랫폼을 그대로 닮아 있는게 장점(?) 이다.

여하튼 이렇다할 국내 프로야구 앱이 없는 시점에서 보면 최고의 웹페이지 인듯 하다~

skyand96.com skyand96.com

 

+ Recent posts