[정보처리기사]UI 정의 예시 종류 레이아웃

UI(user interface)

사람(사용자)와 사물,시스템 등 사이에 의사소통 할 수 있도록 일시적 영구적 접근을 목적으로 만들어진 매개체

• 입력:사용자의 시스템 조작
• 출력:입력에 대한 결과표시
• 삭제:삭제

예시

• 애플사의 macOS, iOS, iPadOS, watchOS, tvOS, CarPlay 등
• 구글사의 안드로이드 운영체제와 이를 기반으로 한 커스텀 운영체제들
• 마이크로소프트사의 Windows 운영체제

종류

그래픽사용자인터페이스(gui)

• 그래픽+텍스트
• 객체지향 인터페이스와 응용프로그램 지향 인터페이스가 공존

웹기반인터페이스(wui)

인터넷+웹브라우저

명령줄인터페이스(cli)

사용자가 컴퓨터 자판을 이용해 문자열입력해 조작하는 인터페이스

설계원칙

• 직관성 - 누구가 쉽게 이해하고, 쉽게 사용가능
• 유효성 - 사용자의 목표가 달성될 수 있도록 제작
• 학습성 - 쉽게 학습하고, 사용하게 해야함
• 유연성 - 인터랙션포용, 실수방지, 오류 예방

UI표준

사용자관점에서 사용자업무를 효율적으로 수행가능, crud방식기반

고려사항

사용자가 불편하지않아야하고, 많은 업무 케이스를 포함해야하고, 다양한 사용상황에 대체가능해야하고, 표준적용이 쉽도록 충분한 가이드와 활용수단제공이 필요하고, 변화하는 상황에 맞게 빠르게 변경가능할수 있또록 관리수반이 필요

스타일가이드

서류의 작법, 형식과 디자인 규격등을말함 

스타일 시트라고 불리기도함

목적 - 여러 관계자가 협업하는 과정에서 브랜드나 기업의 look이 일관적이고 같은 메세지를 전달할 수 있게함

os환경확인 - 업무, os확인

웹브라우저확인 - 어떤 기업환경에 가장 적합한지 찾아보기

모니터해상도확인 - 기본 1280*1024(스크롤이 안생기게함)

프레임세트확인

레이아웃

상단

왼쪽

메뉴네비게이션

• default 상단 왼쪽 구성 dept(탑), 왼쪽2~3
• 탑에다가 드롭다운 걸어져있는 형태(탑드롭다운 레프트)
• 그냥 탑에다가 드롭다운
• 탑 레프트(오픈클로스동작)

화면구성요소

그리드(grid) - 테이블형태//css//가로-세로 레이아웃 시스템(2차원)

• //div.container=그리드컨테이너(그리드전체영역)
• //div.item=그리드아이템(자식요소 12345)
• //그리드트랙 = 행또는 열
• //그리드셀 = 한칸(가상의칸)
• //그리드라인 = 셀구분선
• //그리드넘버 = 그리드 각라인넘버
• //그리드 갭 = 셀사이의 간격

버튼/컨트롤타입

콤보박스
토글버튼
텍스트박스
라디오버튼
체크박스

팝업요소 - 윈도팝업, 레이어팝업

alert요소 - 오류시 alert, 완료시 alert 확인창