메뉴 건너뛰기

검색창 닫기

HEUKMYO

Mobile

모바일 코딩 초읽기

2013.08.06 16:23 read.198

1. 모바일 웹을 처음 해봅니다. 브라우저는 어떻게 어떤식으로 맞추어야 하나요?


아이폰 : 사파리
옴니아 : IE5/오페라 모바일/오페라 미니
안드로이드 : 안드로이드 브라우저/오페라 모바일/오페라 미니
폴라리스 등이 있고요. 웹뷰어들은 IE니까 특별히 신경쓸 필요 없습니다.
※ 여기서 잠깐 폴라리스란?
국산 모바일 웹 브라우저로 국산 피처폰에 많이 탑재되어 있는 폴라리스 버전 6.0 브라우저는 MS IE 전용 속성과 IE 6~7핵 사용 가능하며 이름만 폴라리스이고 실제로는 IE6나 마찬가지인 브라우저라 알려져 있다.


IE5는 보통 쓸수가 없어서 배제하는 경우가 많고요. 윈모6.5의 IE6은 데탑의 6과 거의 비슷합니다. 모바일용 파이어폭스는 펜닉이라는 이름의 브라우저인데 아직 정식이 안나와서 사용자가 거의 없습니다.

사파리나 오페라나 펜닉이나 웹표준을 잘 적용해서 만들면 크게 문제가 없습니다. 다만 서체가 브라우저별로 다 다르고 서체의 크기도 제약사항이 많기때문에 서체 크기에 의존적이지 않게 디자인하고 제작하는 것이 중요합니다

여기서 알수 있는 것이 모바일 웹 같은경우 화면의 작음 때문에 위에서부터 내려오는 마크업구조를 가지기 때문에 웹접근성과 웹표준성이 중시 되어야만 한다. 탭키를 눌렀는데 맨 아래로 간다면 얼마나 리딩능력이 떨어짐과 동시에 불편한사람들에게는 크나큰 장애가 될 수 있다. 


2. 그럼 모바일 브라우저의 종류에는 어떤 것들이 있나요?


    모바일 웹 브라우저
  • 인프라웨어 Polaris
  • Opera mobile – (9.2 이하 presto 기반, 9.5 이상 Presto Core 2 기반 )
  • MS IE mobile - Windows mobile
  • Google Chrome – Android (webkit기반)
  • Apple Safari – MAC os (webkit기반)
  • Access Netfront - Multi Platform
  • Nokia oss – S60 (webkit기반)
  • Mozilla Fennec – linux , Windows Mobile (gecko기반)

3. 그렇다면 모바일 브라우저를 pc에서는 확인 할 수 없나요?


LG 아르고폰(LG텔레콤) - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*600;POLARIS 6.0;em1.0;lgtelecom;EB10-200090218-707682823;LG-LH2300;0);

iPod Touch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; ko-kr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

옴니아 Opera Mobile - SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5

옴니아 IE Mobile - SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)

폴라리스 같은 경우는 pc환경에서 확인 할 수 있도록 파일이 있다.

그 밖에 사파리와 FF는 ADD-ON 기능을 통해 지원 하고 있으며 그내용은
http://html.nhndesign.com/?mid=blog&category=90&document_srl=2154
여기서 확인 할 수 있습니다.

아이폰 전용 사이트 홈페이지
http://testiphone.com/


4. 모바일 가로 모드는 어떻게 변경 되는 건가요?


모바일 가로 모드 같은경우 CSS 적용을 변경 하여 주는 것입니다. 물론 개발과 같이 연동 되어서 되는 것이고요
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
영문이라 별다른 해석은 하지 않겟습니다.

5. NAVER에 소스를 보면 메타테그가 조금 틀립니다. 문서의 형식을 지정 해주어야 하는 부분이 외 그런가요?

모바일 웹에서 가장 중요 하다 할 수 있는 이 질문은 각각의 기기에 따라 해상도가 틀린 모바일 같은경우 viewport가 다른데 모바일 기기마다 틀린 해상도를 잘보이게끔 해주는 기능을 말합니다.
그리고 이문제또한 meta태그를 이용하여 변경이 가능 합니다.


5. 모바일 웹이 스마트폰이라 틀린건가요? 


모바일 웹 2.0은 모바일 인터넷 기술의 새로운 흐름을 지칭하는 말로, 팀 오델리가 처음 사용한 웹 2.0이라는 용어를 모바일에 접목 시킨것입니다. 웹2.0의 의미인 유동성과 위키피디아를 참조 하시면 알겠지만 그 의미가 100%같지는 않지만 중요한 의미에서 버전업과 "플렛폼으로써의 웹"이라는 핵심 특징을 같이 가지고 있다.
참조 : http://html.nhndesign.com/?mid=blog&category=90&document_srl=1530

개인적으로 모바일 웹은 WAP[Wireless Application Protocol] 이라 불리던 브라우징 방식을 웹브라우징 방식을 PC를 통해 그대로 보여줄 수 있다는 매력과 장점이 있다.


※ WAP(wireless application protocol, 무선 어플리케이션 프로토콜)

모바일 단말기에서 웹사이트를 볼 수 있는 방법을 표준화하기 위한 무선 통신 프로토콜들의 규격 으로 WAP포럼 에서 제정되었으며,WP방식은 전세계적으로 가장 많이 사용되고 있으며 공개된 표준 규격이다.
단말기의 종류에 관계없이 다양한 무선환경에서 동작이 가능하나,WML로 전환하기 위해 게이트웨이가 반드시 필요하기 때문에 통신 사업자는 초기 설치 비용이 부담이 될 수 있다. 업체는 실제로 서비스될 사이트를 WML로 구현해야 한다.


[출처]http://flydol.tistory.com/48

추가메뉴 목록
위로