스마트폰에서는 검색도 스마트하게!!!

Mobile 2010/03/08 00:35
모바일 시작페이지  iWebStart (http://m.xiles.net) 검색이 업데이트되었습니다.
아직 너무나도 미미한 시작이지만,
스마트폰에서는 검색도 스마트하게!!!

m.xiles.net 에서 로또, 피자헛, 콜택시, 클리앙, 야후를 검색해보세요.
바로 전화를 걸 수 있는 검색결과나 모바일 사이트를 검색해서 보여줍니다.

스마트 검색에서 원하는 결과가 나오지 않으면 바로 일반 검색 페이지로 넘어갈 수 있습니다.

아직은 몇 가지 적용된 것이 많지 않은 상태이지만,
스마트폰에서 검색했을 때 사용자들이 원하는 것만 간단히 보여주는 그리고 모바일 사이트를 검색해서 나오는 경우 모바일 전용 사이트로 접속해서 사용할 수 있도록 해주고자 합니다.


로또를 검색하는 경우 거의 이번주 로또 결과를 알고자하는 것일테니 딱 그것만 보여줍니다.
혹 다른 것을 원하는 사용자는 '일반 검색 결과 보기'로 일반 검색결과를 볼 수 있습니다.


폰에서 '피자헛'을 검색하는 경우 주변의 피자헛 위치를 찾거나 혹은 주문을 하려고 전화를 걸려는 두 가지 목적인 경우가 많겠죠. 우선은 바로 터치하면 전화걸기를 할 수 있는 결과를 보여줍니다. 추후 주변 피자헛 위치를 보여주는 기능도 추가할 예정입니다.


막차를 검색하는 것이면 막차시간 보려는 것이겠죠. 일반 검색으로 들어가서 또 여기저기 찾아들어갈 필요없이
막차시간을 알려주는 서비스하는 모바일 사이트가 있는 경우 바로 모바일 전용사이트로 갈 수 있도록 해줍니다.


폰에서 콜택시 검색. 콜택시를 부르려는 것이겠죠?
주요 콜택시에 바로 전화를 걸 수 있는 검색 결과를 보여줍니다.



기타 꼭 필요한 정보만 먼저 검색해서 보여주는 스마트 검색은 차차 추가될 예정이니다.
스마트폰에서는 스마트폰에 맞는 스마트 검색!!

여기저기 찾아헤매지마세요~~



Posted by xiles
TAG iWebStart, xiles, 검색, 모바일, 스마트검색, 스마트폰, 아이폰, 옴니아, 포탈
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

모바일 웹사이트 만들기 - DOCTYPE 및 viewport

Mobile 2010/02/16 17:37
아이폰/아이팟용 웹사이트 만들기에서 viewport 메타태그에 대해서 언급을 했었다.
그런데 이것만으로는 모든 브라우져에서 딱 맞는 페이지가 만들어지지 않는다.

오페라 미니에서 열어보니 아래처럼 좌우 스크롤이 생기고 viewport 메타태그로 의도했던 좌우 스크롤없이 딱 맞는 페이지로 보이지 않는다.


그럼 오페라 미니에서도 제대로 좌우 스크롤 안생기고 딱 맞는 사이즈로 맞추려면 어떻게 해야 할까?
아래처럼 DOCTYPE을 XHTML Mobile 로 지정해주면 된다.


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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


HTML의 헤더 부분에 위처럼 DOCTYPE과 viewport 메타태그를 같이 사용해주면, 아이폰/아이팟에서도 좌우 스크롤 없이 꽉 찬 상태로 그리고 오페라 미니에서도 꽉 찬 상태로 보여지게 된다.

그런데 옴니아2나 기타 폰에서 오페라 브라우져를 이용해서 들어가면 폰을 세로로 세운 것을 기준으로 가로 사이즈가 다르다. 아이폰이 320픽셀이라면 옴니아2에서 오페라로 이용해보니 더 3/4 정도 사이즈로 표현이 되어 아이폰에서는 한 줄당 4개씩 보이는 것이 아래처럼 3개씩 보이는 정도의 사이즈로 보인다.



* 아이폰용으로만 만들면 사이즈와 브라우져가 통일되어 있으니 좋은데, 다른 브라우져를 맞추려면 이것도 만만찮은 일인 것 같다. 우선 오페라 미니는 http://www.opera.com/mini/demo/ 에서 시뮬레이터로 대략 돌려볼 수는 있다. 그리고 윈모바일에 IE Mobile에서도 확인하려면 윈모바일 에뮬레이터 등을 설치해서 확인해봐야 한다.

그리고 PC에서 IE6 맞추듯 아직 IE Mobile이 다른 모바일 브라우져들에 비해 좀 뒤쳐지는 경향이 있어 이것까지 맞추기는 어려울 듯 하고, 얼릉 모두 표준을 잘 지켜줬으면 하는 바램;;

모바일에서는 아무래도 작은 화면 속에 구성을 얼마나 잘하느냐가 관건인듯 하다.



Posted by xiles
TAG DOCTYPE, HTML, IE모바일, viewport, 모바일 사이트, 사파리, 스마트폰, 아이폰, 오페라, 옴니아, 제작
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

아이폰/모바일 시작페이지 iWebStart 업데이트

Mobile 2010/02/06 00:46
모바일 전용 사이트를 모아놓아 다양한 모바일 사이트를 쉽게 이용할 수 있도록 해 놓은 아이폰/모바일용 시작페이지 iWebStart가 업데이트되었습니다.

주소: http://m.xiles.net

이번 업데이트는 사용자가 가입 후 간단한 사용자화를 통해서 원하는 것만 골라 볼 수 있도록 개선되었습니다.
자신이 원하는 것만 골라볼 수 있어 그만큼 페이지 용량도 작게 사용할 수 있습니다.

화면 제일 아래로 내려보면, '가입' 버튼과 '로그인' 버튼이 있습니다.


가입버튼을 터치하면 아래처럼 아주 간단히 아이디와 비번만 입력하면 가입할 수 있습니다.


가입하면 바로 로그인된 상태로 됩니다. 로그인을 한 번 하면 다음번에는 자동으로 로그인되어 있습니다.
로그아웃하고 싶으면 '로그아웃' 버튼을 터치하면 됩니다.

로그인한 상태에서는 '편집', '소환', '로그아웃' 버튼이 보입니다.


'편집' 버튼을 터치하면 아래처럼 보기 원치않는 것을 삭제할 수 있습니다.
편집을 다 했으면, '완료' 버튼을 터치하면 완료됩니다.



그럼 안보이도록 삭제한 것을 다시 보고 싶으면?
'소환' 버튼을 터치하면 아래와 같이 삭제된 것들만 보이게 됩니다.
여기서 다시 보이게 할 사이트들을 터치해서 체크를 하고, '확인' 버튼을 터치하면 다시 메인페이지에 나옵니다.



아직 위치/순서 이동은 되지 않으니 드래그는 하지 마세요~^^

Posted by xiles
TAG iWebStart, xiles, 모바일, 모바일사이트, 모바일포탈, 스마트폰, 시작페이지, 아이폰
트랙백 0개, 댓글 4개가 달렸습니다

댓글을 달아 주세요

  1. night509 2010/02/16 17:54  댓글주소  수정/삭제  댓글쓰기

    iWebStart 모바일용 링크 정리해 주셔서 잘 사용했었습니다. ^^;
    만들어 주신것에 대해서 먼저 감사를...
    제가 사용하는 단말이 iPhone이 아니라 WM6.5를 사용하고 있는데 Update를
    하시기전에는 WM 6.5에서 iexplorer 띄워서 잘 사용했었드랬지요..
    근데 Update 하신 후에는 icon을 아무리 눌러도 해당 페이지로 넘어가질 안네요.
    iPhone 전용이라고 하심 어쩔수 없지만 그게 아니라면 WM계열에서도
    사용할 수 있게 좀 해주시면 감사하겠습니다. ^^;
    그럼 추운날 감기 조심하세요~, 그리고 Nexusfile도 잘 쓰고 있어요~ㅋㅋ

    • xiles 2010/02/16 18:19  댓글주소  수정/삭제

      흙 ㅠㅜ 이런..
      그런 일이 있었군요;;
      근처에 윈모 기계를 가진 사람이 없어 테스트를 쉽게 해보지 못해서 금방 될런지는 모르겠지만
      윈모 에뮬레이터나 뭔가 설치해서 테스트하게되면 수정해보도록 하겠습니다~

    • xiles 2010/02/18 12:56  댓글주소  수정/삭제

      이제 클릭 되실겁니다~

    • night509 2010/02/28 01:17  댓글주소  수정/삭제

      생각나서 미라지로 들어가서 확인해 봤습니다.
      잘되더라고요.^^; 감사해요~

아이폰을 가진 여성분이라면 이런 모바일 사이트 어떠세요?

Mobile 2010/02/03 19:18
요즘 보면, 전자기기를 좋아하는 남성분들 뿐만아니라 여성분들도 아이폰 등의 스마트폰을 사용하는 것을 많이 볼 수 있다.
스마트폰을 들고다니면서 인터넷을 자유롭게 할 수 있는데, 여성분들은 어떤 모바일 사이트들을 많이 들어갈까?
아직 모바일 사이트라고 해봐야 그렇게 많이 나온 편은 아니고 정보류의 사이트들이 많은 상황.

여성의류 쇼핑몰 오후의 키스에서 폰을 들고다니면서 인터넷으로 신상 및 사이트에서 볼 수 있는 상품 모두를 모바일기기에 최적화된 크기로 편하게 볼 수 있도록 모바일 버전 사이트를 만들었다.

사이트에 올려지는 신상도 바로바로 볼 수 있고, 찜하기를 해두면 PC에서 오후의키스에 로그인하고 바로 찜해둔 상품들을 확인 할 수 있다. 또는 조르기 기능을 이용하면 바로 이메일로 상품 페이지 URL과 상품 사진을 보낼 수도 있다.

모바일 기기에서 바로 결제가 안된다고 하지만 어차피 모바일 기기에서는 전체적으로 상품들을 둘러보고 찜해두고, PC에서 큰 사이즈로 상품을 제대로 확인하고 결제를 하면 되니깐.

스마트폰을 들고다니며 게임, 동영상, 음악뿐 아니라 심심할 때 아이쇼핑도 할 수 있으면....

http://m.ohookiss.tv





Posted by xiles
TAG 결제, 모바일, 사이트, 쇼핑몰, 스마트폰, 아이쇼핑, 아이폰, 여성, 여성의류, 오후의키스, 패션
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

모바일 막차시간 안내 서비스 - 집에가자

Mobile 2010/01/31 17:07
우선 주소는 http://m.xiles.net/gohome

다른 지하철 정보, 버스 정보를 알려주는 어플리케이션, 사이트들도 있지만
이 서비스는 접속하면 바로 자기 근처 반경 약 1km 내에 있는 지하철역과 해당 반경 내에 있는 버스정거장을 지나는 버스 목록과 막차시간을 보여준다. (검색 반경은 옵션에서 선택 가능)

다른것보다도 자기 위치 근처의 이용가능한 대중교통과 '막차시간'에 집중한 서비스이다.
스마트폰이 여러 정보에 접근할 수 있어 편하긴하지만 아무래도 작고 하다보니 딱 실행하면 딱 볼 수 있는 그런것이 편한데, 교통정보 중에서도 사용자들이 많이 확인하는 것 중 하나가 막차시간인 것 같아 이 서비스를 만들어보았다.

물론 추가 선택을 통해 다른 지하철역에 대한 정보, 버스 노선에 대한 정보를 볼 수 있다. (버스 정보는 아직 서울에 한정되어 있음)
 

접속하면 바로 아래처럼 자기위치 근처에서 이용가능한 지하철과 버스 정보를 보여준다.
버스는 막차시간이 늦게까지 있는것이 가장위에 오는 순으로 정렬되어 보여진다.

아래는 옵션선택: 반경 몇km 안에 있는 것들을 검색할지 정할 수 있다.


지하철역을 선택하면 아래처럼 '막차시간'을 가장 먼저 보여준다.
오늘 날짜에 맞는 시간표가 자동으로 선택되고, (아래 이미지에 표현은 안되었지만) 이미 지난 시간의 것은 흐리게 보여주어 남은 시간을 좀 더 쉽게 볼 수 있도록 되어 있다.


'정보'를 클릭하면 아래처럼 추가 정보를 보여준다.
전화번호를 터치하면 바로 전화를 걸 수 있고, 주소부분을 터치하면 지하철역 위치를 보여준다.


위 화면에서 주소부분을 터치했을 때 나오는 지도. 빨간 핀으로 지하철역 위치가 나오고 파란점 모양이 내 위치이다.
지도를 움직이다. '아차산'이라 써있는 부분을 터치하면 바로 역위치로 지도가 움직이고, '내위치' 버튼을 터치하면 바로 내 위치로 지도가 이동한다.


아래는 원하는 지하철역을 선택해서 지하철 역 정보를 볼 수 있는 기능


아래는 버스 노선 번호로 검색하는 기능


버스를 선택하면 아래처럼 버스의 노선 정보를 볼 수 있고, 역 이름을 터치하면 역 위치를 보여준다.
그리고 지금 내 위치에서 가장 가까운 역을 보여주어 해당 역을 바로 선택해서 위치를 확인할 수 있다.



역을 터치하면 아래처럼 선택한 역은 빨간핀으로 나머지 버스가 지나는 역은 파란핀으로 표시된다.
파란 원은 내 위치.


Posted by xiles
TAG xiles, 교통정보, 막차시간, 모바일, 모바일사이트, 모바일서비스, 버스, 스마트폰, 아이폰, 지하철, 집에가자
트랙백 0개, 댓글 2개가 달렸습니다

댓글을 달아 주세요

  1. 랭 2010/02/26 08:57  댓글주소  수정/삭제  댓글쓰기

    오 지금 해보니 좋은데요
    회식이나 친구 술자리때 유용해 보이는군요

    아에 어플로 만들어도 될것같아요

  2. 나비엔제이 2010/02/26 14:05  댓글주소  수정/삭제  댓글쓰기

    옛쁜옷 쇼핑몰은? <나비엔제이>

    주소는? <http://www.nabinj.com>

    봄신상입고 되었어요~ ^_^

모바일 브라우징. 모바일 사이트

Mobile 2010/01/27 13:56
아이폰, 옴니아, 안드로이드 등 스마트폰 출시 붐과 함께 인터넷 이용에 큰 변화가 오고 있다.
스마트폰들에는 모바일 브라우져가 탑재되어 있고 기존 폰들에서 할 수 없던 인터넷 사용이 가능해졌다.

물론 이전 폰들에서도 여러가지 방법으로 정보를 얻을 수 있고, 일종의 모바일 브라우징이 가능했지만
스마트폰에서는 컴퓨터 앞에서 하던것과 거의 유사한 형태로 쉽고 풍부한 웹을 경험할 수 있다.

아이폰 출시 이후 수많은 기사들을 비롯, 여기저기서 어플리케이션(앱스)에 대한 이야기들이 끊이지를 않고 있다.
그런데 생각보다 아직 모바일 웹에 대한 인식은 그다지 많지 않은것 같다.
(물론 어플리케이션을 개발자/개발사에서 쉽게 유료로 판매할 수 있는 모델이 있기에 이 점을 무시할 수는 없지만)

물론 지금 있는 홈페이지(사이트)들도 대부분 브라우징이 가능하지만 작은 화면 크기에서 정말 '원활한' 브라우징은 좀 힘든게 사실이다. 아마 차츰 모바일 전용 사이트들이 많이 생겨날 것이다. 지금은 네이버, 다음, 파란 등 포털들과 일부 사이트들 외에는 아직 국내에서는 모바일 전용 사이트를 가진 곳은 그렇게 많지 않다.
아직 모바일 브라우징이라는 것이 엄청난 대세인 상태는 아니지만, 무언가 웹사이트를 운영하고 있다면 그리 멀지 않은 시점에서 모바일 사이트를 만들 준비는 하고 있어야 할 것이다.

아무래도 폰에서는 한꺼번에 많은 기능을 하는 그런것 보다는 작은 기능을 하는 다양한 것들이 많이 존재하게 될 것 같다.
그런것들이 어플리케이션으로 사용할 수 있으면 좋겠지만, 어플리케이션은 각 OS별로 따로 제작이 되고 유지되어야 한다.
물론! 다양하게 제공할 수 있으면 더할나위없이 좋지만, 많은 경우 그렇게 여력이 많지 않을 수도 있으니...

반면에 모바일 웹서비스로 구현하는 경우 사용자들은 다운받을 필요도 없고, 만드는 입장에서는 어플리케이션에 비해 조금 더 수월하게 다양한 기기를 지원할 수 있다. 그리고 빠른 업데이트도 가능하다.
많은 브라우져들이 HTML5를 지원하기 시작하면서 좀 더 멋진 웹사이트 제작이 가능해지고 있기에 모바일에서 또한 어플리케이션에 못지 않은 다양한 서비스들이 만들어질 수 있을 것이다.

http://m.xiles.net 에 개인적으로 좀 괜찮게 만들어졌다 싶은 모바일 전용 사이트들을 모으고 있는데, 모바일 어플리케이션이 받는 스포트라이트에 비하면 아직 그 수가 엄청 적은 것 같다. (역시..돈이 연관이 되어야...;;;;)

어쨋든 사용자들은 어플리케이션도 어플리케이션대로 많이 사용하겠지만, 앞으로는 모바일 사이트들도 엄청 많이 사용할 것이라는 것!


Posted by xiles
TAG 모바일, 모바일사이트, 브라우징, 스마트폰, 아이폰, 안드로이드, 앱스, 옴니아, 웹
트랙백 0개, 댓글 2개가 달렸습니다

댓글을 달아 주세요

  1. boombeem 2010/01/31 12:01  댓글주소  수정/삭제  댓글쓰기

    위치기반 소셜 게임 boombeem.com 도 모바일 싸이트로 만들어졌습니다. 아이폰과 안드로이드에서는 돌아가던데 모바일 익스플로러에서는 어떻게 될지 잘 모르겠네요.

  2. 핑크팬더 2010/01/31 21:39  댓글주소  수정/삭제  댓글쓰기

    m.myasset.com 여기도 금융권 최초로 동양종금에서 모바일 사이트로 만들어져 있습니다.
    타치휴대폰에서나 스마트폰에서만 접속이 가능하지만 은행이체, 주식주문, 잔고확인 다 가능합니다.

플레이스트리트 모바일 사이트 오픈.

Mobile 2010/01/26 18:34

플레이스트리트 모바일 사이트를 열었습니다.

아이폰에서 모바일 플레이스트리트(http://m.playstreet.net)에 접속해보세요.

(현재는 아이폰에서만 테스트가 완료된 상태입니다.)

 

지역별로 주요 상점들에 대한 정보를 보실 수 있습니다.

지금 가까운 곳에 갈만한 곳이 어떤 곳들이 있는지 플레이스트리트에서 찾아보세요.


Posted by xiles
TAG playstreet, 내위치, 내주변, 모바일, 모바일브라우징, 스마트폰, 아이폰, 지역정보, 플레이스트리트
트랙백 0개, 댓글 1개가 달렸습니다

댓글을 달아 주세요

  1. 마법사 2010/01/26 21:47  댓글주소  수정/삭제  댓글쓰기

    홈화면에 추가 했습니다. 전부터 이게 아이폰용으로 나왔으면 했는데.. 감사~

아이폰용 웹사이트에서 전화걸기 구현 방법

Mobile 2010/01/09 17:13
아이폰에서 웹사이트에 접속하고 특정 링크를 클릭하면 바로 전화를 걸 수 있는 것들을 볼 수 있다. 이것들은 어떻게 만들 수 있는 것일까?

생각보다 별 것 없이 아주 간단하다. 이메일 주소 링크를 사용할 때 mailto: 를 사용하듯 tel:을 이용하기만 하면 된다.

예) 일반적으로 다른 페이지/사이트로 링크를 걸 수 있는 <a> 태그에 "tel:"을 이용하면 된다.
<a href="tel:010-1234-1234">전화걸기</a>

아이폰 사파리를 이용해서 웹페이지를 열면, 전화번호 형태로 생긴 텍스트에 자동으로 전화를 걸어주는 링크를 만들어 보여주는 기능이 있다. 내가 위처럼 구지 <a> 태그를 사용하지 않아도 웹 페이지 내에 02-123-4567 과 같은 텍스트가 있으면 자동으로 링크를 만들어 보여준다.

이렇게되면 편하기는 한데, 가끔 원치않게 링크가 걸리는 것이 싫을 때도 있을 것이다. 이럴 때는 아래 메타 태그를 입력해주면, 사파리가 임의로 자동으로 링크를 만들지 않는다.

<meta name = "format-detection" content = "telephone=no">

아래 서비스는 위 기능을 이용해서 간단히 만든 페이지이다. (일반 컴퓨터에서는 안되고, 아이폰에서만 기능이 동작한다.)


Posted by xiles
TAG HTML, 구현, 사이트, 아이폰, 전화걸기, 태그
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

아이폰용 모바일 사이트 모음 http://m.xiles.net 업데이트

Mobile 2010/01/08 13:22
아이폰용 모바일 사이트 모음 http://m.xiles.net 에 "새창으로 열기" 옵션이 생겼습니다.
한 번 설정해놓으면, 계속 기억이 되니 원하시는 상태로 설정해두시고 사용하시면 됩니다.

그리고 드디어 KT에서 공식으로 제공하는 통화/문자/데이터 사용량 조회 페이지도 추가되었습니다.


Posted by xiles
TAG KT, xiles, 모바일, 사이트, 새창, 서비스, 쇼, 아이폰, 옵션
트랙백 0개, 댓글 6개가 달렸습니다

댓글을 달아 주세요

  1. 양군 2010/01/08 15:29  댓글주소  수정/삭제  댓글쓰기

    정말 유용합니다.
    감사합니다. 잘 쓸게요.
    특히, 타자연습은 덕분에 알게 되었네요 ^^
    제 타자수 : http://twitpic.com/x61zf

    • xiles 2010/01/08 15:59  댓글주소  수정/삭제

      꽤(?) 치시네요^^
      예전에 한메타자에 있던 베네치아게임 같은 어플 만들면 사람들이 좋아할까요? ㅎㅎ

  2. 마술사 2010/01/09 04:58  댓글주소  수정/삭제  댓글쓰기

    요금확인 좋네요. 아이폰 이용자들에겐 유용 할듯

    • xiles 2010/01/09 16:02  댓글주소  수정/삭제

      네, 전화해서 알아볼 수도 있긴하지만 아무래도 그냥 이렇게 볼 수 있음 좋은 것 같아요^^
      KT에서도 더 자세히(?) 볼 수 있도록 개선한다고 했으니 더 좋아질 것 같습니다~

  3. 오픈검색 2010/01/09 13:44  댓글주소  수정/삭제  댓글쓰기

    앞으로 아이폰에서 유용하게 쓸 수 있을 것 같군요, 애용하겠습니다.
    늦었습니다만, 새해 복 많이 받으십시오!

    • xiles 2010/01/09 16:00  댓글주소  수정/삭제

      네, 하테나님도 새해 복 많이 받으세요~
      일본에서는 애초에 모바일 인터넷이 워낙 발전하긴 했을텐데, 어떤 사이트들이 가장 인기가 많은가요?

아이폰/아이팟용 웹사이트 만들 때 알아둬야 할 기본

Mobile 2010/01/02 20:40
최근 아이폰 등 스마트폰이 인기몰이를 하면서 스마트폰에서 웹서핑을 하는 사람들이 늘어나고 있다.
대부분의 스마트폰에서 풀브라우징을 지원하고 있기 때문에 컴퓨터에서 인터넷을 하듯 대부분의 사이트를 이용할 수 있다. 하지만 작은 화면 크기 때문에 기존 사이트들을 이용하기에는 다소 불편함이 있다. 그래서 네이버, 다음 등 포탈을 비록하여 모바일 전용 홈페이지를 만들어 서비스하는 곳이 늘어나고 있다.

아마 스마트폰을 이용한 웹검색/서핑은 급속도로 늘어날 것이고 인터넷 사용 패턴 자체도 많이 변할 것이다. 이런 변화에 대응하기 위해서는 더 늦기 전에 모바일 전용 사이트를 운영하는 것이 좋을 것이다.


아이폰용 사이트를 만들 때에는 기존 사이트를 만들때와 달리 처리해줘야 할 것이 몇가지 있는데 이것들에 대해 간단히 알아보자.

우선은 헤더 부분에 아래와 같이 기존 사이트만들 때는 사용하지 않는 두 가지가 있다.
<html>
<head>
<title>iPhone Site</title>
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0;" />
<link rel="apple-touch-icon" href="images/siteicon.png" />
</head>

meta 태그 부분은 모바일기기에 사이즈가 딱 맞게 보일 수 있도록 해준다. 
그리고 link 태그 있는 부분은 아이폰에서 해당 사이트를 홈스크린에 추가하기 등을 할 때 사용될 아이콘 이미지이고 57x57 사이즈이 png 이미지로 만들면 된다. 
(모서리를 둥글게 만들 필요 없이 그냥 사각형으로 만들면 된다. Glossy 효과도 따로 안줘도 아이폰에 등록하면 알아서 처리된다.)

아래 이미지는 여러 모바일 사이트들을 홈스크린에 추가한 모습이고, 위에 link 태그로 png 아이콘이미지를 만들어둔 것들이 사용된 것이다.



사이트가 로딩되었을 때, 주소입력바 부분 위로 올라가게 하기
아이폰용으로 만들어진 사이트들을 아이폰에서 들어가보면 사이트가 로딩되었을 때 자동으로 주소입력바 부분이 위로 싹 사라지는 것을 볼 수 있을것이다. 
이것은 아래와 같은 스크립트를 추가해주면 된다.
<script type="text/javascript">
window.addEventListener("load", function(){
    setTimeout(loaded, 100);
}, false);

function loaded(){
    window.scrollTo(0, 1); // 요 부분이 핵심!
}
</script>


아이폰 가로모드/세로모드 바뀔 때 감지하기
아이폰의 어플리케이션들을 보면 세로로 사용할 때랑 가로로 사용할 때 거기에 맞춰서 레이아웃을 달리 보여주는 것을 볼 수 있다. 아이폰용 사이트에서도 동일하게 할 수 있는데, 아래 이벤트를 이용하면 된다.

<body onorientationchange="updateOrientation();">



Posted by xiles
TAG LINK, meta, onorientationchange, 가로모드, 기본, 모바일, 사이트, 사이트제작, 세로모드, 아이콘, 아이팟, 아이폰, 전용사이트
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요