2011/03/07 14:45

모바일 디바이스 및 웹 환경



모바일 및 모바일 인터넷 환경

일반 PC의 인터넷 환경의 경우 대부분 고정된 위치에서의 초고속 유무선 네트워크와 고사양의 PC와 넓은 화면등의 환경이지만, 모바일의 경우에는 많은발전이 있었어도 낮은 하드웨어 사양 및 비싸고 느리거나 불안정한 3G/무선 인터넷 환경, 그리고 작은 화면등 모바일만이 가지는 특수한 환경으로 그에 맞는 화면을 설계해야 하는등 모바일 유저를 배려하는 환경이 제공되어야 합니다.

모바일 웹사이트 및 웹앱을 디자인하고 마크업하기 위한 정보들을 좀 정리해봤습니다. 저역시 모바일 웹사이트 및 웹앱을 위한 공부이기도 하나 모든분들께 도움이 됐으면 좋겠네요. :D

어떤 모바일 디바이스에 맞는 최상의 디자인을 설계할 것인가?

국내의 모바일 환경이라고 하면 기본적으로 아이폰(iOS), 안드로이드, 블랙베리, 윈도우 모바일(Window Mobile, 향후 Windows Phone7), 심비안 정도의 스마트폰들을 참고할 수 있고, 향후에는 아이패드 및 갤럭시탭+올레패드 정도의 환경을 추가로 생각할 수 있습니다.

모바일 디바이스의 해상도는 기기마다 조금씩 차이가 있습니다.

  1. 320 x 480 : 아이폰3G(S), 안드로원, 레전드
  2. 480 x 800 : 넥서스원,넥서스S, 디자이어(HD), HD2, 갤럭시S/A, 시리우스, 베가, 옵티머스Q, 올레패드
  3. 480 x 854 : 모토로이, 모토쿼티, 모토슬램
  4. 640 x 960 : 아이폰4
  5. 600 x 1024 : 갤럭시탭
  6. 768 x 1024 : 아이패드

위의 해상도를 보면 스마트폰은 크게 320 x 480과 480 x 800~854, 그리고 640 x 960으로 나눌수 있고, 모든 스마트폰에서 최적의 화면을 제공하려면 2~3종류의 화면을 제공해야 합니다. 또한 가로 모드도 생각해서 디자인을 설계해야 합니다.

현재 대부분의 모바일 웹사이트들은 1 column 형태의 가볍고 간결한 디자인으로 웹사이트의 가로 길이가 늘어나도록 되어있어 최소 320  x 480 해상도에 맞춰져 있으며, 고해상도 모바일 디바이스에 대응하기 위해 CSS를 사용하여 저해상도의 이미지와 고해상도의 이미지를 모바일 디바이스의 해상도에 맞춰 제공하도록 설계되어 있습니다.

특정 모바일 웹사이트의 경우 가로 모드의 경우 다시 세로 모드로 변환하라는 경고 화면을 보여주는 환경을 제공하기도 합니다. (CSS를 이용한 방법으로 나중에 관련 내용을 다뤄보도록 하겠습니다.)

모바일에서의 입력 인터페이스 환경

모바일에서의 입력 인터페이스는 일반 PC 상에서의 입력 인터페이스와는 조금 다른 환경을 가지고 있습니다. 기본적으로 주요 인터페이스인 마우스(터치) 인터페이스만 생각하더라도 PC에서는 click, over, out, drag등 마우스에 관한 다양한 이벤트가 존재하지만 모바일에서는 touchstart, touchmove, touchend의 이벤트만 공통으로 존재하고 있습니다. (아이폰의 경우 제스쳐 이벤트도 제공하고 있지만 안드로이드에서는 지원하고 있지 않습니다.)

이렇듯 터치 인터페이스 환경은 기본적으로는 PC의 마우스 이벤트와 비슷하지만 세밀한 클릭 및 마우스 오버라는 개념이 터치에서는 존재하지 않는다는 점등 다양한 이슈가 디자인 및 기능상에서 나타날 수 있으므로 꼼꼼히 체크해야 합니다.

키보드 환경 역시 쿼티 자판을 제공하는 모바일 디바이스도 있지만 대부분 가상 쿼티 자판을 제공하기 때문에 가상 쿼티 자판이 필요한 경우 보여지는 화면이 작아진다는 점등 PC와는 다른 모바일만의 환경을 잘 고려하여 설계해야 합니다.

저작자 표시
Trackback 0 Comment 0


티스토리 툴바