티스토리 뷰

시안디자인 제작하기

디자인 콘셉트와 스타일가이드 조합

기획된 콘텐츠와 앱 디자인 콘셉트와 스타일가이드를 조합할 수 있다.

일관성 적용을 위한 화면 디자인

메인화면 스타일을 결정하기 위해 시안 제작과 발표를 통해 피드백에 따른 수정 작업을 거쳐 시안을 확정하였다면, 앱 콘텐츠 및 디자인 콘셉트와 GUI 스타일가이드를 바탕으로 하여 세부화면 디자인을 수행해간다. 세부화면 디자인 시 명료한 정보 표현을 바탕으로 일관되게 스타일가이드를 적용하여 제작되도록 하여야 한다.

일관된 화면 제작 가이드

사용자가 직관적으로 화면을 이해할 수 있게 명료성을 확보하였다면, 다음으로 중요하게 고려해야 할 사항은 일관성이다. 일관성은 인터페이스 구성 요소들의 통일된 상태를 말한 다. 스타일가이드를 기반으로 앱의 GUI 구성 요소들이 같은 형식과 같은 작동 방식을 유 지할 때, 사용자들은 인터페이스의 사용이 쉽다고 느끼게 되며 동시에 친숙하고 안정감 있게작업을수행할수있다. 일관된화면제작가이드는다음과같다.

  • GUI 디자인 요소를 일관되게 사용한다.
    • 레이아웃, 컬러, 타이포그래피, 그래픽(아이콘), 메뉴 등 GUI 요소들이 스타일가이드 규 정대로 적용되었을 때 일관성을 유지할 수 있으며 전반적인 통일성을 제공할 수 있다. 이를 통해, 사용자는 디자인뿐만 아니라, 사용 편의성 증대, 콘텐츠의 통일감, 앱의 아 이덴티티를 명확하게 느낄 수 있게 된다.
  • 조작 요소 표현 방식에 일관성을 제공한다.
    • 사용자가 수행하는 다양한 작업 요소에 일관된 표현방식(On/Off 등)을 적용하여, 사용 자가 쉽게 예측하고 쉽게 기억하며 빠르게 적응할 수 있도록 해야 한다.
  • 화면 방향 전환 시에도 같은 레이아웃을 유지한다.
    • 사용자가 이용 도중에 모바일을 가로 또는 세로로 방향을 전환하더라도, 본래의 레이 아웃을 유지하게 하여 사용자가 혼란을 겪지 않도록 해야 한다.
일관된 화면 디자인의 장점
  • 사용성 증대
  • 논리적인 구조 제공
  • 긍정적인 경험 유도
일관성의 종류

앱에서의 일관성은 사용자가 보고, 듣고, 기억하는 등의 지각과 인지 과정에 적극적으로 관여하는 성질이다. 이는 앱 메뉴의 구조적 측면이나 자주 사용하는 버튼, 아이콘 배열 등 의 공간적 속성 및 타이포그래피, 컬러, 레이아웃 등에 적용된다. 일관성은 크게 다음과 같이 내부, 외부, 심미적인 것으로 구분할 수 있다.

  • 내적 일관성(internal consistency)
    • 사용자 작업 내에서의 일관성을 의미하는 것으로, 인터페이스 시각적 요소들의 배치, 기능 구조의 일관성, 태스크 흐름의 일관된 체계를 통해 전달되는 개념이다.
  • 외적 일관성(external consistency)
    • 앱인터페이스요소의시각적유사성을통해갖게되는것으로, UI 가이드라인및스 타일가이드와 같은 규칙을 통해 전달되는 일관된 아이덴티티를 예로 들 수 있다.
  • 미적 일관성(aesthetic consistency)
    • 모바일 앱 디자인으로부터 전달되는 룩앤필(look & feel), 즉 스타일가이드에 의한 시 각적이고 심미적인 측면에서 전달되는 느낌의 지속적이고 일관된 성질을 의미한다.

GUI의 인지적 어포던스(affordance)

어포던스의 개념

어포던스는 1979년 제임스 깁슨(James Gibson)이 처음 제안한 개념으로 환경과 유기체(사 용자) 간에 존재하는 것으로, 사용자가 특정 행위를 하도록 유도한다는 의미에서 행동유 도성이라고 부른다. 인터랙션 디자인에서 어포던스는 사용자와 시스템 간의 상호작용을 더욱 긴밀하고 향상된 방식으로 끌어내는 중요한 개념이다.

모바일 앱에서의 어포던스

어포던스는 모바일 앱 사용자의 지각, 인지, 심리와 밀접하게 연관되어 있다. 사용자는 앱 의 화면 정보를 지각, 인지하여 특정 행위를 통해 반응하게 되는데, 이때 사용자가 가장 먼저접하는것이GUI 요소이다. 따라서GUI 요소에사용자의다음행동을유도할수있 는충분한단서를제공하여야한다. 예를들어사용자가과업수행시다음단계로넘어 가기 위해 버튼을 터치해야 한다면 해당 버튼에 어포던스를 부여하여 사용자의 다음 행위 를 끌어내어야 한다. 사용자가 수치를 입력하는 창에 터치하였을 때, 입력창이 활성화되어 화면에 나타나게 하거나, 콘텐츠가 끝나면 하단에 이전이나 다음 단계의 콘텐츠로 이동할 수 있는 버튼 등을 표시하는 등의 기호 표현(signifier)을 통해서 사용자의 행위를 유도할 수 있다.

GUI의 어포던스

UX 디자인 측면에서 앱의 버튼과 같은 GUI 콘트롤(control) 요소에 조작 가능하다는 시각 적단서를주어사용자의행동을유도할수있어야한다. 아이콘디자인의경우, 그형태 나 모양이 사용자가 예측하는 작동에 기대치를 확인할 수 있도록 충분한 정보를 제공해야 한다. GUI 디자인은 시각 요소를 이용한 디자인 스타일의 느낌과 같은 미적 측면만이 아 니라, 사용자의 인지적 측면을 고려하여 완성해나가야 한다. 앱의 GU 요소에 대해 어포던 스를 적용하기 위해서 다음과 같은 어포던스 유형과 디자인의 방법을 이해하여야 한다.

  • 감각적 어포던스
  • 물리적 어포던스
  • 인지적 어포던스
  • 기능적 어포던스

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼