[모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) [퍼옴]

지난번에 말씀드린대로 오늘은 스마트폰용 모바일 홈페이지를 만들때 유용한 팁을 소개할까 합니다.

앞으로는 모바일 홈페이지가 전체적으로 확대될 전망이지만, 관련 가이드라인이나 참고할 만한 것들이 부족한 현실입니다.
그래서 이 포스트를 쓰게 되었는데요, 아래에서 설명하는 정도만 적용해도 왠만한 모바일 홈페이지를 만드시는데 문제는 없을꺼라 생각됩니다.

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" /> ▲ 요것이 제 아이폰에 추가한 자주들락날락하는 다음,네이버,엔카 아이콘입니다. 아이콘 설정을 해주지 않을경우 메인화면을 캡쳐해서 아이콘을 생성하는데 이럴경우 굉장히 미우니 신경쓰심이 좋을듯합니다~!

마지막으로 드리고 싶은 말씀은 자바스크립트 사용시 웹표준 고려하셔야 하는 거 잊지 말아야 하는 것과,
전편에 쓴 주의사항과 오늘 작성한 팁을 활용하면 나의 모바일 웹 사이트를 쉽게 만드실수 있을꺼라 생각됩니다.