모바일웹 시작하기1
그동안 모바일웹 작업을 하면서 나름 정리한 것들을 공유하려합니다.(태블릿은 일단 제외)
1. 웹과 다른점
쉽게 생각해서 웹은 PC에서 보는 것이고, 모바일웹은 모바일기기로 분류된 것들에서 보는 것이죠.
사실 웹은 하나이지만, 그것을 보는 플랫폼이 다르기 때문에 모바일용 웹을 따로 제작해야 하는 것이죠.
이러한 환경적인 요소는 기기에 설치되어있는 OS 및 브라우저와 연관이 많습니다.
그래서 크게 분류하자면, 일반웹은 PC(MAC OS, LINUX, Windows 등)환경에서 보는 것이고,
모바일웹은 스마트폰,타블렛,기타모바일기기(android,ios 등)에서 보는 것이라 생각하면 되겠습니다.
최근에는 반응형웹(Responsive Web)이라는 개념이 나와서 모바일웹을 따로 만들지 않고, PC웹사이트를 해상도 및 기기에 따라 css를 변경적용하여 보여주도록 개발하는 경우도 많습니다.(미디어쿼리 사용)
2. 우선 고려해야 할 것
- 우선은 모바일에 최적화 된 UI를 설계하고 디자인하는 것이겠죠. 이런것을 구현하는것은 일반웹과 큰 차이가 없습니다. 다만 일반웹에서 크로스브라우징을 하듯이 기기마다(해상도마다) 차이가 있을 수 있기에 테스트가 많이 필요할겁니다.
- 유동형 레이아웃으로 기기의 회전 및 다양한 사이즈에 대응합니다.
- 모바일의 해상도가 갈수록 높아지기에(2012.10월 현재 800*1280 최고해상도) 고해상도 이미지를 사용합니다.(http://konatamoe.tistory.com/579 모바일 해상도 관련해서는 여기에 잘 설명이 되어있습니다) 그리고 해상도와 관련된 이슈는 너무나 많아서 여기에 전부 정리할 수는 없지만, 검색하시면 해결할 수 있을겁니다. 모바일 해상도에서 1차적으로 중요한것은 가로해상도입니다. 320,480,640,720,768,800 이렇게 다양합니다.
3. viewport
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, target-densitydpi=medium-dpi">
- 고해상도(1280*720)로 제작된 디자인을 기기별 해상도에 맞게 맞추기 위해서 target-densitydpi속성을 device-dpi로 적용하는데 이속성은 안드로이드 전용속성이어서 아이폰을 위해 scale을 함께조절해야했습니다. 그러나 scale값이 0.67 이하에서는 안드로이드가 적용이 안되는 문제가 생겼는데, target-densitydpi 값을 medium-dpi로 주니 적용이 되었지요. 그래서 위와같이 viewport값을 적용했는데 결정적으로 갤럭시노트에서는 버그가 나서 결국 이 방법은 쓸모가 없습니다..ㅜㅜ
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi">
- 고해상도(1280*720)로 제작된 디자인을 기기별 해상도에 맞게 맞추기 위해서 사용한 최종방법은 scale 값은 1.0으로 유지하고, 퍼블리싱 자체를 물리적해상도 320px에 맞게 작업하는 것입니다.(원본디자인의 50%로 퍼블리싱) 이 때 target-densitydpi=device-dpi로 주었는데 안드로이드에서는 아이폰보다 화면이 작게 나와서 target-densitydpi=medium-dpi 로 주니 아이폰과 안드로이드 동일하게 출력이 되었습니다.
- 결국 수많은 시행착오 끝에 내린 결론은 이것입니다. 앞서 말했듯이 뷰포트의 스케일은 1.0 으로 유지하고, 물리적 해상도에 맞게 퍼블리싱하는 것이죠. 물론 고해상도로 디자인된 원본과는 물리적 수치(폰트크기, 간격 등)가 다르기에 디자인을 물리적 해상도로 줄여서 작업하면 수월할 것입니다. 이때 이미지는 고해상도 원본을 사용해야함을 잊지마시구요. 그렇다면 고해상도이미지를 적용할 때 물리적으로 큰이미지가 들어가게 되는데 이것은 어떻게 해결해야 할까? css로 사이즈를 줄이면 됩니다. 보편적으로 img{max-width:100%}를 적용해 놓으면 이미지는 그 부모의 크기에 fix된 크기로 리사이징 됩니다. 그리고 이미지의 원본크기 이상으로는 더이상 커지지 않죠. 이 방법이 적절치 않은 상황에서는 width값 또는 heght값을 상황에 맞게 적용하면 되겠죠. 배경으로 들어갈때도 background-size로 조절합니다.
4. font 및 margin/padding
폰트를 em단위로 하고자 한다면, body 에 기본폰트를 10px로 주어 em으로 적용하기 수월하게 할 수 있습니다.(ex. 16px은 1.6em) 그러나 기본폰트가 10px로 작은편이라 영역마다 폰트를 지정해줘야 하는 점이 아쉽죠. 그래서 기본폰트를 16px로 하고 em으로 적용하려 했더니 em으로 변환하는것은 계산기를 사용하면 되었지만 직관적이지 않았고, 영역마다 폰트를 지정하는 부분도 크게 줄어들지 않아서 기본폰트 10px로 작업진행하였습니다. 추후 전체적으로 폰트를 줄이거나 키우고자할때 기본폰트만 바꿔주면 되니 괜찮은 방법인듯 하였고, 다만 padding, margin 및 높이를 고정시킨 부분에서는 적절하게 em으로 값을 적용하는 노하우가 필요하겠습니다.