아이폰용 모바일 웹페이지 디자인 팁
모바일 2010. 12. 16. 10:55아이폰용 모바일 웹페이지 디자인 팁
모바일 디바이스의 웹브라우저에는 모바일 디바이스에 최적화 할 수 있는 여러 기능들이 추가로 존재합니다. 대부분의 디바이스 및 웹브라우저에서 공통적으로 지원하는 기능들도 있고, 특정 디바이스 및 웹브라우저에서만 지원하는 기능들도 있습니다.
본 포스팅에서는 아이폰 및 아이패드의 iOS와 모바일 사파리를 기준으로 알아보겠습니다.
Viewport
모바일 웹브라우저의 기본 화면 크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980 px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320 x 480 px)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330 px의 여백이 남는 아주 작은 화면을 보게 됩니다.
다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다.
1
2 |
< meta name = "viewport" content=" width = device -width, initial-scale = 1 .0, minimum-scale = 1 .0, maximum-scale = 1 .0, user-scalable = no "/> |
width : 넓이 – device-width | N px (200~10000 px, default 980 px)
height : 높이 – device-height | N px (223~10000 px)
initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 – N (0~10, default 0.25)
maximum-scale : 최대 확대 배율 – N (0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 – yes | no (default yes)
각각의 설정 값과 기본 값은 위와 같으며, 사용자에 따라 최적화된 환경을 제공할 수 있도록 각각의 속성을 설정하는것이 중요합니다.
홈 화면 아이콘
아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다. 단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는 기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.
1
2 |
// 반사광 효과를 주는 경우 < link rel = "apple-touch-icon" href = "home-icon-name.png" > |
1
2 |
// 반사광 효과가 없는 경우 < link rel = "apple-touch-icon-precomposed" href = "home-icon-name.png" > |
apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면 위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.
전체화면 모드
웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.
1 |
< meta name = "apple-mobile-web-app-capable" content = "yes" > |
자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.
추가로 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.
1
2
3
4
5 |
<script type= "text/javascript" > window.addEventListener( "load" , function (){ setTimeout(scrollTo,0,0,1); }, false ); </script> |
상태바 색상 설정
아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.
1
2 |
// 기본 밝은 계열 < meta name = "apple-mobile-web-app-status-bar-style" content = "default" > |
1
2 |
// 검정색 < meta name = "apple-mobile-web-app-status-bar-style" content = "black" > |
1
2 |
// 반투명 검정색 < meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" > |
Splash Screen
스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 스플래시 스크린을 추가하는 방법은 간단합니다.
1 |
< link rel = "apple-touch-startup-image" href = "startup.png" > |
해당 이미지의 사이즈가 320 x 460 px 로 맞춰야 하며, 3. 전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.
폰트 사이즈 고정하기
모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.
폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.
1 |
-webkit-text-size-adjust: none ; |
-webkit-text-size-adjust – auto | none | N% (default auto)
이상 추가적인 팁들도 있지만 그러한 것들은 차후에 다뤄보도록 하고, 먼저 기본적이고 쉬우면서도 중요하다고 생각되는 팁들을 위주로 정리했습니다.
출처: http://qwerty.kr/wp/2010/11/%EC%95%84%EC%9D%B4%ED%8F%B0%EC%9A%A9-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%81/
'모바일' 카테고리의 다른 글
모바일 코딩 (0) | 2011.05.27 |
---|---|
“태블릿과 스마트폰 시대”에 절대 피해야 할 웹 UI 7가지 (0) | 2011.04.19 |
모바일 코딩시 참고사항 (0) | 2010.12.16 |
아이폰 웹 코딩시 유의점 (0) | 2010.12.16 |
모바일 작업시 참고 1 (0) | 2010.04.28 |