본문 바로가기

Experience

윈도 애플리케이션 인터페이스 [FID]

[FID CX Lab 컬럼] 윈도 애플리케이션 인터페이스 설계
웹사이트 VS 윈도우 애플리케이션

초창기의 윈도우 애플리케이션은 간단한 문서나 그림 등을 제작하는 오피스 관련 애플리케이션이 대부분이었다. 이러한 오프라인 중심의 윈도우 애플리케이션은 최근에 들어서 인터넷의 보급과 .net의 개발로 인한 웹애플리케이션의 대두, 모바일 애플리케이션과의 연동 등 다양한 온라인 중심의 애플리케이션이 개발되고 있다. 다양한 윈도우 애플리케이션 인터페이스 설계 과정은 일반적인 웹사이트 인터페이스 설계 과정과 많은 부분 차이점이 존재한다.

웹사이트는 정보제공의 측면에서 윈도우 애플리케이션은 기능제공이라는 측면에서 가장 큰 차이점을 보이고 있다. 즉 웹사이트 인터페이스 설계 과정에선 정보구조 설계 과정이 중심이 되지만 윈도우 애플니케이션 인터페이스 설계 과정에선 기능구조 설계와 작업흐름(Task Flow)이 중심이 되는 점에서 가장 큰차이점이라 할 수 있다.

윈도우 애플리케이션 인터페이스 설계 프로세스

현상황 분석 및 사용자 정의

경쟁 애플리케이션 분석

사용자 관찰

작업분석(Task Analysis)

Task-Flow 다이어그램 작성

기능 중요도 평가

기능구조 설계

기능구조 분석

기능구조 다이어그램 작성

프로토타입 제작

CM(Conceptual Model) Mockup 제작

SDS(Screen Design Standard) 제작

프로토타입 평가 및 가이드라인 제작

인터페이스 가이드라인 제작

기능 설계(정보 설계) 가이드라인 제작

인터페이스 설계

DUID(Detailed User Interface Design) 제작



윈도우 애플리케이션 종류별 가이드라인

일반적으로 애플리케이션은 애플리케이션을 사용하는 사용자에 따라 크게 전용 애플리케이션과 범용 애플리케이션으로 나뉜다. 전용 애플리케이션은 구매, 재고 등의 특정업무에 대한 자동화 지원 기능을 가지고 있는 재고관리, 구매관리, 고객관리와 같은 애플리케이션을 말한다. 이와 반대로 범용 애플리케이션은 문서작성, 표 계산 등의 일반 업무에 대한 자동화 지원 기능을 가지는 워드프로세스, 스프레드시트 등의 애플리케이션을 말한다.
  • 범용 애플리케이션

    1.대상 사용자들은 아주 많은 변수와 다양함을 가지고 있다는 점을 고려해야 한다.

    2.전용 애플리케이션보다는 기술적인 제약을 많은 부분에서 고려해야 한다.

    3.다양한 운영체제(OS)에 따라 애플리케이션을 여러가지 버전으로의 제작을 고려해야 한다.

    4.운영체제(OS)의 스타일 가이드라인을 적용해야 한다.

  • 전용 애플리케이션

    1.커스터마이징 옵션을 많은 부분에서 제공해야 한다.

    2.현장조사와 같은 대상 사용자의 작업환경을 관찰할 필요가 있다.

    3.범용 애플리케이션보다 정보 또는 기능의 양이 방대함을 고려해서 쉽게 검색할 수 있도록 해야 한다.
윈도우 애플리케이션 인터페이스 구성요소별 설계 가이드라인

윈도우 애플리케이션 인터페이스는 크게 네가지 구성요소를 이루어진다. 일반적으로 WIMP라고 부르는데 윈도우, 아이콘, 메뉴, 포인터 또는 윈도우, 아이콘, 마이스(Mice), 풀다운 메뉴를 나타내는 약자이다. 본 칼럼에서는 WIMP 중에 메뉴, 윈도우, 아이콘, 색상에 대한 간략한 설명과 가이드라인을 제시한다.
  • 메뉴(Menu)

    설계자가 효과적인 메뉴 인터페이스를 만들기 위해서는 고려해야할 사항들이 많다. 전체적인 메뉴의 구성방식, 한 화면에 메뉴 항목의 수, 메뉴와 메뉴 항목의 이름들, 전문가를 위한 대안 등을 나타내고자 하는 시스템에 적합하게 적용해야 한다.

    1. 메뉴 구조와 작업 구조가 일치해야 한다.

    2. 메뉴 계층의 넓이를 감수하더라도 깊이를 최소화 시켜야 한다.(각 메뉴 단계에 4개~8개 메뉴 항목을 사용하고 깊이는 3단계 이상은 바람직하지 않다.)

    3. 선택 메뉴는 수직으로 주어져야 한다.

    4. 사용자의 경험 수준과 제공되는 입력장치에 의존해야 한다.

    5. 논리적이고 상호 배타적인 의미의 명확한 범주를 정해야 한다.

    일반적으로 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트워크 메뉴와 같이 크게 4가지 메뉴 구성방식이 있는데 각각의 구성방식의 특징을 잘 이해해 메뉴 설계 시 적절한 메뉴를 구성할 수 있어야 한다.

  • 윈도우(Window)

    1. 윈도우 구성요소들은 일관성을 위해 항상 같은 자리에 위치해야 한다.

    2. 도큐먼트의 성격에 따라 윈도우 형태를 적합하게 선택해야 한다: 윈도우 형태는 크게 주 윈도우(primary window)와 부 윈도우(secondary window)로 나눌 수 있는데 부 윈도우는 주 윈도우의 자식 윈도우로 일반적으로 실질적인 데이터를 처리하는 윈도우이다. 부윈도우의 대표적인 예는 속성 윈도우, 메시지 상자, 대화상자, 팔레트 윈도우, 팝업 윈도우 등이다.

    3. 애플리케이션의 성격에 따라 윈도우 구성 형태를 적합하게 선택해야 한다: 윈도우는 구성상 단일 윈도우(SDI)와 다중 윈도우(MDI)로 나눌 수 있는데 SDI는 오브젝트나 윈도우의 내용이 단순하거나 일대일 관계일 때, 오브젝트가 주요한 표현이나 한 개의 단위로 사용될 때 적합하다. 반면에 MDI는 일정한 오브젝트 셋을 관리하거나 주 윈도우에 종속되는 자식 윈도우들을 표현할 때 적합하다.

    4. 윈도우들간의 작업 이동시 편리성을 고려해야 한다.

    5. 각 윈도우들이 오픈하는 위치가 일정해야 한다.

    6. 윈도우의 속성은 운영체제(OS 종류, OS 버전 등)의 형태나 사용자 환경(화면 해상도 등)을 고려해야 한다.

  • 아이콘(Icon)

    1. 애플리케이션의 객체나 프로세스를 표시하는 심볼이기 때문에 적절한 메타포를 사용해야 한다.

    2. 일관적인 그리드와 광원을 사용해야 한다.

    3. 지역화나 아니면 범세계적으로 사용될 것을 염두해 두고 디자인해야 한다.

    4. 사용자가 아이콘을 쉽게 인식할 수 있도록 아이콘에 레벨을 붙이는 것은 적절하다.

    5. 동일한 아이콘 패밀리에 속하는 모든 아이콘은 서로간에 시작적으로 일관성을 유지해야 한다.

    6. 디자인 전반에 걸쳐 아이콘 요소들은 일관적으로 사용해야 한다.

  • 색상(Color)

    1.다양한 운영체제(OS)의 버전을 고려해서 구현 색상을 가변적으로 적용해야 한다.

    2.운영체제(OS)의 색상 가이드라인을 적용해야 한다.

    3.아이덴티티를 부각시킬 수 있는 색상을 고려해야 한다.

    4.색상의 미적 사용보다는 기능의 가시성을 높이기 위한 색상사용이 중요하다.

    5.표준화된 기능에는 일반적으로 사용되는 색상을 적용해야 한다.