05. 화면설계 A - TOTOLII/study GitHub Wiki

사용자 인터페이스(UI)

User Interface의 약자로 사용자, 시스템, 물리적 제어(전달), 구성, 기능(편리, 간편)

  • 사용자 인터페이스의 특징 시간과 노력을 절약할 수 있고, 이해도를 높힐 수 있다.

  • 사용자 인터페이스의 구분
    CLI(Command Line Interface) : 텍스트로 출력되는 인터페이스
    GUI(Graphic User Interface) : 아이콘 메뉴, 마우스로 조작할 수 있는 인터페이스
    NUI(Natural User Interface) : 유저의 말이나 행동으로 조작할 수 있는 인터페이스

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

    1. 직관성 : 사용자는 누구든지 쉽게 이해할 수 있어야 한다.
    2. 유효성 : 목적이 정확하고 완전하게 달성 할 수 있어야 한다.
    3. 학습성 : 누구나 쉽게 배울 수 있어야 한다.
    4. 유연성 : 사용자의 요구사항을 최대한 수용할 수 있어야 하고 실수를 최소화 할 수 있어야 한다.
  • 사용자 인터페이스의 설계 지침(고려할 사항은 무엇이냐?)

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

웹 스타일 가이드 구성(사례)

  1. 스타일 가이드 : 각종 규칙들의 기준이 되는 집합
  2. introduction : 웹 스타일의 기본 활용, 적용 범위를 규정
  3. Basic Rules : 폰트, 컬러 등
  4. Layout : 시안
  5. Elements : 텍스트, 아이콘 버튼 테이블에 대한 내용
  • 정책
    웹 스타일 가이드 운영 정책 : 계속적인 업데이트가 필요
    조직의 IDENTITY 유지 정책 : 서비스 성격에 맞춰서 디자인 하는것

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

  • 한국형 웹 콘텐츠 접근성 지침
    장애인이든 비장애인이던지 다 쉽게 접근할 수 있게 만든 것

    • 인식의 용이성 대체 텍스트, 멀티미디어 대체수단, 명료성

    • 운용의 용이성
      키보드 접근성, 충분한 시간제공, 광과민성 발작 예방, 쉬운 네비게이션

    • 이해의 용이성
      가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움

    • 견고성
      문법 준수, 접근성

  • 전자정부 웹 표준 준수 지침

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

UI 지침

  • 사용자 경험(UX)의 고려사항
    사용 대상, 환경, 목적, 빈도

  • 핵심 기능의 고려사항
    메뉴 구조를 단순화하고 간결한 정보 제공

  • 호환성, 확장성의 고려사항
    3개 이상의 브라우저에서 동등한 서비스를 제공

  • 정보 소외계층의 접근성
    장애인, 고령자 등의 정근 및 이용 편의 증진을 위한 지침

  • 일관성
    용어사용

  • 이미지
    전송 속도를 위해 용량을 제한하고,
    사회적 갈등이 있는 이미지는 사용하지 않아야 한다.
    저작권에 관련된 이미지도 조심해야 한다.

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

  • 스토리보드의 개념
    디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
    UI 화면설계 구분은 개념 스토리보드(설계 산출물을 보는 것)와 도구(PPT, 키노트)으로 나눌수 있다.

  • 스트리보드 작성 절차
    1단계 : 메뉴 구성도 만들기
    2단계 : 스타일 확정
    3단계 : 설계하기