UI 디자인 언어의 재물질화

Abstract

본 연구에서는 오프라인에서 있는 물질 그대로 가상의 아이콘으로 표현되고 있는 시점 을 주목하면서 시작한다. 현재 이 시점은 어느 때보다 빠르게 그래픽이 변화되고 가상과 현실의 경계가 모호해지는 시대에 살고 있다. 이러한 시점을 반대로 적용 모바일 환경의 비물질 표현을 다시 오프라인으로 가져와 본 논문에서 새롭게 정의한 재물질화 되는 새로 운 그래픽 방법으로 확장을 통해 제안하는 방법을 제시하려고 한다. 디지털 공간으로 들어가려는 시도가 늘어나고 있으며, 편리성을 요구하는 사용자들에 맞춰 제한된 인터페이스에 정보, 언어, 그래픽과 같은 시각적인 내용들이 들어가는 ‘UI 디 자인’이 중요시되고 있다. UI 디자인 요소 중에 GUI(Graphic User Interface) 아이콘은 명 령(Action), 상태(state), 특정 기능과 정보를 상징적으로 단순하게 시각화하여 디자인된 그래픽 요소이다. 또한 이러한 시각적으로 보여지는 그래픽은 우리가 상상으로만 여겼던 것들을 현실로 구현이 가능하게 되면서 매체의 변화 되는 것을 체감할 수 있게 되는데 이 를 통해 사용자는 아이콘을 모바일 화면을 통해서 보면서 사전에 알지 못한 기능이나 명 령을 직관적으로 이해하고 상호 작용할 수 있는 중요한 인터페이스라고 할 수 있다. 이처럼 현재 모바일에 사용되고 있는 UI 아이콘은 만질 수 없는 비물질화 되어 정보를 전달하는 역할을 하는 연구는 많지만, 반대로 인터페이스에서 사용되고 있는 그래픽을 표 현 방법을 현실에 적용하는 연구의 비율은 상대적으로 미미하다. 따라서 본 연구에서는 일상생활에서 사용자들이 친숙하면서 많이 접하고 정보를 얻게 되는 비물질인 UI 아이콘 디자인의 시대에 따른 변화와 특징을 살펴볼 필요가 있다.UI 아 이콘의 변화는 한눈에 봐도 알 수 있듯이 특징이 확실하게 보여지고 사용자가 바라보는 시각적 인식에 따라도 변화된다. 그 이유는 인간의 시각은 글로 쓰여진 텍스트보다 훨씬 빠르게 이미지를 인식하고 인터페이스와의 상호작용에서 사람들이 실제로 필요한 것보다 더 많은 데이터를 처리하고 기 억할 필요가 없으므로 상호작용은 더 빨라진다는 것을 의미한다. 그렇기 때문에 빠르고 쉽게 상호작용하는 도구로서 레이아웃의 시작적요소인 아이콘은 큰 이점을 제공한다. 상호작용할 수 있는 시각적요소로 가상에서는 ‘UI 아이콘’을 나타낼 수 있고 현실에서는 ‘픽토그램’으로 표현될 수 있다. 인터페이스에서 아이콘을 적용하는 이유 중에 하나인 시 각적 이미지를 통한 요소의 기억력 향상이다. 이러한 강점이 있는 UI 아이콘을 현실에서 사용가능한 픽토그램에 적용하게 되면 시각적 표현의 다양한 방법으로 활용 가치를 높일 뿐만 아니라 이러한 표현 방법을 적용한 사이니지로서 활용이 가능하다고 생각하여 이에 대한 가능성에 대해 연구 하고자 한다. 본 연구자는 UI 아이콘과 픽토그램 그리고 사이니지의 이론적 배경을 통하여 그 관계를 탐색하고 사용되는 표현된 특징과 흐름을 분석한다. 이어서 매체 변화에 따른 비물질화와 재물질화의 개념과 사례를 파악하고 본 연구에서 표현하려고 하는 개념인 ‘재물질화’를 통 하여 활용 방법으로 <의미 활용>과 <표현 활용>으로 나눠 분석하는 기준을 세우고 그 중 에서 <표현 활용>을 통해서 재물질화의 그래픽 표현을 분석한다. 표현 분석의 대상은 머 티리얼 디자인과 글래스모피즘으로 범위를 한정 지어서 두 유형의 레이어(Layer)와 소재 (Material) 그리고 그림자(Shadow)의 표현 효과의 정의에 대해서 알아본다. 앞서 정리한 표현 방법을 활용하여 적용 가능한 대상지를 선정한 후 분석하였으며, 사 례 분석 대상은 기상청에서 운영하는 밀양시에 위치하고 있는 ‘국립 기상 과학관’을 대상 으로 UI 아이콘 그래픽 표현 방법을 적용한 사이니지 제안 연구를 진행하기 위한 사인 현 황과 분석을 하였다. 비물질인 날씨 UI 아이콘이 현실에서 가장 활용이 가능하다고 생각하였고 일상생활에서 가장 친숙한 정보이며 모바일에서 보던 익숙한 UI 아이콘을 현실에 픽토그램과 사이니지 에 적용 했을 때 적합하다고 생각 했기 때문에 국립 기상과학관으로 선정하게 되었다. 이어서 대상지에 적용이 활용이 가능한 UI 아이콘 유형 중에 머티리얼 디자인과 글래스모피즘 디자인의 사례를 찾아본다. 표현 사례 분석 대상은 ‘날씨 UI 아이콘’ 이며, 사례 분석은 다음과 같은 조건으로 찾아 보았다. 첫 번째, 현재 구글 플레이(Google Play)와 애플의 앱스토어(App Store)에 다운로 드 되고 있는 앱 중에서 앞서 분석한 아이콘 유형 위주로 날씨와 미세먼지 UI 아이콘들을 대상으로 정하였다. 두 번째, 두개의 어플리케이션 시장에서 사용자가 사용성과 리뷰 평가 가 높은 날씨 앱으로 총 6개의 날씨 어플리케이션을 분석하였다. 세 번째, 시각 인터페이스 디자인의 구성 요소인 형태, 표현 요소, 컬러, 효과에 대해 분석하였다. 끝으로 본 연구에서 재물질화 표현 방법의 분석 틀을 활용하여 UI 아이콘 그래픽 표현을 적용한 사이니지를 개발한다. 디자인 개발 계획을 토대로 디자인 흐름을 정하고 디자 인 레이아웃과 규칙을 정하며, 픽토그램을 제작하게 된다. 이어서 재물질화 실험 과정을 통해 실제로 구현이 가능한 모습을 살펴보고 사이니지에 활용하는 방법으로 진행한다. 본 연구가 디지털 요소를 실제 3차원 세계로 가져오면서 새로운 사이니지의 다양한 표 현 방법을 이끌어내기 위한 방법으로 활용되는 표현으로 사용되기를 바라며, 물질과 비물 질화 그리고 재물질화에 대한 매체 전환을 통한 연구 과정과 재물질화 표현의 발전된 가능성을 확장하는 데 기여하길 희망한다. ;This research starts with paying attention to the point where the material is expressed as virtual icon just as it is in offline. Current period is the era where graphics change faster than ever, and boundaries between virtual and reality is unclear. By reversely applying this, this study suggests; by bringing immaterial expressions in mobile environment to off-line, a graphical method to expand to a newly defined rematerialized status. In the contemporary world, there are more attempts being made to enter into digital space. ‘UI design’, which includes visual contents such as information, language and graphics, in a limited interface based on demands of convenience of users, is gaining its importance. Among UI design elements, GUI (Graphic User Interface) icons are graphic elements that are designed to symbolically simplify and visualize action, state, specific functions and information. Furthermore, these visualized graphics allow us to realize the changes in the medium as we can see what we have only imagined. This can be seen as an important interface since while seeing icons through mobile screen, users are able to intuitively understand and interact with functions or commands that they did not know in advance. While there are many existing studies on UI icons used on mobile devices as informative ‘dematerialized’ objects. Nevertheless, there are insignificant amount of studies that apply the graphic representation method used in the interface into the reality. Therefore, it is necessary to examine chronological changes and characteristics of UI icon, which is a immaterial object, design that are familiar to users and encounter a lot of information in daily lives. The reason for this is that, the vision of human beings recognizes images faster than written texts and interacts with interfaces – which means that humans don’t have to process and remember more data than they actually need to, the interaction becomes faster. Therefore, icons, which are the initial elements as a layout tool for quick and easy interaction offers great amount of advantageous factors. As interactive visual elements in the virtual world, it can be represented as ‘UI icon’ and in the real world it can be represented as a ‘pictogram’, One of many reasons for applying icons on the interface is that it can improve the memory by visual images. If UI icon with such strengths is being applied to pictogram which can be used in reality, it not only increases the value of visual expression in many ways, but also can be used as a signage that applies this method. This study examines the possibility of this case. This study explores the theoretical background on UI icon, pictogram and signage and analyzes relationships and characteristics among these features. Subsequently, concepts and cases of dematerialization and resterilization in accordance to change of media are identified. Through the ‘resterilization’ concept to be expressed in this research, analysis method will be categorized into; <Signification Utilization> and <Expression Utilization> as a method of use, and graphic representation of resterilization will be analyzed. The main subject of expression analysis is limited to material design and glasmorphism, and this study will explore definition of two types of layer, material and shadow expression effects. Applicable sites in accordance with above methods were selected and analyzed, and the case selected for this study was National Institute of Meteorological Sciences in Miryang city which is the one of the affiliated institute of Korean National Meterological Agency. The object of the case study was to conduct a signage proposal study using graphic expression method of UI icon. Immaterial weather UI icon was the most actively used in the real life. Moreover, the reason for selecting National Institute of Meteorological Sciences was that the weather was the most familiar information in daily lives and was also suitable and applicable UI icon on mobile pictogram and signage. To continue with, among types of UI icons which can be applied to the case study site, examples of material design and glass morphism design can be found. The case for expression is ‘weather UI icon’. The case study was found under following conditions. First, it was found among the UI icons of weather and fine dust apps currently downloaded within Apple App Store and Google Play. Second, within two app markets, total number of six weather apps were analyzed with high usability and reviewed by users. Third, components of visual interface design, for example as shape, expression elements, color and effects were analyzed. Lastly, by using analyzing rematerialization analysis framework suggested by this study, develop signage applied with UI icon graphical expressions. Based on the planned design, determine flow of the design and layout and rules and pictogram is produced. Then, through the rematerialization experiment process, how it can be realized can be examined. Lastly, with the result it will be applied to signage. I hope this research can be used to bring digital elements into the real three dimensional world and to bring out various expressions of new signage. To add on, I hope that this study can contribute to expanding research process of media transformation of re-materialization, moreover contribute to expanding development of re-materialization expressions.