[2012.10] Responsive UI 기획을 하다 느낀 경험

이제는 OSMU(One Source Multi Using)서비스를 실현하고 N-Screen 시대에 대응해야 한다. 이에 따라 최근엔 CSS의 Media Queri를 이용한 "Responsive UI"를 설계하여 서비스를 구현하고 있다. 미국과 영국에서는 사례가 많지만 국내 사례는 그리 많지 않고 완성도도 높지 않다. 본인도 현재 프로젝트에 심혈을 기울여 작업하고는 있지만... 초반이니만큼 시행착오가 많은 법. 이제부터 그 시행착오를 기록하여 나중에 정보집으로 만들수 있도록 준비를 해야겠다. 

 

Responsive UI 란?
말그대로 반응하여 나타는 인터페이스를 뜻하며, 웹브라우저의 가로 사이즈에 반응하여 레이아웃을 변형시키는 형태를 뜻한다.

 

 

 

 

1. 레이아웃이 확대, 축소, 이동되는 것은 허용되나 요소의 위치가 크게 변하는 것은 UX 측면에서 좋지 않다. 

: 가령 예를 들어 작은 화면에서는 상단에 있던 이용안내 버튼이 큰 화면에서 하단으로 이동되는 등. 이것은 사용자에게 혼동을 준다. 

 

2. 기획 시 화면 전체를 기획하는 것이 아니라 요소별 , 영역별 기획이 화면의 사이즈별로 되어야 한다.
: 화면의 가로사이즈 변화에 따라 각각의 요소별(이미지,, 아이콘, 텍스트, 푸터, CI, title 등)과 영역별(Top area, Navigation Area, Content Area 등)에 대한 규칙을 세워야 한다. 무턱대로 화면과 시나리오 위주로 기획을 했다간 설계시 허점이 많이 드러날 것이다. 

 

3. 작은 화면에서 실행되는 자바스크립트는 최대한 배제한다. 

: 작은 화면에 많은 콘텐츠를 효율적으로 보이기 위해 자바스크립트를 적용하는 경우가 많다. 이것은 모바일웹(스마트폰)에서만 사용할 서비스라면 상관없지만 N-Screen에 대응하기 위해서는 그닥 좋은 방법이 아니다. 작은 화면에서 자바스크립트를 사용하고 큰 화면일때 자바스크립트가 없어진다면 이것 또한 사용자에게 혼란을 초래할 수 있다. 그리고 무엇보다 개발소스가 정말 개(犬)발 소스가 될 수 있다.

 

4.  존재하지 않는 디바이스의 LCD 해상도도 고려해야 한다. 

: 현존하는 디바이스 중에서는 LCD 해상도 1 혹은 120,000 pixcel 인 디바이스는 없다. 하지만 자고로 Responsive UI 설계 시에는 어떠한 경우의 수에도 대응해야 한다. 간혹 320pixcel(예: 아이폰 3GS)와 900pixcel(예: 갤럭시탭)의 사이에 있는 화면 레이아웃을 구성한다고 치자. 이것은 321pixcel일때 800 pixcel에서 적용하는 레이아웃을 그대로 적용할 수는 없다는 의미이다. 

 

5. 터치 행위를 고려해야 한다. 

: 모든 디바이스라는 것은 PC도 포함되지만 스마트패드, 스마트폰 등이 해당이 된다. PC처럼 모든 것을 커서 클릭하는 것이 아니니 터치 행위를 고려하여 디자인은 최소한의 터치영역을 보장해야 한다.