iOS의 UI 디자인 가이드

애플 (Apple)에서도 iOS 기반의 UI 디자인 가이드를 제시하고 있다. 안드로이드와 더불어 전세계 모바일 디바이스의 중요 시장을 확보하고 있는 iOS는 화면 구성하는 가이드와 인터렉션 가이드 등을 제공한다. iOS의 경우, 애플이라는 단일 회사에서 제공되는 환경이기 때문에 안드로이드보다 더 가이드를 지켜주는 것이 좋다. 사용자 입장에서는 일관된 UI의 디바이스를 사용하게 되면 , 마치 애플에서 직접 제공하는 소프트웨어로 착각할 수 있는 효과도 얻을 수 있다.

<그림12> iOS의 UI 디자인 가이드 사이트

출처: https://developer.apple.com/ios/human-interface-guidelines/

더보기

UI 상세설계

UI 상세설계는 기능 구조 , 대표 화면 , 화면 간 인터렉션의 흐름 , 예외 처리방식 등을 정의하게 된다. 전체 기능이 한눈에 들어오도록 설계하는 것이 매우 중요하고 , 모든 기능에 대해 공통적으로 적용되는 UI 요소와 인터랙션을 일관성 있게 유지되도록 해야 한다 (그림4).

<그림4> UI를 위한 일반 규칙 정의

출처: 소프트웨어공학센터

UI 상세설계에서는 사용성에 대한 반복적인 검토를 통해 완성도 높은 UI를 완성해 나가야 한다. 페이퍼 프로토타입 (Paper Prototype)을 통해 짧은 주기로 개발 , 평가 , 보완을 반복하면서 완성한다. 페이퍼 프로토타입을 사용하는 이유는 html로 작성하는 PC 기반 프로토타입보다 프로토타입 구현이 더 빠르고 UI 측면만 고려하면 되기 때문에 태그 등을 고민해야 하는 html보다 편하게 수행할 수 있다.그리고 , 모바일의 경우 , 작지만 더 많은 화면을 준비해야 하고 하나의 시나리오를 완성하기 위해서는 여러 개의 화면이 필요하기 때문에 페이퍼 프로토타입을 많이 활용한다.

<그림5> 페이퍼 프로토타입의 예

출처: http://blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220679812237

더보기

페르소나(Persona) 정의

사용자 중심의 UI를 만들기 위해서는 페르소나를 통해 사용자를 분류하고 정의해야 한다 . 사용자들이 소프트웨어에 대해 중요시 여기는 가치가 무엇인지를 파악하고 사용자 별로 구분하여 정의하여야 한다 (그림 2).

<그림2> 리서치로부터 페르소나 정의

출처: 소프트웨어공학센터

페르소나 활동을 통해 사용자의 특성을 파악해야 하는데 사용자가 무엇을 원하는지 사용하려는 이유가 무엇인지 , 기능에 따른 이용 패턴은 어떠한지 등을 정의해야 한다 . 각 사용자 별로 페르소나 카드를 작성하는 것이 좋다 (그림 3).

<그림3> 페르소나 양식(예)

출처: 소프트웨어공학센터

그림 3과 같은 페르소나가 정리되고 나면 , 유즈케이스 (Use case)와 같은 시나리오나 유저스토리 (User story)를 정의하여 사용자와 소프트웨어 간의 인터랙션을 정의하게 된다. 일반적으로 다이어그램 형태로 정리되어야 소프트웨어 개발자 간 커뮤니케이션이 용이하다 . 유즈케이스는 SI(System Integration) 프로젝트에서는 분석이나 설계를 하기 위한 도구로 많이 사용되지만 , 여기서 말하는 유즈케이스나 유저스토리는 사용자 요구사항에 더 가깝다고 할 수 있다. 사용자가 소프트웨어를 통해 얻고자 하는 것을 하나의 이야기 형태로 정의하고 , 정의된 이야기 안에서 필요한 기능을 정의한 후 , 사용자와 소프트웨어 간의 인터페이스인 UI나 인터렉션을 찾게 된다.

더보기