요즘 아이폰의 등장과 옴니아, 안드로이드 등의 등장으로 모바일웹이 많이 화두가 되고 있다.
그에 발맞추어 모바일 버전 웹사이트를 제공하는 곳들이 늘어나고 있다. 그런데 아직 초기여서인지 '제대로' 스마트폰에서 브라우징을 할 수 있게 만들어졌다기보다는 그냥 사이즈만 줄여놓거나 한 곳들도 많다.

그럼 좀 '제대로' 만들었는지 확인하려면 어떻게 해야 할까.
우선 다양한 기기에서 직접 확인할 수 있으면 가장좋다. 아이폰, 안드로이드, 옴니아, 오즈 등 풀브라우징이 가능한 테스트 기기들을 직접 보유하고 테스트해보면 더할나위 없다.

하지만 그렇지 못한 경우가 아마 꽤나 많을 것이다. 그런 경우 에뮬레이터들을 활용하면 완벽하지는 않지만, 조금이나마 좀 더 '제대로'된 모바일 사이트를 만드는데 큰 도움이 될 것이다.

1. 윈도우 모바일 에뮬레이터

윈도우 모바일에는 인터넷익스플로러 모바일버전이 기본으로 설치되어 있다.
사파리(웹킷)나 오페라미니에 비해 많이 뒤쳐진 상태이기때문에 모바일 인터넷익스플로러에서 완벽히 잘 돌아가는 사이트를 만드는 것은 좀 어렵겠지만, 그래도 기능이 동작은 되도록 해주는 것이 좋을 것이다. 

에뮬레이터는 Windows Mobile SDK 를 설치하면 사용할 수 있다.


2. 오페라 미니

옴니아나 기타 윈도우모바일이 설치된 기기나 기타 등등에서 오페라 미니도 많이 사용된다.
오페라 미니 에뮬레이터는 일반 브라우져로 아래 URL로 들어가면 웹상에서 바로 테스트해볼 수 있다.

http://www.opera.com/mobile/demo/?url=7



3. 안드로이드

최근 아이폰에 뒤이어 안드로이드폰들이 몰려올 예정이다. 안드로이드폰에서 만든 웹사이트가 잘 돌아가는지 확인하려면 안드로이드 SDK 를 다운받아서 설치하면 아래와 같이 안드로이드폰 에뮬레이터를 사용할 수 있다.



4. 아이폰 및 기타 웹킷 기반 브라우져

아이폰/아이팟 뿐 아니라 웹킷 기반의 브라우져들에서 잘 돌아가는지는 사파리 브라우져를 이용해 테스트해보면 된다.
윈도우PC또는 맥에서 그냥 사파리 브라우져에서 테스트하면 기본적인 동작에는 큰 문제가 없을 것이다.
맥을 사용한다면, 아이폰 SDK를 설치하고 아이폰 에뮬레이터를 통해서 확인해볼 수도 있다.




"모바일" 웹사이트를 만든다면 가급적이면 특정 기기에만 맞추어놓고 '모바일사이트'라고 하기보다는 다양한 기기의 여러 브라우져에서 접근이 좋도록 만드는 것이 좋을것이다. 

모바일 사이트 제작할 때 아래 내용들도 한 번 살펴보면 좀 더 나은 모바일 사이트를 만드는데 도움이 될 것이다.

모바일 웹사이트 만들기 - DOCTYPE 및 viewport  
아이폰/아이팟용 웹사이트 만들 때 알아둬야 할 기본
아이폰용 웹사이트에서 전화걸기 구현 방법


Posted by xiles

댓글을 달아 주세요

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

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

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

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


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


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

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


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



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



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

Posted by xiles

댓글을 달아 주세요

  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  댓글주소  수정/삭제

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

  2. 집나온남자 2010/07/14 08:28  댓글주소  수정/삭제  댓글쓰기

    페이스북 업데이트좀 해주세요 ㅜㅜ

우선 주소는 http://m.xiles.net/gohome

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

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

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

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

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


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


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


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


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


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


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



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


Posted by xiles

댓글을 달아 주세요

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Posted by xiles

댓글을 달아 주세요

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

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

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

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

엊그제 만들어놓았던 아이폰용 모바일 사이트 모음(http://blog.xiles.net/283)이 업데이트되었습니다.

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

기왕 시작페이지 같은 역할을 하는 것 검색도 바로 할 수 있으면 좋을 것 같아서 제일 위에 네이버와 구글 중 선택해서 검색할 수 있도록 검색을 추가했습니다. (네이버/구글 선택한 것은 쿠키로 기억되기 때문에 다음 접속할 때도 마지막 사용한 검색엔진이 활성화되어 시작됩니다.)
네이버 또는 구글 로고를 터치하면 해당 검색엔진으로 검색을 할 수 있습니다.




이 사이트를 홈스크린에 빼놓으면 편하게 바로 인터넷 시작할 때 이 페이지를 띄울 수 있습니다.
아이폰에서 사파리로 http://m.xiles.net 으로 접속한 후에
화면 아래쪽에 + 버튼을 터치하면 아래처럼 메뉴가 나오는데 두 번 째 "Add to Home Screen"을 선택하시면,
그 아래 이미지처럼(제일 오른쪽 아래 START란 글씨가 있는 아이콘) 홈스크린에 등록이 됩니다.
(아이콘을 좀 대략 급히 만들어놓았는데, 조만간 다시 만들 생각입니다^^;; 혹은 잘 만드시는 분이 만들어주신다면 ㅎㅎ)




Posted by xiles

댓글을 달아 주세요

  1. 재신이 2009/12/31 05:17  댓글주소  수정/삭제  댓글쓰기

    1번으로 등록했나..^^ 넘 좋아요..덕분에 카테고리 처럼 활용할 수 있겠네요 몇몇 어플 지울수가 있어서. 아이폰이 더 가벼워졌어요

최근 아이폰 출시와 함께 스마트폰 열풍(?)이 불고 있고, 이에 맞추어 포탈을 비롯한 많은 곳에서 모바일 기기용 페이지를 제공하는 곳들이 늘고 있다.

스마트폰에서 풀브라우징을 지원한다고 하지만, 기존 웹페이지를 그대로 보는건 불편하기도 할뿐 아니라 모바일기기에 맞지 않는 구성으로 다운로드 받아야 할 데이터 양도 많기 때문에 데이터 요금에 민감할 수 밖에 없는 모바일 기기에서 이들 사이트들 그대로 사용하는 것은 조금은 불편함이 있게 마련이다. 

이런 불편함을 해결하기 위해 네이버와 다음을 비롯한 포탈을 중심으로 모바일 전용 페이지를 제공하는 곳들이 늘어나고 있는데, 그 중에 유용한 것들을 모아놓고 사용하면 좋을 것 같아 아래처럼 아이폰용으로 간단한 페이지를 하나 만들었다.

http://m.xiles.net


좀 더 다양한 모바일 서비스들이 만들어지고, 사용자들이 이런 모바일 서비스에 익숙해지기 시작하면 정말 손안의 인터넷 시대가 몰려올 것 같다. 이제 컴퓨터 앞에 앉아서 인터넷하는 시간 못지않게 돌아다니면서 어디서나 인터넷을 하는 것이 너무나 당연시되는 시대가 될 것 같다. 그에 맞추어 사용 패턴도 좀 바뀔 것이고 지금의 복잡한 서비스들에서 모바일 기기에 맞춘 간단한 여러 서비스들이 등장할 것 같다.


Posted by xiles

댓글을 달아 주세요