뉴미디어 디자인 기본

인터페이스의 구분

서로 다른 두 시스템이나 장치 또는 소프트웨어 등을 이어주는 접속 장치로, 쉽게 말해 두 대상을 이어주는 매게체.

인터페이스는 연결하는 대상에 따라 크게 세 가지로 구분

1. 하드웨어 인터페이스 : 기계 - 기계

2. 소프트웨터 인터페이스 : 소프트웨터 - 소프트웨어

3. 사용자 인터페이스 : 사용자 - 시스템 사이의 정보 체널

 

UI란?

사물 간 또는 사물과 사용자 간의 의사소통이 가능하도록 일시적  혹은 영속적인 접근을 목적으로 만들어진 물리적, 가상적 매게체를 의미.

 

휴대폰, 컴퓨터, 내비게이션 등 디지털 기기를 작동시키는 명령어나 기법을 포함하는 사용자 환경.

이용자들이 IT기기를 구동하기 위해서 접촉하는 매게체.

아이콘이나 텍스트 형태 구동 화면 등이 포함됨. 스마트폰의 경우 애플리케이션 아이콘 형태 및 화면 구성을 가리킴.

 

HCI : 인간과 컴퓨터 사이의 상호작용에 대한 학문

UX: 사용자가 겪는 모든 경험

UI: 사용자가 보는 화면, 음성과 같은 비시각적 부분을 포함한다.

GUI: 사용자가 보는 시각적 화면, 일반적인 웹, 앱 디자인에 해당한다

Interaction: 큰 의미에서는 화면을 넘나드는 상호작용. 작은 의미에서는 UI에서 사용자 행동에 디자인 요소가 변화하는 과정이다.

 

UI의 발전

CLI -> GUI -> NUI -> OUI

1: CLI(명령 줄 인터페이스) 사용자가 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작하는 인터페이스이다.

 

2: GUI(그래픽 사용자 인터페이스) 사용자가 컴퓨터와 정보를 교환할 때, 그래픽을 통해 작업할 수 있는 환경을 말한다. 마우스 등을 이용하여 화면에 있는 메뉴를 선택하여 작업할 수 있다.

 

3: NUI(자연스러운 사용자 조작 환경) 기존의 CLI, GUI와는 달리 명령어와 사용법을 배우지 않더라도 기존의 사용자가 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하여 자연스럽게 디지털 기기를 제어하는 환경을 말한다. 

(ex. 손가락, 제스처, 음성, 음성 사용자 인터페이스)

 

4: OUI(Orgnic User Interface) 환경과의 소통을 추구하는 개념으로 기기와의 한정적인 정보 교환을 넘어 모든 자연 상태와의 상호작용을 포괄할 수 있다. 즉, 모든 자연 상태에서 발견할 수 있는 형태, 변형, 진화 등의 특성을 반영하여 모든 사물을 입출력 장치로 변환하는 것이다. 인터페이스의 모양이나 상태 또한 자유롭게 변화되어 2차원적의 평면적인 프로그램이 아닌 3차원의 상호작용이라는 특징이 있다. 2차원에서 Point&Click형식과 달리, 자연상의 물체들에 직접적인 변형을 가하거나 물리적인 제어를 통해 실행되는 것이 바로 OUI다.

 

멘탈 모델

사물이 어떻게 작동할 것이라 유추하는 인간의 사고 고정을 구조화 한 것

 

멘탈 모델 부조화

사물의 작동 방식이 예상에서 벗어가는 것

 

UI요소

체크박스 : 다중 선택이 필요할때 사용

라디오 버튼 : 한번에 한 항목을 선택할 때 사용

드롭다운 목록 : 한번에 한 항목만 선택할 수 있고 항목 수가 많을 때 주로 사용. 클릭하면 펼쳐지는 형태여서 공간을 아낄 수 있음.

스피너 : 숫자를 입력할 때 사용. 직접 숫자를 입력하거나 오른쪽 화살표로 값을 조정

코글버튼 : 두가지 모드 중 한 가지를 선택할 때 사용. 시각적 대비가 강하게 디자인하는 것이 좋음.

텍스트 필드 : 사용자가 길지 않은 텍스트를 입력하는 영역

날짜/시간 피커 : 화면 크기에 한계가 있는 모바일 공간에서 공간 절약

검색필드 : 사용자가 키워드를 입력해 관련성 높은 결과를 찾을 떄 사용

브레드크럼 : 사용자의 위치를 파악하기 위한 디자인 요소, 현재 페이지와 이전 페이지를 구분하고 이동할 수 있음

페이징 : 한 페이지에 나오는 콘텐츠 양이 일정량을 넘을 때 사용. 전체 콘텐츠 양을 가늠할 수 있으며 많은 양의 페이지를 건너뛸 수 있음

슬라이더 : 사용자가 원하는 대로 값을 조정. 음량 및 밝기 조절이나 날짜 같은 범위를 적용할 때 사용

이미지 캐러셀 : 여러 장의 이미지를 좌우로 이동하면서 볼 수 있는 인터페이스

알림 : 새로운 정보가 도착했다는 것을 알리는 인터페이스

진행바 : 로딩이 길 때 사용하는 인터페이스

스피너 로딩 : 진행 바보다 짧은 로딩에 사용하는 인터페이스

팝업 : 사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용

아코디언 : 전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이스

모달 윈도우 : 기본 페이지와 부모-자식 관계의 창이 뜰 때 집중력을 높이기 위해 배경을 어둡게 하는 인터페이스

토스트 팝업 : 진행에 필요한 간단한 피드백을 제공할 떄 사용하는 인터페이스. 모달 윈도우와 달리 팝업을 제외한 영역을 제어할 수 있음

빈 화면 : 표시할 데이터가 없을 때 띄우는 화면

코치 마크 : 사용자가 처음 앱을 열었을 때 중요 기능을 미리 알려주는 인터페이스

 

아이폰 UI명칭

바 

1) 상태표시줄

- 상태표시 줄은 화면 상단 가장자리를 따라 나타나며 시간, 이동통신사, 배터리 수준과 같은 기기의 현재 상태에 대한 유용한 정보 효시

- 상태 표시 줄에 표시되는 실제 정보는 장치 및 시스템 구성에 따라 다름

 

2) 네비게이션 바

- 앱 내에서 내가 어디에 있는지 알려줌

 

3) 툴바

- 앱 하단에 나타나며 현제 보기 또는 그 안의 콘텐츠와 관련된 작업을 수행하기 위한 버튼을 포함

- 사파리에서 페이지를 스크롤 하기 시작하면 도구모음이 숨겨지며 화면 하단을 탭하여 다시 표시할 수 있음

 

4) 탭바

- 앱 하단에 나타나며 앱의 여러 섹션간에 빠르게 전환할 수 있는 기능을 제공

- 탭 표시 줄에는 여러 탭이 포함될 수 있지만 표시되는 탭의 수는 장치 크기와 방향에 따라 다름

 

컨텐츠 뷰

1) 팝오버

- 어디에서 나온 페이지인지 표시.

 

2) 스플릿 뷰

- 화면을 나눠서 보여주는 뷰. 왼쪽에는 대부분 메뉴.

 

3) 테이블 뷰

- 텍스트 기반으로 항목들로 보여줌.

 

4) 얼러트

- 사용자에게 어플리케이션 혹은 기기 사용에 영향을 줄 수 있는 중요한 정보 제공

 

5) 액션시트

- 현재 사용자가 취하고 있는 액션에 관계된 추가적인 선택 요구

 

6) 모달 뷰

- 사용자가 보고 있던 화면 위에 다른 화면을 띄워 시선을 끌게 만드는 방식

- 현재 작업중인 컨텍스트 내에서 좀 더 확장된 기능을 제공하거나 사용자 작업흐름에 직접적으로 관계되는 하위 직업을 수행하는 방법 등을 제공

 

컨트롤

1) 페이지 인디케이터

- 어느 페이지에 있는지 알려줌

 

2) 스코프 바

- 정도를 조절 하는 등의 기능을 가짐

 

3) 스위치, 세그머트 컨트롤

 

UX 

- 사용자 조사

- 정보 설계 

- 유저 시나리오

- 와이어 프레임

- 인터렉션 디자인

 

스큐어모픽 디자인

사물을 사실적으로 표현하는 디자인 기법

 

플랫 디자인

구성과 색상은 단순화해 직관적으로 표현하는 2D 그래픽 디자인 기법

 

머티리얼 디자인

구글이 창안한 디자인 가이드로, 그리드 기반의 레이아웃과 계획적인 색상 설계, 의도적인 여백으로 대다하고 그래픽적인 비주얼을 추구하는 디자인 기법