사용자 인터페이스 편집하기
IT위키
편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 1번째 줄: | 1번째 줄: | ||
''' | '''User Interface''' | ||
'''사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어''' | '''사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어''' | ||
==3가지 분야== | == 3가지 분야 == | ||
*정보 제공과 전달을 위한 물리적 제어에 관한 분야 | * 정보 제공과 전달을 위한 물리적 제어에 관한 분야 | ||
*콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야 | * 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야 | ||
*모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야 | * 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야 | ||
==구분== | == 구분 == | ||
*'''CLI(Command Line Interface)''' : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스 | * '''CLI(Command Line Interface)''' : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스 | ||
*'''GUI(Graphic User Interface)''' : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 인터페이스 | * '''GUI(Graphic User Interface)''' : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 인터페이스 | ||
*'''NUI(Natural User Interface)''' : 말이나 행동으로 조작하는 인터페이스 | * '''NUI(Natural User Interface)''' : 말이나 행동으로 조작하는 인터페이스 | ||
==기본 원칙== | == 기본 원칙 == | ||
*직관성 | * 직관성 | ||
*유효성 | * 유효성 | ||
*학습성 | * 학습성 | ||
*유연성 | * 유연성 | ||
== 설계 지침 == | |||
*사용자 중심 | * 사용자 중심 | ||
*일관성 | * 일관성 | ||
*단순성 | * 단순성 | ||
*결과 예측 가능 | * 결과 예측 가능 | ||
*가시성 | * 가시성 | ||
*표준화 | * 표준화 | ||
*접근성 | * 접근성 | ||
*명확성 | * 명확성 | ||
*오류 발생 해결 | * 오류 발생 해결 | ||
===UI 설계 도구=== | === UI 설계 도구 === | ||
*'''와이어프레임''' | * '''와이어프레임''' | ||
**기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계 | ** 기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계 | ||
**'''관련 도구''' : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등 | ** '''관련 도구''' : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등 | ||
*'''목업''' | * '''목업''' | ||
**와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형 | ** 와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형 | ||
**'''관련 도구''' : 파워 목업, 발사믹 목업 등 | ** '''관련 도구''' : 파워 목업, 발사믹 목업 등 | ||
*'''스토리보드''' | * '''스토리보드''' | ||
**와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서 | ** 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서 | ||
**디자이너와 개발자가 최종적으로 참고하는 작업 지침서 | ** 디자이너와 개발자가 최종적으로 참고하는 작업 지침서 | ||
**서비스 구축을 위한 모든 정보가 담겨 있어야 함 | ** 서비스 구축을 위한 모든 정보가 담겨 있어야 함 | ||
**'''관련 도구''' : 파워포인트, 키노트, 스케치, Axure 등 | ** '''관련 도구''' : 파워포인트, 키노트, 스케치, Axure 등 | ||
*'''프로토타입''' | * '''프로토타입''' | ||
**와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형 | ** 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형 | ||
**작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔 | ** 작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔 | ||
**'''관련 도구''' : HTML/CSS, Axure, Flinto, 네이버 | ** '''관련 도구''' : HTML/CSS, Axure, Flinto, 네이버 포로토나우, 카카오 오븐 등 | ||
*'''유스케이스''' | * '''유스케이스''' | ||
**사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술하는 표준 방법 | ** 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술하는 표준 방법 | ||
**'''관련 도구''': UML 다이어그램 | ** '''관련 도구''': UML 다이어그램 | ||
==UX와의 차이== | == UX와의 차이 == | ||
UX는 사용자의 경험을 기반으로 사용자의 편의성과 몰입도를 높이는 관점 | UX는 사용자의 경험을 기반으로 사용자의 편의성과 몰입도를 높이는 관점 | ||
* UI의 주요 평가항목: 사용성/접근성/편의성 | |||
* UX의 주요 평가항목: 목입도/만족도/재접근률 | |||
* 일반적으로 UI 또는 UX만 단독으로 고려할 수 없으므로 [[UI/UX]]를 종합적으로 관리 | |||
== 같이 보기 == | |||
* [[UI/UX]] | |||
*[[UI/UX]] | |||
