• 디지털융복합연구
• /
• 제18권5호
• /
• pp.417-423
• /
• 2020

본 연구는 안드로이드의 구글 머티리얼 가이드를 중심으로 애플리케이션의 인터페이스 디자인을 구성하는 요소들에 관하여 연구하고, 형태 및 조합 방식에 따라 분류하여 UI 디자인 가이드 제작하는 방식을 제안하는 데 목적이 있다. 우선 머티리얼 디자인 가이드라인이 제공하고 있는 컴포넌트들을 분해하여 구성 요소들에 대해 분석하고, 형태 및 속성에 따라 구분하여 유형을 나눈 뒤 각각의 특성에 대하여 조사하였다. UI 디자인의 최소 구성 요소로는 표면, 글자, 아이콘, 미디어가 있고 이러한 요소들은 컴포넌트 적용 사례를 수집하여 공통 규칙을 수립하는 방식으로 가이드를 제작하는 것이 효율적이다. 컴포넌트는 목적에 따라 정보 탐색과 알림, 콘텐츠 전달로 분류할 수 있었는데 속성 및 고려해야 할 점이 달라 각각에 맞는 제작 방식을 연구하였다. 이러한 결과는 모바일 애플리케이션의 인터페이스 디자인을 구성하는 데 있어서 효율적 가이드를 제공하는 데 의의가 있으며, 머티리얼 디자인을 바탕으로 하는 UI 디자인의 지침이 될 것으로 기대한다.

• 한국콘텐츠학회논문지
• /
• 제19권10호
• /
• pp.353-363
• /
• 2019

본 연구는 모바일 앱 배색을 위한 색채 추천 시스템의 활용을 위한 연구이다. 이를 위해 선택 색상에 조화되는 색채를 자동으로 추천해주는 머티리얼 시스템과 모바일 웹 앱의 3 배색을 모바일 앱 디자인에 적용하여 배색 실험을 하였다. 그리고 두 가지 방법의 실험에 대한 설문으로 색상 구성과 선택 색상, 결과물의 만족도에 관한 정도를 리커트 7점 척도로 알아보았고, 결과물에 따른 배색 특징을 비교하여 분석하였다. 머티리얼 컬러 팔레트는 정해진 색상의 규칙적인 색조 단계를 자동으로 시스템화하여 색상 선택을 쉽게 하였지만, 모바일 웹 앱 3 배색인 주조색, 보조색, 강조색에 대한 색상 구성과 색상 범위가 다르며, 프라이머리 컬러와 세컨더리 컬러만 선택 가능하여 디자인에 따라 강조색의 선택 기능이 필요했다. 또한 머티리얼 시스템은 색상 범위와 배색 범위가 정해져 있기 때문에 유채색의 사용이 많았고, 대비가 큰 색조나 보색을 선택해도 배색 범위에 따라 배색 결과물의 이미지가 달라져서 배색 범위에 따른 색상 구성의 역할이 중요했다.

• 디지털융복합연구
• /
• 제17권12호
• /
• pp.461-466
• /
• 2019

본 연구에서는 인터페이스의 디자인에 있어 시각적 무게에 따라 디자인을 구성할 수 있음을 알아보았다. 우선 인터페이스 디자인은 스큐어모피즘의 시대를 거쳐 플랫디자인에서 머티리얼 디자인 또는 머리티얼 디자인 일부를 차용해 심도와 차원을 표현하고 있었다. 이는 심도와 차원을 표현하기 어려운 메트로 UI와 플랫디자인의 특징에 의한 것이지만 머티리얼 디자인에서는 시선 유도를 위한 별도의 장치는 없었기에 게슈탈트 이론에서 시각적 무게를 구분할 수 있는 원리에 대해 알아보았다. 포지티브와 네거티브, 영역의 크기와 배치, 근접성, 폐쇄성 그리고 관념성이 시각적 무게와 방향에 대해 밀접한 관련이 있었으며 그를 통해 몇 가지 사례를 통해 인터페이스에 적용될 수 있음을 알 수 있었다.

• 한국콘텐츠학회논문지
• /
• 제21권2호
• /
• pp.148-160
• /
• 2021

최근 UI 디자인에 대한 중요성이 부각되어 여러 연구가 진행되었음에도 불구하고, 새로운 뉴모피즘 디자인의 관련된 연구는 찾기 어렵다. 이에 본 연구의 목적은 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인과 새롭게 등장한 뉴모피즘 디자인을 중심으로 GUI 디자인의 발전 과정을 살펴보면서 뉴모피즘의 UI 디자인 트렌드로서 가능성을 알아보는 것이다. 따라서 본 연구는 두 가지 연구 방법으로 진행하였다. 첫째, 문헌 연구를 통해 기존 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인이 적용된 실제 사례와 UI 디자인 트렌드들의 특징 및 한계에 대해 살펴보았다. 둘째, 뉴모피즘 디자인의 정의와 특징을 바탕으로 가장 최근의 UI 디자인 트렌드이자 뉴모피즘과 비슷한 특징을 가진 머티리얼 디자인과 그림자 스타일 방식을 비교하였으며, 뉴모피즘이 새로운 UI 디자인 트렌드가 될 가능성에 대해 분석하였다. 이를 통해 본 연구는 해당 디자인의 장점을 극대화하기 위해 이를 부분적으로 적용하는 방법을 제안하였다. 이는 아직 연구가 진행되지 않은 새로운 뉴모피즘 디자인이 앞으로 UI 디자인 트렌드가 될 가능성을 제시한 점에서 의의를 갖는다.

• 디지털융복합연구
• /
• 제17권4호
• /
• pp.261-266
• /
• 2019

본 연구는 구글 머티리얼 디자인의 컴포넌트인 플로팅 액션 버튼 중 오른쪽 하단 표준형의 사용 실태와 효율성을 파악하고 올바른 사용법을 제안하는 것을 목적으로 한다. 1차는 사례 연구로 서비스별 플로팅 액션 버튼의 사용 실태와 장단점을 조사했다. 2차로 스마트폰 이용자 12명을 대상으로 한 아이트래킹 실험과 심층 인터뷰를 진행하였다. 그 결과, 플로팅 액션 버튼은 직관적인 디자인으로 사용자들의 이목을 끌어 특정 액션을 유도할 수 있는 것으로 나타났다. 그러나 사용자들의 시선은 대부분 상단에 머무르며 인터페이스가 상단에 배치되는 것을 선호하는 것으로 조사되었다. 해당 컴포넌트로 긍정적인 사용자 경험을 주기 위해서는 콘텐츠의 가림 정도, 사용자들의 애플리케이션 사용 행동 및 경향 등을 고려할 필요가 있다. 이 연구는 플로팅 버튼의 올바른 사용법을 제기하는 데 의의가 있다.

• 한국콘텐츠학회논문지
• /
• 제16권10호
• /
• pp.503-513
• /
• 2016

지금까지 스마트 폰 사용자는 Innovator, Early Adopter가 주 고객이었다면 가격 안정화와 인터넷을 즐기는 노인세대가 등장하면서 소외계층에 대한 중요성 및 체계적인 분류와 집중, 전략의 필요해졌다. 그리고 노년계층만으로 국한된 소외계층이 아닌 자신의 의지에 따라 사용자가 될 수 있는 잠재적 사용자에 대한 세분화와 그들을 확보할 수 있는 UI에 대한 분석이 필요하다. 그들을 확보하기 위해 iPhone의 스큐어모피즘, MS 메트로UI, Google 머티리얼 UI가 변하는 과정에서 UI의 기본구성요소(WIMP)가 어떻게 적용되어 왔는지 분석하였다. 분석결과 스큐어모피즘은 완전히 새로운 것이 아닌 사용자에게 외면 받았던 부분을 보완 개선하는 방식으로 천천히 잠재적 사용자를 확보하고 있고 메트로 UI는 터치UI개념으로 처음부터 잠재적 사용자를 고려하였지만 새롭고 획기적인 UI로 그들을 확보하지 못했다. 하지만 Google의 머티리얼 UI는 스큐어모피즘 UI와 메트로 UI의 단점을 보완하고 가성비를 내세워 잠재적 사용자 중 최종수용자까지 확보할 수 있는 UI로 발전하고 있다. 따라서 잠재적 사용자를 확보하기 위해서는 스마트폰을 왜(why) 사용해야 하는지에 대해 사용자 스스로가 공감할 수 있도록 해야 하며 직접적인 대화와 관찰의 피드백을 통해 더욱 체계적인 UI연구로 접근해야 함을 제언한다.

• 디지털융복합연구
• /
• 제19권1호
• /
• pp.343-348
• /
• 2021

본 연구는 재사용 가능한 디자인 시스템 구출을 위한 프레임워크 제안을 위해 아토믹 디자인 시스템을 기반으로 블록을 구성하여 조합하는 방법에 대해 알아보았다. 그를 위해 디자인 시스템의 필요성과 스노우화이트, 스큐어모픽 디자인, 플랫디자인 및 머티리얼 디자인의 사례를 우선적으로 살펴보았다. 또 화학의 원리를 메타포로 사용하는 아토믹 디자인의 분자, 원자, 유기체, 템플릿 그리고 페이지를 문헌 연구를 통해 정의하였다. 새로운 프레임 워크를 구현하기 위해 인터페이스 인벤토리를 구성하고 그 중에서 폰트, 컬러, 이미지와 컨트롤 요소를 핵심 시각 요소로 추출하여 가이드라인을 정의하였으며 그를 바탕으로 분자 요소를 분류하고 원자로 구성할 수 있었다. 블록은 콘텐츠 인벤토리에서 가장 많이 사용되는 디자인 패턴을 기반으로 블록 형태고 구성되도록 하여 블록의 조합을 통해 시각적 그리드를 바탕으로 레이아웃을 구현하고 페이지를 디자인하도록 프레임워크를 구성하였다. 새로운 프레임워크는 블록의 재사용으로 팀의 일관성과 협업을 도우며 파일의 공유와 업데이트를 지원한다는 것에 본 논문의 의의가 있다.