정보처리기사 1과목 소프트웨어 설계 2장 화면 설계 요점 정리

2장 화면 설계

Section 10 사용자 인터페이스

1. 사용자 인터페이스의 개요

- 사용자 인터페이스(UI)는 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는장치나 소프트웨어를 의미한다.

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

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야

• 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야

• 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

 

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

- 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로, 소프트웨어 영역 중 변경이 가장 많이 발생한다.

- 사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여준다.

- 최소한의 노력으로 원하는 결과를 얻을 수 있게 한다.

- 수행 결과의 오류를 줄인다.

- 사용자의 막연한 작업 기능에 대해 구체적인 방법을 제시해 준다.

- 정보 제공자와 공급자 간의 매개 역할을 수행한다.

- 사용자 인터페이스를 설계하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.

 

※ 소프트웨어 아키텍처

- 건물을 짓기 위해 설계도를 작성하듯 소프트웨어 아키텍처를 개발할 소프트웨어의 기본 틀을 만드는 것으로, 복잡한 소프트웨어 개발 과정을 체계적으로 접근하기 위한 밑그림이다.

- 개발하고자 하는 소프트웨어의 특성과 본질을 파악하고 다양한 시각에서 모형화 한다.

- 전체 시스템의 전반적인 구조를 설계한다.

- 소프트웨어 시스템의 구축 및 개선을 용이하게 한다.

- 작업자들 간의 상호 이해, 타협 및 의사소통을 원활하게 하기 위해 사용한다.

 

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

• CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스

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

• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하느 ㄴ인터페이스

 

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

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

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

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

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

 

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

• 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며, 실사용자에 댛나 이해가 바탕이 되어야 한다.

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

• 단순성 : 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 한다.

• 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야 한다.

• 가시성 : 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 한다.

• 표준화 : 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 수비게 사용할 수 있도록 설계해야 한다.

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

• 명확성 : 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 한다.

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

 

Section12 UI 설계 도구

1. UI 설계 도구

- UI 설계 도구는 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로, 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다.

 

2. 와이어프레임(Wireframe)

- 기획단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계이다.

- 와이어프레임을 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다.

- 개발자다 디자이너 등이 레이아웃을 협의하거나 ㅎ녀재 진행 상태 등을 공유하기 위해 와이어프레임을 사용한다.

- 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

3. 목업(Mockup)

- 목업은 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다.

- 시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다.

- 목업 툴 : 파워 목업, 발사믹 목업

 

4. 스토리보드(Story Board)

- 스토리보드는 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다.

- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있다.

- 스토리보드는 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI 화면 우측에는 디스크립션(Description)을 기입한다.

- 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로, 명확하고 세부적으로 작성해야 한다.

- 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

 

5. 프로토타입(Prototype)

- 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적 형태의 모형이다.

- 프로토타입은 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플이다.

- 작성 방법에 따라 페이퍼와 디지털로 나뉜다.

- 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

6. 유스케이스(Use Case)

- 유스케이스는 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.

- 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 잇다.

- 유스케이스는 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로, 일반적으로 다이어그램 형식으로 묘사된다.

- 유스케이스 다이어그램이 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성한다.

 

Section15 UI 프로토타입 제작 및 검토

1. UI 프로토타입의 개요

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

- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로, 최대한 간단하게 만들어야 한다.

- 프로토타입은 일부 핵심적인 기능만을 제공하지만 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함되어야 한다.

- 사용자의 요구사항이 모두 반영될 때까지 프로토타입을 계속하여 개선하고 보완해야 한다.

- 프로토타이핑 및 테스트를 거치지 않고는 실제 사용자와 제품 간의 상호 작용 방식을 예측하기 어려우므로 실제 사용자를 대상으로 테스트하는 것이 좋다.

 

2. UI 프로토타입의 장•단점

장점

- 사용자를 설득하고 이해시키기 쉽다.

- 요구사항과 기능의 불일치 등으로 인한 혼선을 예방할 수 있어 개발 시간을 줄일 수 있다.

- 사전에 오류를 발견할 수 있다.

 

단점

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

- 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.

 

3. 프로토타이핑의 종류

페이퍼 프로토타입

- 아날로그적인 방법으로, 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법이다.

- 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용한다.

장점

- 비용이 저렴하다.

- 회의 중 대화하면서 생성이 가능하다.

- 즉시 변경이 가능하다.

- 고객이 과다한 기대를 하지 않는다.

단점

- 테스트하기에 부적당하다.

- 상호 관계가 많은 경우 나타내기 복잡하다.

- 여러 사람들에게 나눠주거나 공유하기 어렵다.

 

디지털 프로토타입

- 파워포인트, 아크로뱃, 비지오, 옴니그래플 등과 같은 프로그램을 사용하여 작성하는 방법이다.

- 재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용한다.

장점

- 최종 제품과 비슷하게 테스트할 수 있다.

- 수정하기 쉽다.

- 재사용이 가능하다.

단점

- 프로토타입을 작성할 프로그램의 사용법을 알아야 한다.

 

4. UI 프로토타입 계획 및 작성 시 고려사항

- 프로토타입은 일반적으로 프로토타입의 개발 계획을 수립하는 과정과 프로토타입을 개발한 후 결과를 보고하는 과정으로 진행된다.

계획 시 고려 사항

- 프로토타입의 개발 목적을 확인한다.

- 소프트웨어, 하드웨어 등 프로토타입 개발에 필요한 환경을 마련한다.

- 프로토타이핑 일정을 일반적으로 아키텍처가 확정된 이후 프로젝트의 실제 분석 작업이 완료되기 이전에 진행해야 한다.

- 아키텍처의 핵심이 되는 UI 요소를 프로토타입의 범위로 잡는다.

- 리더, 솔루션 담당자, 인프라 담당자, 개발 환경 리더. 공통 모듈 개발자, 프로토타입 개발자 등 프로토타입의 개발 인원을 확인한다.

- 주어진 비즈니스 요구사항을 모두 만족하는지 프로토타입 아키텍처를 검증한다.

- 프로토타입을 통해서 발생하는 이슈를 모두 취합하고 해결 방법을 제시한다.

- 프로토타이핑을 진행하면서 분석, 설계, 개발, 테스트 등의 표준 가이드를 확정한다.

- 프로토타이핑을 진행하면서 가장 많은 시간이 소요된 구간을 찾고 그 원인을 분석하여 해결 방법을 제시한다.

- 고객과 프로젝트 매니저, 프로젝트 리더 등에게 완성된 프로토타입을 시연한다.

 

작성 시 고려 사항

- 프로토타입의 작성 계획을 세운다.

- 프로젝트의 범위나 리스크 상황 등 주변 여건을 감안해서 프로토타입의 범위를 정한다.

- 프로토타입을 통해서 얻고자 하는 목표를 확인한다.

- 프로토타입의 개발 목표를 달성하기 위해 필요한 최소한의 기간과 비용을 확인한다.

- 완성된 프로토타입이 실제 개발에 참조될 수 있는지 확인한다.

- 프로토타입으로 검증할 범위가 너무 넓거나 기간이 길면 목표가 커져서 문제가 될 수 있으니 주의한다.

 

5. UI 프로토타입 제작 단계

1단계 : 사용자의 요구사항을 분석하는 단계로, 사용자 관점에서 기본적인 요구사항이 확정될 때까지 수행한다.

2단계 : 요구사항을 충족하는 프로토타입을 종이에 손으로 직접 그리거나 편집 도구 등을 이용하여 작성한다.

프로토타입은 개발할 시스템의 핵심적인 기능을 중심으로 개발한다.

3단계 : 작성된 프로토타입이 요구사항을 잘 수행하고 있는지 사용자가 직접 확인하는 단께이다.

프로토타입에 대해 다양한 추가 및 수정 의견을 제안할 수 있다.

4단계 : 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지는 단계이다.

- 개발자는 사용자가 요청한 제안 사항을 수용하여 보완 작업을 한다.