웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
UX 디자이너들의 필수 용어 사전: Graphic User Interaction (그래픽 유저 인터페이스)
Posted by kimdirector | 2014.06.02 | Hit : 4363
UX 디자이너 GUI 그래픽 인터페이스 iOS 안드로이드 윈도우8
목록보기이전보기
GUI (Graphic User Interface)는 사용자와 기기 간의 상호작용을 위한 기능 및 요소를 그래픽으로 제공하는 인터페이스를 의미합니다. 사용자는 그래픽 요소를 직접 조작함으로써 인터페이스의 기능을 사용하고 제어할 수 있습니다.
 
 
 
GUI의 시작
초기의 사용자 인터페이스는 컴퓨터를 기반으로 한 환경으로 사용자가 명령어를 입력하여 조작하는 CUI (Character User Interface, 문자 사용자 인터페이스) 방식이었습니다. 텍스트 기반의 환경이었기 때문에 키보드만 있는 컴퓨터의 형태였죠.
 
하지만 제록스 연구소가 최초로 GUI를 적용한 제록스 알토라는 컴퓨터를 개발하고, 더글라스 엥겔바트(Douglas Engelbart)가 마우스를 개발하면서, 사용자 인터페이스에 큰 변화가 일어납니다.

 
 
 
 
창, 메뉴, 아이콘, 라디오 버튼, 체크박스 등의 그래픽 요소를 마우스와 같은 포인팅 장치로 조작하는 이 새로운 인터페이스는 사용자에게 큰 편리함을 제공하게 되었죠. 이전에 CUI 기반의 컴퓨터에서는 간단한 실행을 하기 위해서도 명령어를 알아야 했지만, GUI 기반의 컴퓨터에서는 아이콘을 마우스로 클릭만 하면 되니, 이 편리한 접근성에 사용자들은 얼마나 놀랐을까요?


 
 
 
제록스 알토의 탄생 이후, 애플은 매킨토시 개발을 통해, 마이크로소프트는 윈도우 OS 개발을 통해 GUI를 발전시켜 나갑니다.


 
 
 
현재는 PC뿐만 아니라 스마트폰, 태블릿PC 및 다양한 전자제품에서부터 공공시설의 감시제어실 화면에 이르기까지 광범위하게 GUI가 적용되고 있습니다.
 
 
GUI 디자인이란?
앞서 GUI의 정의와 GUI가 어떻게 발전해 왔는지 알아보았는데요. 그렇다면 GUI 디자인이란 무엇일까요?
GUI 디자인이란, 추상화된 인터페이스 정보를 구체적인 표시 또는 조작 정보로 변환하는 과정으로서 ①정보의 파악, ②정보의 구조화, ③정보의 가시화, ④평가의 4단계로 나누어 생각해 볼 수 있겠습니다.
 
 
출처: 일본인간공학회 스크린 디자인 연구회 편저 / 안그라픽스
 
 
1단계 정보의 파악
서비스의 목적과 시스템의 정보, 사용자의 특성을 파악하고, 사용자가 이 서비스를 사용할 때 생겨날
사용자 경험 및 문제점을 예측합니다.
 
2단계 정보의 구조화
1단계에서 도출된 정보를 분류하고, 우선 순위와 제시 순서를 결정하며 정보를 체계화합니다.
 
3단계 정보의 가시화
체계화된 정보를 사용자들이 편리하고 효율적으로 사용할 수 있게 정보를 가시화합니다.
이 때, 정보는 단순히 보여지는 것이 아니라 앞 단계에서 고려한 사용자 경험을 전달할 수 있는 형태여야 합니다.
 
4단계 평가
사용성을 평가하여 전 단계에서 발견하지 못한 문제점을 보완하여 Develop합니다. GUI 디자인 프로세스에서 살펴보았듯이, GUI 디자인은 단순히 화면상에 시각적 요소를 심미적으로 구성하거나 나열하는 것에 그치는 것이 아니라, 사용자가 경험하게 될 전부를 디자인하는 것으로 사용자의 심리적인 면과 인체공학적인 내용까지 포함하고 있는 것입니다.
 
특히 최근에는 하드웨어의 고사양화, 터치 디스플레이의 등장과 발전(디스플레이의 대형화/고해상도)으로 다양한 퍼포먼스가 가능해짐으로써 사용자의 편의성 뿐만 아니라 시각적, 촉각적, 청각적 경험을 통해 사용자에게 특별한 감성과 즐거움을 제공하는 사용자 경험 중심의 GUI 디자인이 강조되고 있습니다.
 
 
 
GUI의 구성 요소
GUI는 레이아웃, 바, 뷰, 아이콘과 버튼, 상호작용과 피드백, 타이포그래피, 색상 등의 요소로 구성됩니다. GUI의 구성요소는 시각적 요소이면서, 동시에 기능적 요소로서의 역할을 합니다.
 
 
레이아웃 (Layout)
레이아웃은 시각적 구성 요소들에 대한 화면 상의 전반적인 배치 방식으로 화면의 구획, 배치, 배정 등을 뜻하며 전체 화면에서 기초적인 뼈대 역할을 합니다. 레이아웃은 시각적 경험에 영향을 미치는 가장 처음 단계로 사용자가 시스템을 체계적으로 인식하기 위해 필요한 시각적 통로를 제공합니다. 또한 사용자가 별다른 노력 없이 직관적으로 시스템의 정보를 확장하고, 다음 단계와 상호작용을 이끌어 낼 수 있도록 해주는 역할을 합니다.
모바일 환경에서는 각 단말기들이 다양한 화면 크기와 유형을 갖고 있기 때문에 디자인을 할 때에 화면의 크기가 다를 경우, 화면의 방향이 바뀌었을 경우를 항상 염두에 두어야 합니다. 화면의 크기와 방향이 다를 경우에도 동일하게 인터페이스의 일관성을 지켜야 하는데, 이 때 레이아웃이 인터페이스에 일관성을 부여하는 역할을 합니다. 전체적인 화면 크기를 고려하여 얼마나 많은 양의 정보를 보여줄 것인지, 공백이나 윤곽선 처리는 어떻게 할 것인지, 우선 순위와 중요도에 따라서 시선의 흐름 및 동선을 잘 파악하여 배치하고 구분해주어야 합니다. 또한 다양한 콘텐츠, 기능, 형태 등을 사용 목적과 목표에 따라 얼마나 적합하게 배치할 것인가 고민해야 합니다.

 
 <각 플랫폼에서 제시한 레이아웃 가이드라인>
 
 
<안드로이드 / iOS / 윈도우 폰의 홈스크린 레이아웃 >
 
 
 
바 (Bar)
바(Bar)는 사용자가 원하는 정보를 탐색할 수 있도록 정보를 구획하고 안내하는 역할을 하며, 현재 페이지의 보기 형식과 선택 사항들을 조정하고, 여러 기능들을 수행할 수 있도록 돕습니다.
 
바는 상단이나 하단에 위치하며, 그 기능과 목적에 따라 애플리케이션 아이콘, 액션 버튼 및 아이콘, 텍스트, 탭, 검색창 등의 시각적 구성 요소가 그 기능을 수행합니다.
 
 
 
 
네비게이션 바 / 액션 바 (Navigation bar / Action bar)
iOS에서는 좌측에 네비게이션 버튼, 우측에 기능 버튼, 중앙에 타이틀(해당 경로)의 형태로 구성되고, 안드로이드에서는 좌측에 네비게이션 버튼과 앱 아이콘+타이틀(해당 경로)을 두고 우측에 여러 개의 기능 버튼으로 구성됩니다.
 
 
 
 
 
탭 바 (Tab bar)
iOS에서는 탭 바를 하단에 두며 아이콘+텍스트의 형태로 구성되고, 안드로이드에서는 탭 바를 상단에 두며 텍스트 레이블 또는 아이콘으로 구성됩니다.


<페이스북 메신저 (좌. iOS / 우. 안드로이드)>
 
 
 
뷰 (View)
뷰는 PC의 창(window)과 같은 역할로, 화면상에 정보가 표현되는 영역을 말합니다. 뷰는 아이콘이나 버튼, 메뉴, 텍스트, 이미지, 멀티미디어 등 다양한 형태의 구성요소와 콘텐츠를 보여주는 하나의 창입니다. 뷰의 형태는 리스트, 그리드, 카드 형태 등 다양한 형태로 표현될 수 있으며, 사용 목적과 목표, 기능에 따라 그 속성에 맞게 사용되어야 합니다.


<다양한 형태의 리스트 뷰>
 
 
 
아이콘 & 버튼
아이콘은 인터페이스의 기능과 정보를 상징적인 형태로 단순하게 표현하여 전달하는 시각적 상징기호입니다.
인터페이스의 아이콘은 다음 명령을 유도하거나 선택할 수 있도록 실행하는 버튼으로 사용되기도 하고 그 자체로 압축된 정보를 전달하기도 합니다. 아이콘은 텍스트로 설명하는 것보다 훨씬 적은 공간을 차지하고 언어의 표현보다 직관적이기 때문에, 제한적 디스플레이에서 훌륭한 시각 커뮤니케이션 기능을 수행합니다.


<안드로이드 / iOS / 윈도우 폰의 아이콘>
 
 
 
상호작용과 피드백
터치 디스플레이 상에서 사용자는 다양한 제스처를 통해서 기기와 상호작용을 합니다. 이 때, 사용자가 작업 프로세스에 대해 정확히 인지할 수 있도록 GUI적으로 명확한 피드백을 주어야 합니다.
 
피드백은 그래픽 효과를 이용한 시각적 피드백, 진동을 통한 촉각적 피드백, 사운드 효과를 이용한 청각적 피드백으로 분류할 수 있습니다. 시각적 피드백은 아이콘이나 버튼, 텍스트 같은 타겟 자체의 크기와 모양, 색상의 변화를 주거나, 피드백 노출 시간과 화면 전환을 통해 피드백을 주는 형태가 있습니다. 시각적 피드백을 주는 동시에 진동 자극 또는 전기 자극을 통한 촉각적 피드백, 비구어적인 상징적 사운드를 통한 청각적 피드백을 동반함으로써 사용자 경험을 극대화할 수 있습니다.


 
 
 
타이포그래피 (Typography)
텍스트는 정보를 전달하는 요소로서 콘텐츠의 상당 부분을 차지합니다. 텍스트의 크기, 두께, 여백, 자간, 행간 등 타이포그래피의 요소를 활용하는 것은 사용자가 쉽고 빠르게 화면 정보를 이해할 수 있도록 도와주는 역할을 합니다. 또한 이미지, 아이콘 등과 함께 사용되는 텍스트의 경우 이미지, 아이콘 – 텍스트 간의 비율과 구성이 어울리는지, 주변색과의 관계에서 구별이 분명히 되는지, 서체에 따라 가지고 있는 느낌이 이미지와 목적에 맞게 적용되었는지 고려해야 합니다.


iOS 7


안드로이드 킷캣 4.0
 
 
윈도우 폰 8
 
<각 플랫폼에서 제시한 타이포그래피 가이드라인>
 
 
 
색상 (Color)
색상의 사용은 정보를 강조하거나, 분리 또는 묶어주는 역할을 합니다. 또한 색의 미학적 특성상 색상에 따라 어떤 느낌이나 이미지를 떠오르게 만드는데, 이는 사용자로 하여금 감정적 반응을 불러 일으켜 1차원적인 상호작용을 넘어선 감성적인 사용자 경험을 제공합니다. 색상의 사용은 인터페이스의 일관성을 유지하고 브랜드의 아이덴티티를 강화하는 역할을 하며, 색상의 대비와 혼합, 투명도 조절 등으로 정보의 계층과 시각적 구조를 이해하기 쉽게 돕습니다. 모바일 환경에서는 이동이 잦기 때문에 실내와 실외에서의 음영차이와 다양한 기기에 따른 색상 표현의 차이를 고려해야 합니다.
 
 


<각 플랫폼에서 제시한 컬러 팔레트>
 
 
 
이외에도 GUI를 구성하는 요소는 다양하나, 기본적으로 GUI 상에 표현될 수 있는 필수 요소를 중심으로 소개해보았습니다.
 
GUI 디자인에 절대적인 방법론이 있는 것은 아니지만, 다양한 플랫폼에서 제공하는 가이드라인과 기본적인 시각적 방법론에 따르면 좀 더 대중적이고 객관적인 디자인을 할 수 있겠죠. 하지만 서비스의 목적에 따라 좀 더 주관적이고, 창의적인 방법으로 표현을 하는 것도 새로운 사용자경험을 만들어낸다는 측면에서 도전해 볼만한 일입니다.
 
앞으로 더욱 다양한 디바이스가 개발이 되고, 많은 영역에서 GUI의 필요성이 높아지는 만큼 어떤 새로운 GUI 디자인이 나오게 될지 기대가 됩니다.
 
 
내용 참고:
[Graphic User Interface GUI 디자인 가이드] 일본인간공학회 스크린 디자인 연구회 편저 / 안그라픽스 / 2003
[눈길을 사로잡는 스마트폰 앱 UX&UI 디자인] 김영삼 지음 / 위키북스
[Designing Visual Interfaces: Communication Oriented Techniques] Kevin Mullet, Darrell Sano / SunSoft Press / 1995
[스마트 폰 GUI 디자인 연구] 영남대학교 조형대학원 시각영상디자인 석사학위 논문 / 이동수 / 2011
[디자인 심볼로서 아이콘이 주는 커뮤니케이션효과에 관한 연구] 숙명대학교 디자인대학원 석사학위 논문 / 김진희 / 1999
 


 
Posted by kimdirector | 2014.06.02 | Hit : 4363
Origin http://blog.naver.com/PostView.nhn?blogId=vinylx&logNo=220004281856
Tags UX 디자이너 GUI 그래픽 인터페이스 iOS 안드로이드 윈도우8
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=387

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
무료 라이트박스 이벤트 CIP 서비스 디자이너 미니멀 HTML 5 isRoot OS X 프로모션 아이폰 비쥬얼 메일폼 런처 성공 HTML5 PM 웹페이지 웹기획 UX디자인 소통 UX 독서 애니메이션 생태계 뚜레쥬르 웹사이트 웹브라우저 일정 유저 인터페이스 홈페이지 디바이스 리더 솔루션 마이 홈페이지 트위터 아이콘 업데이트 윈도우7