[정처기] PART 05 : 화면설계 정리노트

화면설계 : 사용하기 편한 시스템을 만들기 위해 사용자와 시스템 사이의 상호 정보 교환의 방법을 체계회하여 설계하고 디자인하는 작업.

 

화면설계의 방향 

1> 사용자 중심 : 사용자 입장에서 생각하고 사용자 입장에서 설계해야 하며, 사용자의 목적을 달성하는 것을 목표로 함

2> 단순한 설계 : 사용자 인터페이스를 설계할 때 핵심은 단순함.

3> 현명한 색상 사용 

4> 일관성 유지 : 안정감을 느끼게 해주기 위해 일관성을 유지해야 한다.

5> 사용자 경험 지식화 : 사용자가 시스템 인터페이스를 사용하고, 경험한 것을 지식화하여, 사용자들이 키보드 단축키를 사용하게 하고, 상대적으로 복잡한 부분의 인터페이스를 단순하게 만들어야 함.

6> 지속적인 테스트 및 반복 : 지속적인 수정과 개선을 통하여 사용자들의 반응을 테스트하여야 한다.

 

화면설계 수행 단계

UI 표준 수립 → UI 요구사항 분석 → 프로토타입 작성 → UI 작성 구조 → UI 구조 설계 → UI 사용성 검토

 

UI 스타일 가이드 : 사용자 인터페이스를 만들 때 기준이 되는 각종 규칙들의 집합, 디자이너 또는 개발자들이 각각 웹사이트의 다른 부분을 맡아서 일을 할 때 항상 따라야 되는 규칙

구성 : Introduction, Basic Rule, Layout, Elements, 정책, 기본 환경 구성

 

요구사항 7가지 요건

1> 명확성 : 항상 동일한 의미로 해석되어야 함

2> 정확성 : 고객이 정말로 원하는 것이어야 함

3> 완전성 : 사용자가 기대하는 기능/비기능적 요구사항이 기술되어야 함

4> 일관성 : 서로 상충되는 요구사항이 있어서는 안됨

5> 실현가능성 : 기숙적/경제적 측면에서 구현 가능해야 함

6> 추적성 : 소스와 구현결과 까지 추적되어야 함

7> 검증성 : 객관적으로 검증할 수 있도록 구체적이어야 함

 

요구사항 분류

1> 기능적 요구사항 : 입력과 출력 및 그들 사이의 처리과정

2> 비기능적 요구사항 : 소프트웨어가 가져야 하는 성능, 사용의 용이성, 안전성과 같은 행위적 특성

 

UI 유스케이스 : 사용자의 관점에서 시스템의 서비스 혹은 기능 및 그와 관련한 외부 요소를 상세하게 기술한 산출물

                     (유스케이스 기술서 + 유스케이스 다이어그램)

 

프로토타입 : 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품.

1>종이 프로토타입       2> 디지털 프로토타입       3> HTML 프로토타입

 

UI 흐름 설계 : 업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동이다.

양식종류 : TEXT BOX, 콤보 박스, 라디오 박스, 체크 박스

 

UI 상세 설계

1> UI 요구사항 확인 

2> UI 구조 설계

3> 메뉴 구조 설계

4> 화면목록 정의

5> 상세 화면 설계

 

웹 호환성 : 전자정부 서비스 호환성 준수지침에 의거하여 웹표준과 웹호환성을 준수하는 기준

웹 접근성 : 장애인과 비장애인이 동등하게 웹사이트 콘텐츠에 접근할 수 있도록 보장하기 위한 한국형 웹콘텐츠 접근성 지침으로 24개 기준으로 구성되어 있음

ex> 대체 텍스트, 멀티미디어 자막 제공, 명확한 지시사항 제공

웹접근성 준수 진단도구 : OpenWax, Colour contrast Analyser, color contrast checker, 웹 브라우저 개발자 도구