UI(User Interface)

개념

• UI(User Interface): 정보기기와 사용자간 상호작용을 위한 매개체 역할
• UX(User eXperience): UI를 통해 경험하는 모든 것

UI 유형⭐️

(20.)

• CLI(Command Line Interface): 텍스트 기반의 인터페이스
• GUI(Graph User Interface): 그래픽 환경의 인터페이스
• AUI(Auditory User Interface): 오디오(소리)를 통해 기기를 조작하는 인터페이스
• VUI(Voice User Interface): 음성인식기술을 사용한 인터페이스
• NUI(Natural User Interface): 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
• OUI(Organic User Interface): 모든 사물과 사용자 간 상호작용을 위한 인터페이스
• HMI(Human Machine Interface): 인간과 기계 사이의 상호작용을 중개하는 인터페이스

UI 설계 원칙⭐️⭐️

(20.8)

• 직관성: 누구나 쉽게 이해하고 사용할 수 있어야함
• 유효성: 사용자의 목적을 정확하고 완벽하게 달성해야함
• 학습성: 누구나 쉽게 배우고 익힐 수 있어야함
• 유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야함

UI 표준

UI 관련 개념

• 웹 표준(Web Standards)
• 웹 접근성(Web Accessibility)
• 웹 호환성(Cross Browsing)
• 반응형 웹
• 인포그래픽
• 브랜드 아아텐티티
• 내비게이션
• 아코디언
• 플레이스 홀더
• 필터링
• 입력폼
• 입력필드
• 썸네일
• 레이블
• 대체 텍스트
• 피드백(Feedback): 사용자가 시스템에 어떤 동작 명령을 내렸을 때, 그 결과나 상태 변경을 사용자에게 알려주는 기능

터치제스처 용어

• 탭
• 더블탭
• 핀치
• 스와이프
• 프레스/터치 앤 홀드
• 플릭: 수평/수직 방향으로 빠르게 미는 동작(예: 새로고침, 화면 전환)
• 팬: 화면에서 손을 떼지 않고 드래그
• 드래그

UI 설계

UI 설계 도구⭐️

• 와이어프레임(Wireframe): 레이아웃을 협의/공유하기 위해 사용
• 스토리보드(Story Board): 최종적으로 참고하는 작업지침서, 작업산출물
• 프로토타입(Prototype): 인터랙션을 적용해 실제 구현된 것처럼 테스트 가능한 동적 모형
• 목업(Mockup): 실제 화면과 유사한 정적인 모형
• 유스케이스(Use Case): 사용자 측면 요구사항을 다이어그램 형식으로 묘사