1) UI 요구사항 확인하기
•화면 설계의 개요
- 화면(User Interface)
사람과 시스템 사이의 접점
-> 사용자와 각각의 시스템 사이의 정보 채널
-> 화면 설계 : 상호 정보 교환의 방법을 체계화하여 설계하고 디자인하는 작업
- 화면 설계의 방향
- 사용자 중심
- 단순한 설계
- 현명한 색상 사용
- 일관성 유지
- 사용자 경험 지식화
- 지속적인 테스트 및 반복
- 설계 원칙
- 직관성
- 유효성
- 학습성
- 유연성
- UI의 유형
- 명령어 방식 : 명령어 암기 필요
- 메뉴 방식 : 기억보다 인식에 의존하는 방식
- 자연언어 이용 방식 : 자연 언어의 모호성이 혼동을 가져올 수 있음
- 윔프
- 포인터와 클릭
- 화면 설계의 수행 절차
- UI 스타일 가이드 작성
디자이너 또는 개발자들이 각각 웹사이트의 다른 부분들을 맡아서 일을 할 떼 항상 따라야 되는 규칙같은 것
-> 다수의 디자이너와 개발자가 작업을 수행
-> 화면 구성의 일관성 유지가 필요
-> 사용자 경험을 표준화하여 제공
- 스타일 가이드의 구성
- Introduction : 스타일 가이드의 구성 및 활용, 정책, 기본 환경등을 규정
- Basic Rule : 폰트, 컬러 정의
- Layout : 화면 기본 구조
- Elements : 화면 구성
- 정책 : 스타일 가이드를 관리 및 운영하는 정책
- 기본환경 구성 : 용량 및 브라우저 환경 구성
-> 고려사항 : 전사 UI 스타일 가이드의 기준을 충족
- UI 요구사항 정의
-> 사용자가 정보 시스템을 구축하여 얻고자하는 업무 수행의 기준
-> 요구사항 요건
- 명확성 - 모호하지 않아야 함
- 정확성 - 고객이 정말로 원하는 것
- 완전성 - 사용자가 기대하는 모든 기능/비기능적 요구사항 기술
- 일관성
- 실현가능성 - 기술적/경제적 측면에서 구현 가능
- 추적성
- 검증성
* ISO/IEC 9126 품질 요구사항
- 기능성
- 신뢰성
- 사용성
- 효율성
- 유지보수성
- 이식성
-> 요구사항의 분류
- 기능적 요구사항 : 목표로 하는 제품의 구현을 위해 소프트웨어가 가져야하는 기능적 속성
- 비기능적 요구사항 : 제품의 품질 기준 등을 만족시키기 위해 소프트웨어가 가져야하는 성능, 사용의 용이성, 안전성과 같은 행위적 특성
-> 작성시 고려사항
UI 요구사항을 상세화하고 분할하여 화면 단위를 정의 할 수 있다.
- UI 유스케이스 정의
기존의 분석 단계에서 작성된 개부분의 사용자 유스케이스는 사용자들이 사용하는 기능을 중심으로 기술되어 있으므로 UI 유스케이스에 포함된다고 볼 수 있음.
- 프로토타입 작성
- 프로토타입 : 전체적인 기능을 간략한 형태로 구현한 시제품
-> 사용자의 요구사항 검증
-> 추후 발생 가능한 오류들을 사전에 방지
- 장점
- 사용자 설득과 이해가 쉽다.
- 개발 시간 감소
- 오류를 사전에 발견할 수 있다.
- 단점
- 자원 효율성 관점에서 보면 자원을 많이 소모함
- 너무 많은 수정 과정은 작업 시간 증가
- 프로토타입의 유형 및 방법
- 종이 프로토타입 : 머릿속에 있는 것을 정확히 표현하고 테스트 할 수 있음
- 디지털 프로토타입 : 디지털 프로토타입은 HTML보다 프로토타입 제작 속도가 빠름
- HTML 프로토타입 : 모든 OS와 기기에서 테스트가 가능하며, 별도의 외부 소프트웨어 불필요
- 프로토타입의 작성 방안
- 종이 프로토타입 실행 : 종이와 펜을 이용
- 디지털 프로토타입 실행 : 종이 프로토타입을 기반으로 파워포인트 등 프로토타입 소프트웨어를 이용
- HTML 프로토타입 실행 : 종이 프로토타입, 디지털 프로토타입을 기반으로 HTML 기반으로 프로토타입을 수행
- UI 적정성 검토 및 보완
- 사용자에게 쉽게 인지되고 이해가 되는지 점검
- 사용자 편의성을 확보하였는지
- 키 조작 결과를 사용자가 바르게 인지가 가능한지
- 작성 시 고려사항
-> 핵심 기능이나 핵심 화면을 중심으로 고객과 협의하여 수행
-> 기능과 관련된 것인지 성능과 관련된 것인지 개발 환경에 관련된것인지 명확하게
-> 산출물은 실제 개발에 그대로 참조 될 수 있는 수준이 되어야 함
정보처리기사 실기 - 5. 화면 설계(2) /흐름설계/스토리보드/고객여정지도/HTML5
2) UI 설계하기 - UI 흐름 설계 업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동 -> 한 가지의 업무를 수행하는데 필요한 화면과 일
aapslie94.tistory.com
'전공 > 정보처리기사 실기' 카테고리의 다른 글
| 정보처리기사 실기 - 6. 애플리케이션 테스트 관리(1) /테스트케이스/정적•동적테스트/화이트박스/블랙박스 (0) | 2021.04.24 |
|---|---|
| 정보처리기사 실기 - 5. 화면 설계(2) /흐름설계/스토리보드/고객여정지도/HTML5 (0) | 2021.04.23 |
| 정보처리기사 실기 - 4. 서버 프로그램 구현(3) /알고리즘 (0) | 2021.04.15 |
| 정보처리기사 실기 - 4. 서버 프로그램 구현(2) /DTO/DAO/개발보안/cron/crontab (0) | 2021.04.15 |
| 정보처리기사 실기 - 4. 서버 프로그램 구현(1) /개발환경/아키텍처/단위테스트 (0) | 2021.04.15 |