1-3 화면설계

UI 요구 사항 확인

 

1. UI 요구 사항

 

UI(User Interface)

개념	사용자가 어떤 방식으로 응용 프로그램을 이용하는가를 설계하는 작업 사용자와 응용 프로그램 사이에 접근 방식, 레이아웃 구조, 색상이나 모양등의 시잒적인 것 사용자와 시스템 사이에서 의사소통의 매개체 일시적이거나 영구적일 수 잇으며 물리적 혹은 가상적 인터페이스 메개체 컴퓨터 과학과 인간의 상호 작용에서 응용 프로그램이 보여주는 화상, 문자, 소리 정보 조작 사용자가 시스템 조작하는 입력 수단과 입력 수단으로 얻는 결과 표시하는 출력 수단으로 나뉨
발전	단순 상호 작용(입력한 결과 처리 못하거나 오류 발생) 시각, 청각, 촉각, 지능의 데이터까지 상호 작용 데이터 내용, 의미까지 상호 작용
종류	TUI(Text UI) 텍스트 사용자 인터페이스 CLI(Command Line Interface) 명령 줄 인터페이스 GUI(Graphic UI) 그래픽 사용자 인터페이스 WUI(Web base UI) 웹 기반 사용자 인터페이스 Touch UI 터치 사용자 인터페이스
UI 분야	물리적 제어 기능적 제어 전체 구성 제어
UI 요구사항 확인	UI 표준/지침을 근거로 요구사항 수용 UI 요구 사항 확인 UI 요구사항 반영할 스토리 보드/와이어프레임/프로토타입 개발 프로토 타입 활용하여 UI/UX 개발과 적용할 UI 적정성 검토

 

 

UX(User Experience)

개념	사용자 경험이란 뜻으로 프로그램에 무엇이 있ᅌᅥ야 하는지 전체적 정보 수집하여 설계하는 작업 객관적 데이터 이용하여 효과적 방안 찾는 기술
고려 사항	UI로 사용할 대상, 사용 환경, 사용 목적, 사용 빈도 우선 파악 서비스 이용 방법으로 직관적으로 파악할 수 있는 쉬운 방법 선택 웹이나 모바일 서비스 특성에 적합한 디자인 선택 사용자 입력 최소화, 자동 완성 기능 추가 사용자 입력 실수 원래 상태로 되돌릴 수 있는 기능 추가

 

2. UI 표준

 

웹 스타일 가이드 구성

• Instruction
• Basic rules
• Layout
• Element

 

Layout 구성 요소

• Indicator: 서비스 상태 알림/수신 상태/네트워크 연결 상태/배터리 상태 등 아이콘 제공
• Header: 회사 로고, 사이트명
• Navigation: 웹 페이지 내 경로 위치
• Contents area: 정보 내용
• Button: 웹 페이지 메뉴 선택
• Footer: 저작권 정보, 전화번호, E-메일

 

기본 환경

용량 규정	메인 화면의 전체 페이지 용량 1MB 이내 메인 화면 이미지 용량 500KB 이내 서브 화면 전체 페이지 용량 200KB 이내 서브 화면 이미지 용량 100KB 이내 공통 사용 이미지 용량 30KB 이내
PC 웹 브라우저 규정	해상도 1280*1024 메인 페이지 크기 가로 1110px 이내, 세로는 가변 영역 처리 인터넷 익스플로러는 8.0 버전 이상 지원 화면 중앙 정렬 기본 가로 스크롤바 가능한 사용하지 않기 세로 스크롤바는 메인 페이지 2개 이하, 서브 페이지 3개 이하 프레임은 가능한 사용하지 않기
모바일 웹 브라우저 규정	해상도 640*480 메인 페이지 크기 가로 600px 이내, 세로 가변 영역 처리 화면 중앙 정렬 기본 가로, 세로 스크롤바, 프레임 미사용
태블릿 웹 브라우저 규정	해상도 1024*768 메인 페이지 크기 가로 825px 이내, 세로 가변 영역 처리 화면 중앙 정렬 기본 가로, 세로 스크롤바, 프레임 미사용

 

 

 

3. UI 지침

 

개념	웹이나 모바일 서비스 구축 시 효율적인 정보 전달 가능하게 하기 위해 UI 설계에서 지켜야할 세부사항 규정
지침	핵심 기능 호환성, 확장성 정보 소외 계층의 접근성 일관성이미지 사용자 중심 단순성 결과 예측 가시성: 주요 기능 메인 화면에 노출하여 쉬운 조작 가능하도록 표준화 접근성 명확성 오류 발생

 

 

 

4. 스토리 보드

 

개념	디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
작성 절차	메뉴 구성도 만들기 스타일 확장하기 설계하기
wireframe	이해 관계자들과의 화면 구성 협의하거나 서비스의 간략한 흐름 공유 위해 화면 단위 레이아웃 설계

 

 

 

UI 설계

 

1. UI 설계

 

개념	UI 요구 사항과 UI 표준 및 지침 기준으로 UI 설계 화면의 전체 Form 설계, 제약 사항을 화면과 Form에 적용하고 흐름 설계에 반영 사용자 편이성 고려한 메뉴 구조 설계
설계 원칙 직유학유	직관성: 누구나 쉽게 이해하고 사용 가능 유효성: 사용자 목적 정확히 전달 학습성: 누구나 쉽게 배우고 익힘 유연성: 사용자 요구사항 최대 수용
개발 시스템의 필수 기능	사용자 명령을 받아들일 Prompt 기능 사용자 명령 입력의 검증 기능 에러 처리와 에러 메시지 처리 기능 도움말 지원 기능
설계 절차	문제 정의 사용자 모델 정의 작업 분석 컴퓨터 오브젝트(물리적 입/출력 장치) 및 기능 정의 사용자 인터페이스 정의 UI 설계 평가 GOMS 휴리스틱 사용성 공학
설계 도구	문서 작성 도구 및 드로잉 전문 도구 화면 설계를 위한 전문 도구 UI 설계 및 개발 전문 도구 해당 UI 플랫폼에 포함된 도구 Interaction 도구

 

 

2. UI 흐름 설계

 

• 화면에 구현 기능 정의
  • 기능적 요구사항
    • 입출력 데이터 설계, 명세화
    • 데이터 등록, 수정, 삭제 등의 기능 설계, 명세화
    • 이벤트에 따른 수행 기능 설계, 명세화
  • 비기능적 요구 사항
    • 플랫폼 및 적용 기술 등의 환경적 요구 기능 명세화
    • 처리 속도, 용량 등의 성능 명세화
    • 제약사항 명세화
• 화면 입력 요소 파악
• UI 요구사항 유스 케이스(시스템의 행동) 설계

 

 

3. 상세 설계

 

• 메뉴 구조 설계
• UI 검토 및 보완

 

 

 

4. UI 감성 공학

 

개념	인간 중심의 설계 인체 특성이나 감정을 UI 설계에 최대한 반영 감성을 과학적 측면으로 분석하여 UI 설계, 환경 설계, 개발 등을 목적으로 함
감성 공학 분야	생체 측정 기술 오감 센서 및 감성 처리 기술 감성 디자인 기술 마이크로 가공 기술
감성 공학의 접근 방법	감성 공학 1류 인간 감성의 표현 특성 강조 감성을 형용할 수 있다 보고 이미지로 측정 이미지를 조사, 분석하여 시스템 디자인 요소와 연계 감성 공학 2류 심리적 특성 강조 연령, 성별 등의 특성과 생활 방식을 개인별 이미지로 구체화 감성의 개인성 중시하는 문화적 감성의 일부 반영 감성 공학 3류 생리적 특성 강조 공학적 접근으로 감각 측정하로 자료를 바탕으로 수학적 모델 구축하여 활용 시스템의 물리적 특성과 객관화된 감각 지표 사이의 연관성 분석하여 시스템 설계ᅌᅦ 응용

 

 

 

 

 

Reference

https://book.naver.com/bookdb/book_detail.naver?bid=17134434 

이기적 정보처리기사 필기 기본서