[정보처리기사 필기] 화면 설계

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

---

1. 개요

사용자 인터페이스(UI; User Interface) 는 사용자와 시스템 간의 상호작용이 원활하게 이루어지도록 도와주는 장치나 소프트웨어를 말함

 

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

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

2. UI 의 특징

• 사용자 만족도에 가장 큰 영향을 미치는 요소로, 변경이 가장 많이 발생
• 최소한의 노력으로 원하는 결과
• 사용자 중심의 상호작용
• 정보 제공자와 공급자 간의 매개 역할을 수행
• 사용자의 막연한 작업 기능에 대해 구체적인 방법 제시
• UI 설계를 위해서는 소프트웨어 아키텍처를 반드시 숙지해야함 

---

소프트웨어 아키텍처

• 개발할 소프트웨어의 기본 틀을 만드는것
• 전체 시스템의 전반적인 구조를 설계한다
• 소프트웨어 시스템의 구축 및 개선을 용이하도록 함
• 작업자들 간 상호 이해, 타협 및 의사소통 원활하게 함

---

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

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

GUI(Graphical User Interface): 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행가능한 그래픽 환경의 인터페이스

NUI(Natural User Interface): 말이나 행동으로 조작가능한 인터페이스

 

좌측부터 CLI[1], GUI[1], NUI[2]

4. UI의 기본원칙

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

5. UI의 설계지침

사용자 인터페이스를 설계할 때 고려할 사항은 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 등이다.

 

6. UI 개발 시스템의 기능

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

 

7. UI 설계 도구

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

 

와이어 프레임(Wireframe)

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

• 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면단위로 구성
• 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 와이어프레임을 사용한다

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

 

목업(Mockup)

와이어프레임 보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

실제로 구현되지는 않음

 

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

 

스토리보드(Story Board)

와이어프레임에 콘텐츠에 대한 설명과 페이지 간 이동 흐름 등을 추가한 문서

• 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어있다.
• 상단이나 우측은 제목, 작성자등 입력. 좌측에는 UI 화면, 우측에는 디스크립션(Description)
• 디스크립션은 명확하고 세부적으로 작성해야한다

 

프로토타입(Prototype)

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

• 작성 방법에따라 페이퍼 프로토타입과 디지털 프로토 타입으로 나뉜다
• 최대한 간단하게 만들어야 하고 일부 핵심적인 기능만 제공한다. 최종 제품의 작동 방식을 이해 시키는데 필요한 기능은 반드시 포함
• 실 사용자를 대상으로 테스트 하는것이 좋다
• 프로토타입 툴: HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

유스케이스(Use Case)

사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

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

 

8. UI 상세 설계

UI설계서 를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로, 반드시 시나리오 작성을 해야한다.

 

UI 시나리오 문서

• 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터렉션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 작성한것
• 시나리오 문서에는 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사 되어있다
• UI 설계자 또는 인터랙션 디자이너가 시나리오 문서를 작성하면 그래픽 디자이너가 시나리오를 바탕으로 디자인을 하고 개발자가 UI를 구현한다

---

UI설계서

 

사용자의 요구사항을 바탕으로 UI설계를 구체화 하여 작성하는 문서

• 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 위해 작성한다.
• UI 설계서 표지, UI설계서 개정이력, UI 요구사항 정의서, 시스템 구조, 사이트 맵, 프로세스 정의서, 화면 설계 순으로 구성한다

---

UI 시나리오 문서 작성 원칙

• 구체적으로 작성. 주로 계층(Tree) 구조 또는 플로차트(Flow Chart) 표기법 사용
• 인터랙션의 흐름을 정의하며, 화면 간 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다

시나리오 문서 작성을 위한 일반적인 규칙은 다음 과 같다

• 주요 키의 위치와 기능
• 공통 UI 요소: 체크 박스, 라디오 버튼, 텍스트 박스 등을 어떤 형태로 사용할지, 사용자가 조작시 반응
• 기본 스크린 레이아웃
• 기본 인터랙션 규칙: 조작 방법과 화면 전환 방법 등
• 공통 단위 태스크 흐름: 삭제, 검색, 매너모드 에 대한 반응 등
• 케이스 문서: 사운드, 조명, 이벤트 케이스 등에 대한 반응
• 소프트웨어 품질 요구 사항

UI 시나리오 문서 요건

• 완전성
• 일관성
• 이해성
• 가독성: 표준화된 템플릿 등을 사용
• 수정 용이성
• 추적 용이성

 

UI 시나리오 문서 기대 효과

• 요구사항이나 의사소통에 대한 오류 감소
• 개발 과정에서의 재작업 감소, 혼선 최소화
• 개발 비용 절감, 속도 향상, 불필요한 기능 최소화

 

 

품질 요구사항

---

1. 개요

소프트웨어에 대한 요구사항을 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체

ISO/IEC 9126

• 소프트웨어의 품질 특성과 평가를 위한 표준 지침으로 국제표준이다
• 품질에 대한 요구사항을 기술하거나개발중인 또는 개발이 완료된 소프트웨어의 품질 평가 등에 사용
• 호환성과 보완성을 강화하여 ISO/IEC 25010으로 개정

ISO/IEC 9126의 품질특성[3]

ISO/IEC 25010

소프트웨어 제품에 대한 국제 표준으로, 2011년에 ISO/IEC 9126을 개정하여 만듦

ISO/IEC 25010의 품질특성

2. 품질특성

 

기능성(Functionality)

소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부

상세 품질 요구사항	설명
적절성/적합성(Suitability)	지정된 작업과 사용자의 목적 달성을 위해 적절한 기능을 제공할 수 있는 능력
정밀성/정확성(Accuracy)	사용자가 요구하는 결과를 정확하게 산출할 수 있는 능력
상호 운용성(Interoperability)	다른 시스템들과 서로 어울려 작업할 수 있는 능력
보안성(Security)	정보에 대한 접근을 권한에 따라 허용 또는 차단
준수성(Compliance)	기능과 관련된 표준, 규정 등을 준수할 수 있는 능력

 

신뢰성(Reliability)

소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도

상세 품질 요구사항	설명
성숙성(Maturity)	결함으로 인한 고장을 피해갈 수 있는능력
고장 허용성(Fault Toleance)	결함 또는 인터페이스 결여 시에도 규정된 성능 수준을 유지할 수 있는 능력
회복성(Recoverability)	고장시 다시 회복하고 데이터를 복구할 수 있는 능력

 

사용성(Usability)

사용자와 컴퓨터간 발생하는 행위에 대해 쉽게 배우고 사용할 수 있으며, 다시 사용하고 싶은 정도

상세 품질 요구사항	설명
이해성(Understandability)	적합성, 사용방법 등을 사용자가 이해할 수 있게 하는 능력
학습성(Learnability)	소프트웨어가 애플리케이션을 학습할 수 있도록 하는 능력
운용성(Operability)	사용자가 소프트웨어를 운용하고 제어할 수 있도록 하는 능력
친밀성(Attractiveness)	다시사용하고싶게 하는 능력

 

효율성(Efficiency)

사용자가 요구하는 기능을 할당된 시간동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지

• 시간 효율성
• 자원 효율성

유지 보수성(Maintainability)

새로운 변화 또는 요구사항 발생시 소프트웨어를 개선하거나 확장할 수 있는 정도

• 분석성: 고장의 원인, 수정될 부분의 식별이 가능한가
• 변경성: 수정을 쉽게 구현할 수 있는가
• 안정성: 예상치 못한 결과를 최소화 할 수 있나
• 시험성: 변경이 검증될 수 있는가

이식성(Porability)

소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지

• 적용성
• 설치성
• 대체성
• 공존성: 자원을 공유하는 환경에서 다른 소프트웨어와 공존할 수 있는 능력

 

 

HCI/UX/감성공학

---

1. HCI(Human Computer Interaction or Interface)

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로, 최종목표는 사용자 경험(UX; User Interface)을 만드는것

 

2. UX(User Experiene)

사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험. 기능, 절차상 만족 뿐만 아니라 사용자가 참여, 사용, 관찰하고, 상호 교감을 통해서 알 수 있는 가치 있는 경험

 

UI가 사용성, 접근성, 편의성을 중시 한다면 UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시

 

UX의 특징

주관성(Subjectivity): 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적

정황성(Contextuality): 경험이 일어나는 상황, 주변 환경에 영항을 받음

총체성(Holistic): 개인이 느끼는 총체적인 심리적, 감성적 결과

 

3. 감성 공학

• 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술. 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합과학
• 감성을 과학적으로 측정하기 위해서는 생체계측 기술, 감각계측 기술, 센서, 인공 지능, 생체제어 기술 요구
• 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 하는것
• 공학적인 접근 방법 사용
• HCI 설계에 인간의 특성과 감성 반영

 

요소기술

기반 기술: 제품 설계에 적용할 인간의 특성을 파악한다

구현 기술: 인간의 특성에 맞는 인터페이스 구현

응용 기술: 인간에 맞는지 파악하여 새로운 감성을 만듦

---

출처

[1] 나무위키

[2] https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=haebang4&logNo=70176365823 

[3] http://www.splex.co.kr/isoiec-9126-25010

자료 참고: 

시나공 정보처리기사 필기 2022를 참고하여 작성되었습니다

책 표지