2020 정보처리기사 (6장. 화면 설계)

사용자 인터페이스

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

- 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미

---

사용자 인터페이스의 구분

- CLI: 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스

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

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

---

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

- 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.

- 유효성: 사용자의 목적을 정확하고 완벽하게 달성해야 한다.

- 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.

- 유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화 한다.

---

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

• 사용자 중심
• 일관성
• 단순성
• 결과 예측 가능
• 가시성
• 표준화
• 접근성
• 명확성
• 오류 발생 해결

---

UI 설계 도구

• 와이어프레임: 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계. 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다.
• 목업: 디자인, 사용 방법, 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형. 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되진 않는다.
• 스토리보드: 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서. 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI 화면, 우측에는 디스크립션(Description)을 기입한다.
• 프로토타입: 와이어프레임이나 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
• 유스케이스: 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.

---

UI 표준 및 지침

웹의 3요소

• 웹 표준: 웹에서 사용되는 규칙 또는 기술을 의미하는 것
• 웹 접근성: 누구나, 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것
• 웹 호환성: 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것

---

UI 스타일 가이드 작성 순서

구동 환경 정의 -> 레이아웃 정의 -> 네비게이션 정의 -> 기능 정의 -> 구성 요소 정의

---

UI 요구사항 확인

UI 요구사항 확인

- 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계, 다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야함

목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성

---

목표 정의

- 인터뷰를 통해 사업적, 기술적인 요구사항을 명확히 이해한다.

- 인터뷰 진행 시 유의사항

• 인터뷰는 가능하면 개별적으로 진행한다.
• 가능한 많은 사람을 인터뷰하여 다양한 의견을 수렴하되, 다수의 의견으로 인해 개인의 중요한 의견을 놓치지 않도록 주의한다.
• 인터뷰는 한 시간을 넘지 않도록 한다.
• 인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 한다.

---

UI 요구사항 작성

- UI 요구사항을 작성할 때는 여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성애야 한다.

- UI 요구사항은 반드시 실사용자 중심으로 작성되어야 한다.

UI 요구사항 작성 순서

요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성

---

요구사항 요소 확인 (데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항)

 

정황 시나리오 작성

- 정황 시나리오는 사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것

- 요구사항 정의에 사용되는 초기 시나리오이다.

- 개발하는 서비스의 모습을 상상하는 첫 번째 단계로 사용자 관점에서 시나리오를 작성해야 한다.

- 사용자가 주로 사용하는 기능 위주로 작성해야 하며, 함께 발생되는 기능들은 하나의 시나리오에 통합한다.

 

요구사항 작성

- 정황 시나리오를 토대로 작성한다.

---

UI 프로토타입 제작 및 검토

UI 프로토타입: 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능하다.

---

UI 프로토타입의 장단점

- 장점

• 사용자를 설득하고 이해시키기 쉽다.
• 요구사항과 기능의 불일치 등으로 인한 혼선을 예방할 수 있어 개발 시간을 줄일 수 있다.
• 사전에 오류를 발견할 수 있다.

- 단점

• 프로토타입에 사용자의 모든 요구사항을 반영하기 위한 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모할 수 있다.
• 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.

---

프로토타이핑의 종류

페이퍼 프로토타입	- 아날로드적인 방법으로, 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법 - 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용한다. 장점 - 비용이 저렴함 - 회의 중 대화하면서 생성이 가능함 - 즉시 변경이 가능함 - 고객이 과다한 기대를 하지않음 단점 - 테스트하기에 부적당함 - 상호 관계가 많은 경우 나타내기 복잡하다. - 여러 사람들에게 나눠주거나 공유하기 어렵다.
디지털 프로토타입	- 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법 - 재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용한다. 장점 - 최종 제품과 비슷하게 테스트 할 수 있다. - 수정하기 쉽다. - 재사용이 가능함 단점 - 프로토타입을 작성할 프로그램의 사용법을 알아야 한다.

---

대형 프로젝트의 프로토타입 개발 인원

- 리더 1
- 솔루션 담당자 2인 이상
- 인프라 담당자 1인
- 개발 환경 리더 겸 공통 모듈 개발자 1인
- 프로토타입 개발자 3~5인

프로토타입 이슈

프로토타입을 통해서 발생하는 이슈는 대부분 소프트웨어 아키텍처의 요소를 검증하는 과정에서 발생.
이슈는 많이 발생할수록 좋은 것으로 프로토타입 리더는 발생한 이슈를 종류별로 취합하고 해결 방법을 제시해야 하며 이것을 모두 정리해서 보고해야함.

---

UI 흐름 설계

- 업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계

 

UI 흐름 설계 순서

기능 작성 -> 입력 요소 확인 -> 유스케이스 설계 -> 기능 및 양식 확인

 

기능 작성

- 화면에 표현할 기능을 작성하는 단계

- 구축할 시스템에서 필요한 기능적/비기능적 요구사항을 정리하고 그에 대한 설명을 정리

 

입력 요소 확인

-화면에 표현되어야 할 기능을 확인한 후 화면에 입력할 요소를 확인하는 단계

- 기능을 표현하기 위해 필요한 화면이나 각 화면 간 이동 및 흐름 등도 확인한다.

 

유스케이스 설계

- UI 요구사항을 기반으로 UI 유스케이스를 설계하는 단계

- 유스케이스는 화면에 표현할 입력 요소들의 형태나 입력 방법, 배치 등을 고려해서 설계한다.

 

기능 및 양식 확인

- 분석한 기능을 토대로 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 등을 확인하고 규칙을 정의한다.

---

UI 상세 설계

- 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계

 

UI 상세 설계 순서

요구사항 확인 -> UI 설계서 표지 및 개정 이력 작성 -> UI 구조 설계 -> 메뉴 구조 설계 -> 화면 설계

---

* 사이트 맵

- 화면의 정보를 한눈에 파악하기 위한 시각적인 콘텐츠 모형을 말한다.

- 일반적으로 테이블 형태로 되어 있고, 위에서부터 아래로 내려가며 정보를 찾을 수 있는 계층형으로 되어 있다.