[과정평가형 정보처리 산업기사] UI 설계 확인하기

UI

UI란 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을

높여주기 위한 것.

• CLI ( Command Line Interface : 명령어 라인 인터페이스 ) 
  • 사용자가 명령어를 텍스트로 입력하면 컴퓨터가 실행하는 형태
• GUI ( Graphical User Interface : 그래픽 유저 인터페이스 ) 
  • 사용자가 컴퓨터의 자원을 쉽게 사용할 수 있도록 그래픽으로 조작할 수 있게 한 UI
• NUI (Natural User Interface : 자연어 유저 인터페이스 ) 
  • 몸짓 , 말소리만으로도 IT 기기를 사용할 수 있는 사용자 인터페이스

UI 표준 및 지침

• 표준 : 시스템 전반에 걸쳐 모든 UI에 공통적으로 적용되는 내용 . 화면 구성 내용 ,화면 이동이 포함
• 지침 : UI 개발 과정에서 UI 요구사항이나 구현 제약사항 등 지켜져야 할 공통의 조건을 의미.

소프트웨어 아키텍처 ( Software Architecture )

소프트웨어 구성요소 중 외부에 드러나는 요소 특성과 요소들 간의 관계를 표현한 것.

http://blog.skby.net/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98sw-architecture/

소프트웨어 아키텍처(SW Architecture) > 도리의 디지털라이프

제약 사항 ( Constraints Requirements )

 

• 시스템을 설계하거나 구현할 때 관련되는 기술이나 표준, 규정
• 개발과 관련된 정책이나 업무 규칙. 
  • 기술 제약사항 : ex) : 소프트웨어나 프로그램 사용할 것 , 데이터 사용과 관련된 제약
  • 표준 적합 제약사항 : 개발시 적용할 업무 영역의 표준이나 법규.

UI 개발 도구 분류

1. 화면 설계

파워 포인트 :  -

와이어 프레임 : 기획 단계에서 페이지 레이아웃이나 화면이동, 구성요소 등을 기술한 문서.

스토리 보드 : 와이어프레임의 내용에 설명을 포함한 설계 문서

목업 : 설계 단계에서 실제 화면과 같은 형태의 모형

좌: 파워포인트( 파워 목업 ) 중: 와이어프레임 우: 스토리보드

화면 설계서를 작성 할 때 체크사항.

• 메뉴 구성과 이미지 등이 웹 페이지 특성에 적절한지.
• 화면을 구성하는 문자열이나 내용이 적절한지.
• 화면 구성요소들이 화면에서 조화를 이루는지.
• 화면을 구성하는 항목들이 표현하는 색상과 색감이 적절한지.

2. 프로토타입(Prototype)

인터랙션(Interaction : 상호작용)이 포함되어 테스트가 가능한 형태.

 

3. UI 디자인

화면의 모양이나 기능 등을 표현하는 것.

 

UI 설계서

웹 사이트의 페이지 구성요소를 기록한 설계도 = UI 화면 설계 도구( 와이어프레임, 스토리보드 등)로 작성된 설계도.

 

1. UI 설계 내용을 분석하여 전체적인 화면과 폼의 흐름을 확인.

화면 구성의 계층적 구조 - 출처 NCS

2. 메뉴의 위치 및 배열 확인, 버튼을 선택하였을 때 필요한 화면이 나타나는지 등 화면 연결 흐름 확인.

3. UI 설계 내용 확인하며 확인해야 할 사항.

UI설계 확인 내용 예시 - 출처 NCS

4. 오류가 발견될 경우 설계 내용 수정위한 설계 팀과 협의.

 

파워포인트 이미지 출처

https://m.blog.naver.com/searphiel9/221812457592

스토리보드 이미지 출처

https://slowalk.com/2530

와이어 프레임 이미지 출처 

https://blog.wishket.com/%ED%99%94%EB%A9%B4%EC%84%A4%EA%B3%84%EC%84%9C-wireframe%EB%9E%80-%ED%8F%89%EC%83%9D-%EC%8D%A8%EB%A8%B9%EB%8A%94-%EC%A0%9C%EC%9E%91-%EA%BF%80%ED%8C%81/