2장 - 화면설계 | 섹션11. 사용자 인터페이스, 섹션12. UI 설계 도구

2024년도 시나공 필기 책 내용 정리

---

섹션11. 사용자 인터페이스

 

1. 사용자 인터페이스 (UI, User Interface)의 개요

 

• 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미
• 초기의 사용자 인터페이스는 단순히 사용자와 컴퓨터 간의 상호작용에만 국한되었지만 점차 사용자가 수행할 작업을 구체화시키는 기능 위주로 변경되었고 최근에는 정보 내용을 전달하기 위한 표현 방법으로 변경되었음

사용자 인터페이스의 세가지 분야

 

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야
• 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
• 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

---

2. 사용자 인터페이스(UI)의 특징

 

• 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로 소프트웨어 영역 중 변경이 가장 많이 발생
• 사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여줌
• 최소한의 노력으로 원하는 결과를 얻을 수 있게 함
• 사용자 중심으로 설계되어 사용자 중신의 상호작용이 되도록 함
• 수행 결과의 오류를 줄임
• 사용자의 막연한 작업 기능에 대해 구체적인 방법을 제시해 줌
• 정보 제공자와 정보 이용자 간의 매개 역할을 수행
• 사용자 인터페이스를 설계하기 위해서는 소프트웨어 아키택처를 반드시 숙지해야함

---

3. 사용자 인터페이스의 구분

 

• CLI(Comman Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
• GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
• VUI(Voice User Interface) : 사람의 음성으로 기기를 조작하는 인터페이스
• OUI(Organic User Interface) 모든 사물과 사용자 간의 상호작용을 위한 인터페이스로 소프트웨어가 아닌 하드웨어 분야에서 사물인터넷(Internet of Things), 가상 현실(Virtual Reality), 증강 현실(Augmented Reality), 혼합 현실(Mixed Reality)등과 함께 대두되고 있음

---

4. 사용자 인터페이스의 기본 원칙

 

• 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함
• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
• 학습성 : 누구나 수비게 배우고 익힐 수 있어야 함
• 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화 해야 함

---

5. 사용자 인터페이스의 설계 지침

 

• 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며 실사용자에 대한 이해가 바탕이 되어야 함
• 사용성 : 사용자가 소프트웨어를 얼마나 빠르고 쉽게 이해할 수 있는지, 얼마나 편리하고 효율적으로 사용할 수 있는지를 말하는 것으로 사용자 인터페이스 설계시 가장 우선적으로 고려
• 일관성 : 버튼이나 조작 방법 등을 일관성 있게 제공하므로 사용자가 쉽게 기억하고 습득할 수 있게 설계해야 함
• 단순성 : 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 함
• 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야함
• 가시성 : 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 함
• 심미성 : 디자인적 완성도가 높게 글꼴이나 색상을 적용하고 그래픽 요소를 배치하여 가독성을 높일 수 있도록 설계해야 함
• 표준화 : 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 함
• 접근성 : 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계해야 함
• 명확성 : 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 함
• 오류 발생 해결 : 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 함

---

6. 사용자 인터페이스 개발 시스템의 기능

• 사용자의 입력을 검증할 수 있어야 함
• 에러 처리와 그와 관련된 에러 메세지를 표시할 수 있어야 함
• 도움과 프롬프트를 제공해야함

---

7. 모바일 제스의 종류

• Tap(누르기) : 화면을 가볍게 한번 터치하는 동작
• Double Tap(두 번 누르기) : 화면을 빠르게 두번 터치하는 동작
• Drag(누른 채 움직임) : 화면의 특정 위치에 손가락을 댄 상태에서 정해진 방향으로 움직인 후 손가락을 떼는 동작
• Pan(누른 채 계속 움직임) : 화면에 손가락을 댄 후 손가락을 떼지 않고 계속적으로 움직이는 동작, 움직이는 방향이나 시간에 제한이 없고 손가락을 뗄 때까지의 동작을 패닝이라고 함
• Press(오래 누르기) :  화면의 특정 위치를 손가락으로 꾹 누르는 동작
• Flick(빠르게 스크롤) : 화면에 손가락을 터치하면서 수평 또는 수직으로 빠르게 드래그하는 동작
• Pinch(두 손가락으로 넓히기/좁히기) : 두 손가락으로 화면을 터치한 후 두 손가락을 서로 다른 방향으로 움직이는 동작

---

섹션12. UI 설계 도구

 

1. UI 설계 도구 

 

• 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있음
• UI 설계 도구로 작성된 결과물은 사용자의 요구사항이 실제 구현되었을 때 화면은 어떻게 구성되었는지, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기 위한 용도로 사용됨

---

2. 와이어프레임(Wireframe)

 

• 기획 단계의 초기에 제작하는 것으로 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계
• 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계
• 개발자나 디자이너등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기위해 사용
• 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

---

3. 목업(Mockup)

 

• 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제화면과 유사하게 만든 정적인 형태의 모형
• 시작적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않음
• 툴 : 파워 목업, 발사믹 목업 등

---

4.스토리보드(Story Beard)

 

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
• 디자이너와 개발자가 최종적으로 참고하는 작업지침서로 정책, 프로세스, 콘텐츠구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어있음
• 상단이나 우측에는 제목, 작성자 등을 입력하고 좌측에는 UI화면, 우측에는 디스크립션(Description)을 기입
• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로 명확하고 세부적으로 작성
• 툴 : 파워포인트, 키노트, 스케치, Axure 등

---

5. 프로토타입(Prototype)

 

• 와이어프레임이나 스토리보드 등에 인터렉션(UI를 통해 시스템을 사용하는 일련의 상호작용)을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
• 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플
• 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉨
• 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

---

6. 유스케이스(Use case)

 

• 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
• 사용자의 요구사항을 빠르게 파악함으로써 프로젝트가 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 있음
• 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로 일반적으로 다이어그램 형식으로 묘사됨
• 유스케이스 다이어그램이 완성되면 각각의 유스케이스에 대해 유스케이스 명세서를 작성