[소프트웨어] UI의 특징, UI 설계 도구, UI 요구사항 확인

 

---

사용자 인터페이스(User Interface)

---

1. 사용자 인터페이스(UI)의 의미

• 사용자와 시스템간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미
• 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로
  • 소프트웨어 영역 중 변경이 가장 많이 발생하는 부분
• 사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여줌
• 최소한의 노력으로 원하는 결과를 얻을 수 있게 함
• 수행 결과의 오류를 줄임
• 사용자의 막연한 작업 기능에 대해 구체적인 방법을 제시

 

 

 

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

CLI(Command Line Interface)

• 명령과 줄이 텍스트 형태로 이뤄지는 인터페이스
• CMD창으로 명령을 함

GUI(Graphic User Interface)

• 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스

NUI(Natural User Interface)

• 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

 

 

 

3. 사용자 인터페이스 기본 원칙 ★

직관성

• 누구나 직관적으로 쉽게 이해하고 사용할 수 있어야 함

유효성

• 사용자의 목적을 정확하고 완벽하게 달성해야 함
• 예) 쿠팡 앱 : 사용자에게 유효하도록, 제품 구매의 목적에 따라서, 쿠팡 앱은 주문과 결제시스템을 만들어야 함

학습성

• 누구나 쉽게 배우고 익힐 수 있어야 함

유연성

• 사용자의 요구사항을 최대한 유연하게 수용하고 실수를 최소화해야 함
• 요구사항을 최대한 반영

 

 

 

4. 인터페이스 설계 시에 고려 사항  ★

사용자 중심

• 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경(디자인)을 제공

일관성

• 버튼이나 조작 방법 등을 일관성 있게 제공하므로
• 사용자가 쉽게 기억하고 습득할 수 있게 설계되어야 함

단순성

• 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 함
• 앱 이름도 복잡하지 않게 지음(예 : 직방, 당근)

결과 예측 가능

• 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야함
• 예) 포인트 조회 : 포인트가 조회되도록 설계

가시성

• 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 함
• 예) 많이 찾는 기능들을 메인에 표시

표준화

• 기능 구조와 디자인을 표준화하여
• 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 함
• 예) 업데이트가 되더라도, 중요한 기능들은 두면서 나머지 내용들을 설계

접근성

• 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계해야 함

명확성

• 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 함
• 개념의 명확화

오류 발생해결

• 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 함

 

 

UI 설계 시 지침

한국형 웹 콘텐츠 접근성 지침(Korean Web Contents Accessibility Guidelines)
  ▪ 장애인 및 비장애인 모두 동등하게 접근할 수 있는 웹 콘텐츠 제작방법을 제시
  ▪ [ 목적 ] : 웹 콘텐츠 저작자, 웹 사이트 설계자 등이
                  접근성이 보장된 웹 콘텐츠를 쉽게 제작할 수 있도록 도와주는것

 

전자정부 웹 표준 준수 지침
  ▪ 정부기관의 홈페이지 구축 시(정부 주도 하의 홈페이지를 구축할 때) 반영해야 할 최소한의 규약을 정의한 것
  ▪ 모든 사람이 시스템 환경에 구애받지 않고 정부기관의 홈페이지를 이용할 수 있도록 하기 위한 것

 

 

 

 

 

---

UI 설계 도구

---

UI 설계 도구

• 사용자의 요구사항에 맞게 UI의 화면구조나 화면 배치 등을 설계할 때 사용하는 도구

 

UI 설계 도구의 종류

1) 와이어프레임
2) 목업
3) 스토리보드
4) 프로토타입
5) 유스케이스등

 

 

1.  와이어프레임(wireframe)

• 기획 단계 초기에 제작하는 것으로
• 페이지에 대한 개략적인 레이아웃이나 ui요소에 대한 뼈대를 설계하는 단계
• 와이어프레임 제작 시, 각 페이지의 영역구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

 

 

2.  목업(mockup)

• 디자인, 사용방법, 평가 등을 위해
• 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적 형태의 모형으로 실제로 구현되지 않음

 

 

3.  스토리보드(story board)

• 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
• UI의 흐름을 파악
• 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로
• 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어가 있음

 

 

4.  프로토타입(prototype)

• 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적 형태의 모형
• 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플

 

 

5.  유스 케이스(use case)   ★

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

 

 

 

 

 

---

UI  요구사항 확인

---

1. UI 요구사항 확인

• 새로 개발할 시스템에 적용할 UI관련 요구사항을 조사해서 작성하는 단계

 

2.  목표 정의 → 활동 사항 정의 →  UI 요구 사항 정의

목표 정의

• 사용자들을 대상으로 인터뷰를 진행한 후
• 사용자들의 의견이 수렴된 요구사항을 정의

활동 사항 정의

• 조사한 요구사항을 토대로, 앞으로 해야 할 활동 사항을 정리

UI 요구 사항 작성

• 다양한 채널을 통하여 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성

1. 요구사항 요소 확인 : 데이터 요구, 기능 요구, 제품/ 서비스 품질 요구사항, 제약사항(날짜 등) 등을 검토
2. 정황 시나리오 작성 : 사용자 요구사항을 도출하기 위해 맨 처음 개발하는 서비스의 모습을 상상하는 사용자 관점에서 작성
3. 요구사항 작성 : 정황 시나리오를 토대로 작성