티스토리 뷰

UI 정보구조 설계하기

OS 플랫폼 특성 파악

OS 플랫폼에 따른 UX의 특성을 파악하여 정보구조를 설계 할 수 있다.

모바일 UX의 특성 이해

정보구조 설계 과정에 있어서 실제 개발할 UI의 구조도를 작성하기 전에 고려해야 할 사 항은 모바일 소프트웨어의 UI/UX에 대한 특성 이해와 모바일의 UI/UX 디자인 원칙, OS 플 랫폼 별 모바일 앱의 UI/UX 디자인 가이드라인에 대한 이해가 필요하다.

모바일 소프트웨어의 UX

모바일 환경에 적합한 사용자 경험 디자인을 하기 위해서는 사용자가 앱을 이용하여 달성 하고자 하는 목적과 그에 따른 사용자의 행동패턴과 니즈를 발견하여, 그것을 UI 디자인 에 담아내는 디자인 과정이 요구된다. 모바일에서 사용자 경험이 유독 강조되는 이유는 첫째, 작은 화면에서 서비스를 이용해야 한다는 점과, 모바일 기기의 특성 상 언제 어디서 든 휴대성이 확보되기 때문에 사용자가 원하는 정보만을 직관적으로 신속하게 보여주고 반응해야 한다는 것에 있다. 더 나아가 불특정 다수를 대상으로 사용자 경험을 표준화하 여 반영해야 한다는데 있다. 이러한 이유로 기존 PC 기반에서의 UX와 모바일에서의 UX 개념에는 많은 차이가 발생할 수밖에 없는 것이다. 현재는 모바일 앱 시장의 수요 증가 및 보급 확대로 인해, 모바일을 중심으로 UX 디자인의 중요성이 증대되고 있는 추세이므 로, 다음의 모바일 UX의 기본적인 특성에 대한 이해가 필요하다.

  • 모바일 디바이스 하드웨어와 소프트웨어 구성과의 연관성
  • 높은 사용자 접근성(24시간 함께하는 밀착성)
  • 사용자와의 상호작용(interaction)
  • 다양화, 고도화되는 입력(input)방식(touch, gesture, audio 등)
  • 센서(sensor)를 기반으로 하는 환경
  • 휴대성(mobility)이 극대화된 환경
  • 집약적인(intensive) 정보 전달 환경
  • 모바일 운영체계(OS)가 탑재된 환경
모바일 소프트웨어의 UI/UX 디자인 원칙

모바일 환경에 적합한 UI/UX 디자인을 하기 위해서는 사용자와 이용 측면과 기기와 환경 의 특성, 그리고 인터랙션 하는 방식에 대한 이해를 바탕으로 다음의 UX 디자인의 원칙이 필요하다

  • 사용자의 인지적 관점에서 이해할 수 있는 디자인
  • 사용하기 쉬운 인터페이스
  • 원활한 상호작용(interaction)
  • 간결하고 매력적인 디자인
  • 유용한 기능과 콘텐츠
  • 사용자 행동과 상황, 반응을 고려한 직관적인 디자인
  • 접근성의 극대화
  • 사용자 실수 방지 및 복구 가능한 디자인
  • 표준을 준수한 일관된 디자인
모바일 앱(App)의 유형

2014년 4월, (주)IBM에서는 “IBM 소프트웨어 기술 백서” 발간을 통하여 모바일 앱의 유 형을 3가지로 분류하고 각각의 장단점을 분석하여 다음과 같이 제시하였다.

  • 모바일웹 앱(App)
    • 모바일웹 앱의 유형은 모바일 애플리케이션처럼 보이는 웹사이트를 말한다. 모바일에 최적화된 웹사이트라고 볼 수 있으며, 디바이스 별로 별도의 개발 방식이 필요하지 않 다. 모바일웹 앱은 HTML5에서 단일 페이지 애플리케이션으로 만들 수 있으며, 모바 일기기페이지에서앵커사용페이지로이동하는것을시뮬레이션할수있다. 또한 모바일 기기의 브라우저에서 실행되지만, 브라우저 단추나 표시 줄이 보이지 않아 하 이브리드 앱이나 네이티브 앱과 잘 구별되지 않는다. 모바일웹 앱의 장점은 네이티브 앱처럼 보이지만 개발 비용이 훨씬 저렴하고, 변경 사항이 적용되더라도 사용자가 즉 시 사용할 수 있으며 네이티브 앱에 비해 확장성이 우수하고 구축비용도 합리적인 크 로스 플랫폼이라 할 수 있다. 하지만, 모바일 기기에서 기본으로 제공하는 기능에만 접근할 수 있어 앱 스토어나 구글 플레이에 등록이 되지 않으며 인터넷이 연결이 되 지 않으면 사용할 수 없다는 단점이 있다.
  • 하이브리드 앱(hybrid app)
    • 하이브리드 앱은 네이티브 앱과 웹 앱이 장점을 결합한 형태로, 모바일 웹의 홈페이지 를구현하는웹기능과앱의어플기능을혼합한방식의앱을말한다. 하이브리드앱 은 다양한 기기의 기능을 사용할 수 있으며 네이티브 앱과 같이 앱 스토어에서 다운로드할 수 있다. HTML, JavaScript, CSS와 같은 웹 기술을 사용하여 만들 수 있으며, 하이브리드 앱은 모바일 기기에 임베드된 브라우저에 표시되므로 참조할 URL이 없다 는 특징이 있다. 따라서 기업들은 기존 모바일웹 앱 방식으로 개발된 앱을 하이브리드 앱에 패키징하여 앱 스토어에 올리기도 한다. 이는 동일한 HTML 코드를 멀티 모바일 운영 체제에서 재사용할 수 있기 때문에 앱을 다시 개발할 필요 없이 멀티 플랫폼을 지원할수있게된다. 하이브리드앱의장점은모바일기기의고유기능및위치정 보, 카메라등과같은고급기능을사용할수있으며, 네이티브앱의빠른속도와모 바일웹앱이가지는개발용이성, 빠른업데이트적용을들수있다. 하지만, 인터넷 환경에 따라 일부 기능이 작동이 되지 않을 수 있으며 구동 속도가 네트워크 상태에 따라 많이 영향을 받아 속도가 느릴 수 있다는 단점이 있다.
  • 네이티브 앱(Native App)
    • 네이티브 앱은 특정 모바일 OS 제조사에서 제공하는 개발 언어를 이용하여 각각의 고 유 모바일 OS 플랫폼에서만 동작한다. 따라서 자바로 개발하는 안드로이드 앱과 오브 젝트-C언어로 개발되는 아이폰 앱으로 나뉜다. 네이티브 앱의 장점은 모바일웹 앱에 비해 속도가 빠르며, 모바일 기기의 다양한 기능 활용, 인터렉티브한 사용자 환경을 제공할 수 있다는 점이다. 하지만, 개발하는 데 시간과 비용이 많이 소요되며 업데이 트및수정의어려움, 같은앱을다양한플랫폼에출시할경우에는많은시간과비용 이 따르게 된다는 단점이 있다.

OS 플랫폼 별 UI/UX 디자인 가이드라인

iOS 휴먼 인터페이스 가이드라인(human interface guidelines)

애플 iOS의 모바일 사용자 인터페이스 원칙은 사용자의 명확한 목적을 이루도록 하는 것 과 편리한 사용성이 균형을 이룬 인터페이스를 제공하는데 있다. 훌륭한 UI는 기계의 성 능이 아닌 사용자, 사용자의 생각과 동작에 근간을 두고 있으며, 다음의 휴먼 인터페이스 디자인 원칙(human interface principle) 여섯 가지를 준수해야 한다고 제시한다.

  • 심미적 통합(aesthetic integrity)
    • 앱의 아름다운 디자인과 사용하기 좋은 기능의 통합을 의미하며, 이와 같은 앱은 사용 자에게 앱의 목적과 정체성에 대한 명확하고 통일된 정보를 제공한다.
  • 일관성(consistency)
    • 일관성은 사용자들이 앱을 사용하며 얻은 UI 지식과 기술을 다른 앱에서도 동일하게 적용할수있는것을말한다. iOS의표준준수여부, 콘트롤, 뷰, 아이콘디자인의일 관성과 동작의 정확성, 텍스트 용어의 의미나 스타일의 일관성, 앱의 UI 요소의 형태 와 행동에 있어서 일관성의 원칙을 지켜야 한다.
  • 직접적 조작(direct manipulation)
    • 사용자가 UI를 자유자재로 조작할 수 있고 자신의 의지대로 앱이 동작하는 것을 의미 한다. 사용자가 화면의 객체를 조작하기 위하여 제스처를 사용할 때, 사용자 액션에 대한 즉각적인 반응이 나타날 때 직접적 조작을 경험하게 된다.
  • 반응성(heedback)
    • 사용자의 행동을 인지하고 처리가 발생하는 것에 대해 정보를 보내어 적절한 상태가 되도록 하는 것으로 사용자 조작에 대해 즉각적인 피드백을 주는 것을 말한다.
  • 은유(metaphors)
    • 메타포는 실제 세계의 객체나 행동을 앱의 가상 객체와 행동에 접목시켜 사용자가 앱 을 어떻게 사용해야하는지 쉽게 이해할 수 있게 하기 위한 것이다. iOS는 메타포를 이 용한 풍부한 그래픽 이미지와 동작을 제공하여 사용자가 실제와 같이 화면의 객체들 과 물리적 상호작용을 할 수 있도록 한다.
  • 사용자 통제성(user control)
    • 사용자 액션은 단순하고 직관적으로 만들어 사용자가 쉽게 이해하고 기억할 수 있어 야 한다. 사용자가 이미 익숙해져 있는 표준 콘트롤과 액션을 사용해야 하며, 작업을 진행하기 전에는 그것을 취소할 수 있는 기회를 제공해야 하며, 사용자가 무언가를 삭 제하려 할 때는 반드시 확인하는 절차를 제공해야 한다.
Android 사용자 인터페이스 가이드라인(user interface guidelines)
  • 사용자에게 집중하라
  • 사용자에게 중요한 요소들의 시인성을 확보하라
  • 개발 도중에도 사용자 의견을 반영하라
  • 사용자의 행동, 상황, 반응을 예측하라
  • 사용자가 오류를 범하더라도 정상 작동하게 하라

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼