[정보처리기사 필기] 1-2. 화면 설계
2020 시나공 정보처리기사 필기책 참고
주의! 중요도가 낮은 항목(C)은 제외
1. 사용자 인터페이스 – A
- UI 개요
- 사용자 인터페이스(UI)는 사용자와 시스템 간의 상호작용이 원활하도록 돕는 장치나 S/W
- UI의 3가지 분야
- 정보 제공을 위한 물리적 제어
- 콘텐츠의 상세적인 표현과 전체적인 구성
- 모든 사용자가 편리하고 간편하게 사용
- UI 특징
- S/W 영역 중 변경이 가장 많이 발생
- 편리성과 가독성을 높여 작업 시간을 단축시키고 업무에 대한 이해도 높여줌
- 최소한의 노력으로 원하는 결과 얻을 수 있게 함
- 오류를 줄임
- 구체적인 방법 제시
- 매개 역할
- UI를 설계하기 위해서는 S/W 아키텍처 반드시 숙지해야 함
- UI 구분
- CLI(Command Line Interface) : 텍스트 형태
- GUI(Graphical User Interface) : 그래픽 환경
- NUI(Natural User Interface) : 말이나 행동으로 조작
- UI 기본 원칙
- 직관성
- 유효성
- 학습성
- 유연성
- UI 설계 지침
- 사용자 중심
- 일관성
- 단순성
- 결과 예측 가능
- 가시성
- 표준화
- 접근성
- 명확성
- 오류 발생 해결
2. UI 표준 및 지침 – B
- 기술의 중립성(웹 표준), 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성) 고려 확인
- UI 표준 : 모든 UI에 공통적으로 적용될 내용
- UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건
- 한국형 웹 콘텐츠 접근성 지침(KWCAG)
- 인식의 용이성
- 대체 텍스트
- 멀티미디어 대체 수단
- 명료성
- 운용의 용이성
- 키보드 접근성
- 충분한 시간 제공
- 광과민성 발작 예방
- 쉬운 내비게이션
- 이해의 용이성
- 가독성
- 예측 가능성
- 콘텐츠의 논리성
- 입력 도움
- 견고성
- 문법 준수
- 접근성
- 전자정부 웹 표준 준수 지침
- 내용의 문법 준수
- 적절한 문서타입 명시
- 문법 준수
- 인코딩 방식 표기
- 내용과 표현의 분리
- 마크업 언어를 사용해 웹 문서 구조화
- 스타일 언어는 표준 문법 준수
- 동작의 기술 중립성 보장
- 스크립트의 비표준 문법 확장 배제
- 대체 텍스트나 정보 제공
- 플러그인의 호환성
- 다양한 웹 브라우저에서 호환되는 것 사용
- 콘텐츠의 보편적 표현
- 메뉴는 다양한 브라우저에서 접근할 수 있어야 함
- 웹 사이트를 다양한 인터페이스로 이용할 수 있어야 함
- 운영체제에 독립적인 콘텐츠 제공
- 운영체제에 종속적이지 않은 범용적인 포맷을 사용
- 부가 기능의 호환성 확보
- 다양한 브라우저에서 사용할 수 있어야 함
- 다양한 프로그램 제공
- 다양한 브라우저에서 사용할 수 있어야 함
- 윈도우, 리눅스, 맥킨토시 중 2개 이상의 운영체제를 지원해야 함
3. UI 설계 도구 – A
- UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구
- 기획단계에서 미리 보여주기 위한 용도
- 와이어프레임(Wireframe)
- 페이지에 대한 개략적인 레아아웃이나 UI 요소 등에 대한 뼈대 설계
- 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계
- 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용
- 툴 : 손그림, PPT, 키노트, 스케치, 일러스트, 포토샵 등
- 목업(Mockup)
- 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 실제로 구현되지는 않음
- 툴 : 파워 목업, 발사믹 목업 등
- 스토리보드(Story Board)
- 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가
- 최종적으로 참고하는 작업 지침서, 서비스 구축을 위한 모든 정보 포함
- 상단이나 우측에는 제목, 작성자 기입, 좌측에는 UI화면, 우측에는 Description 기입
- Description은 명확하고 세부적으로 작성
- 툴 : PPT, 키노트, 스케치, Axure 등
- 프로토타입(Prototype)
- 와이어프레임이나 스토리보드 등에 인터렉션을 적용한 동적인 형태의 모형
- 작업자 간 서비스 이해를 위해 작성하는 샘플
- 페이퍼 프로토타입과 디지털 프로토타입으로 나뉨
- 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
- 유스케이스(Use Case)
- 사용자 측면에서의 요구사항
- 사용자의 요구사항을 파악해 초기에 기능적인 요구를 결정하고 그 결과를 문서화할 수 있음
- 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것. 다이어그램 형식으로 묘사
- 유스케이스 다이어그램이 완성되면, 명세서 작성
4. UI 요구사항 확인 – B
- 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
- 목표 정의 -> 활동사항 정의 -> UI 요구사항 작성 -> 요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성
5. 품질 요구사항 – B
- 요구사항이 얼마나 충족하는가를 나타내는 S/W 특성의 총체
- 품질은 사용자의 요구사항을 충족시킴으로써 확립
- ISO/IEC 9126
- 품질 특성과 평가를 위한 표준 지침
- 품질에 대한 요구사항을 기술하거나 품질 평가 등에 사용
- 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성
- 호환성과 보안성을 강화하여 ISO/IEC 25010으로 개정
- 기능적합성, 신뢰성, 사용성, 실행효율성, 유지보수성, 이식성, 호환성, 보안성
- 기능성(Functionality)
- 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부
- 적절성/정합성(Suitability) : 적절한 기능을 제공
- 정밀성/정확성(Accuracy) : 결과를 정확하게 산출
- 상호 운용성(Interoperability) : 서로 어울려 작업
- 보안성(Security) : 접근을 권한에 따라 허용하거나 차단
- 준수성(Compliance) : 표준, 관례 및 규정을 준수
- 신뢰성(Reliability)
- 요구된 기능을 정확하고 일관되게 오류 없이 수행
- 성숙성(Maturity) : 고장을 피해감
- 고장 허용성(Fault Tolerance) : 고장 시 규정된 성능 수준을 유지
- 회복성(Recoverability) : 고장 시 다시 회복하고 데이터를 복구
- 사용성(Usability)
- 사용자가 정확하게 이해하고 사용하며, 다시 사용하고 싶은 정도
- 이해성(Understandability) : 사용자가 이해할 수 있는 능력
- 학습성(Learnability) : S/W를 학습할 수 있도록 하는 능력
- 운용성(Operability) : 운용하고 제어할 수 있도록 하는 능력
- 친밀성(Attractiveness) : 다시 사용하고 싶어 하도록 하는 능력
- 효율성(Efficiency)
- 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도
- 시간 효율성(Time Behaviour) : 적절한 반응 시간 및 처리시간, 처리율 제공
- 자원 효율성(Resource Behaviour) : 적절한 자원의 양과 종류를 제공
- 유지 보수성(Maintainability)
- 환경의 변화에서 S/W를 개선하거나 확장할 수 있는 정도
- 분석성(Analyzability) : 수정될 부분의 식별을 가능하게 하는 능력
- 변경성(Changeability) : 변화로 인한 수정 등을 쉽게 구현
- 안정성(Stability) : 변경으로 인한 예상치 못한 결과를 최소화하는 능력
- 시험성(Testability) : 변경이 검증될 수 있는 능력
- 이식성(Portability)
- 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도
- 적용성(Adaptability) : 다른 환경으로 변경될 수 있는 능력
- 설치성(Installability) : 임의의 환경에 설치할 수 있는 능력
- 대체성(Replaceability) : 다른 S/W를 대신하여 사용될 수 있는 능력
- 공존성(Co-existence) : 다른 S/W와 공존할 수 있는 능력
6. UI 프로토타입 제작 및 검토 – A
- UI 프로토타입 개요
- 프로토타입은 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적 형태의 모형
- 테스트 가능
- 간단하게 만들어야 함
- 핵심 기능만을 제공하지만, 필요한 기능은 반드시 포함
- 요구사항이 모두 반영될 때까지 개선, 보완
- 실제 사용자를 대상으로 테스트
- UI 프로토타입 장단점
- 장점
- 설득, 이해 쉬움
- 혼선 예방으로 개발 시간 단축
- 사전 오류 발견
- 단점
- 반복적인 개선작업으로 작업 시간 증가, 필요이상으로 자원 소모
- 중요한 작업 생략될 수 있음
- 프로토타이핑 종류
- 페이퍼 프로토타입(Paper Prototype)
- 아날로그적 방법, 손으로 직접 작성
- 제작기간이 짧고, 업무 협의가 빠른 경우 사용
- 장점
- 비용 저렴
- 대화하면서 생성 가능
- 즉시 변경 가능
- 고객이 과다한 기대 안함
- 단점
- 테스트하기 부적당
- 상호 관계가 많은 경우 나타내기 복잡
- 여러 사람들에게 나눠주거나 공유하기 어렵다
- 디지털 프로토타입(Digital Prototype)
- 프로그램을 사용하여 작성
- 재사용이 필요한 경우, 숙련된 전문가가 있을 경우 사용
- 장점
- 최종 제품과 비슷하게 테스트
- 수정 쉬움
- 재사용 가능
- 단점
- 프로그램의 사용법을 알아야 함
- UI 프로토타입 제작 단계
- 요구사항 분석
- 개발할 시스템의 핵심적인 기능을 페이퍼/디지털 방식으로 작성
- 사용자가 확인하는 단계, 추가 및 수정 의견 제안
- 수정과 합의가 이루어짐
7. UI 설계서 작성 – B
- UI 설계서 개요
- UI 설계를 구체화하여 작성하는 문서. 대표적인 화면들을 설계
- 원활한 의사소통을 위해 작성
- UI 설계서 표지 작성
- 혼동되지 않도록 프로젝트명 또는 시스템명을 포함
- UI 설계서 개정 이력 작성
- UI 설계서가 수정될 때마다 어떤 부분이 수정되었는지 정리해 놓은 문서
- UI 요구사항 정의서 작성
- 사용자의 요구사항을 확인하고 정리한 문서
- 시스템 구조 작성
- 전체 시스템의 구조를 설계한 것
- 사이트 맵 작성
- 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계한 것
- 프로세스 정의서 작성
- 프로세스들을 작업 진행 순서에 맞춰 정리한 것
- UI 전체적인 흐름 파악 가능
- 화면 설계
- 필요한 화면을 페이지별로 설계
- 와이어프레임을 대략적으로 스케치
- 주요 흐름을 스토리보드 형태로 작성
- UI 화면 설계의 기본 구성 요소
- 윈도우, 메뉴, 아이콘, 포인터
8. UI 상세 설계 – B
- 실제 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계. 반드시 시나리오 작성
- 최종 목표를 달성하기 위한 방법이 순차적으로 묘사
- UI 시나리오 문서 작성 원칙
- 구체적으로 작성. Tree 구조 또는 Flow Chart 표기법으로 작성
- 공통적으로 적용될 UI 요소와 인터렉션을 일반 규칙으로 정의
- 레이아웃과 속할 기능 정의
- 인터렉션의 순서, 분기, 조건, 루프 등을 명시
- 예외 상황에 대비한 다양한 케이스 정의
- 기능별 상세 기능 시나리오를 정의
- UI 시나리오 규칙을 지정
- UI 시나리오 문서 작성을 위한 일반 규칙
- 주요 키의 위치와 기능
- 공통 UI 요소
- 기본 스크린 레이아웃
- 기본 인터랙션 규칙
- 공통 단위 태스크 흐름
- 케이스 문서
- UI 요소
- 체크 박스 : 1개 이상의 값을 선택할 수 있는 버튼
- 라디오 버튼 : 하나만 선택할 수 있는 버튼
- 텍스트 박스 : 데이터를 입력하고 수정할 수 있는 상자
- 콤보 상자 : 지정된 목록 상자에 내용을 표시하여 선택하거나 새로 입력할 수 있는 상자
- 목록 상자 : 콤보 상자와 같이 목록을 표시하지만 새로운 내용을 입력할 수 없음
- UI 시나리오 문서의 요건
- 완정성(Complete)
- 일관성(Consistent)
- 이해성(Understandable)
- 가독성(Readable)
- 수정 용이성(Modifiable)
- 추적 용이성(Traceable)
- UI 시나리오 문서로 인한 기대 효과
- 오류 감소
- 재작업 감소, 혼선 최소화
- 불필요한 기능 최소화
- 개발 비용 절감
- 개발 속도 향상
댓글남기기