1-2 화면설계

사용자 인터페이스 (UI)

사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어.

요즈음에는 기능, 정보 전달을 위한 표현 방법 등으로도 사용됨.

 

특징

• 변경이 자주됨.
• 편리하고 가독성을 높임
• 작업 기능을 구체적으로 보여줌
• 설계 전 소프트웨어 아키텍처 숙지해야 함

종류

• CLI : 텍스트 형태
• GUI : 이미지 형태
• NUI : 말이나 행동으로 조작

원칙

• 직관성 : 쉽게 이해
• 유효성 : 정확하고 완벽
• 학습성 : 쉽게 배우고 익힘
• 유연성 : 사용자의 요구사항 최대한 수용

설계 지침

사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류발생 해결

 

UI 표준 및 지침

웹의 3대요소가 고려되었는지 확인.

• 웹 표준 : HTML, JavaScript 등에 대한 규정
• 웹 접근성 : 누구나 어떤 환경에서도 이용 가능
• 웹 호환성 : 하드웨어, 소프트웨어가 다른 환경에서도 이용 가능

한국형 웹 콘텐츠 접근성

• 인식의 용이성 : 대체 텍스트, 멀티미니어 대체 수단, 명료성
• 운용의 용이성 : 키보드 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션
• 이해의 용이성 : 가독성, 예측 가능성, 논리성, 입력 도움
• 견고성 : 문법 준수, 접근성

전자정부 웹 표준 준수 지침

• 내용의 문법 준수
• 내용과 표현의 분리
• 동작의 기술 중립성 보장
• 플러그인의 호환성
• 콘텐츠의 보편적 표현
• 운영체제에 독립적인 콘텐츠 제공
• 부가 기능의 호환성 확보
• 다양한 프로그램 제공

UI 설계 도구

분류	내용
와이어프레임	기획 초기에 작성, 스케치, 개략적 레이아웃
목업	디자인을 추가하여 와이어프레임보다 실제화면과 유사한 형태의 정적 모형
스토리보드	와이어 프레임에 설명, 페이지 이동등을 추가한 동적 모형
프로토타입	와이어 프레임에 인터렉션을 추가하여 테스트 가능한 동적 모형
유스케이스	사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술

UI 요구사항 확인

• 목표 정의 : 사용자들을 대상으로 인터뷰 진행, 요구사항 수집
• 활동 사항 정의 : 필요한 예산과 일정 등 앞으로 해야 할 활동 사항 정의
• UI 요구사항 작성 : 실사용자 중심으로 수집된 요구사항을 검토 분석하여 작성.
  • 요구사항 요소 확인 : 데이터, 기능, 품질, 제약 사항
  • 정황 시나리오 작성 : 순차적으로 묘사하는 초기 시나리오, 경험이 풍부한 사람이 좋음.
  • 요구사항 작성 : 정황 시나리오를 토대로 작성

품질 요구사항

소프트웨어의 기능, 성능, 만족도 등 얼마나 요구사항에 충족하는가

 

ISO/IEC 9126 : 소프트웨어의 품질 특성과 평가를 위한 표준 지침

• 기능성 : 만족하는 기능 제공
• 신뢰성 : 오류 없이 수행
• 사용성 : 다시 사용하고 싶음
• 효율성 : 자원의 효율성
• 유지보수성 : 새로운 요구사항 반영
• 이식성 : 다른 환경에 대한 이식

UI 프로토타입 제작 및 검토

프로토타입 은 테스트가 가능하다.

• 장점 : 사용자가 쉽게 확인, 개발시간 단축, 오류 발견 용이
• 단점 : 반복적인 개선 및 보완작업, 필요 이상 자원 소모가능성, 중요한 작업 생략 가능성

종류	내용
페이퍼 프로토타입	스케치, 그림 등 손으로 직접 작성 빠르고 저렴하게 생성할 수 있지만, 테스트하기 어렵고 공유가 어려움
디지털 프로토타입	파워포인트 등 프로그램 사용하여 작성 테스트가 쉽고 여러사람에게 공유 가능, 하지만 공유된 사람들이 사용법을 알아야 함

고려사항

• 계획 : 프로젝트 분석 전, 환경 마련하고 이슈를 취합하며 해결방법 제시
• 작성 : 목표를 확인하고 최소한의 기간과 비용 확인

제작 단계

• 1단계 : 요구사항 분석
• 2단계 : 드로잉 작업
• 3단계 : 사용자 확인, 추가 및 수정
• 4단계 : 작성 및 수정 보완, 3단계로 이동

UI 설계서 작성

• 표지 작성
• 개정 이력 작성
• 요구사항 정의서 작성
• 시스템 구조 작성
• 사이트 맵 작성
• 프로세스 정의서 작성
• 화면 설계

유용성 평가

실행 차 : 사용 의도 파악, 행위 순서 규정, 순서대로 실행해봄

평가 차 : 키 조작에 대한 결과 지각, 변화된 시스템 인지, 사용자와 시스템간의 유사정도 확인

 

UI 상세 설계

UI 설계서를 바탕으로 시나리오 작성

공통적으로 쓰일 UI 요소와 인터랙션 등을 정의하고, 레이아웃 기능 정의한다.

인터랙션의 흐름을 정의하여 순서 분기 조건 루프 등을 명시한다.

예외 상황에 대비한 다양한 케이스도 함께 정의한다.

• 완전성 : 누락되지 않음
• 일관성 : 목표와 요구사항 스타일 등이 일관적
• 이해성 : 누구나 쉽게 이해
• 가독성 : 읽기 쉬움
• 수정 용이성 : 수정이나 개선이 쉬움
• 추적 용이성 : 변경 사항을 쉽게 추적

HCI / UX / 감성공학

HCI : 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하는 학문

UX : 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험

감성공학 : 사용자의 감성에 알맞도록 설계 및 제작하는 기술