모바일 먼저!

스마트폰만 있을 때는 그나마 덜했는데, 아이패드를 비롯한 다양한 기기들이 쏟아져나오면서 웹 디자인 업계에 있는 사람들은 여러 모로 골치가 아프다. 스마트폰은 아예 화면이나 작지, 타블렛은 화면 크기는 큰데, 작동은 터치로 한다. 그러니 모바일 사이트를 만들어서 그대로 적용하기도 어렵고, 그렇다고 전통적인 방식대로 데스크탑 사이트를 만들어놓고 타블렛 기기를 맞이할 수도 없다. 진퇴양난?

물론 답은 있다. 최근에 개편한 트위터를 보면 알 수 있는데, 각 요소들을 큼직 큼직하게 만들고(애플이 권장하는 터치 포인팅 영역의 크기는 44x44픽셀이다. 트위터는 딱 여기에 맞췄다), 롤오버 이벤트를 사용하지 않고 모두 '클릭' 기반으로 만드는 등의 디자인 개편을 통해 타블렛에도 잘 대응하도록 만들었다. 그 외에도 각 영역을 모듈화하고, 상단에 집어넣은 '홈, 친해지기' 같은 내비게이션을 모바일 웹과 네이티브 앱에도 그대로 적용함으로써 기기와 상관 없이 동일한 정체성을 가져가도록 했고. 여러모로 꽤 신경을 많이 쓴 모습이다.

이와 관련해서 스매싱 매거진에 글이 올라왔기에, 글 마지막에 있는 팁 부분만 번역했다. 원문에 포함된 예시 이미지 등도 참고할만 하다.

마지막에 나온 팁과 마음에 담아둘 것들(Tips and things to keep in mind)만 간략 번역.

• 반응형을 생각하라
  전체적인 반응형 디자인을 사용하지 않는다 하더라도, 반응형식을 생각하는 것만으로도 쓸만한 유니버셜 디자인에 도움이 된다.
  (유니버셜 디자인을 잘 모르면, 제가 쓴 글 하나 소개. http://www.thinkofweb.net/56)
  
  
• '터치'를 먼저 생각하라
  손가락 끝에 맞춰 버튼 크기를 정하면 마우스 커서로도 잘 작동한다. 그러나 마우스 커서를 위한 버튼 크기는 손가락으로 쓰기엔 너무 작다. '터치'를 먼저 생각한 디자인은 웹사이트나 어플리케이션을 다른 맥락에서도 잘 작동하게 할 것이다.
  
  
• '유니버셜'하게 생각하라
  "일찍, 자주 테스트하라"는 말은 여전히 통용된다. 디자인을 진행하면서 당신의 디자인이 여러 기기에서 어떻게 작동할지 일찍, 자주 생각하라.
  
  
• 모바일을 먼저 생각하라
  모바일을 먼저 생각하는 디자인은 진짜로 사용자에게 중요한 것이 무엇인지에 촛점을 맞추도록 해준다. 핵심 기능에 계속 초점을 맞춤으로써 여러 기기에 걸쳐 동일한 경험을 제공하는 것이 훨씬 쉬워진다.
  
  
• 조심하라
  여 러 기기의 인터페이스에 걸쳐서 적용되지 않는 상호작용에 대해서 조심하라. Hover states(역주: 마우스 오버 이벤트 같은 것)는 터치 기기에서는 작동하지 않는다. 터치 제스쳐는 마우스와는 다르다. 이건 그런 효과를 사용할 수 없다는 뜻이 아니라, 그것의 한계를 알고 있어야만 한다는 뜻이다.