[소프트웨어공학] - UI 설계

UI 설계는 단순히 화면을 예쁘게 만드는 것이 아니라, 사용자와 소프트웨어가 어떻게 상호작용할지를 설계하는 과정이다. 사용자가 원하는 기능을 쉽게 찾고, 자연스럽게 사용할 수 있도록 화면 구성, 작업 흐름, 입력 방식, 피드백 등을 설계하는 것이 UI 설계의 핵심이다. 이번 정리글에서는 UI 설계가 무엇인지, 그리고 UI를 설계할 때 어떤 점을 고려해야 하는지 간단히 정리해 보려고 한다.

---

1. UI 기본 개념

UI는 User Interface의 약자로, 사용자와 소프트웨어가 서로 상호작용하는 접점을 의미한다. 사용자는 UI를 통해 시스템에 명령을 입력하고, 시스템은 UI를 통해 처리 결과나 상태를 사용자에게 보여준다.

 

따라서 UI 설계에는 단순한 화면 배치뿐만 아니라 사용자와의 상호작용 요소, 작업 흐름 사용 용이성 등이 포함된다. 좋은 UI는 사용자가 별도의 설명을 많이 보지 않아도 기능을 쉽게 이해하고 사용할 수 있도록 도와준다. 또한 사용자가 제품을 편리하게 느끼도록 만들어 제품의 차별화 요소가 되기도 한다.

 

UI는 여러 학문 분야와도 관련이 있다. 사용자가 화면을 어떻게 인식하고 행동하는지 이해해야 하므로 심리학, 인간공학, 사회학 등의 지식이 함께 활용된다. 대표적으로 인간과 컴퓨터의 상호작용을 다루는 HCI, 사용자의 행동과 반응을 설계하는 인터랙션 디자인, 사용자가 제품을 사용하면서 느끼는 전체 경험을 다루는 UX 등이 UI 설계와 밀접하게 관련되어 있다.

 

사용성

사용성은 시스템이 얼마나 사용하기 편한가를 나타내는 척도이다. 사용성이 높은 시스템은 사용자가 기능을 쉽게 배우고 효율적으로 사용할 수 있으며, 실수를 적게 하면서도 만족스럽게 사용할 수 있다.

 

또한 사용성은 인간과 컴퓨터의 상호작용을 개선하기 위한 중요한 기준이 된다. 따라서 UI를 설계할 때는 단순히 기능을 제공하는 것에 그치지 않 사용자가 얼마나 쉽게 이해하고 편리하게 사용할 수 있는지를 함께 고려해야 한다.

 

사용성에 영향을 주는 주요 요소는 다음과 같다.

• 학습용이성(Learnability): 처음 쓰는 사람이 쉽게 배울 수 있는가
• 효율성(Efficiency): 숙련자가 빠르게 사용할 수 있는가
• 기억용이성(Memorability): 오랜만에 써도 다시 쉽게 사용할 수 있는가
• 낮은 오류율: 사용자가 실수할 가능성이 낮은가
• 만족감: 사용자가 편하게 사용할 수 있는가

멘탈 모델

멘탈 모델은 사용자가 어떤 시스템이나 사물이 어떻게 동작할 것이라고 머릿속으로 이해하는 방식을 의미한다. 즉, 현실 세계의 사물이나 과정에 대한 경험을 바탕으로 시스템의 동작 방식을 예측하고 이해하는 것이다.

 

예를 들어 GUI에서 "바탕화면", "폴더", "휴지통" 같은 개념은 실제 사무실 책상이나 파일 정리 방식을 떠올리게 한다. 사용자는 현실 세계에서 익숙한 개념을 바탕으로 컴퓨터 화면의 기능을 자연스럽게 이해할 수 있다.

 

피드백

피드백은 사용자가 명령을 내렸을 때, 시스템이 그 명령에 대해 어떤 반응을 보여주는 것을 의미한다. 즉, 사용자의 입력이나 조작에 대해 시스템이 현재 상태나 처리 결과를 알려주는 것이다.

 

사용자는 자신이 입력한 명령이 제대로 전달되었는지, 현재 작업이 진행 중인지, 또는 오류가 발생했는지 알고 싶어 한다. 이때 시스템이 적절한 메시지나 화면 변화를 보여주면 사용자는 상황을 쉽게 이해할 수 있다.

 

예를 들어 로그인 버튼을 눌렀을 때 나타나는 다음과 같은 반응이 피드백에 해당한다.

• 로딩 표시
• 성공 메시지
• 로그인 실패 또는 오류 메시지
• 진행률 표시

특히 1 ~ 10초 정도 걸리는 작업은 사용자가 기다릴 수 있도록 로딩 표시나 진행 상황을 보여주는 것이 좋다. 아무런 반응이 없으면 사용자는 시스템이 멈췄다고 생각하거나 같은 버튼을 반복해서 누를 수 있기 때문이다.

제약

제약은 사용자가 시스템을 사용할 때 불필요하게 고민하거나 잘못된 선택을 하지 않도록 선택 가능한 행동을 제한하는 것을 의미한다. 일반적인 사용자는 소프트웨어를 사용하기 위해 뉴얼을 자세히 읽으려 하지 않으며, 너무 많은 선택지가 주어지면 오히려 사용에 어려움을 느낄 수 있다.

 

따라서 UI 설계에서는 사용자가 현재 상황에서 할 수 있는 행동과 할 수 없는 행동을 명확하게 구분해 주어야 한다. 예를 들어 입력 형식이 정해진 경우에는 자유롭게 입력하게 하기보다 드롭다운 리스트나 체크박스를 제공하면 오류를 줄일 수 있다. 또한 사용할 수 없는 버튼은 비활성화하여 사용자가 잘못된 조작을 하지 않도록 도와줄 수 있다.

 

---

2. UI 설계 원리

UI에 대한 기본 개념을 정리했으니 UI를 이제 어떻게 설계하는지 정리해보려고 한다. UI의 설계의 주요 원리는 다음과 같다.

• 단순하고 자연스럽게 만들기
• 안전한 사용과 오류 회복이 쉽게 만들기
• 직접 조작하고 바로 피드백 받을 수 있게 하기
• 일관성 유지하기
• 즉각적 만족 제공하기
• 단축 명령 제공하기
• 인식하기 쉽게 만들기
• 공간 기억 활용 활용하기
• 접근성 좋게 만들기
• 도움말과 문서는 최후의 수단으로 두기

이러한 UI 설계 과정을 그림으로 나타내면 다음과 같다.

그림을 보면 UI 설계 과정은 크게 사용자 분석, UI 테스크 분석, UI 설계와 구현, 사용성 테스트의 순서로 진행된다.

1. 사용자 분석
   • 어떤 사용자가 UI를 사용할 것인지 분석한다. 사용자의 목표, 사용자 경험, 숙련도 등을 파악하여 UI 설계의 기준을 정한다.
2. UI 테스크 분석
   • 사용자가 소프트웨어을 통해 어떤 작업을 수행하는지 분석한다. 유스케이스별로 사용자의 직업 흐름을 파악하고, 각 작업을 수행하기 위해 필요한 화면 흐름과 입력-출력 정보를 정리한다.
3. UI 설계와 구현
   • 앞에서 분석한 사용자와 테스크를 바탕으로 실제 UI 화면을 설계하고 구현한다. 이 단계에서는 화면 구성, 버튼, 메뉴, 입력 방식, 피드백 방식 등을 구체화한다.
4. 사용성 테스트
   • 구현된 UI를 실제 사용자 또는 대표 사용자가 사용해 보도록 하고, 사용하기 쉬운지 평가한다. 테스트 과정에서 문제점이 발견되면 다시 사용자 분석이나 테스크 분석 단계로 돌아가 UI를 개선한다.

2.1. 사용자 분석

사용자 분석은 어떤 사용자가 UI를 사용할 것인지 파악하는 단계이다. 사용자가 청소년인지, 숙련된 사용자인지, 초보자인지와 같이 사용자의 유형을 분석한다.

 

이 단계에서는 사용자의 목표가 무엇인지, 사용 스킬과 경험은 어느 정도인지 파악하는 것이 중요하다. 사용자에 따라 필요한 기능, 화면 구성, 설명 수준이 달라질 수 있기 때문에 사용자 분석은 UI 설계의 출발점이라고 할 수 있다.

2.2. 테스크 분석

사용자 분석을 마쳤으면, 다음으로는 테스크 분석을 해야 한다. 테스크 분석은 소프트웨어가 수행해야 할 작업과 사용자가 시스템을 통해 수행할 작업을 분석하는 단계이다.

 

이때 유스케이스별로 UI 흐름을 파악하는 것이 중요하다. 사용자가 어떤 순서로 기능을 사용하고, 각 단계에서 어떤 정보를 입력하거나 확인해야 하는지 분석해야 한다. 하위 작업 간의 정보 흐름에 따라 소프트웨어의 GUI 내용 흐름이 결정되기 때문에 테스크 분석은 UI 설계에서 중요한 단계이다.

2.3. UI 설계와 구현

UI 설꼐와 구현은 GUI를 실제로 디자인하고 코드로 구현하는 단계이다. 앞에서 분석한 사용자와 테스크를 바탕으로 화면 구성, 메뉴, 버튼, 입력 방식, 피드백 방식 등을 구체화한다.

 

이 단계에서 사용되는 개념에는 마법사, 사이트 이동경로, 메타포 등이 있다.

• 마법사: 미리 정해진 순서에 따라 사용자를 안내하는 방식
• 사이트 이동경로: 사용자가 현재 어느 위치에 있는지 알 수 있도록 경로를 보여주는 방식
• 메타포: 사용자가 이미 알고 있는 개념을 활용하여 시스템을 쉽게 이해하도록 돕는 개념적 인식 모델

2.4. 사용성 테스트

UI 구현을 마쳤으면 사용성 테스트를 진행해야 한다. 사용성 테스트는 사용자가 UI를 실제로 사용해 보면서 학습하기 쉬운지, 오류가 적은지, 예측 가능한 방식으로 동작하는지 등을 평가하는 단계이다.

 

먼저 테스트 목적을 설정하고 대표 사용자를 선정한다. 테스트 목적에는 학습성, 오류율, 예측성 등이 포함될 수 있으며, 대표 사용자는 5명 이상으로 설정하는 것이 좋다.

 

이후 테스트 대상과 설문을 준비한다. 사전 설문지, 사후 설문지, 작업 시나리오를 정의하고 참가자에게 실제 작업을 수행하도록 요청한다. 테스트 과정에서는 사용자가 어떤 부분에서 어려움을 겪는지, 오류가 얼마나 발생하는지, 작업을 수행하는 데 시간이 얼마나 걸리는지 등을 데이터로 기록한다.

 

정리하면, 사용성 테스트는 구현된 UI가 실제 사용자에게 적합한지 확인하고 문제점을 발견하여 다시 개선하기 위한 과정이라고 할 수 있다.

---

3. UI 요소

UI 요소는 사용자가 화면에서 직접 보고 조작하는 구성 요소를 의미한다. 사용자는 이러한 UI 요소를 통해 시스템에 명령을 입력하거나 필요한 정보를 확인하고, 원하는 기능을 선택할 수 있다.

그림에 나타난 UI 요소들과 추가적인 요소들을 정리하면 다음과 같다.

• 메뉴바: 표준 명령의 배열해 놓은 요소
• 다이얼로그 박스: 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 할 때 사용하는 창
• 명령 버튼: 사용자의 명령을 지시 받으려 할 때 사용하는 버튼
• 리스트 박스: 사용자가 선택할 수 있는 후보 리스트를 표시하는 요소
• 드롭다운 리스트 박스: 현지의 선택을 보여주고 사용자가 화살표를 클릭하면 가능한 선택 후보들을 펼쳐서 보여주는 요소
• 라디오 버튼: 여러 가지 제시된 것 중 하나만 선택할 때 사용하는 요소
• 체크 박스: 그룹 중 하나 이상의 후보를 선택할 때 사용하는 요소
• 텍스트 박스: 메시지를 보여주거나 사용자가 데이터를 입력할 수 있도록 하는 요소
• 윈도우: 응용 프로그램 내용이 표시되는 영역
• 탭: 여러 화면이나 문서를 구부하여 전환할 수 있도록 하는 요소
• 아이콘: 응용 프로그램이나 기능을 나타내는 작은 그림
• 커서: 사용자가 현재 가리키고 있는 위치를 나타내는 포인터
• 토글 버튼: 버튼을 클릭하면 상태를 'on', 'off'로 전환되는 요소

---

4. 화면 및 출력 설계

실제 화면과 출력물을 어떻게 설계할지 생각해야 한다. 화면 설계는 사용자가 데이터를 쉽게 입력하고 기능을 편리하게 사용할 수 있도록 구성하는 것이며, 출력물 설계는 처리 결과를 사용자가 쉽게 읽고 이해할 수 있도록 표현하는 것이다.

4.1. 화면 설계

화면 설계는 사용자가 시스템에 필요한 자료를 입력하거나 기능을 수행할 수 있도록 화면을 구성하는 과정이다. 좋은 입력 화면은 사용자가 쉽게 배울 수 있고, 실수를 적게 하면서 사용할 수 있어야 한다.

 

입력 화면을 설계할 때는 항목 입력이 끝났음을 알리기 위한 키나 버튼을 명확하게 정해야 한다. 예를 들어 입력을 완료했을 때 사용할 수 있는 확인 버튼, 저장 버튼, 다음 버튼 등을 제공하면 사용자가 다음 행동을 쉽게 이해할 수 있다.

 

또한 사용자가 직접 값을 입력하게 하면 오타나 형식 오류가 발생할 수 있다. 따라서 가능한 경우 콤보 박스나 드롭다운 리스트를 사용하여 정해진 항목 중에서 선택하게 하면 입력 오류를 줄일 수 있다.

 

정리하면 화면 설계는 사용자가 필요한 정보를 쉽고 정확하게 입력할 수 있도록 입력 방식과 화면 구성을 설계하는 과정이라고 할 수 있다.

4.2. 출력물 설계

출력물 설계는 시스템이 처리한 결과를 사용자에게 어떤 형태로 보여줄지 설계하는 과정이다. 출력물에는 화면에 표시되는 결과, 인쇄되는 리포트, 파일 형태의 결과물 등 다양한 종류가 있을 수 있다.

 

특히 리포트와 같은 출력물은 보기 좋게 구성되어야 할 뿐만 아니라 무엇보다 읽기 쉬워야 한다. 아무리 많은 정보를 제공하더라도 사용자가 내용을 쉽게 파악하지 못하면 좋은 출력묵이라고 보기 어렵다.

 

출력물을 설계할 때는 머리말과 꼬리말을 포함하여 문서의 구조를 명확하게 해야 한다. 또한 항목들은 논리적인 순서로 배치하고, 관련 있는 내용끼리 그룹화하여 보여주는 것이 좋다. 이렇게 하면 사용자는 필요한 정보를 더 빠르게 찾을 수 있다.

 

정리하면 출력물 설계는 사용자가 시스템의 처리 결과를 명확하고 쉽게 이해할 수 있도록 결과의 형식, 순서, 배치 방식을 설계하는 과정이라고 할 수 있다.