UI 요구사항 확인 ⭐⭐⭐
UI ( User Interface) 개념
: 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체, 정보기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면
*UX(사용자 경험)는 UI(사용자 인터페이스)를 포함한다.
UI 유형
| 유형 | 특징 | 설명 |
| CLI(Command Line Interface) | 정적 텍스트 기반 | 명령어를 텍스트로 입력하여 조작 |
| GUI(Graphical User Interface) | 그래픽 반응 기반 | 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용 |
| NUI(Natural User Interface) | 직관적 사용자 반응 기반 | 신체 부위를 이용(터치, 음성 포함) |
| OUI(Organic User Interface) | 유기적 상호 작용 기반 | 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있음 |
UI 분야
| 분야 | 설명 |
| 물리적 제어 분야 | 정보 제공과 기능 전달을 위한 하드웨어 기반 |
| 디자인적 분야 | 콘텐츠의 정확하고 상세한 표현과 전체적 구성 |
| 기능적 분야 | 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능 |
UI 설계 원칙
| 설계 원칙 | 설명 | 부특성 |
| 직관성 | 누구나 쉽게 이해, 쉽게 사용 | 쉬운 검색, 쉬운 사용성, 일관성 |
| 유효성 | 정확, 완벽하게 사용자의 목표가 달성될 수 있도록 제작 | 쉬운 오류 처리 및 복구 |
| 학습성 | 초보와 숙련자 모두 쉽게 배우고 사용할 수 있게 제작 | 쉽게 학습, 쉬운 접근, 쉽게 기억 |
| 유연성 | 사용자의 요구사항 최대한 수용, 실수 방지할 수 있도록 제작 | 오류 예방, 실수포용, 오류 감지 |
UI 설계 지침
| 설계 지침 | 설명 |
| 사용자 중심 | 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야 함 |
| 일관성 | 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계해야 함 |
| 단순성 | 조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화 |
| 결과 예측 가능 | 작동시킬 기능만 보고도 결과 예측이 가능해야 함 |
| 가시성 | 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야함 |
| 표준화 | 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능해야 함 |
| 접근성 | 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함 |
| 명확성 | 사용자가 개념적으로 쉽게 인지해야 함 |
| 오류 발생 해결 | 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함 |
UI 요구사항 확인
1. UI 요구사항 개요
- UI 요구사항은 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
- 시스템 개발과정 전체에 대한 기준이 되며, 시스템 개발 종료 및 검수의 기준이 된다.
2. UI 요구사항 구분
- 기능적 : 시스템이 제공하는 기능, 서비스 및 시스템의 입출력, 데이터, 연산에 관한 요구사항
- 비기능적 : 품질( 사용성, 효율성, 신뢰성, 유지보수성, 재사용성), 시스템 환경(플랫폼, 사용기술), 프로젝트 계획(비용, 일정)에 관한 요구사항
3. UI 요구사항 확인
- SW 개발을 위한 UI 표준 및 지침에 따라, 기능 및 비기능 요구사항의 도출을 통해 개발하고자 하는 응용 소프트웨어에 적용될 UI 요구사항을 확인
4. UI 품질 요구사항(ISO/IEC 9126 기반)
| 품질 기준 | 설명 | 요구사항 |
| 기능성 | 실제 수행 결과와 품질 요구사항과의 차이를 분석, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준 | 적절성, 정밀성, 상호 운용성, 보안성, 호환성 |
| 신뢰성 | 시스템이 일정한 시간 or 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준 | 성숙성, 고장 허용성, 회복성 |
| 사용성 | 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준 | 이해성, 학습성, 운용성 |
| 효율성 | 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준 | 시간 효율성, 자원 효율성 |
| 유지보수성 | 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준 | 분석성, 변경성, 안정성, 시험성 |
| 이식성 | 다른 플랫폼에서도 많은 추가 작업 없이 쉽게 적용 가능한가에 대한 품질 기준 | 적용성, 설치성, 대체성 |
UI 표준 ⭐
UI 표준 개념
: 디자인 철확과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성에 관한 규약
UI 표준 구성
: 전체적인 UX 원칙, 정책 및 철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성
UI 표준 수립 시 고려사항
· 사용자가 불편해하지 않아야 한다.
· 많은 업무 케이스를 포함해야 한다.
· 다양한 사용상황에 대처할 수 있어야 한다.
· 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공이 필요하다.
· 변화하는 상황에 맞게 빠르게 변경할 수 있는 관리조직 수반이 필요하다.
UI 스타일 가이드 구성
| 정의 | 내용 |
| UI 구동 환경 | · 컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임세트 확인 |
| 레이아웃 | · 기본 배치는 크게 Top, Left, Contents 영역으로 부분 설계. Footer는 상황에 맞게 추가 및 제외 |
| 메뉴 내비게이션 | · 애플리케이션 메뉴 구조에 따라 적당한 타입 선택 적용 |
| 공통표준화면 | · 검색영역이나 Tab Menu 등 공통된 표준 화면을 정의 |
| 기능 | · 시스템 요구사항에 대한 개념 모델을 논리적 모델(프로세스 모델, UI 설계, 논리 데이터 모델, 아키텍처 정의, 인터페이스 설계 측면)로 상세화하여 기능 정의 |
| 구성요소 | · UI 구성요소 중 그리드는 테이블 형태로 UI를 구성 |
UI 패턴 모델 정의
: CRUD 방식을 기반으로 데이터의 입출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발
UI 지침 ⭐
UI 지침(Guildeline) 개념
: UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부 사항을 규정하는 가이드라인
| 소프트웨어 개발 단계별 UI 지침 | |||||
| 목표정의 | 프로젝트 계획 | 요구사항 정의 | 설계 및 구현 | 테스트 | 배포 및 관리 |
| · 환경분석 · UI 개발 목표 및 범위 정의 |
· 사용자 분석 및 니즈 조사 | · 사용자 요구사항 도출 · UI 컨셉션 정의 |
· UI 상세 설계 · UI 화면 디자인 · UI 검증 |
· 사용성 테스트 실행, 결과분석 |
· 메뉴얼 배포, 관리 |
UI 표준 적용을 위한 환경 분석
| 구분 | 설명 | |
| 사용자 트렌드 분석 | · 현재 UI의 단점 파악 및 트렌드 숙지 · 사용자가 필요로 하는 핵심 요구사항 파악 · 사용자가 쉽게 이해 가능한 기능을 위주로 기술 영역 정의 |
|
| 기능 및 설계 분석 | 기능 조작성 분석 | · 사용자 편의성 확대를 위한 조장 기능 확인 · 스크롤바 지원 가능 여부 확인 · 마우스 조작 및 업무 처리시 동선 확인 |
| 오류 방지 분석 | · 사용자 조작 시 오류에 대해 예상 가능한지 확인 · 사용자 의도와 관계없는 페이지 이동 여부 확인 · 기능 버튼명이 사용자 조작과 일치 여부 확인 |
|
| 최소한의 조작으로 업무 처리 가능 여부 확인 | · 기능 특성에 맞는 UI 확인 · 조작 단계를 최소화하고 동선은 단순한지 확인 |
|
| UI의 정보 전달력 확인 | · 정보 제공 방식이 일관적이며 사용자가 쉽게 이해 가능한지 확인 · 사용자에게 정보 제공이 간결하고 명확한지 확인 |
|
UI 개발 목표 및 범위
: 성공적인 수행을 위해 내부 관계자에게 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 활동
1. UI 개발을 위한 주요 기법
| 기법 | 설명 |
| 3C 분석 | 고객, 자사와 경쟁사를 비교 분석 하여 자사를 차별화 하여 경쟁에서 이길 것인가 분석 |
| SWOT 분석 | 기업의 내부환경과 외부환경을 분석하여 강점, 약점, 기회, 위협요인을 규정하고 이를 토대로 경영 전략을 수립 |
| 시나리오 플래닝 | 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 성계하는 방법으로 불확실성을 제거 |
| 사용성 테스트 | 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트 |
| 워크숍 | 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나 |
사용자 분석 및 니즈(Needs) 조사
· 최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의
· 리서치 대상 선정 및 내용 설계, 리서치 진행, 리서치 결과 정리
사용자 요구사항 도출 순서
| 수행 활동 | 설명 | 세부 수행 활동 |
| 페르소나 정의 | 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자 | · 페르소나 분류 및 정의 · 페르소나 작성 · 페르소나 활욜 |
| 콘셉트 모델 정의 | 여러가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램 | · 콘셉트 모델 정의 · 브레인스토밍 활용 |
| 사용자 요구사항 정의 | 리서치 및 페르소나 결과물을 토대로 요구사항을 도출하고, 우선순위를 정함 | · 요구사항 매트릭스 작성 · 정황 시나리오 제작 및 요구사항 도출 |
| UI 컨셉션 | 정리된 요구사항을 구체화 하는 단계 | · 정보 구조 설계 · 대표 화면 와이어프레임 스케치 · 페이퍼 프로토타입을 통한 스토리보드 설계 |
스토리보드 ⭐⭐
· UI 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
· 디자이너와 개발자가 최종적으로 참고하는 산출 문서
· UI 화면 설계를 위해서는 와이어프레임, 스토리보드, 프로토타입이 활용된다.
| 구분 | 설명 | 도구 |
| 와이어프레임 | 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면단위의 레이아웃을 걸계하는 작업 | 파워포인트, 키노트, 스케치, 일러스트 |
| 스토리보드 | 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스의 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 설계 산출물 | 파워포인트, 키노트, 스케치 |
| 프로토타입 | 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형 | HTML/CSS |
· 스토리보드 작성 절차
└ 전체 개요 작성 → 서비스 흐름 작성 → 스타일 확정 → 메뉴별 화면 설계도 작성 및 상세 설명 → 추가 관련 정보 작성
UI 프로토타입 제작 및 검토 ⭐
· 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구형 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
· 사전에 프로토 타입을 먼저 제작하고 이를 기반으로 UI의 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하는 효과가 있다
· 장점 및 단점
| 장점 | 단점 |
| · 사용자 설득과 이해가 쉬움 · 개발 시간 감소 · 오류 사전 발견을 통한 예방 가능 |
· 수정 과정 증가 시, 작업 시간 증가 위험 존재 · 요구사항에 대한 적절한 타협 필요 · 자원 효율성 관점에서는 필요 이상의 많은 자원 소모 |
TEST → 정답은 드래그!
| 정답 | 문제 |
| UI | 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다. |
| GUI | UI 유형 중 명령어를 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스이고, 그래픽 반응 기반 인터페이스이다. |
| NUI | UI 유형 중 사용자가 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스이고, 터치, 음성을 포함하는 직관적 사용자 반응 기반 인터페이스이다. |
| CLI | UI 유형 중 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스이고, 정적인 텍스트 기반 인터페이스이다. |
| OUI | UI 유형 중 입력장치가 곧 출력장치가 되고, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스이고, 유기적 상호 작용 기반 인터페이스이다. |
| 직관성 | UI 설계 원칙 중 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함을 나타내는 원칙이고, 부특성에는 쉬운 검색, 쉬운 사용성, 일관성이 있다. |
| 유효성 | UI 설계 원칙 중 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 UI를 제작할 수 있는 원칙이고, 부특성에는 쉬운 오류 처리 및 복구가 있다. |
| 학습성 | UI 설계 원칙 중 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있도록 UI를 제작할 수 있는 원칙이고, 부특성에는 쉽게 학습, 쉬운 접근, 쉽게 기억이 있다. |
| 유연성 | UI 설계 원칙 중 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 UI를 제작할 수 있는 원칙이고, 부특성에는 오류 예방, 실수 포용, 오류 감지가 있다. |
| 사용자 중심 | UI 설계 지침 중 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하며 실사용자에 대한 이해가 바탕이 되어야 한다는 설계 지침이다. |
| 일관성 | 버튼이나 조작 방법을 사용자가 기억하기 빠르고 쉽게 습득할 수 있도록 설계해야 한다는 설계 지침이다. |
| 단순성 | 조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화해야 한다는 설계 지침이다. |
| 결과 예측 | 작동시킬 기능만 보고도 결과 예측이 가능해야 한다는 설계 지침이다. |
| 가시성 | 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 한다는 설계 지침이다. |
| 접근성 | 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 한다는 설계 지침이다. |
| 기능성 | UI 품질 요구사항 중 실제 수행 결과와 품질 요구사항과의 차이를 분석하고, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준이다. |
| 신뢰성 | UI 품질 요구사항 중 시스템이 일정한 시간 또는 작동되는 시간동안 의도하는 기능을 수행함을 보증하는 품질 기준이다. |
| 사용성 | UI 품질 요구사항 중 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준이다. |
| 효율성 | UI 품질 요구사항 중 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준이다. |
| UI 표준 | 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다. |
| UX | 제품과 시스템, 서비스 등을 사용자가 직·간접적으로 경험하면서 느끼고 생각하는 총체적 경험이다. |
| UI 스타일 가이드 | UI의 통일과 일관적인 화면을 위해서 시스템이 지켜야 할 UI 요소 정의와 화면설계원칙을 제시하여 디자이너 또는 개발자들이 웹사이트의 관련 분야 업무를 수행 할 때 지켜야 하는 규칙 문서이다. |
| 레이아웃 | UI 스타일 가이드에서 화면 구조 정의, 상단 메뉴 구성 정의, 좌측 메뉴 구성 정의, 내용 구성 정의, 하단 메뉴 구성 정의, 사용 환경에 맞춰 페이지 폭 정의로 구성되어 있다. |
| UI 지침 | UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항을 규정한다. |
| 3C 분석 | 고객, 경쟁하고 있는 자사와 경쟁사를 비교, 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법이다. |
| SWOT 분석 | 기업의 내부환경과 외부 환경을 분석하여 강점, 약점, 기회, 위협 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법이다. |
| 시나리오 플래닝 | 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법이다. |
| 리서치 | 지식에 대한 탐구를 기반으로 한 인간 활동이며, 이미 존재하던 지식의 발견, 해석, 정정, 재확인 등에 초점을 맞추는 체계적인 조사를 말한다. |
| 페르소나 | 사용자 요구사항 도출을 위하여 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자이다. |
| UI 컨셉션 | 정리된 요구사항을 구체화하는 단계로 화면 디자인 단계 전에 대표 화면 설계를 진행하는 단계이다. |
| 사용성 테스트 | 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후 질문에 답하도록 하는 테스트이며, 현 제품에 대한 사용자의 요구사항과 행동을 관찰할 수 있는 유용한 진단방법이다. |
| 스토리보드 | UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI,UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서이다. |
| 와이어 프레임 | 이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업이다. |
| 프로토타입 | 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품이다. |
| 이해성 | 사용성의 부특성 중 소프트웨어의 논리적인 개념과 적용 가능성을 분간하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성이다. |
| 학습성 | 사용성의 부특성 중 소프트웨어 애플리케이션을 익히는 데 필요한 사용자의 노력 정도에 따른 특성이다. |
| 운용성 | 사용성의 부특성 중 소프트웨어의 활용과 운용 통제에 필요한 사용자의 노력정도에 따른 특성이다. |
| 적절성 | 기능성의 부특성 중 소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어의 능력이다. |
| 정밀성 | 기능성의 부특성 중 소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력이다. |
| UI 설계 도구 | 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구이다. |
| 화면 설계 도구 | UI 설계 도구 중 파워 목업, 발사믹 목업, 카카오 오븐이 있다. |
| 프로토타입 도구 | UI 설계 도구 중 UX핀, 액슈어, 네이버 프로토나우가 있다. |
| UI 디자인 | UI 설계 도구 중 스케치, 어도비 익스피리언스 디자인CC가 있다. |
※ 해당 글은 수제비 2022 도서 참고하였습니다.
수제비- IT 커뮤니티 (정보처리기사... : 네이버 카페
수제비-수험생 입장에서 제대로 쓴 비법서(정보처리기사, 정보처리기능사, 빅데이터 분석기사 등 시리즈)
cafe.naver.com
'정보처리기사' 카테고리의 다른 글
| Ⅲ 데이터 입출력 구현 - 논리 데이터 저장소 확인 (2) | 2023.02.02 |
|---|---|
| Ⅱ 화면설계 - UI 설계 (1) | 2023.01.31 |
| [2023] 정보처리기사 시험 일정 (0) | 2023.01.05 |
| Ⅰ 요구사항 확인 - 분석 모델 확인하기 (0) | 2022.12.02 |
| Ⅰ 요구사항 확인 - 요구사항 확인 (0) | 2022.12.01 |