운영자님들 10x10에 좋은 아이디어 제품들이 많더라구요.
꼭 연동시켜서 저 돈 벌게 해주세요~~~~ ^^
 |
 |
'스마트폰용 홈페이지' 카테고리의 다른 글
| 위젯테스트 (0) | 2012/04/01 |
|---|---|
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 3편 (모바일브라우저 확인) (10) | 2010/04/20 |
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) (9) | 2010/04/15 |
| [모바일웹] 모바일 홈페이지를 만들어보자 1편 (주의사항) (1) | 2010/04/13 |
오늘은 모바일 브라우저를 체크하는 법을 알아보도록 하겠습니다.
스마트폰 인터넷 브라우저 ( 사파리, 오페라 , 모바일ie) 등을 열고 www.daum.net 를 주소창에 써보면
신기하게 내가 모바일로 들어온지 알아서 체크해줘서 자동으로 m.daum.net/mini 으로 보내주는걸 볼수 있습니다.
우리의 모바일 홈페이지도 만찬가지로 사용자가 들어온 브라우저를 확인하고 포워딩 시키는 것을 같이 해보도록 하겠습니다^^
(아래 포스팅은 웹 언어중 PHP 기준으로 서술하였습니다.)
시작하기 전에 먼저 가상 URL를 정하겠습니다.
- PC버전 URL : www.web2log.com
- 모바일버전 URL : m.web2log.com
PC버전 페이지 상단에 브라우저 체크해주는 파일을 인크루드 하여 아래와 같이 소스를 작성합니다.
<?php
$arr_browser = array ("iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC");
for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {
if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){
// 모바일 브라우저라면 모바일 URL로 이동
header("Location: http://m.web2log.com/");
exit;
}
}
?>
소스 설명을 하기 전에
$_SERVER['HTTP_USER_AGENT'] 라는 서버 함수에 대해 약간의 설명을 하고 지나가겠습니다.
$_SERVER['HTTP_USER_AGENT'] 는 유저의 브라우저 정보를 알수 있는 서버 함수 입니다.
ASP 와 JSP 에서도 비슷한 함수가 있는 걸고 알고 있습니다 ^^ HTTP_USER_AGENT 로 검색하시면 찾으실 수 있으실거예요^^;
저 함수를 쓰면 Mozilla/4.0(compatible; MSIE 6.0; Window NT5.1; Q312461; .NET CLR 1.0.3705 이런식으로 화면에 표기됩니다. (물론 IE에서 접속하신분들만요 ^^ 파이어폭스나 사파리 오페라는 각각 다르게 나오죠)
이제 $_SERVER['HTTP_USER_AGENT'] 함수가 뭐하는 함수인지 아시니 그만하도록 하구요.
위에 브라우저 체크하는 소스 설명을 간단히 하겠습니다.
$arr_browser 는 배열 변수로 "iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC" 이라는 단어를 저장했습니다.
즉, $_SERVER['HTTP_USER_AGENT'] 로 나오는 정보중에서 각각의 핵심 단어만 배열변수에 저장해둔거예요 (모바일 경우에만 나오는 단어들이죠 )
그리고 strpos 함수를 써서 배열함수에 들어가 있는 단어가 $_SERVER['HTTP_USER_AGENT'] 정보에 있다면 이 사람은 모바일 환경이 분명하니 모바일 홈페이지로 가게 해주는 아주 아주 간단한 소스랍니다 ^^; 이제 모바일 브라우저로 접속하는 유저만 콕 집어서 모바일 홈페이지로 보내줄수 있겠죠? ~~ 한번 해보세요!!!
※ 덧붙임 ..>> $_SERVER['HTTP_USER_AGENT'] 를 썼을 때 각각 브라우저 정보
- MSIE 6.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
- Firefox 2.0.0.4
Mozilla/5.0 (Windows; U; Windows NT 5.1; ko; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
- Opera 9.21
Opera/9.21 (Windows NT 5.1; U; ko)
- Netscape 9.0b1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.5pre) Gecko/20070604 Firefox/2.0.0.4 Navigator/9.0b1
- 크롬
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.49 Safari/532.5
-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)
'스마트폰용 홈페이지' 카테고리의 다른 글
| 위젯테스트 (0) | 2012/04/01 |
|---|---|
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 3편 (모바일브라우저 확인) (10) | 2010/04/20 |
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) (9) | 2010/04/15 |
| [모바일웹] 모바일 홈페이지를 만들어보자 1편 (주의사항) (1) | 2010/04/13 |
지난번에 말씀드린대로 오늘은 스마트폰용 모바일 홈페이지를 만들때 유용한 팁을 소개할까 합니다.
앞으로는 모바일 홈페이지가 전체적으로 확대될 전망이지만, 관련 가이드라인이나 참고할 만한 것들이 부족한 현실입니다.
그래서 이 포스트를 쓰게 되었는데요, 아래에서 설명하는 정도만 적용해도 왠만한 모바일 홈페이지를 만드시는데 문제는 없을꺼라 생각됩니다.
1. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기
아래 META 태그를 쓰면 화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다.
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
initial-scale <- 확대 비율
maximum-scale <- 최대 확대 비율
user-scalable <- 유저가 화면을 확대 하게 하는가
2. 가장 상위 오브젝트는 수치로 가로를 넣어줘야합니다!
※ %로 넣어줄시 제대로 크기가 적용되지 않습니다.
ex> <div style="width=100%;"> ---> <div style="width=480px;">
3. 아이폰에서 동영상 재생을 하고 싶다면 MP4파일을 링크 시켜라
※ 오페라 같은경우 아래와 할경우 파일이 다운이 되더군요,, 무튼 옴니아2에서도 동작은 한다는 이야기입니다.. 친구폰 데이터요금이 걱정되는 바람에 다운받다가 그냥 실행되는 화면은 보지 못했습니다. 아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.
<A HREF="AAAA.mp4"> 동영상보기 </A>
4. 바로가기 아이콘 만들기 (아이폰)
모바일웹하다가 [+] 버튼을 눌루면 홈화면에 추가 라는 버튼이 있는데 그럼 아이폰에서는 어플들처럼 아이콘으로 저장됩니다. 그때 아이콘을 아래와 같이 소스로 하면 원하는 이미지로 넣을수 있습니다
아이폰 어플 특유의 라운딩과 반사처리는 자동으로 됩니다~~!!
<link rel="apple-touch-icon" href="/images/icon.png" />
▲ 요것이 제 아이폰에 추가한 자주들락날락하는 다음,네이버,엔카 아이콘입니다. 아이콘 설정을 해주지 않을경우 메인화면을 캡쳐해서 아이콘을 생성하는데 이럴경우 굉장히 미우니 신경쓰심이
좋을듯합니다~!
마지막으로 드리고 싶은 말씀은 자바스크립트 사용시 웹표준 고려하셔야 하는 거 잊지 말아야 하는 것과,
전편에 쓴 주의사항과 오늘 작성한 팁을 활용하면 나의 모바일 웹 사이트를 쉽게 만드실수 있을꺼라 생각됩니다.
'스마트폰용 홈페이지' 카테고리의 다른 글
| 위젯테스트 (0) | 2012/04/01 |
|---|---|
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 3편 (모바일브라우저 확인) (10) | 2010/04/20 |
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) (9) | 2010/04/15 |
| [모바일웹] 모바일 홈페이지를 만들어보자 1편 (주의사항) (1) | 2010/04/13 |
|
2010.04.16 목차 초당과금제 후폭풍…SKT 데이터요금? 안드로이드폰 이름은 "별들에게 물어봐~" 모바일의 미래는 ‘웹’인가 ‘앱’인가 ‘Daum’ 앱 하나로 다음의 모든 서비스 누리자 11번가 비방광고 '공정위 시정명령'···경쟁사 '해골'로 비유 웹젠-NHN게임스, 공룡 게임개발사 탄생…파급력은? 초당과금제 후폭풍…SKT 데이터요금? - [위로] ZDNET 기사보기 KT와 LGT에게는 SKT가 치고 나간 초당과금제의 도입 압박이, SKT에게.. |
제가 아이폰 유저가 된지 어언 3달 (통신비가 엄청 나와 고생좀 하고 있다능...)
그렇지만 길을 가다가도, 버스를 타고 가면서도, 지하철을 타고 가면서도
어디에서든 웹서핑도 하고 카툰도 보고 메신저도 하는 걸 보면
몇달새 스마트폰이 제 삶을 많이 바꿔놓은 것 같네요. ( 잡스의 노예 -_- ;;)
그러나 PC에서 보는 웹페이지 (특히 한국 웹은 이미지가 많은 편)를 스마트 폰으로 보면
화면도 작고 이미지가 많은 탓에 느리고 아이폰같은 경우는 플래시 조차 파란 상자로 보이고 보이지 않는데요.
메뉴를 플래시로 만들고 대체text를 적용하지 않았다면 그 페이지는 모바일에선 결코 제대로 보일수 없습니다.
그래서 요즘 유명한 인터넷 사이트를 보면 PC버전 홈페이지와 달리 모바일 버전 홈페이지를 많이 만들어서 유저의 편의성을 제공하고 있습니다. 다음 네이버등의 포털은 진작 시작했구요, 네이트의 모바일 싸이월드를 필두로
중소형 사이트들과 공공기관으로도 모바일 홈페이지는 확장되는 추세입니다.
아래는 제가 자주 들어가는 모바일 홈페이지입죠!!
요새 중고차를 사고싶어 스마트폰으로도 들랑날랑하는곳인데요.
수많은 중고차 사이트중에는 최초로 모바일홈페이지를 만들어서
저같은 잠재적구매자 한명을 확보했네요 !!
빠른 속도로 모바일사이트를 만들었더군요.
메뉴가 깔끔~!!
모바일웹을 만들 때 몇가지 주의 사항과 tip만 알면 누구나 쉽게 만들수 있는데요~!
지금부터 말하는건 아이폰 브라우저에 최적화 된 내용입니다.
1. 정말 중요한 컨텐츠만 집어넣기
★ 모바일 웹 만들때의 주의사항
-> 모바일 화면은 조그만하다 잊지 말자
2. 플래시 NO , 팝업 NO
-> 팝업이 가능하긴 하지만 아이폰 같은 경우는 팝업일 경우 새창이 뜨는것처럼
화면이 전환되서 사용자한테 혼란을 줄 수 있음 될수 있음 팝업은 자제
(레이어 팝업 같은 걸로 대처하는게 좋음)
3. 이미지는 최소화
4. 각각의 스마트폰 브라우저마다 조금씩 폰트 크기라든지 화면 크기 레이아웃 잡히는
형식이 다르므로 고려해야한다
-> 그러나 100% 다 고려할수는 없는 법 포기할건 포기하는것도 현명한 방법이
아닐까 생각됩니다
현재 생각 나는 것은 이정도 네요 ^^
일단 안드로이드용, 아이폰용, 윈도모바일용 등 플랫폼별로 깨지지 않은 화면을 만드는것이 가장 중요하겠죠 ~!
저도 이것저것 찾아보면서 모바일 홈페이지를 뚝딱하긴 했는데요.
다음부터는 좀더 도움이 될만한 포스트를 만들어 보도록 하겠습니다 ^^;
다음 편은 웹모바일 제작시 Tip~!!
'스마트폰용 홈페이지' 카테고리의 다른 글
| 위젯테스트 (0) | 2012/04/01 |
|---|---|
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 3편 (모바일브라우저 확인) (10) | 2010/04/20 |
| [모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) (9) | 2010/04/15 |
| [모바일웹] 모바일 홈페이지를 만들어보자 1편 (주의사항) (1) | 2010/04/13 |
