인터페이스 설계

□ 인터페이스 설계

○ 인터페이스 설계란?

인터페이스 개념

인터페이스는 사용자와 시스템이 상호작용 할 수 있도록 입력과 출력을 제공하는 창구 역할을 한다. 웹 프로그래밍 관점에서 인터페이스를 바라보면 브라우저를 사용할 때 우리가 자주 보는 웹사이트 화면이 바로 인터페이스에 해당한다. 물건을 구매할 때 구매 버튼을 클릭하면 인터페이스는 사용자의 요청을 웹서버에 전달하고 웹서버에 있는 프로세스는 입력 값에 알맞은 동작을 수행하고 데이터를 조회/수정/저장한 후 결과를 다시 인터페이스인 브라우저에게 전달한다. 브라우저는 웹서버가 보내준 결과를 사용자가 이해할 수 있도록 변경해 화면에 보여준다.

인터페이스 설계를 시작하기 전 시스템이 제공하는 기능과 데이터를 정의해야 한다. 앞서 살펴봤던 프로세스 설계가 이에 해당한다. 이 단계에서 정의되는 기능과 데이터는 개념적인 수준이다. 설계자는 개념적인 설계도를 머릿속에 가지고 인터페이스 설계를 시작해야 한다. 인터페이스 설계 과정에서 프로세스 설계도(DFD) 또한 점점 구체화되고 처음 작성했던 것에서 많이 수정되고 개선된다.

인터페이스 설계가 진행되면서 설계자는 논리적 데이터와 물리적 데이터 설계 방향을 머릿속으로 점점 구체화 시킨다. 설계자는 인터페이스를 만들지만 인터페이스 안쪽에서 있는 프로세스와 데이터가 어떻게 동작하는지에 대한 개념을 항상 염두에 두기 있기 때문에 인터페이스 설계 과정에서 프로세스와 데이터 설계가 동시에 구체화되게 된다. 

인터페이스 설계 원칙

(출처: http://www.welshgeek.com/services/prototyping)

인터페이스 설계할 때 일반적으로 많이 고려되는 세가지 원칙에 대해 살펴보자. 첫 번째 인터페이스는 직관적으로 설계되어야 한다. 설명서를 보지 않아도 사용자가 쉽게 사용법을 알 수 있도록 설계하는 것이 무엇보다 중요하다. 사용자가 쉽게 사용할 수 있도록 설계하기 위해 가장 많이 사용하는 방법은 지금 사람들이 많이 사용하고 있는 상용 프로그램들을 참조하는 것이다. 사람들이 익숙한 패턴으로 설계하는 것이 쉽게 이해할 수 있는 인터페이스를 만드는 지름길이다.

두 번째로 인터페이스는 일관적으로 설계되어야 한다. A화면과 B화면이 시선 흐름이 서로 다르다면 사용자는 프로그램 이용에 많을 불편을 느낄 수 있다. A화면에 외쪽에서 오른쪽으로 위에서 아래로 시각의 흐름이 흘러간다고 하면 기타 다른 프로그램도 동일한 흐름으로 화면을 만들어야 한다.

마지막으로 인터페이스는 효율적으로 설계되어야 한다. 구매를 하기 위해 여러 화면을 오가면서 이것저것 버튼을 눌러야 하는 인터넷 쇼핑몰이 있다면 사용자가 많이 찾지 않을 것이다. 시간도 많이 걸리고 사용하기도 불편하기 때문이다. 인터페이스를 설계할 때 직관적이고 일관적으로 설계 하는 것도 중요하지만 사용자의 클릭 수를 줄여주는 효율성 또한 인터페이스 설계에서 반드시 고려해야 할 특성 중 하나이다.

대표적 인터페이스 설계 방식

인터페이스는 대표적으로 5개의 영역으로 구성된다. (1) 상단 메뉴는 대부분의 프로그램에서 메뉴가 위치하는 대표적인 영역이다. 상단 메뉴는 보통 메인 메뉴과 서브 메뉴 2단으로 구성되며 메뉴의 종류가 적은 경우 1단으로도 구성된다.

(2) 좌측 메뉴는 상단 메뉴와 함께 많이 사용되며 상단 메뉴의 하위 메뉴가 위치한다. 프로그램 종류가 많은 경우 상단 메뉴와 좌측 메뉴 두 개로 구성하며 좌측 메뉴 또한 2단 구성으로 많이 구성된다. 좌측 메뉴의 단점은 본문 공간 일부를 사용한다는 것이다. 프로그램 내용을 보여줄 공간이 줄어들기 때문에 공간이 상대적으로 협소한 모바일 프로그램에서는 좌측 메뉴보다는 상단 메뉴가 많이 선호된다.

(3) 본문은 사용자가 요구하는 기능을 표현하는 영역이다. 본문에 복잡한 내용이 많이 들어 간다면 상단 메뉴와 좌측 메뉴 중 하나를 포기하고 본문 영역을 넓히는 경우가 있다. 모바일 화면의 경우 좌우 보다는 상하에 많은 공간을 쓸 수 있고 PC 화면의 경우 좌우 공간을 여유롭게 사용할 수 있기 때문에 어떤 디바이스를 타겟으로 할지에 따라 설계 패턴이 좌우된다.

(4) 하단 메뉴는 웹페이지에서는 주소, 연락처, 관련 사이트를 보여주는 영역으로 많이 사용되고 업무 화면에서 열려있는 페이지 정보를 표현하는 공간으로 많이 활용된다.

(5) 화면 우측에 위치한 퀵메뉴 영역은 자주 사용하는 프로그램을 모아 놓은 공간이다. PC 화면에서는 화면이 스크롤됨에 따라 같이 움직이는 플로팅 방식으로 많이 설계 된다.

대부분의 프로그램은 5가지 영역을 모두 사용하는 것이 아니라 꼭 필요한 부분만 선택되어 인터페이스가 설계되어 있다. 5가지 영역 중 어떤 영역을 사용해 화면을 설계할지 결정하는 것은 사용하는 디바이스 프로그램의 종류와 사용자의 특성에 따라 많이 좌우된다. 만일 대상자가 고령층이 많다면 메뉴와 본문의 폰트를 크게 하는 게 좋기 때문에 메뉴 영역을 줄이고 본문 영역을 넓히는 것이 좋다. 업무용으로 PC를 사용하고 다양한 기능을 제공하는 시스템이라면 5개 영역을 모두 활용해 화면을 설계하는 것이 유리하다.

인터페이스 설계 도구는 일반적으로 파워포인트가 많이 사용된다. 하지만 그리드(엑셀의 셀과 같은) 위주의 화면이라면 파워포인트 보다는 엑셀을 사용하는 것이 더 효율적이다.

인터페이스 구성은 프로세스 설계에서 도출한 업무 분류를 많이 따라간다. 프로세스 설계서는 업무 분류가 있고 분류 별 세부 프로세스가 있는데, 이 프로세스들이 서로 어우러져 하나의 업무를 완성한다. 따라서 세부 프로세스를 하나의 업무 분류로 묶었기 때문에 인터페이스를 설계할 때 업무 분류가 대메뉴가 되고 세부 프로세스가 소메뉴로 분류될 수 있다.

하지만, 내부적으로 이루어지는 프로세스와 달리 사용자와 상호작용하는 인터페이스는 약간 성격이 다르기 때문에 인터페이스로 구현되는 화면의 종류는 세부 프로세스와 설계 방식이 조금 다르다. 예를 들어 영업일지를 관리하는 프로세스는 목록조회 프로세스와 세부화면 조회 프로세스가 따로 들어갈 필요가 없다. 모두 정보조회 성격을 가지고 있기 때문이다. 반면 인터페이스의 경우 목록과 세부화면은 엄연히 다른 성격을 가지고 있기 때문에 별도의 화면으로 구성해야 한다.

인터페이스는 프로세스 설계서를 기준으로 작성되지만 인터페이스의 특성을 반영해 화면이 분할되기도 하고 하나로 합쳐지기도 한다. 인터페이스 설계는 백그라운드에서 실행되는 프로세스와 데이터를 모두 고려해야 하기 때문에 어느 정도 프로그램 개발 경험이 있어야 가능하다. 인터페이스 설계 과정에서 데이터 설계의 윤곽이 그려지며 이를 바탕으로 논리적/물리적 데이터를 설계할 수 있다.

○ 스마트 영업지원시스템 인터페이스 설계 실무 사례