[2020 정보처리기사 실기 - 화면 설계] 2. UI 설계하기

 

 

 

 

1) UI 흐름 설계

   - 업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 우치와 흐름을 흐름도 형식으로 표현

   - 목적 : 한 가지 업무 수행 시 필요한 화면과 일련의 흐름을 이해, 화면의 용도나 역할과 화면 흐름으로 화면 용도 이해

   - UI 흐름 설계 수행 절차

      업무 흐름 분석

      화면에 표현되어야 할 기능 정의 : 구축할 시스템의 기능적 요구사항 분석, 화면에 도출될 단위 기능 목록 상세내역 정리

      업무흐름 기반으로 화면 흐름 정의

      기능 분석을 통해 공통적으로 필요한 기능 및 양식 정의

 

2) UI 상세 설계

   - UI 요구사항 확인 : 요구사항 최종 확인, 기능과 제약조건 확인, 구조와 디자인/ 동선과 편리함 위주

   - UI 구조 설계 : 요구사항 재확인, 프로토타입 재확인 후 UI 구조 설계

   - 메뉴 구조 설계

   - 화면 목록 정의 : 각 화면을 ID, 화면명, 화면설정 등이 포함되도록 화면 목록 정리

   - 상세 화면 설계 : 화면 레이아웃 설계, 화면구성요소 작성(이름, 유형, 표시내용), 화면 조작 순서 작성, 입출력 정보/화면 이벤트 정의

 

3) UI 설계서 검토 및 보완

   - UI 설계 결과 검토 : 2~3번 검토, UI 스토리보드를 활용해 종이 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인

   - UI 검토결과를 반영하여 보완 : 위의 사용자 평가 결과를 토대로 UI 설계 보완

   - UI 시연을 통한 사용성에 대한 검토 및 검증을 수행 

 

4) UI 설계서 개정 이력 작성

   - UI 설계서 처음 작성 시에는 첫 항목으로 '초안 작성' 포함, 버전은 1.0

   - 여러 회의를 거쳐 회의 내용을 반영하여 변경 보완 시 버전에 0.1씩 더함

   - 변경 보완이  충분히 이루어져 완성이 되었다고 판단할 경우 버전을 X.0으로 바꾸어 설정

 

5) UI 설계 및 구현 시 고려사항

   - 사용자 중심 UI/UX 설계

   - 고객을 이행하기 위한 고객 여정지도 작성

      고객이 제품/서비스 사용 시 경험하게 되는 요소를 경험에 따라 나열

      필요성 : 고객 경험 이해, 조직의 판단 기준

      요소 : 스테이지(이벤트 집합), 타임라인(경험의 흐름 시간 순), 행동, 터치포인트(상호작용 부분), 정량적 정보(단계별 고객의 생각)

   - 웹 호환성 준수 

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

      웹표준은 국제 표준화기구에서 서술하고 정의하는 공식 기술표준 의미

      웹호환성은 서비스 이용자 단말기의 HW/SW 환경이 다른 경우 동등한 서비스 제공

   - HTML5 활용

     HTML4.01, XHTML 1.0, DOM레벨 2 HTML에 대한 표준, 멀티미디어 컨텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있음

     주요특징 : 하위 호환성, 간단한 문법, 디자인 간소화, 오류를 쉽게 처리, 플러그인 미디어 재생가능

                          text/html MIME 타입을 사용하면서도 SVG및 MathML을 인라인으로 활용할 수 있는 기능

   - 장애인을 위한 웹 접근성 

      웹접근성 : 장애인과 비장애인이 동등하게 웹사이트 컨텐츠에 접근할 수 있도록 보장하기 위한 한국형 웹컨텐츠 접근성 지침 24개

      진단 기준 : 대체 택스트 제공, 멀티미디어 자막 제공, 색에 무관한 컨텐츠 인식, 명확한 지시사항 제공, 텍스트 컨텐츠의 명도 대비, 

                           자동재생금지, 컨텐츠 간의 구분, 키보드 사용 보장, 초점 이동, 조작 가능, 응답시간 조절, 정지기능 제공,

                           깜빡임 번쩍임 사용제한, 반복 영역 건너뛰기, 제목 제공, 적절한 링크 텍스트, 기본언어 표시, 사용자 요구에 따른 실행,

                            컨텐츠의 선형 구조, 표의 구성, 레이블 제공, 오류 정정, 마크업 오류 방지, 웹 어플리케이션 접근성 준수

      진단 도구 : openWAX, colour contrast analyser, color contrast checker, 웹브라우저 개발자 도구

 

 

---