WEB/기타
정보처리기사 요약 정리 - 6장 화면설계
silverline79
2024. 7. 12. 21:02
6장 화면설계 (0/1/1)
▶ 사용자 인터페이스 (UI, User Interface)
사용자와 시스템 간의 상호 작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어
CLI | 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스 |
GUI | 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스 |
NUI | 사용자의 말이나 행동으로 기기를 조작하는 인터페이스 |
▶ 사용자 인터페이스의 기본원칙 [ 직유학유 ] ★★★★★
직관성 | 누구나 쉽게 이해하고 사용할 수 있어야 함 |
유효성 | 사용자의 목적을 정확하고 완벽하게 달성해야 함 |
학습성 | 누구나 쉽게 배우고 익힐 수 있어야 함 |
유연성 | 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함 |
▶ UI 설계 도구 [ 와목스프유 ] ★★★★
와이어프레임 Wireframe |
기획 단계에 초기에 제작하는 것. 페이지에 대한 개략적인 레이아웃이나 UI 요소등에 뼈대를 설계. 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계. - 종류 : 손 그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등 |
목업 Mockup |
디자인, 사용방법 설명, 평가 등을 위해 와이어 프레임보다 좀 더 실제 화면과 유사하게 제작한 정적인 형태의 모형. 시각적으로만 구성 요소를 배치 - 종류 : 파워 목업, 발사믹 목업 |
스토리보드 Story Board |
와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름(인터랙션)을 추가한 문서. 디자이너와 개발자가 최종적으로 참고하는 구체적인 작업 지침서로, 정책, 프로세스 콘텐츠 구성, 와이어 프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있음. 상단이나 우측에는 제목, 작성자를 입력. 좌측에는 UI 화면, 우측에는 디스크립션(설명)을 기입 - 종류 : 파워포인트, 키노트 스케치, Axure |
프로토타입 Prototype |
와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로 실제 구현된것처럼 테스트가 가능한 동적인 형태의 모형. - 종류 : HTML/css, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등 |
유스케이스 Use Case |
사용자 측면에서의 요구사항으로, 목표를 달성하기 위해 수행할 내용을 기술. 사용자의 요구사항을 빠르게 파악함으로 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화함. 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것 -> 다이어그램으로 묘사. |
▶ UI상세설계
요구사항 최종 확인 → UI 구조 설계 → 사이트 맵 구조 설계 → 화면설계
▶ HCI (Human Computer Interaction or Interface)
사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
▶ UX (User Experience, 사용자 경험)
사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
▶ 감성공학
제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술