정보처리기사 실기 - 5. 화면 설계(2) /흐름설계/스토리보드/고객여정지도/HTML5

NCS 정보처리기사

2) UI 설계하기

- UI 흐름 설계

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

-> 한 가지의 업무를 수행하는데 필요한 화면과 일련의 흐름을 이해시킴

-> 화면의 용도를 이해시킴

 

- UI 흐름 설계 수행 절차

- 업무 흐름 분석

- 화면에 표현되어야 할 기능 정의

• 시스템 입력
• 시스템 풀력
• 어떤 데이터를 저장할 건지
• 어떤 연산을 수행할지

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

 -> 각 단위 화면 간의 선후행 분석

 -> 각 화면 간의 흐름을 정의

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

 

- UI 상세 설계

- UI 요구사항 확인

 

- UI 구조 설계 -> UI 요구사항들과 UI 프로토타입에 기준해 UI 구조 설계

 

- 메뉴 구조 설계

 

- 화면 목록 정의 

 -> 화면 흐름도를 기반으로 각 화면을 ID, 화면명, 화면 설명등이 포함되도록 화면 목록을 정리

 

- 상세 화면 설계

-> 화면 레이아웃 설계

-> 화면 구성 요소 작성 -> 각 화면에 표시되는 항목에 대한 이름과 유행, 표시 내용등을 기술

-> 화면 조작 문서 작성

-> 화면 입출력 정보 정의 -> 화면 단위로 입출력하는 정보에 대한 값, 형태, 입출력 조건등을 기술

-> 화면 이벤트 정의 -> 버튼이 클릭되었을 때 처리 내역을 기술

 

- UI 설계서 검토 및 보완

UI 스토리보드를 활용해 페이퍼 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인

-> 각 화면의 레이아웃과 인터랙션의 대부분이 적용된 고수준의 프로토타입을 활용

 -> UI 사용성 평가 수행 -> 개선사항을 지속적으로 반영

 

- UI 설계서 개정 이력 작성

UI 설계서를 처음 작성 시에는 첫번째 항목으로 '초안 작성'을 포함시키고 그에 해당 되는 초기 버전을 1.0으로 설정

-> 변경 및 보완을 할 경우 각 항목을 추가하고 버전을 0.1씩 더함

-> 완성이 되었다고 판단한 경우, 버전을 x.0으로 바꾸어 설정

 

- UI 설계 및 구현시 고려 사항

-> 사용자 중심의 UI/UX 설계

 

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

고객 여정 지도 : 고객이 제품 또는 서비스를 사용할 때 경험하게 되는 요소들을 고객의 경험에 따라 나열하게 만드는 도구

 

- 필요성

• 고객 경험 이해
• 조직의 판단 기준

 

- 고객 여정지도의 요소

• 스테이지 : 일련의 고객의 행동이나 이벤트들의 집합
• 타임 라인
• 행동
• 터치 포인트 : 제품/서비스와 고객과의 상호작용이 일어나는 부분
• 정량적 정보 : 각 단계나 행동에 나타나는 고객들의 생각이나 감정

 

- 웹 호환성 준비

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

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

- 웹 호환성 : 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것

 

- HTML 5 활용

HTML 4.01, XHTML 1.0, DOM 레벨2 HTML에 대한 표준 -> 액티브 X 없이 브라우저에서 멀티미디어 콘텐츠를 쉽게 볼 수 있게 하는 것을 목적

 

- HTML5의 주요 특징

• 하위 호환성
• 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화됨 -> 문서의 크기가 작아짐
• text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공
• 플러그인 없이도 비디오와 오디오를 비롯한 미디어 재생 가능

 

- 장애인을 위한 웹접근성 준수

• 인식의 용이성
• 운용의 용이성
• 이해의 용이성
• 견고성의 용이성

 

 

정보처리기사 실기 - 6. 애플리케이션 테스트 관리(1) /테스트케이스/정적•동적테스트/화이트박