6장 화면설계

1. 화면설계

   1) UI(User Interface)(★) : 사용자와 시스템 사이, 의사소통 할 수 있도록 물리적 가상매체

      ** UI에 CG는 절대 NO **

       - CLI(Command Line Interface) : 명령과 출력이 텍스트로 이뤄지는 인터페이스(Dos 창)

       - GUI(Graphic User Interface) : 아이콘, 메뉴를 마우스로 선택해 작업 수행하는 인터페이스(윈도우11)

       - NUI(Natural User Interfacd) : 사용자의 말,행동으로 기기조작(아이언맨 슈트 제작)

       - OUI(Organic User Interfacd) : 자연 그대로의 상태를 반영해 기기조작(내 손목에 시계가 생기고, 전화기도 되고)

 

2. 설계원칙(★)

   ** 설계원칙은 학연이 직효야 **

   1) 직관성 : 쉽게 이해하고 사용

   2) 유효성 : 정확하고 완벽하게 사용자의 목표 달성

   3) 학습성 : 쉽게 배우고 사용 가능

   4) 유연성 : 요구사항 최대 수용 / 실수 최소화

 

3. UI설계 지침

   1) 사용자 중심 : 사용자가 이용하기 쉽고 편하게 이해를 바탕으로 설계

   2) 일관성 : 조작방법 사용자가 기억하기 빠르고 쉽게 설계

   3) 단순성 : 간단하게 작동, 인지적 부담 최소화

   4) 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측 가능

   5) 가시성 : 주요 기능은 메인 화면에 노출, 쉬운 조작 가능

   6) 표준화 : 디자인 표준화, 쉽게 사용 가능

   7) 접근성 : 직무, 연령, 성별 등 다양한 계층 수용

   8) 명확성 : 사용자가 개념적 인지가 쉽게

   9) 오류 발생 해결 : 사용자가 오류에 대해 정확하게 인지 가능

 

4. UI 요구사항 구분

   1) 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항

   2) 비기능적 요구사항 : 사용성, 효율성, 시스템 환경 등에 대한 요구사항

 

5. UI표준 : 화면 구성에 대한 규약

              (MS Vista UX Guideline, Apple OS X GUideline)

   1) UX(★) : 시스템 사용하면서 사용자가 느낀 직/간접적 경험

   2) UI(★) : OS확인, 웹 브라우저, 모니터 해상도, 프레임 시트

   3) 리치 클라이언트(★) : 소프트웨어 실행을 클라이언트가 책임지는 기술

   4) 씬 클라이언트(★) : 소프트웨어 실행을 서버가 책임지는 기술

   5) SSO(Single Sign On)(★) : 한 번의 로그인으로 다른 사이트에 접속해 이용하는 방법

 

6. UI지침 개념 : UI표준에 따라 UI설계, 개발 시 따르는 가이드라인

   1) 주요 개발 기법(★)

       - 3C분석 : 고객, 경쟁사, 자가분석

       - SWOT : 강, 약, 기회, 위협

       - 시나리오 플래닝 : 상황변화 예측, 다양한 시나리오 설계

       - 사용성 테스트(★) : 미리 작성된 시나리오 맞춰 과제 수행한 후 답하는 테스트

       - 워크숍 : 회의, 세미나

   2) 사용자 요구사항 도출(★)

       - 페르소나 : 가상의 사용자

       - 브레인스토밍

       - 요구사항 매트릭스 : 페르소나 목적을 기준, 데이터 요구/기능의 요구사항표

       - 정황 시나리오 : 요구사항 정의에 사용, 초기 시나리오

 

7. UI 설계도구(★)

   1) 스토리보드(정적) : UI 화면 설계를 위해 구축하는 서비스와 정보가 수록된 문서

   2) 와이어 프레임(정적) : 화면 단위, 대략적인 레이아웃만 구성

   3) 프로토타입(동적) : 정적인 화면에 동적인 요소를 적용, 실제 구현된 것 처럼 시뮬 가능한 모형

 

8. UI 흐름 설계

   1) UI 설계서 구성 : UI 설계서 표지, 개정이력, UI요구사항 정의서 등

   2) 유스케이스(★) : 시스템이 액터(사용자)에게 제공하는 기능, 시스템 요구사항, 시스템 기능

 

9. 설계 도구 분류(★)

   1) 화면 설계 도구 

      - 파워 목업

      - 발사믹 목업

      - 카카오 오븐

   2) 프로토타이핑 도구

      - UX 핀

      - 액슈어

      - 네이버 프로토나우

   3) UI 디자인 도구

      - 스케치

      - 어도비 익스피리언스