[논문]뉴모피즘 디자인이 적용된 UI 디자인 트렌드 분석 연구

박지혜; 오나예; 박진완

doi:10.5392/jkca.2021.21.02.148

뉴모피즘 디자인이 적용된 UI 디자인 트렌드 분석 연구
A Study on UI Design Trends Analysis with Neumorphism Design 원문보기

한국콘텐츠학회논문지 = The Journal of the Korea Contents Association, v.21 no.2, 2021년, pp.148 - 160

박지혜 (중앙대학교 첨단영상대학원) , 오나예 (중앙대학교 첨단영상대학원) , 박진완 (중앙대학교 첨단영상대학원)

초록
AI-Helper

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

Abstract ▼ AI-Helper

Although a great deal of research has been carried out recently with the rise of importance of the UI design, little research has been conducted on the new Neumorphism design. Given the paucity of the research, we demonstrated the development process of GUI design, focusing on the UI design trends, Skeuomorphism, Flat, Material design and the emerging Neumorphism design. Based on this, the aim of the study is to look into the possibility of Neumorphism design, which is currently drawing attention, as the new UI design trends. This study was ordered as follows in two ways. First, drawing from the work of literature, we illustrated the UI design trends by considering the Skeuomorphism, Flat, and Material Design which were before the advent of the Neumorphism design. In addition, we conducted a study on the characteristics and limitations of the UI design trends through actual cases in which UI designs were applied. Second, the Material design as the most recent UI design trends and the Neumorphism design were compared with the method of expression based on the definition and characteristics of Neumorphism design that we investigated. In this context, we also analyzed the possibility of Neumorphism becoming the new UI design trend. We proposed an application of the design to maximize the benefits. This study is meaningful in that the Neumorphism design, which has yet to be studied, is likely to become the UI design trends in the future.

주제어

표/그림 (23)

그림 그림 1. iBooks[8]
그림 그림 2. 이메일 아이콘[13]
그림 그림 3. 플로피 디스크를 본 뜬 한컴 저장 아이콘[14]
그림 그림 4. 초창기 인스타그램 아이콘[15]
그림 그림 5. 명확한 기능을 강조해 전달하기 위해 플랫 디자인을 적용한 윈도우8 마이크로소프트 스토어[24]
그림 그림 6. 접근하기 쉬운 이미지를 형성하기 위해 평평한 디자인의 서체를 적용한 구글 로고[26]
그림 그림 7. 플랫 디자인이 적용된 삼성 페이[27]
그림 그림 8. 안드로이드 6.0 마쉬멜로우 안드로이드 롤리팝 내비게이션 바[34]
그림 그림 9. 아이콘[37]
그림 그림 10. 구글 드라이브(Google Drive)[38]
그림 그림 11. 구글 폼(Google Form)[39]
그림 그림 12. 다크 모드를 적용한 애플 iOS 13[42]
그림 그림 13. 알렉산더 플라이토의 스큐어모프 모바일 뱅킹프로토타입[44]
그림 그림 14. 외부,내부 그림자 효과가 적용된 뉴모피즘 유아이킷(UI kit) - 메이즈픽셀(MazePixel)[45]
그림 그림 15. 다양한 배경색이 활용된 뉴모피즘 디자인[48]
그림 그림 16. 머티리얼 가이드에서의 그림자 스타일[49]
그림 그림 17. 머티리얼 가이드에서 요소들의 분리의 맞는 예(왼쪽), 틀린 예(오른쪽)[50]
그림 그림 18. 칸하이야 샤르마(Kanhaiya Sharma), 뉴모피즘 디자인에서의 그림자 스타일 예시[51]
그림 그림 19. 컬러우지 에그부드(Courage Egbude),뉴모피즘 디자인에서의 그림자 스타일[51]
그림 그림 20. 카드에 적용된 뉴모피즘과 머티리얼 디자인의 그림자 스타일[52]
그림 그림 21. 뉴모피즘 디자인에서의 버튼 상태[52]
표 표 1. 뉴모피즘과 머티리얼 디자인 비교
그림 그림 22. 하나은행 어플리케이션 '뉴 하나원큐'[54]

AI 본문요약
AI-Helper

문제 정의

이에 본 연구에서는 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대해 살펴보고 새롭게 등장한 뉴모피즘 디자인을 중심으로 GUI 디자인의 발전 과정을 살펴본다. 또한, 뉴모피즘 디자인이 새로운 UI 디자인 트렌드가 될 가능성에 대해서도 고찰해보고자 한다.
또한, 뉴모피즘 디자인이 앞으로 UI 디자인 트렌드가 될 것인지에 대해 분석하였다. 이를 위해 본 연구에서는 해당 디자인의 활용을 극대화하기 위해 이를 부분적으로 적용하는 방법을 제안하였다. 이를 위해 뉴모피즘 디자인을 간략한 정보의 시각화 및 일부 요소에만 부분적으로 차용한다면 좋은 효과를 낼 것으로 판단된다.
한편, UI 디자인에 대한 여러 연구가 진행되었음에도 아직 새로운 뉴모피즘 디자인의 관련된 연구는 드물다. 이에 본 연구에서는 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대해 살펴보고 새롭게 등장한 뉴모피즘 디자인을 중심으로 GUI 디자인의 발전 과정을 살펴본다. 또한, 뉴모피즘 디자인이 새로운 UI 디자인 트렌드가 될 가능성에 대해서도 고찰해보고자 한다.
이에 본 연구에서는 기존의 UI 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인을 중심으로 GUI 디자인의 발전 과정을 문헌 연구와 실제 사례로 살펴보았다. 기존 디자인의 발전은 보완을 위한 시도로 이루어진 것으로 분석되었다.
첫째, 본 연구의 목적은 UI 디자인의 발전 과정과 새로운 트렌드를 분석하는 데에 있다. 하지만 뉴모피즘이 새로운 UI 디자인 트렌드가 될 것인지에 대한 실증적 연구가 이루어지지 않았다.

제안 방법

더불어 해당 디자인은 ‘빛의 움직임’을 통해 구현하는데, 이를 그림자 스타일을 기준으로 머티리얼 디자인과 비교하여 제시하였다.
또한 UI 디자인들이 적용된 실제 사례를 통해 UI 디자인 트렌드들의 특징 및 한계에 대한 연구를 진행하였다. 두 번째로는 뉴모피즘 디자인의 정의와 특징을 조사하였으며 이를 바탕으로 가장 최근의 UI 디자인 트렌드이자 뉴모피즘과 비슷한 특징을 지닌 머티리얼 디자인과 표현 방식을 비교하였다. 또한 뉴모피즘이 새로운 UI 디자인 트렌드가 될 가능성에 대해 분석하였다.
첫 번째로 뉴모피즘 디자인이 등장하기 전에 과거부터 지금까지의 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대한 문헌 연구를 진행하였다. 또한 UI 디자인들이 적용된 실제 사례를 통해 UI 디자인 트렌드들의 특징 및 한계에 대한 연구를 진행하였다. 두 번째로는 뉴모피즘 디자인의 정의와 특징을 조사하였으며 이를 바탕으로 가장 최근의 UI 디자인 트렌드이자 뉴모피즘과 비슷한 특징을 지닌 머티리얼 디자인과 표현 방식을 비교하였다.
두 번째로는 뉴모피즘 디자인의 정의와 특징을 조사하였으며 이를 바탕으로 가장 최근의 UI 디자인 트렌드이자 뉴모피즘과 비슷한 특징을 지닌 머티리얼 디자인과 표현 방식을 비교하였다. 또한 뉴모피즘이 새로운 UI 디자인 트렌드가 될 가능성에 대해 분석하였다.
또한, 뉴모피즘 디자인이 앞으로 UI 디자인 트렌드가 될 것인지에 대해 분석하였다. 이를 위해 본 연구에서는 해당 디자인의 활용을 극대화하기 위해 이를 부분적으로 적용하는 방법을 제안하였다.
기존 디자인의 발전은 보완을 위한 시도로 이루어진 것으로 분석되었다. 이러한 흐름 속 뉴모피즘의 트렌드로서의 가능성을 알아보기 위해 초기의 스큐어모피즘, 플랫 디자인 그리고 가장 최근의 머티리얼 디자인과 비교하였다. 뉴모피즘 디자인은 스큐어모피즘 디자인의 단점을 플랫 디자인으로 순화하여 단순한 형태를 실제 사물과 최대한 비슷하게 표현하고자 하는 UI 디자인이다.
본 연구는 두 가지 연구 방법으로 진행하였다. 첫 번째로 뉴모피즘 디자인이 등장하기 전에 과거부터 지금까지의 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대한 문헌 연구를 진행하였다. 또한 UI 디자인들이 적용된 실제 사례를 통해 UI 디자인 트렌드들의 특징 및 한계에 대한 연구를 진행하였다.

성능/효과

이에 본 연구에서는 기존의 UI 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인을 중심으로 GUI 디자인의 발전 과정을 문헌 연구와 실제 사례로 살펴보았다. 기존 디자인의 발전은 보완을 위한 시도로 이루어진 것으로 분석되었다. 이러한 흐름 속 뉴모피즘의 트렌드로서의 가능성을 알아보기 위해 초기의 스큐어모피즘, 플랫 디자인 그리고 가장 최근의 머티리얼 디자인과 비교하였다.
둘째, 접근성은 뉴모피즘을 포함한 UI 디자인에서도 중요한 문제로 떠오르고 있는 주제다. 그러나 본 연구는 사례 중심으로 이루어져 접근성 연구가 이루어지지 않았다.

후속연구

둘째, 접근성은 뉴모피즘을 포함한 UI 디자인에서도 중요한 문제로 떠오르고 있는 주제다. 그러나 본 연구는 사례 중심으로 이루어져 접근성 연구가 이루어지지 않았다. 이에 추후 연구에서는 뉴모피즘을 접근성 측면에서 심층 분석한 연구가 이루어져야 할 것이다.
그러나 향후 연구에서는 다양한 시도와 보완이 이루어져야 할 필요가 있다. 동시에 본 연구의 한계점은 두 가지로 나누어진다.
본 연구는 아직 연구가 진행되지 않은 새로운 뉴모피즘 디자인의 분석과 더불어 UI 디자인 트렌드가 될 가능성을 제시한 점에서 의의를 갖는다. 이는 앞으로의 뉴모피즘 디자인 연구와 그 활용의 예측에 있어 이론적 기반이 될 것으로 판단된다.
하지만 뉴모피즘이 새로운 UI 디자인 트렌드가 될 것인지에 대한 실증적 연구가 이루어지지 않았다. 이를 위한 사용성 평가는 추후 연구로 진행될 예정이다.
이를 위해 본 연구에서는 해당 디자인의 활용을 극대화하기 위해 이를 부분적으로 적용하는 방법을 제안하였다. 이를 위해 뉴모피즘 디자인을 간략한 정보의 시각화 및 일부 요소에만 부분적으로 차용한다면 좋은 효과를 낼 것으로 판단된다.
그러나 본 연구는 사례 중심으로 이루어져 접근성 연구가 이루어지지 않았다. 이에 추후 연구에서는 뉴모피즘을 접근성 측면에서 심층 분석한 연구가 이루어져야 할 것이다.
첫째, 본 연구의 목적은 UI 디자인의 발전 과정과 새로운 트렌드를 분석하는 데에 있다. 하지만 뉴모피즘이 새로운 UI 디자인 트렌드가 될 것인지에 대한 실증적 연구가 이루어지지 않았다. 이를 위한 사용성 평가는 추후 연구로 진행될 예정이다.

참고문헌 (54)

박지수, 김헌, UX 디자인 7가지 비밀, 안그라픽스, 2013.
https://terms.naver.com/entry.nhn?docId1179975&cid40942&categoryId32842, 2020.09.28.
박선아, 박승호, "아이콘 디자인의 구체성과 추상성에 관한 연구 - 모바일 애플리케이션 아이콘을 중심으로 -," 디자인융복합학회, 제13권, 제5호, pp.199-217, 2014.
김건동, 윤주현, "사용자유형에 따른 스마트폰 OS 아이콘의 의미와 표현 측면의 단순화 선호도," 기초조형학연구, 제16권, 제3호, pp.43-56, 2015.
Nicholas Gessler, "Skeuomorphs and cultural algorithms," Lecture Notes in Computer Science, Vol.1447, 1998.
박옥미, "패션텍스타일디자인에 나타난 스큐어모피즘 현상에 관한 기술의 인문학적 해석," 한국디자인문화학회지, 제24권, 제2호, pp.269-283, 2018.
https://story.pxd.co.kr/591, 2020.09.28.
https://www.wired.com/2010/07/ibooks-updated-with-image-zoom-audio-and-video-support/, 2020.09.25.
오인균, 정석길, "애플 어플리케이션 UI 디자인에 적용된 스큐어모피즘(skeuomorphism) 표현 특성 연구," 디지털디자인학연구, 제13권, 제2호, pp.463-472, 2013.

상세보기
김보연, 한석환, "iOS 사용자 인터페이스 디자인의 스큐어모피즘 - 시뮬라크르 연속 단계 이론을 통한 해석 -," 커뮤니케이션 디자인학연구, 제67권, pp.198-208, 2019.
정동훈, "모바일 플랫폼의 미학적 특징과 UX 평가," 감성과학, 제18권, 제3호, pp.71-80, 2015.

원문보기 상세보기
https://www.chicagototal.com/world-news/windows-10-app-icon-renewal/, 2020.09.28.
https://tipsmake.com/microsoft-explains-the-meaning-of-the-fluent-design-logo-templates-that-are-about-to-be-used-on-windows-10, 2020.09.25.
https://www.hancom.com/board/hshowView.do?board_seq20&artcl_seq4593&pageInfo.page&artcl_clss&search_text, 2020.09.25.
http://www.elischiff.com/blog/2016/5/24/instagrams-abomination-part-ii, 2020.09.25.
http://digxtal.com/insight/20120925/%ec%95%a0%ed%94%8c%ec%9d%98-%ec%8a%a4%ed%81%90%ec%96%b4%eb%aa%a8%ed%94%bc%ec%a6%98%ea%b3%bc-%ea%b8%b0%ec%88%a0%ec%9d%98-%ec%9d%b8%eb%ac%b8%ed%95%99/, 2020.09.24.
https://terms.naver.com/entry.nhn?docId3377369&cid42346&categoryId42346, 2020.09.28.
http://layervault.tumblr.com/post/32267022219/flat-interface-design, 2020.09.28.
황순재, "플랫 인터페이스 디자인의 탈 메타포적 관점에 관한 비평적 연구 - 모바일 환경을 중심으로 -," 일러스트레이션 포럼, 제41권, pp.57-68, 2014.
김영민, "플랫디자인 적용에 따른 웹사이트 감성 효과 연구," 산업기술연구논문지, 제20권, 제3호, pp.55-66, 2015.
이현주, 홍미희, "국내 웹 디자인 변천사 - 디자인 표현기법과 기술적 변화를 중심으로 -," 한국콘텐츠학회 논문지, 제20권, 제3호, pp.200-208, 2020.

원문보기 상세보기
경림정, 이진호, "우유 패키지 디자인의 플랫화 사례 연구," 한국디자인학회 학술발표대회 논문집, pp.174-175, 2015.
박찬익, "인터페이스 디자인의 시각적 무게," 디지털융복합연구, 제17권, 제12호, pp.461-466, 2019.

원문보기 상세보기
https://blogs.microsoft.com/blog/2012/02/29/the-midweek-download-feb-29th-edition-microsoft-unveils-the-windows-8-consumer-preview-craig-mundie-hosts-techforum-2012-plus-microsoft-research-visual-studio-11-beta-windows-phone/, 2020.09.25.
https://biz.chosun.com/site/data/html_dir/2015/09/02/2015090202291.html, 2020.09.25.
https://www.theverge.com/2015/9/1/9239769/new-google-logo-announced, 2020.09.25.
https://www.etnews.com/20200220000218, 2020.09.25.
김두한, 어도비 XD CC 2020 무작정 따라하기, 길벗, 2020.
Katie Lucaites, Brian Fletcher, and Alexander Pyle, "Measuring the Impact of Affordance-Based Clickability Cues," In Proceedings of ACM Conference, Washington, DC, USA, p.7, 2017.
https://terms.naver.com/entry.nhn?docId1588590&cid50333&categoryId50333, 2020.09.28.
https://cm.asiae.co.kr/article/2015110307273609097, 2020.09.28.
김수희, 오치규, "스마트 폰 UI의 디자인 철학에 따른 잠재적 사용자 확보," 한국콘텐츠학회논문지, 제16권, 제10호, pp.503-513, 2016.

원문보기 상세보기
김건웅, 고장혁, 정혜경, "머티리얼 디자인을 적용한 북크로싱 서비스," Journal of Integrated Design Research, 제15권, 제1호, pp.21-30, 2016.
https://www.tested.com/tech/android/466219-everything-you-need-know-about-android-50-lollipop/, 2020.09.25.
김병주, "모바일 GUI에 나타난 디자인 표현 특성에 관한 연구," 디지털디자인학연구, 제14권, 제4호, pp.295-306, 2014.
강효진, 김승인, "Floating Action Button의 사용실태와 올바른 사용법," 디지털융복합연구, 제17권, 제4호, pp.261-266, 2019.

원문보기 상세보기
http://www.itworld.co.kr/t/54653/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%20%EC%98%A4%ED%94%BC%EC%8A%A4/129734, 2020.09.25.
https://chrome.google.com/webstore/detail/floating-action-button-fo/gcmplbpmeilihjhdolgikjoohcffdhio?hlko, 2020.09.25.
https://dottotech.com/create-gorgeous-forms-with-google-forms/, 2020.09.25.
https://www.apple.com/kr/newsroom/2019/06/apple-previews-ios-13/, 2020.09.25.
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/, 2020.09.28.
https://www.ilounge.com/news/ios-13-rumoured-to-introduce-dark-mode, 2020.09.25.
https://www.inputmag.com/design/apple-macos-big-sur-the-rise-of-neumorphism, 2020.09.28.
https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking, 2020.09.28.
https://www.uistore.design/items/neumorphic-ui-elements-for-sketch/, 2020.09.10.
https://builtin.com/design-ux/neumorphismaccessibility, 2020.09.28.
https://medium.com/@lukasckuehne/trying-out-soft-ui-12153537dc50, 2020.09.28.
https://stoneitgt.com/2020/02/11/neumorphism/, 2020.09.28.
https://material.io/design/environment/lightshadows.html#shadows, 2020.09.28.
https://material.io/design/environment/surfaces.html#properties, 2020.09.28.
https://uxdesign.cc/neumorphism-in-adobexd-8f5347d84737, 2020.09.28.
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6, 2020.09.28.
https://www.w3.org/WAI/standards-guidelines/wcag/, 2020.09.28.
https://www.wolyo.co.kr/news/articleView.html?idxno108462, 2020.09.28.

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증