모바일 사파리는 풀스크린 모드로 모바일 웹을 실행시키는 것이 가능하다. 
...
<meta name="apple-mobile-web-app-capable" content="yes" />
...
이 기능을 활용하여 웨 어플리케이션을 네이티브 어플리케이션과 같은 환경을 만들 수 있지만, 그것은 신중하게 사용하여야 한다. 브라우저 크롬의 손실이 없다는 것은 뒤로 가기, 앞으로 가기 컨트롤을 할 수 없다는 것을 의미한다.
from: 모바일 디자인 & 개발, 279p

상태바 표시 변경
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

아이콘 더하기
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
57x57 : iphone 3gs

많이 버벅대고 많이 서툰 강의였습니다. 너무 죄송했습니다. 다행히 jbossug (http://cafe.naver.com/jbossug), ksug(http://www.ksug.org/) 에서 hadoop과 Spring ROO를 잘 발표해주셨고, 서울 버스를 만드신 유주완님 (http://www.astroframe.com/main) 덕분에 많이 배울 수 있었던 자리였습니다.

부족하고, 허접스럽지만 약간 링크 보강해서 제 발표자료 올려놓습니다. 주최하느라 수고많으셨던 기묘(http://www.gimyo.com/) 분들께도 감사드립니다.


자바 커뮤니티 셋이 모여서 자바개발자들의 진로를 얘기할 수 있어서 감사했습니다.

  1. withcolours 2010.02.22 09:54 신고

    강의 잘 들었습니다, 수고 많으셨어요 ^^

  2. 알 수 없는 사용자 2010.02.22 13:53

    저도 강의 잘 들었습니다. 순대국밥 사주셔서 감사합니다. ^^*

  3. StudioEgo 2010.02.23 02:57 신고

    발표자료 잘 읽어보겠습니다^^

아이폰엔 있습니다. 이런 괴물... 이미지 상단에 "콘솔 디버그 오류 없음" 이라고 보입니다.

설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.

콘솔 디버그 옵션을 활성화하면 됩니다.

오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.

HTML/JavaScript/CSS 의 오류가 보여집니다.

모바일웹 개발시 유용하게 쓰일 것 같습니다.



아이폰에서 접속하는 웹페이지의 로그인 아이디 입력은 번거롭게 만듭니다. 첫글자가 자동으로 대문자로 입력되도록 shift키가 켜져있기 때문이죠.

Safari 브라우저에 특화된 속성이 있습니다.

<input type="text" id="userid" value="" autocapitalize="off"/>

마찬가지로 autocorrect="off" 를 추가하면 맞춤법 검사로 인해 내용이 바뀌는 것도 방지할 수 있습니다.
관련글: 
http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TextandWeb/TextandWeb.html


sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)] 

비밀이라고 할 것까지는 없겠습니다만 점차 모바일 전용페이지들이 사용하고 있는 메타태그를 하나 얘기하려 합니다.

안드로이드폰에서 브라우저를 통해 네이버에 접속하려면 다음과 같은 화면을 볼 수 있습니다. 지난 글에서도 말씀드렸지만 몇 글자 입력하지 않아도 가이드를 다 해줍니다.

브라우저 종류가 무엇인지 판별해서 자동으로 http://m.naver.com 로 옮겨주죠. 화면을 조금 움직이면 좌측 하단에 아이콘이 보입니다. 터치하면...

전체 화면에서 보고 싶은 영역으로 빨리 이동할 수 있게끔 나옵니다.

PC 버전으로 보면 조금 달라집니다.

안드로이드에서 자주 보게되는 줌아웃/줌인 아이콘이 나타나게 되죠.


웹페이지에 다음과 같은 태그가 들어갈 경우 줌 기능을 사용하지 않도록 할 수 있습니다.
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
content를 풀어서 보면
initial-scale=1.0;
maximum-scale=1.0;
minimum-scale=1.0;
user-scalable=no;
감잡으셨죠. ^^

sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)]
모바일 컴퓨팅 시대가 클라우드 컴퓨팅과 함께 도래하고 있습니다. 모바일 관련된 서비스들을 포털이 먼저 오픈해서 키워가는 듯 합니다. 모바일 웹 중심의 서비스들인데, 점차 아이폰/아이팟터치, 윈도폰(윈도모바일), 안드로이드폰 등에서 실행되는 모바일 앱으로 확산되는 듯 합니다.

기록의 의미도 있고 해서 다섯 포털 (naver, daum, nate, yahoo, paran)의 모바일 페이지를 모아봤습니다.

http://mobile.naver.com/

http://mobile.daum.net/ 아직은 일반폰 분위기의 SMS 중심입니다만 두 번째 탭인 모바일 Daum을 클릭하면 모바일웹에 대한 내용들이 나옵니다.

http://intro.mobile.daum.net/sub.daum?cmd=main

http://mobile.nate.com SKT와 밀접한 nate의 모바일페이지는 음원판매에 신경을 쓰는 듯 합니다.

http://mobile.yahoo.co.kr 야후코리아의 모바일 페이지입니다. http://mobile.yahoo.com/ 과는 분위기가 많이 다릅니다.

http://mobile.paran.com/ 파란은 모바일로 메일을 사용하는 것에 대해서 얘기하고 있습니다.


다섯 사이트 모두 모바일을 홍보하기 위한 역할입니다. 좁디좁은 모바일 화면에서 이들을 만나려면, 데이터 전용요금 가입필수입니다.
  1. 박상근 2009.11.11 02:21 신고

    저는 블랙잭(M620) 유저입니다만,
    해상도가 320*240 정도로 작다보니 최신 옴니아급의 해상도에 맞춘 모바일 웹페이지마저도
    깨져서 나오는건 어쩔 수가 없더군요. 휴...

    • kenu허광남 2009.11.12 08:04 신고

      블랙잭 들고 다니시는 분들의 공통점이 있어보입니다. ^^;
      점점 관심을 받고 있으니 나아지겠죠.
      행복하세요.

  2. 2009.11.11 07:14 신고

    다 좋은데 역시 데이터전용요금에서 멈칫하네요..ㅎㅎㅎ

    • kenu허광남 2009.11.12 08:06 신고

      무선 데이터망 증설에 따른 통신사의 고민도 있겠죠. 여하튼 휴대폰의 무선 데이터 활용은 메가 트렌드입니다.

  3. 알 수 없는 사용자 2009.11.11 13:35

    모바일 페이지라면, 네이버는 http://m.naver.com , 다음은 http://m.daum.net 아닌가요?

    • 알 수 없는 사용자 2009.11.11 13:51

      동감입니다. 본문에 언급된 페이지들은 모바일페이지를 홍보하기 위한 페이지이지 모바일 기기에서 보라고 만든 페이지는 아닌 것 같은데요.

      아 물론, m.naver.com 이나 m.daum.net 역시 화면이 넓은 일부 기기에 맞춰 디자인한 터라 화면 작은 기기에서 보기에 불편합니다. 도대체 왜 모바일 기기용 출력을 하는데 가로폭을 고정시켜버려서 가로스크롤을 하게 하는지 도무지 이해할 수 없네요...

    • kenu허광남 2009.11.12 08:06 신고

      댓글 감사합니다. 모바일 서비스 홍보 페이지가 더 맞을 것 같습니다. ^^

    • kenu허광남 2009.11.12 08:07 신고

      Raymundo// 기기를 바꿔보는 것도 괜찮지 않을까요.
      행복하세요. ^^;

+ Recent posts