UI 설계(User Interface Design)

상위문서 : 시스템 개발 방법론

필수참고문서 : 

1.개요

소프트웨어 시장이 발달하면서 소프트웨어의 성능 뿐만아니라 UI시장도 발전하고 있다 현대의 깔끔한 UI 디자인은 여러 디자이너와 엔지니어가 고안해낸 산물중 하나이다. 이러한 UI의 설계에서 중요한것이 메타포인데 이 문서에서는 기본 설계 요소와 메타포가 무엇인지 그리고 UI설계 기법을 알아본다.

2. UI 정의

사용자 인터페이스는 사용자와 상호작용하는 컴퓨터 시스템이다. 이러한 인터페이스는 프로그램이 보여 주는 그림, 문자, 소리 등 정보로 사용자에게 전달되며 사용자는 프로그램을 조작하기 위한 수단으로 컴퓨터에게 명령을 전달한다. 정보 시스템 인터페이스는 크게 4가지로 나눌 수 있다.
  1. GUI - 그래픽 사용자 인터페이스로 간략화된 작업환경을 보여주며 그래픽과 텍스트로 이루어진 객체를 조작한다.
  2. 웹 인터페이스 - 인터넷과 웹브라우저를 통하여 페이지를 열람하고 조작하는 인터페이스이다.
  3. CUI - 캐릭터 사용자 인터페이스로 명령어 인터페이스라고 한다. 특정 명령 문자열을 입력하여 시스템을 조작한다.
  4. TUI - 텍스트 사용자 인터페이스로 자연어에 가까운 문장을 입력하여 시스템을 조작하는 인터페이스이다. 예를 들어 애플의 siri를 들 수 있다.

이제 메타포의 개념을 알아야하는데 메타포란 사용자가 시스템과 대화하고 있다는 개념이다.

3. UI 설계 요소

UI를 설계하기 위해서 먼저 기존에 있는 UI들의 요소를 이해할 필요가 있다. 다음은 기존에 있는 UI들을 나타낸 것이다. 비주얼 스튜디오가 강제 협력해줬다.

1. 텍스트 박스

2. 라벨
라벨에 글을 지정해두면 나중에 프로그램을 실행할 때 글이 표시된다. 사용자가 직접 수정할려면 수정이 가능한 매서드를 만들어야한다.

3.체크박스
체크박스는 체크를 할 수 있게 만든 것이다. 
4. 라디오버튼
라디오버튼은 체크를 할 수 있게 만들 것이다. 위의 체크박스와 차이점은 라디오버튼은 라디오버튼 중에서 한개밖에 선택이 불가능하다는 것이다.

5. 콤보박스


콤보박스는 리스트 안에서 원하는 항목을 고르는데 사용한다.

6. 버튼
버튼에 매서드를 연결해두면 버튼을 조작하는 동시에 매서드가 실행된다.


4. UI 설계 기법

UI를 꾸미면서 딱 꾸며야한다는 정답은 없다. 다만 가이드라인은 있는데 그동안 UI를 꾸며온 선대 프로그래머들과 디자이너들이 만든 일종의 족보와 비슷한것이다.

일단 먼저 가이드라인을 살펴보기전 원리를 살펴보자
1. 일관성 : 예를들어 게임도중 F12를 누르면 스크린샷이 찍여진다고 했을때 게임을하는 어떤 상황에서라도 F12를 누르면 스크린샷이 찍혀져야한다.
2. 적절한 사용자 지원 : 사용자가 조작을 잘못해 오류가 났을 경우 무엇때문에 오류가 났는지 정보를 제공해야한다.
3. 적당한 피드백 :
4. 최소의 사용자 입력 : 예를들어 포토샵을 실행하기전 모든 환경변수를 시작하기전 사용자에게 입력을 시키고 시작한다고 생각해보자 끔찍하다.
5. 간편한 오류 처리 : 시스템은 사용자가 해킹이라도 하지 않는 이상 심각한 오류를 일으키지 않도록 제작을 해야하며 적절한 사용자 지원을 해야한다.

설계자가 유의해야될 원리(사용자 중심 설계)

1. 배경 지식의 이해
2. 그래픽 효과의 극대화 : 대부분 사람들은 그림을 통해서 더 잘 배운다. GUI가 애용되는 것은 배우고 사용하기 쉬운 인터페이스이기 때문이다.
3. 사용자에 대한 이해 : 사용자의 관점으로 사용자에게 익숙한 단어와 메타포 설계가 필요하다.
4. 프로토타입의 사용 : 사용자의 의견을 듣기위해서 프로토타입을 제공함으로서 피드백을 받는다.
5. 이해하기 쉬운 인터페이스 : 사용자 인터페이스는 모든 작업 명령어 커뮤니케이션을 포함해야한다. 예를 들어 어떤 시스템의 메인 메뉴를 정하여고 할 때 너무 적은 숫자의 메뉴는 다음 수준에 많은 선택 메뉴를 두어야한다. 반대로 너무 많은 메뉴를 첫장에 줘버리면 사용자는 혼란스러우므로 적절하게 둬야한다.

가이드라인
1. 배우기 쉽고 쓰기 쉬운 인터페이스를 만들어라
2. 효율성을 높이는 기능을 제공하라
3. 숙달된 사용자를 위해 핫키를 제공하라 핫키란 단축키를 만한다. 윈도우의 알트 + 탭은 잘알고 있을 것이다. 보통 알트키를 통한 조합을 많이 사용하는데 알트키는 Alternative key 즉 대체키를 말한다.
4. 필드의 대부분 값이 같아면 디폴트 값을 사용한다. 예를들어 한국 사람들 대부분이 서울에 살고 있으므로 거주지 설정의 기본값을 서울로 두는것이다.
5. 몇개의 단어만 입력하여도 후보 단어가 나오도록 빨리 찾기 기능을 제공하라
6. 사용자가 도움을 받거나 오류를 수정하기 쉽게 하라
7. 끌리는 레이아웃과 설계를 하라 너무 원색에 가까운 레이아웃은 눈을 아프게 만든다. 또한 특수효과를 너무 많이 쓰면 지저분해보인다.

5. 입출력 설계

5.1.입력 설계

입력을 설계하려면 가장 먼저해야할 일은 무슨 장치로부터 입력이 들어오는지 파악하는 것이다. 다음은 장치들의 종류이다.

1. 디지털 카메라 - 사진이나 동영상의 자료를 입력할 수 있다.
2. 전자 화이트보드 - 화면의 그려진 글자를 인식할 수 있다. 터치패드의 발전(?)형
3. 터치패드 - 화면을 손가락으로 누르면 그 손가락 누른 지점의 좌표를 입력할 수 있다.
4. 키보드 
5. 마이크로폰 -소리를 디지털화해 입력할 수 있다.
6. 마우스 - 터치패드와 마찬가지로 좌표를 입력한다.
7. RFID - 라디오 주파수를 이용하여 대상을 인식한것을 입력할 수 있다.
8. 스캐너 - 이미지를 입력할 수 있다.
9 전화 - 홈쇼핑이나 은행 서비스를 생각하면된다.(ARS)

위 장치들을 통해서 자료가 있으면 다음과 같은 방식으로 시스템에 입력한다.
일괄입력 - 특정 시각에 주기적으로 자료를 입력하는 방법이다. 대표적인 예는 학교에서 기말 성적을 컴퓨터에 적는것이 일괄입력이다.
온라인 입력 - 실시간으로 자료를 입력하는 방법이다. 편의점의 POS기에 찍힌 상품의 정보는 서버로 가서 상품구입시가와 상품 정보 데이터가 입력이 된다.

입력 오류 체크 
입력을 했으면 그 오류를 체크해야 데이터의 품질을 높힐 수 있다.
1. 순서 체크 - 데이터가 일정한 순서로 입력되어야 할 때 사용
2. 존재 체크 - 의무 입력 항목에 사용한다. 예를들면, 사원 정보에 주민번호가 필요하다면 존재체크를 하여 정상적인 주민번호가 입력되기 전에는 레코드를 저장할 수 없도록한다.
3. 데이터 타입 체크 - 숫자 데이터를 넣는 곳에 문자를 넣으면 오류를 뜨게한다.
4. 범위 체크 - 0~10까지 데이터를 넣을 수 있는 곳에 152을 넣으면 오류를 뜨게 한다.
5. 유효성 체크 - 특정 값을 가져야하는 데이터에 대하여 사용한다. 예를들어 창고 관리 시스템에 20개의 유효한 상품 그룹이 있다고 할 때 그 안의 하나와 매치되지 않는 상품이 입력된다면 오류를 뜨게한다.
6. 조합 체크 - 과자를 100개 이상을 구매하여야 할인이 적용될 때 그보다 적은 과자를 구매했을 시 할인이 적용안되게 한다.
7. 일괄 입력 제어 - 주문을 일괄 입력하기 전에 사용자는 주문 전체 개수를 계산하거나 주문 수량 총합을 계산할 수 도 있다. 주문을 일괄 입력할 때 주문 시스템은 동일한 총합을 두번 계산한다. 시스템 총합이 입력 총합과 일치하지 않으면 자료 입력에 오류가 있었음을 의미한다.


5.2.출력 설계

출력 설계는 

인쇄 및 화면 출력
보고서 출력
상세 보고서- 보관하고 있는 레코드에 대하여 여러 줄의 출력물을 생성한다.
예외 보고서- 특정 조건을 만족하는 레코드만을 인쇠한 것이다. 예를 들면 신용 관리자가 연체료 있는 고객의 보고서를 보는것이다.
요약 보고서 - 고위 관리자에게 간단하게 브리핑을 해주는 용도로 자세한 사양이 빠진 보고서이다.

on 2017년 6월 12일 월요일 | A comment?
0 responses to “UI 설계(User Interface Design)”

Leave a Reply

최근 많이 본 글