티스토리 뷰

스타일가이드 제작하기

디자인 요소 정의

일관성 있는 앱 화면 디자인을 위해 화면 디자인 요소들을 정의할 수 있다.

GUI(Graphic User Interface) 디자인의 구성요소

GUI(Graphic user interface)는 사용자와 시스템 간의 상호작용과 소통을 원활하게 하기 위 한 그래픽 기반의 인터페이스를 말한다. 사용자 작업을 지원하는 기능들의 정보를 그래픽 적으로 제공함으로써, 사용자가 시각적으로 이해하기 쉽고 사용하기 편리하며 친숙하게 접근할 수 있는 환경을 제공하려는 방법이다.

모바일 앱 GUI 디자인 특징

모바일 UI 디자인 시 가장 중요한 점은 작은 디스플레이 화면 크기에서 사용자 경험(UX) 을 고려해야 한다는 것이다. 많은 양의 정보를 제한된 디스플레이 화면을 통해 전달하기 때문에 이러한 환경적 제약 요소들을 극복하는 것이 관건이 된다. 모바일 GUI 디자인의 특징은 기기 변화 및 개발 방법에 따라 달라지기 마련이며, 최근에는 기존 하드웨어의 기 능을GUI 요소가대신수행하는방향으로변화하고있다. GUI 디자인활용이점점더증 대되어 감에 따라 기기 중심이 아닌, 사용자 경험(UX) 중심에서 GUI 디자인 기획을 해나 가는 것이 바람직하다.

GUI 디자인의 구성요소

GUI(Graphic User Interface) 디자인의 구성요소는 크게 시각적 요소와 기능적 요소로 나 뉜다. 시각적 요소는 문자 대신 그래픽이나 메타포 등을 활용해 사용자에게 쉽게 조작 정 보를 제공해주는 역할을 한다. 기능적 요소는 사용자와 시스템간의 원활한 상호작용 및 사용자 조작과 행동을 유도하기 위해 시각적 요소를 활용하여 제공하는 것으로서 윈도우 (window), 아이콘(icon), 메뉴(menu) 등을 들 수 있다.

  • 레이아웃
    • 일정한 화면 공간 안에 일러스트레이션, 사진, 타이포그래피 등의 시각적 구성요소들 을 디자인의 목적에 맞게 배치하는 것을 말한다. 사용자에게 제공하고자 하는 정보를 효과적으로 전달하기 위해서는 정보구조 설계의 결과물을 토대로 일관된 레이아웃을 작성하여야 한다. 사용자가 자주 사용하는 콘텐츠나 중요도가 높은 콘텐츠를 중심으로 하여 배치하고, 이와 관련된 부가적 기능들을 가능한 한 사용자의 시선이 쉽게 닿는 곳에 배치하여 화면이 달라지더라도 일관된 사용 흐름을 가질 수 있도록 하여야 한다.
  • 컬러
    • 컬러는 사용자가 가장 먼저 지각하고 인지하게 되는 GUI 요소로서 감각적으로 디자인 의 일관성 및 아이덴티티를 명확하게 전달해주는 역할을 한다. 그뿐만 아니라, 정보의 주목성을 높일 수 있으며, 정보의 중요도에 따른 컬러의 선별적 활용을 통해서 인터페 이스의사용성을높일수있다. 앱의GUI 디자인시규정하는컬러는크게주조색, 보 조색, 강조색이 있으며, 너무 많은 색상을 선택하기보다는 색조 활용을 통하여 변화를 주는 방법이 일관성을 높일 수 있다.
  • 타이포그래피
    • 타이포그래피는 문자 형식의 정보 전달 GUI 디자인 요소로서 사용자가 해당 내용을 쉽고 빨리 읽을 수 있게 하는 가독성(readability)이 있어야 하고, 정보 전달이 잘 이 루어질 수 있는 서체를 선택하는 것이 중요하다. 서체는 한글의 경우, 크게 고딕계열 과 명조 계열로 나뉘고 영문의 경우에는 돌기가 있는 세리프(serif)와 돌기가 없는 산 세리프(sans serif)로 구분할 수 있다. 서체의 선택은 사용 목적에 따라서도 달라질 수 있다. 본문 용도에 사용할 것인지, 강조를 위한 용도나 헤드라인으로 사용할 것인지에 따라서도 달라진다. 또 같은 성격과 위계를 갖는 타이포그래피 그룹에는 일관된 스타 일을 적용하고 가독성을 중요하게 고려해야 하며, 이와 반대로 강조용 타이포그래피에는 다른 색상이나 크기, 굵기, 다른서체등을 사용하여 변화를 줌으로써 조형미를 부각하고 정보 전달력을 높이기도 한다.
  • 그래픽
    • GUI의 요소 중, 그래픽은 아이콘, 일러스트레이션, 사진, 그래프 등을 포함하며 문자 대신정보를더욱효과적으로전달할수있는수단이다. 문자기반정보와함께그래 픽 요소를 적절히 구성하여 정보를 전달할 경우, 지루함을 줄이고 직관적으로 정보를 전달할 수 있다. 아이콘(icon)은 모바일 인터페이스에서 가장 많이 사용되는 그래픽 요 소로 사용자와 시스템 간의 상호작용을 위한 수단이 된다. 제한된 화면에서 문자 대신, 정보를 빠르게 이해하고 쉽게 기억할 수 있게 하지만, 아이콘의 의미가 잘못 해석될 경우UX를나쁘게하는원인이되기도한다. 사용자가아이콘을보고그것이어떤기 능을 하는지 바로 짐작할 수 있게 적합한 메타포(metaphor)를 적용하는 것이 중요하며, 이러한 이유로 메타포 없이 직관적인 표현 방법을 사용하기도 한다.
  • 메뉴
    • 메뉴는 사용자가 앱을 사용하는 목적과 직접 관련 있는 콘텐츠와 연결되는 GUI의 기 능적 요소이자, 콘텐츠를 이용하는데 필요한 다양한 작업의 기능을 제시해주는 목록을 의미한다. 또 사용자가 원하는 콘텐츠에 쉽게 접근할 수 있도록 안내해주는 기능을 수 행하며, 다른 세부 콘텐츠를 찾아 이용할 수 있게 해준다. 이처럼, 네비게이션의 역할 을 수행하는 메뉴는 가시성, 이해성, 일관성, 사용성, 심미성을 제공할 수 있어야 한다. 메뉴의 종류는 크게 그래픽형 메뉴와 문자형 메뉴가 있으며, 메뉴의 표현 방식에 따라 버튼(button)형 메뉴, 풀다운(pull-down) 메뉴, 팝업(pop-up) 메뉴 등으로 나뉜다. 메뉴의 표현 방식은 디자인 트렌드에 따라 달라지며, 점차 작은 디스플레이 화면에서 정보를 효율적으로 보여주는 방식으로 변화하고 있다.
GUI 디자인의 기본 원칙

GUI 디자인을 계획할 때, 인지심리학 관점에서 사용자를 이해하고 디자인을 수행해나가는 것이 중요하다. 인간의 인지 과정은 지각(perception), 기억(memory), 생각(thinking)의 단계 를 지나 (decision), 주의(attention), 학습(learning)의 단계로 진행된다. 인지과정은 뇌에서 해석된 감각 정보가 변형, 축소, 정교화 되어 저장되고 인출되는 모든 과정을 포함한다. 이와 같이 GUI는 사용자가 화면의 정보들을 정확하게 인지하여 자신의 작업을 파악하고 단계별로 그 절차를 수행할 수 있도록 지원하여야 한다. GUI의 목표는 크게 사용성과 심 미성으로 대표할 수 있으며, 세분화하면 다음과 같이 나뉜다.

  • 가시성(visibility)
    • 가시성은 시각적으로 분명하게 잘 보이도록 나타내는 것으로, 이해성과 밀접하게 관련 이 있다. 정보의 밀도나 그룹핑과 같은 ‘정보의 구조화’와 아이콘이나 정보의 위계 질서와 같은 ‘정보의 파악’, 타이포그래피의 크기와 배열 방법 및 구조에 따른 ‘정 보의 가시화’를 바탕으로 하여 화면의 다른 디자인 요소와 함께 고려하여야 한다.
  • 이해성(understandability)
    • 사용자가 GUI를 조작하는 경우 대상의 내용과 조작 방법을 제대로 유추하거나 해석할 수있게하여야한다. 이를위해, 사용자사고능력에대응할수있는이해하기쉽고 정확한 정보를 제시하여야 하며 특히, 타깃 사용자에 대한 특성을 파악하여야 한다.
  • 일관성(consistency)
    • GUI 시각적 구성요소 표현의 일관성 및 조작 방식에 일관성을 제공함으로써 사용자가 쉽게기억하고빠르게적응할수있게하여야한다. GUI 디자인요소의표현방법, 화 면 구성, 조작 방식이 일정한 질서를 가짐으로써 개념적 구조를 제시하게 되면, 사용 자가 앱의 GUI를 보다 안정적으로 사용할 수 있게 된다.
  • 사용성(usability)
    • 사용자가 목적을 달성하기 위해 GUI를 사용할 때에 어느 정도 사용하기 쉬운가를 말 하는 용어이다. 사용자와 시스템간의 상호작용에서 경험하게 되는 일관성, 단순함, 편 의성, 정확성, 오류 방지 등의 고려를 통해 사용자가 원하는 목적을 편리하고 효율적 으로 달성하는지에 관한 것이다.
  • 심미성(aesthetic)
    • 앱의 목적은 사용자의 특정 작업을 지원하는 것이지만, 시각적 디자인이 기능성에도 영향을 미치기 때문에 심미적 측면을 고려해야 한다. 이는 얼마나 예쁘게 디자인할 것 인가의 관점이 아니라, 앱이 제공하는 작업에 부합하도록 GUI 디자인을 함으로써 앱의 목적에 맞는 조화로운 통합적 디자인을 해야 함을 의미한다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼