티스토리 뷰

시안디자인 제작하기

UX/UI 기반의 시안디자인 제작

일관된 UX를 고려하여 편리한 사용자 환경을 디자인하고 제작할 수 있다.

UX/UI 디자인 프로토타입(prototype) 제작

프로토타입의 이해

프로토타입은 앱 개발 접근법의 하나로서 HCI(Human Computer Interaction) 분야에서는 개발 초기에 시스템의 원형(archetype), 또는 전형적인 예, 기초 또는 표준을 만드는 것을 의미한다. 프로토타입을 만들어 사용자에게 직접 사용해 보게 하는 사용성 테스트를 통하 여 기능, 콘텐츠, 디자인의 추가나 변경, 삭제 등의 수정 및 요구사항을 수집한다. 이를 반영하여 앱의 개선 작업을 수행하고 사용자가 만족할만한 사용자 환경을 구축할 때까지 반복해 나가면서 시스템을 개선해 나가는 방식이다. 프로토타입은 실제 출시된 시스템처 럼 완벽하게 기능을 갖춘 형태가 아니며 개발 이전에 시스템의 문제점들을 발견하기 위해 서, 또는 특정사항들을 사용자를 통해 확인 및 평가를 위해서 사용 된다고 할 수 있다.

프로토타이핑의 장점과 단점
  • 프로토타이핑의 장점
    • 앱을 실제로 개발하기 전 사용자로부터 관련 검토 및 피드백을 받을 수 있다.
    • 신속한 제작이 가능하며, 반복을 통해 향상된 결과물을 얻을 수 있게 해준다.
    • 설계 과정 초기 단계에서도 잠재적인 사용성의 문제를 발견할 수 있다.
    • 테스트에 드는 비용과 위험부담이 적다.
  • 프로토타이핑의 단점
    • 앱 UI의 일부만 재현한 것을 테스트하기 때문에 사용성을 과대평가할 수 있다.
    • 전체 테스트 참가자의 요구사항 수집에 대한 운영 및 통제가 어려울 수 있다.
    • 부분적인 프로토타이핑을 하는 경우 테스트 범위 및 결과가 협소해질 수 있다.
프로토타이핑(prototyping) 유형의 구분

프로토타이핑은 최종 결과물과 얼마나 가깝게, 충실하게 반영하는가에 따른 충실도 (fidelity)를 기준으로 그 유형을 구분한다. 프로토타입 결과물의 완성도, 기능 및 서비스 고려수준, 역할 등의 기준에 따라 몇 가지 유형으로 나뉜다.

  • 저수준(낮은 충실도) 프로토타이핑(low-fidelity prototyping)
    • 낮은 충실도 프로토타이핑은 신속하게 프로토타입이 제작되어야 하는 경우에 사용되 는 방법이다. 주로 종이 위에 손으로 대략 스케치한 것을 프로토타입으로 활용하는 종 이 프로토타이핑(paper prototyping) 기법이 활용된다.
  • 고수준(높은 충실도) 프로토타이핑(high-fidelity prototyping)
    • 완성품에 가까운 디자인의 시제품, 소프트웨어의 베타 버전 등 최종 결과물과 유사도, 완성도가 높은 프로토타입을 활용한다.
  • 수직적 프로토타이핑(Vertical Prototyping)
    • 앱에서 제공해야 할 전체 기능 중에서 주요 기능만을 선별하여 세부적인 기능까지 심 도 있게 구현하는 방법이다. 몇 가지 경로만을 선별해 완전하게 실행되도록 프로토타 입을 제작하며, 기능에 대한 메뉴의 세부 동작이 완전하게 실행되기 때문에 사용자가 기능을 실제처럼 경험해볼 수 있다.
  • 수평적 프로토타이핑(horizontal prototyping)
    • 수평적 프로토타이핑은 앱의 전반적인 기능을 고려하여 최종 결과물을 예상해 볼 수 있는 개략적인 프로토타입 유형이다. 완전하게 세부 기능 동작이 실행되지는 않지만, 프로토타입이 가볍다는 장점이 있다.
  • 시나리오 프로토타이핑(scenarios prototyping)
    • 앱에서 중요한 작업을 선별해 지정된 기능과 경로를 통해서만 완전하게 실행되도록 프로토타이핑 하는 방법이다. 이 방법은 제한적으로 만들어졌기 때문에 사용성 평가 시 발견되는 문제점을 바로 찾아 개선시킬 수 있는 방법이다.
디지털 프로토타이핑(digital prototyping)

디지털 프로토타이핑은 확정된 시안 이미지 파일을 HTML 코딩 또는 프로그램을 이용하 여 프로토타입을 제작하는 방법으로 앱의 완성도 및 사용성을 점검할 수 있는 장점이 있 다. 이 경우, 프로토타입 중 고수준 프로토타이핑(high-fidelity prototyping) 유형에 해당한 다. 고수준 프로토타이핑은 제작 시간이 오래 걸릴 수 있으며 수정이 쉽지 않다는 단점이 있지만, 사용자에게 실제와 유사한 경험을 제공할 수 있어 콘텐츠, 인터랙션과 비주얼 디 자인에 대한 전반적인 사용성을 확인할 수 있는 장점이 있다.

모바일 앱 UI의 사용성(usability) 평가

사용성의 이해

사용성(usability) 또는 유용성(usefulness)은 사용자가 어떤 제품이나 서비스를 특정 목적을 달성하기 위해 사용할 때 어느 정도 사용하기 편리하며, 사용하기 쉬운가를 말하는 용어 이다. 사용성은 사용자 경험을 구성하는 요소 중 하나이며, 가장 기본적으로 충족되어야 하는 개념이다. 세계적인 UX 컨설팅 기업인 닐슨 노먼 그룹(Nielsen Norman Group)의 공 동 창시자이자, 사용성 전문가인 제이콥 닐슨(Jakob Nielsen)은 사용성에 대해 “시스템에 대한 사용자 경험에 영향을 주는 요소들의 결합이라고 정의하였다.” 그는 시각적 커뮤니 케이션의 주요 디자인 요소를 이용하여 사용성을 향상하고 시스템과 사용자의 원활한 문제 해결을 위해 UI 디자인 가이드를 제안하였다.

사용성 평가

디지털 프로토타이핑을 이용한 사용성(usability) 테스트는 사용자가 실제 모바일에서 앱을 이용하는 것처럼, 모바일 앱을 통해 화면에서 터치 제스처, 화면의 이동, 터치에 따른 반 응등의기능에대한UI 조작및인터랙션, 콘텐츠구성, 내용, 흐름등을경험할수있다. UX 디자인은 반복 디자인(iterative design) 프로세스를 수행하므로 프로토타입 평가를 통 해 짧은 단위로 평가, 보완, 개발을 반복하는 것이 일반적이다. UX 검증은 사용성 측면의 평가뿐만 아니라, 사용자 선호도 및 감성적인 영향력에 대한 검증 수행도 가능하다. 사용 성 테스트 진행 시, 먼저 UI/UX 기획 및 디자인을 목적과 의도대로 사용 가능한가에 관해 확인하고자 하는 구체적인 문제 정의를 명확히 하여야 한다.

  • 제이콥 닐슨(Jakob Nielsen)의 사용성 평가 원칙
    • 제이콥 닐슨은 사용자들이 처음 시스템을 이용할 때 사용법을 얼마나 쉽게 익힐 수 있고 기억할 수 있으며, 원하는 작업을 얼마나 효율적으로 지원하는지, 실수가 발생했 을 때 대처할 방법이 있는지, 시스템에 대한 주관적인 만족도는 어떠한지 등에 대한 다음의 원칙들을 통해 사용성을 평가할 수 있다고 하였다. 사용자로부터 시스템 평가 를받고자할때, 석학들에의해확립된사용성평가요인을 기준으로 수행하여 해당 앱의 사용성을 평가하는 것이 바람직하다고 할 수 있다
    • 학습용이성(learnability), 효율성(efficiency), 기억 용이성(memorability), 에러(error), 만족도(satisfaction)
  • 엘리슨 J. 헤드(AliOSn J. Head)의 사용성 평가 원칙
    • 인터페이스 전문가인 엘리슨 J. 헤드(AliOSn J. Head)는 사용성 평가 원칙을 작업 지원 수준, 사용성, 미학적인 구성의 세 부분으로 나눌 수 있다고 제시한다.
사용성 평가 원칙 수립

이와같은, 전문가의평가원칙들은그내용이서로중복되기도하며해당앱의평가항 목에 그대로 적용하기에는 맞지 않는 부분들이 생기기도 한다. 따라서 일반적으로 평가 목적에 따라 수집된 내용을 통합하거나 추가 및 삭제를 통하여 해당 평가 목적에 부합하 는 사용성 평가 원칙을 마련하는 경우가 대부분이다. 그리고 각각의 측정 항목을 평가하 는데 적합한 작업(task)을 정하여 사용자 테스트를 수행하는 것이 바람직하다.

댓글
댓글쓰기 폼