Forever Learning!
If there is any mis-information please send message.

2 분 소요

화면설계 A

사용자 인터페이스(UI)

1. 사용자 인터페이스

  • 사용자와 시스템 간의 소통을 원활하게 하는 것.
  • 물리적 제어 / 구성 / 기능

2. 사용자 인터페이스의 특징

  • 최소한의 노력으로 원하는 결과를 얻을 수 있음
  • 시간 투자를 줄일 수 있음
  • 이해도를 높일 수 있음

3. 사용자 인터페이스의 구분

  • CUI - Command Line
  • GUI - Graphic User
  • NUI - Natural User Interface

4. 사용자 인터페이스의 기본 원칙

  • 직관성 - 쉽게 이해
  • 유요성 - 목적이 정확하고 완벽하게 달성을 할 수 있어야함
  • 학습성 - 모두가 쉽게 배울 수 있어야함
  • 유연성 - 사용자의 요구를 수용하고 실수를 최소화

5. 사용자 인터페이스의 설계 지침

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

UI 표준

웹스타일 가이드

  • 스타일 가이드 : 각종 규칙들의 기준이 되는 집합
  • Introduction
  • Basic Rulse : 폰트, 컬러 등
  • Layout : 시안
  • Elements : 요소

정책

  • 웹 스타일 가이드 운영 정책
  • 조직의 IDENTITY 유지 정책

기본 환경

  • 용량 규정
    • 메인화면 전체 페이지 및 이미지 사이즈
    • 서브 화면 전체 페이지 및 이미지 사이즈
    • 공통아이콘 이미지 사이즈

UI

한국형 웹 콘텐츠 접근성 지침

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

전자정부 웹 표준 준수 지침

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

UI 지침

사용자 경험의 고려사항

  • 사용 대상, 환경, 목적, 빈도, 입력 최소화, 자동완성 기능

핵심 기능의 고려사항

  • 메뉴 구조를 단순화하고 간결한 정보 제공

호환성 확장성의 고려사항

  • 3개 이상의 브라우저에서 동등한 서비스를 제공

정보 소외계층의 접근성

  • 장애인/고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침

일관성

이미지

  • 전송 속도, 용량 최소화, 사회적 갈등(x), 저작권

기타 설계 지침

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

스토리보드의 개념

  • 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
  • UI 화면설계 구분
    • 개념 (스토리보드/와이어프레임/프로토타입)
    • 도구 (PPT/키노트/네이버/HTML&CSS)

스토리보드 작성 절차

  • 1단계 : 메뉴 구성도 만들기
  • 2단계 : 스타일 확정
  • 3단계 : 설계하기

화면설계 B

UI 설계도구

UI 설계도구

  • 와이어프레임 - 기획초기, 개략적, 뼈대
  • 목업 - 정적으로 UI를 나타내는 것
  • 스토리보드 - 설명, 페이지 간 이동 흐름, 최종적 참고
  • 프로토타입 - 동적으로 UI를 나타내는 것
  • 유스케이스 - 사용자 측면에서 요구사항을 나타내는 것

UI 요구사항 확인

UI 요구사항 확인

  • 목표 정의 - 클라이언트의 요구사항
  • 활동 사항 정의
  • UI 요구사항 작성 - 실사용자 중심으로 작성해야함

요구사항 요소 확인

  • 데이터 요구
  • 기능 요구
  • 제품/서비스 품질
  • 제약 사항

정황 시나리오 작성

요구사항 작성

품질 요구사항

품질 요구사항

  • ISO/IEC 9126 : 기능성, 신뢰성, 효율성, 유지보수성, 이식성
  • ISO/IEC 25010의 품질특성 : 기능성, 사용성, 이식성, 유지보수성, 기능 적합성, 실행 효율성, 호환성, 보안성

기능성

  • 적절성/정합성 - 목적 달성
  • 정밀성/정확성 - 정확 산출
  • 상호 운용성 - 다른 시스템
  • 보안성 - 접근 권한
  • 호환성 - 기능

신뢰성

  • 성숙성 - 결함으로 인한 고장을 피해 갈 수 있는 것
  • 고장 허용성 - 성능 유지
  • 회복성 - 복구

사용성

  • 이해성 - SW 사용 방법 이해
  • 학습성 - 학습 능력
  • 운용성 - 운용 제어
  • 친밀성 - 재사용

효율성

  • 시간 효율성 - 적절한 시간 처리
  • 자원 효율성 - 적절한 자원 소모

유지보수성

  • 분석성 - 고장원인 식별가능한가
  • 변경성 - 수정을 쉽게 할 수 있는가
  • 안정성 - 예기치 못한 상황을 최소화 시키는가
  • 시험성 - 변경 검증 가능한가

이식성

  • 적용성
  • 설치성
  • 대체성
  • 공존성 - 자원공유

화면설계 C

UI프로토타입

  • 개요 - 핵심적 기능이 있는 간단한 모형, 사용자 요구가 만족할때까지 개선 및 보완을 해줘야함
  • 장점 - 사용자를 이해 및 설득 쉬움
  • 단점 -

참고