정보처리기사
정보처리기사 실기 정리 - UI 요구사항 확인
장주영
2021. 9. 27. 23:44
UI(User Interface) : 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
UX(User Experience) : 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험
UI 유형
- CLI (Command Line Interface)
- 정적인 텍스트 기반 인터페이스
- 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
- GUI (Graphical User Interface)
- 그래픽 반응 기반 인터페이스
- 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
- NUI (Natural User Interface)
- 직관적 사용자 반응 기반 인터페이스
- 키보드나 마우스 없이 신체 부위를 이요하는 사용자 인터페이스
- 터치, 음성 포함
- OUI (Organic User Interface)
- 유기적 상호작용 기반 인터페이스
- 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스
UI 분야
- 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반
- 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성
- 기능적 분야 : 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능
UI 설계 원칙
- 직관성 (Intuitveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
- 유효성 (Effciency) : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
- 학습성 (Learnability) : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
- 유연성 (Flexibility) : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작
UI 설계 지침
- 사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 호나경을 제공하며, 실 사용자에 대한 이해가 바탕이 되어야 함
- 일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계해야 함
- 단순성 : 조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화
- 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측이 가능해야 함
- 가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함
- 표준화 : 디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능해야 함
- 접근성 : 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함
- 명확성 : 사용자가 개념적으로 쉽게 인지해야 함
- 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함
UI 요구사항 확인
- UI 요구사항 개요
- UI 요구사항 구분
- 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항
- 비기능적 요구사항 : 플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
- UI 요구사항 확인
- UI 품질 요구사항 (ISO/IEC 9126 기반)
- 기능성 (Functionality) : 실제 수행 결과와 품질 요구사항과의 차이를 분석, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작 관찰하기 위한 품질기준
- 적절성 (Suitality) : 소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공
- 정밀성 (Accuracy) : 소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출
- 상호 운용성 (Interoperability) : 소프트웨어 제품이 특정 시스템과 상호작용하여 운영
- 보안성 (Security) : 비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처
- 호환성 (Compliance) : 소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수
- 신뢰성 (Reliability) : 시스템이 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준
- 성숙성 (Maturity) : 소프트웨어 결함으로 인한 고장을 회피할 수 있는 소프트웨어의 능력
- 고장 허용성 (Fault tolerance) : 소프트웨어 결함이나 인터페이스 오류 시에도 특정 수준 이상의 성능을 유지할 수 있는 능력
- 회복성 (Recoverability) : 소프트웨어 고장 발생 시 영향을 받은 데이터를 복구하고 성능의 수준을 다시 확보할 수 있는 능력
- 사용성 (Usability) : 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준
- 이행성 (Understandability) : 소프트웨어의 논리적인 개념과 적용 가능성(응용 가능성)을 구분하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
- 학습성 (Learnability) : 소프트웨어 애플리케이션 학습에 필요한 사용자의 노력 정도에 따른 특성
- 운용성 (Operability) : 소프트웨어의 운용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성
- 효율성 (Efficiency) : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준
- 시간 효율성 (Time Behaviour) : 소프트웨어의 기능을 수행하는 데 있어서 반응 시간, 처리 시간 및 처리율에 따른 소프트웨어 특성
- 자원 효율성 (Resource Behaviour) : 소프트웨어의 기능을 수행하는 데 있어서 사용되는 자원의 양과 그 지속 시간에 따른 특성
- 유지보수성 (Maintainability) : 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준
- 분석성 (Analyzability) : 소프트웨어 고장의 원인이나 결함 진단 또는 수정이 요구되는 부분의 확인에 필요한 노력 정도
- 변경성 (Changeability) : 결함 제거 또는 환경 변화에 따른 수정에 필요한 노력 정도에 따른 특성
- 안정성 (Stability) : 소프트웨어의 변경으로 발생하는 예상치 못한 영향에 의한 위험 요소에 따른 특성
- 시험성 (Testability) : 소프트웨어가 변경되어 검증에 필요한 노력의 정도에 따른 특성
- 이식성 (Portability) : 다른 플랫폼(운영체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준
- 적용성 (Adaptability) : 고려된 소프트웨어의 목적을 위해 제공된 수단이나 다른 조치 업싱 특정 환경으로 전환되는 능력에 따른 소프트웨어 특성
- 설치성 (Installability) : 특정 호나경에 소프트웨어를 설치하는 데 필요한 노력의 정도에 따른 특성
- 대체성 (Replaceability) : 특정 운용 호나경하에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용할 수 있는 능력
- 기능성 (Functionality) : 실제 수행 결과와 품질 요구사항과의 차이를 분석, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작 관찰하기 위한 품질기준
UI 표준
- 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약
UI 표준 구성
- 전체적인 UX 원칙 : 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의
- 정책 및 철학 : 조직의 목표나 정체성을 포함하는 정책 및 철학 설정
- UI 스타일 가이드 : UI에 대한 구동 환경 및 레이아웃 등을 정의
- UI 패턴 모델 정의 : CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
- UI 표준 수립을 위한 조직 구성 : UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성
UI 구동 환경 정의
- 컴퓨터 운영체제(OS) 확인 : 기업이 운영하는 업무와 운영체제 확인
- 웹 브라우저 확인 : 익스플로러, 크롬, 파이어폭스 등 기업 환경에 가장 적합한 것으로 확정
- 모니터 해상도 확인 : 컴퓨터 작업 표시줄 및 브라우저의 기본 환경을 기준으로 스크롤이 생기지 않도록 설정
- 프레임세트 확인 : 속도 및 업무 편의성을 고려하여 각 영역별(Top, Left, Contents 영역) 프레임을 구분해 적용
- 프레임 구분
- 프레임별 콘텐츠 구성 (각 프레임의 페이지에서 메뉴, 배너 구성 등 일괄 적용)
- 프레임별 이미지 적용, 프레임 내에 배경 이미지 적용
- 변경되는 프레임만 새로 로딩
- 프레임별 스크롤
- 단일 프레임
- 전체 페이지에서 영역별 콘텐츠를 자유롭게 구성 가능 (페이지별로 메뉴, 배너 구성, 콘텐츠 변경관리 편리)
- 배경 이미지 사용 시에 전체 페이지 내에서 스크롤이 생김
- 페이지 전체가 새로 로딩
- 페이지 전체 스크롤
- 웹 애플리케이션 경우
- 페이지별 구성 콘텐츠에 구성이 같은 패턴
- 업무 처리가 주목적으로 페이지 전체에 이미지 적용하는 경우는 적음
- 메뉴 변경 시 페이지 로딩이 빨라야 함
- 프레임 구분
레이아웃 정의
- 상단 메뉴 구성 (Top Area) 정의
- 필수적으로 적용하는 사항
- 시스템 로고, 로그인 사용자, 바로 가기 메뉴(Quick Menu), 주메뉴(Main Navigation)
- 시스템 전체 페이지에 동일하게 적용
- 좌측 메뉴 구성 (Left Area) 정의
- 선택적으로 적용하는 사항
- 서브 메뉴, 배너
- 시스템별 서브 페이지에 선택 적용
- 내용 구성 (Contents Area) 정의
- 필수적으로 적용하는 사항
- 메인 이미지, 시스템별 구성 콘텐츠
- 하단 메뉴 구성 (Footer Area) 정의
- 선택적으로 적용하는 사항
- 회사 CI, 저작권 등
- 회사 상황에 맞춰 적용 및 삭제 가능
구성요소 정의
- 그리드(Grid) : 테이블 형태로 UI를 구성
- 버튼/컨트롤 타입 : 기능 버튼, 검색 버튼, 그리드 고나련 버튼, 기타 버튼 등 다양한 형태로 구분해 제작
- Page 요소 : 폰트규정, 아이콘 요소, 체크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스텝 표시, 페이지 이동, 상하 스크롤, 정보입력 등으로 구성
- 팝업 요소 : 윈도 팝업, 레이어 팝업
- Alert 요소 : 정보 누락/정보 오류 시, 업무 처리 완료, 삭제, 수정, 업무 안내성
UI 패턴 모델 정의 : CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차 표시하고 개발
패턴별 표준 개발방법
- 업무 화면 클라이언트 정의
- 제안 단계에서 결정된 클라이언트를 통해 설계자는 개발 시에 필요한 공통요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출
- 클라이언트에 출력되는 UI : 리치 클라이언트 도구, JSP, HTML 기반 씬 클라이언트 방식
- 서버 컨트롤러 정의
- 프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식
- 별도의 클라이언트 제품을 도입하는 경우 서버 컨트롤러와의 연동 방식
- 서버 메시지 및 예외 처리 정의
- 서버의 메시지 및 예외 처리를 클라이언트 UI에 전달하는 방식 결정
- S(System) : 런타임 예외를 전달할 때 사용, 모든 트랜잭션 자동 복원
- E(Error) : 업무 처리 로직의 일환으로 애플리케이션 예외 전달, 모든 트랜잭션 자동 복원
- I(Information) : 정상적인 업무 처리 결과나 고나련 정보에 대한 확인 메시지 전달, 모든 트랜잭션 커밋
- 클라이언트 - 서버 간 데이터 변환 정의
- 어떤 방식의 오브젝트를 사용할 것인지 결정
- 클라이언트와 서버 간의 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련
- 기업 포털 연계 정의
- EP-SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의
- 보고서 정의
- 클라이언트와 리포트 솔루션 간의 연계 방식 결정
- 외부 컴포넌트 연계 정의
- 외부 UI 컴포넌트를 도입할 때, 서버와의 연계 방식으로 결정
UI 표준 수립을 위한 조직의 구성
- 조직 구성 및 역할 정의 : 효과적인 추진을 위해 UI 팀 및 표준 개발팀을 주축으로 조직 구성
- 커뮤니케이션 방안 수립 : 정식 보고 및 정기적인 회의뿐 아니라 이슈 회의 등 다양한 방식의 커뮤니케이션 방안 마련
UI 지침 : UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항을 규정하는 가이드라인
UI 개발을 위한 주요 기법
- 3C 분석 : 고객(Customer), 경쟁하고 있는 자사(Company)와 경쟁사(Competitor)를 비교하고 분석하여 어떻게 차별화해서 경쟁에서 이길 것인지 분석
- SWOT 분석 : 기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 경영 전략 수립
- 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법
- 사용성 테스트 : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후 질문에 답하도록 하는 테스트
- 워크숍 : 소집단 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나
사용자 요구사항 도출
- 페르소나 정의
- 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
- 콘셉트 모델 정의
- 여러 가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램
- 다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하고 생각의 과정을 효율적으로 이끌어 줌
- 브레인스토밍 활용
- 사용자 요구사항 정의
- 리서치 및 페르소나 결과물을 토대로 요구사항 도출 및 우선순위 선정
- 정황 시나리오 제작 → 요구사항 매트릭스 작성
- UI 컨셉션
- 정리된 요구사항을 구체화하는 단계로 화면 디자인 단계 전에 대표 화면 설계를 진행
스토리보드 : UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
디자이너와 개발자가 최종적으로 참고하는 산출 문서
UI 화면 설계 구분
- 와이어 프레임 : 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
- 스토리보드 : 정책, 프로세스, 콘텐츠 구성, 와이어 프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
- 프로토타입 : 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형
인터랙션 : 입출력장치를 매개로 디지털 시스템과 사람이 주고받는 일련의 의사소통 과정
CRUD 방식 : 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말
리치 클라이언트
- SW의 실행을 클라이언트에서 책임지는 기술
- 서버는 클라이언트에서 요청한 SW의 실행 코드를 스트림 형태로 제공
- 클라이언트는 서버로부터 스트리밍되는 SW 코드를 클라이언트 PC의 자원을 이용하여 실행
씬 클라이언트
- 소프트웨어의 실행을 전적으로 서버에서 책임지는 기술
- 서버에서 가상 머신을 이용하여 클라이언트의 데이터와 소프트웨어 관리 및 실행
SSO (Single Sign On) : 한 번의 로그인을 통해 여러 다른 사이트들을 자동적으로 접속하여 이용하는 방법
프로파일 : 어떤 시스템을 일정 범위 내에서 한정적으로 특징 지우는 그룹화된 값
리서치 (Research) : 지식에 대한 탐구를 기반으로 한 인간 활동, 이미 존재하던 지식의 발견, 해석, 정정, 재확인 등에 초점을 맞추는 체계적인 조사
브레인스토밍 (Brain Storming)
- 집단적 창의적 발상 기법
- 집단에 소속된 인원들이 자발적으로 자연스럽게 제시된 아이디어 목록을 통해서 특정한 문제에 대한 해답을 찾고자 하는 회의 기법
요구사항 매트릭스
- 다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여 페르소나의 목적을 기준으로 데이터 요구, 기능 요구, 제품 품질, 제약 요인 기반으로 만든 요구사항 표
- 정황 시나리오 : 요구사항 저으이에 사용되는 초기 시나리오를 말하며, 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오
CSS : HTML 문서를 스타일링 하는 언어 HTML 문서에서 link 요소로 CSS와 HTML과 연결하여 스타일링