Ⅰ. 서론
1. 연구배경 및 목적
사용자 인터페이스(UI: User Interface)는 사용자와 기기 간에 발생하는 상호작용으로, 사용자가 기대하는 경험과 디자이너가 제공하는 경험 사이의 차이를 최소화하여 원활한 커뮤니케이션을 이끌어내는 과정이다[1]. 이를 구성하는 계층 중 하나인 그래픽 유저 인터페이스(GUI: Graphic User Interface)는 그래픽으로 정보를 교환하는 상호작용[2]을 통해 화면 속 레이아웃, 이미지, 아이콘, 애니메이션에 포함된 정보를 제공한 것이다[1]. UI의 중요성이 부각되면서 GUI 디자인 관련 연구도 함께 이루어지고 있다.
이와 관련해 최근까지 진행된 UI 디자인의 선행 연구들에서는 GUI 디자인의 시초인 스큐어모피즘 디자인과 이후에 등장한 플랫 디자인을 비교하는 연구가 진행되었다. 두 디자인의 가장 큰 차이점인 입체감의 유무를 변수로 설정하여 이에 대한 사용성 평가가 이루어지기도 하였다. 또한 이를 기반으로 인터페이스 내의 요소들의 위치에 관한 연구가 이어졌으며 이와 직결된 접근성과 관련한 한계를 도출하며 새로운 방법을 제안하였다. 이러한 연구의 활용 측면에서는 다양한 영역에서 적용할 수 있는 UI 디자인 연구가 진행되어 기능을 극대화할 수 있는 새로운 방법론들이 제시되었다.
한편, UI 디자인에 대한 여러 연구가 진행되었음에도 아직 새로운 뉴모피즘 디자인의 관련된 연구는 드물다. 이에 본 연구에서는 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대해 살펴보고 새롭게 등장한 뉴모피즘 디자인을 중심으로 GUI 디자인의 발전 과정을 살펴본다. 또한, 뉴모피즘 디자인이 새로운 UI 디자인 트렌드가 될 가능성에 대해서도 고찰해보고자 한다.
2. 연구범위 및 방법
본 연구는 두 가지 연구 방법으로 진행하였다. 첫 번째로 뉴모피즘 디자인이 등장하기 전에 과거부터 지금까지의 UI 디자인 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인에 대한 문헌 연구를 진행하였다. 또한 UI 디자인들이 적용된 실제 사례를 통해 UI 디자인 트렌드들의 특징 및 한계에 대한 연구를 진행하였다. 두 번째로는 뉴모피즘 디자인의 정의와 특징을 조사하였으며 이를 바탕으로 가장 최근의 UI 디자인 트렌드이자 뉴모피즘과 비슷한 특징을 지닌 머티리얼 디자인과 표현 방식을 비교하였다. 또한 뉴모피즘이 새로운 UI 디자인 트렌드가 될 가능성에 대해 분석하였다.
Ⅱ. 기존 UI 디자인 트렌드
1. 스큐어모피즘 디자인
1.1 스큐어모피즘 디자인의 정의
스큐어모피즘 디자인(Skeuomorphism Design)이란 실재하는 사물의 본래 형태와 질감 그대로 디자인으로 재현한 것이다[3]. 실생활 속 도구의 모양과 재질감을 상세히 묘사하는 방식인[4] 리얼 라이프 메타포(Real Life Metaphor)를 활용하여 익숙하지 않은 것을 익숙하게 제공해 실재감을 느낄 수 있도록 하는 물질적 은유(Material Metaphor)의 기능을 한다[5].
‘스큐어모피즘’은 오래전부터 생성된 개념으로 대표적인 사례로는 장식인 기둥처마가 나무에서 돌기둥으로 재료가 바뀐 이후에도 그 형태가 그대로 유지되었던 그리스 신전이 있다. 이는 대중에게 새로운 것에 대한 이질감보다는 익숙한 모습을 제공함으로써 심리적인 안정감을 주려고 한 의도[6]로 볼 수 있다. 한편, 해당 형태가 기능적으로 불필요한 요소가 되었는데도 이것을 그대로 유지하고자 한다는 점이 비난을 받게 되면서 '잔재(殘滓)'의 의미[7]를 갖게 되기도 하였다.
1.2 스큐어모피즘 디자인의 특징
GUI 디자인에서의 스큐어모피즘은 실제 물체 일부를 화면상에 은유적으로 표현함으로써[9] 사용자들로 하여금 독특하고도 친근한 디자인으로 다가갔다. 이에 스큐어모피즘은 감성디자인, 직관적인 디자인으로 의미가 확장되어 GUI 디자인의 초창기부터 스마트폰 시대까지 UI 디자인 트렌드를 이끈 주축이었다[10]. 일찍이 자사의 제품에 스큐어모피즘 디자인을 적용한 애플(Apple)은 아이폰(iPhone)의 성공과 함께 독자적인 디자인 정체성을 확립할 수 있었다[3][11].
1.3 스큐어모피즘 디자인의 사례
1.3.1 애플
스큐어모피즘 디자인의 효시인 애플은 iOS 6까지 실제 아날로그 형태의 물체 모습을 그대로 디지털로 재현했다. 이는 사용자가 느낄 아날로그와 디지털 사이의 이질감의 보폭을 줄이기 위해서였다. 그 결과 그 당시에는 생소하였던 스마트폰 애플리케이션(Application)에 쉽게 익숙해 질 수 있었다[7].
그림 1. iBooks[8]
1.3.2 마이크로소프트(Microsoft)
마이크로소프트의 이메일 아이콘은 뚜렷한 변화를 보인 아이콘 중 하나이다[12]. PC(Personal Computer)가 보급되어 인터넷을 통한 송신 과정이 발달하자 마이크로소프트사는 사용자들에게 익숙한 ‘편지’를 본 뜬 이메일 아이콘을 선보였다. 이후 [그림 2]와 같이 이메일 아이콘의 형태는 더욱더 편지에 가까워졌으며 이를 통해 사용자들은 낯선 인터넷 환경에서도 해당 기능과 그 과정을 정확히 인지하여 편리하게 사용할 수 있게 되었다.
그림 2. 이메일 아이콘[13]
1.3.3 한컴 저장 아이콘(플로피디스크)
한컴 프로그램의 저장 아이콘은 사각 형태의 디스켓인 플로피 디스크(Floppy disk)를 본뜬 형태다. PC가 보급되기 시작하면서 플로피 디스크는 가장 보편화된 저장 매체였으며 저장 버튼에 이러한 특성이 반영되었다. 해당 아이콘은 오늘날까지 지속되어 대표적인 저장의 의미를 공고히 유지해오고 있다[그림 3].
그림 3. 플로피 디스크를 본 뜬 한컴 저장 아이콘[14]
1.3.4 인스타그램(Instagram) 아이콘
인스타그램은 즉석에서 포착해 찍은 사진과 영상물을 공유할 수 있는 소셜 미디어 플랫폼(Social Media Platform)이다. 감성적인 레트로(Retro) 스타일의 일회용 폴라로이드 사진기를 본 뜬 초창기 아이콘은 사용자에게 찰나의 순간을 기록해 공유할 수 있는 애플리케이션의 기능과 목적을 정확히 전달할 수 있었다[그림 4].
그림 4. 초창기 인스타그램 아이콘[15]
1.4 스큐어모피즘 디자인의 한계
스큐어모피즘 디자인이 은유를 사용한 사실적인 묘사로 사용자 경험을 증진시키면서 애플은 새로운 모바일 생태계를 창조하게 되었다. 한편, 대두된 한계로 묘사 대상의 모호해진 대표성이 언급되었다[9]. 상술한 사례인 플로피 디스크의 경우 현재에는 쓰이지 않게 되며 연령이 낮은 사용자들은 저장의 의미를 인지하지 못하게 되었다[14]. 이러한 맥락에서 디자이너들은 해당 디자인을 ‘철 지난 패러다임’이라고 비판하였으며, 특히 애플의 전직 디자이너는 ‘흉내’에만 치중한 디자인이라 주장했다[16]. 이를 위해 실제 물체의 기능에 집중한 플랫 디자인으로 이어지게 되었다.
2. 플랫 디자인
2.1 플랫 디자인의 정의
플랫 디자인(Flat Design)은 외형적인 의미에서 평면 디자인이라고 한다[17]. 메트로(Metro)에서 모던(Modern) UI로 이름의 변화를 거쳐 오늘날 플랫 디자인으로 지칭되기 시작했다. 플랫 디자인을 일반화한 앨런 그린슈틴(Allan Grinshtein)은 이를 “최소한의 요소로 최대의 영향을 이끌어내는 우아한 인터페이스”[18]라고 언급했다. 마이크로소프트는 제조사 최초로 해당 디자인을 윈도우8(Windows 8)에 적용하였고, 이어 구글(Google)을 시작으로 애플의 iOS 7까지 플랫 디자인을 적용하게 되면서 디지털 환경에 익숙해진 사용자에게 보다 더 단순화된 디자인을 선보일 수 있게 되었고[19] 이는 하나의 트렌드가 되었다.
2.2 플랫 디자인의 특징
스큐어모피즘 디자인과는 달리 입체감 같은 불필요한 요소들을 배제한 플랫 디자인은 기본적인 요소들에 충실한 2D 디자인(Two-Dimensional Design)으로 구성되어 있다. 이는 해당 디자인이 미니멀리즘 (Minimalism)을 기반으로 명료성에 중점을 두었기 때문이다[20]. 그 결과 단순하면서도 절제된 스타일로 정보의 의미를 명확하게 시각화 할 수 있어 여러 매체에 많이 적용되었다[4][21]. 예를 들어 한정된 색상 요소를 사용하는 해당 디자인의 특징에 착안, 이를 제품 홍보에 대입하였던 연구가 있었다. 그 결과 플랫 디자인이 소비자가 정보를 쉽게 수용할 수 있는 방식이 될 가능성을 제시해 주었다[22].
2.3 플랫 디자인의 사례
2.3.1 마이크로소프트
플랫 디자인을 선도한 마이크로소프트는 마이크로소프트 스토어(Microsoft Store)에 기능을 강조하기 위해 UI 요소들을 단순한 사각형을 눈에 띄는 색채로 조합하면서 타이포그래피(Typography)로 가독성을 높였다. 하지만 입체적 요소를 배제함으로써 ‘정보의 우선순위’를 간과했다는 비판을 받기도 했다. 그럼에도 불구하고, 사용자가 UI의 기능을 직관적으로 인식하기에 적합한 디자인이라는 평가를 받았다[23].
그림 5. 명확한 기능을 강조해 전달하기 위해 플랫 디자인을 적용한 윈도우8 마이크로소프트 스토어[24]
2.3.2 구글 로고
구글은 시대의 흐름에 발맞추어 회사 설립 17년 만인 2015년에 산세리프(Sans-Serif) 서체를 적용한 단순화된 회사의 로고를 선보였다. 이를 통해 구글은 기존의 세리프(Serif) 서체에서 느껴지던 고전적인 느낌을 탈피하였다. 이러한 변화를 통해 구글은 해당 브랜드에 접근하기 쉬운 이미지를 반영하였으며 이에 지속적인 정체성을 부여하고자 했다[25].
그림 6. 접근하기 쉬운 이미지를 형성하기 위해 평평한 디자인의 서체를 적용한 구글 로고[26]
2.3.3 삼성 페이(Samsung Pay)
삼성 페이는 모바일 결제 시스템 기능이 탑재된 전자지갑이다. 구체적으로 지갑 속 카드에 플랫 디자인이 적용되어 기능에 집중할 수 있도록 도움을 준다. 그 결과 사용자들은 해당 서비스에 쉽게 접근할 수 있었고, 이는 국내·외의 사용 측면에서도 긍정적인 효과가 발생되었다[그림 7].
그림 7. 플랫 디자인이 적용된 삼성 페이[27]
2.4 플랫 디자인의 한계
‘단순함’에 입각한 플랫 디자인은 제한된 범위 내에서 정보를 과도하게 함축하고자한 점에서 한계를 보인다. 예를 들어 사용자가 버튼을 눌렀을 경우 색상 변화로 이루어지는 피드백이 진행되어야 한다. 하지만 그림자와 깊이감이 없는 해당 디자인의 경우 배경과 합치되어 동작을 시각적으로 명확하게 알리지 못한다[28]. 이러한 구성을 통해 정보 구조에 기초한 우선순위를 인지하기 어려울 뿐만 아니라, 행동개시버튼(CTA: Call To Action) 버튼으로서의 역할도 수행하지 못하게 된다[29]. 이를 개선하기 위해 그라데이션(Gradation)과 블러(Blur)로 표현된 플랫 2.0 디자인이 제시되었다. 결과적으로 이러한 시도가 반복되면서, 스큐어모피즘 디자인과 플랫 디자인의 장점을 집약한 구글의 머티리얼 디자인(Material Design)이 등장하게 되었다[21][23].
3. 머티리얼 디자인
3.1 머티리얼 디자인의 정의
제품의 바탕이 되는 재료[30]를 의미하는 ‘머티리얼’은 질감이 느껴지는 표현과 선명한 그래픽을 사용한 디자인이다[2]. 용어에서 시사하는 바와 같이 ‘머티리얼 디자인’은 실제 물체의 모습을 본 떠 질감 효과를 적용한 스큐어모피즘 디자인과 일러스트 형태의 플랫 디자인의 특징을 균형 있게 결합한 형태다[31][32].
해당 디자인은 구글 디자인부문 부사장 마티아스 두아르테(Matias Duarte)가 마이크로소프트의 운영체제(OS) 윈도우10(Windows 10) 디자인의 결여된 일관성을 혹평하면서부터 시작되었다. 이를 계기로 구글은 2013년 안드로이드 6.0 마쉬멜로우(Marshmallow)를 시작으로 머티리얼 디자인을 발표하면서[31][32], 이를 크롬(Chrome), 행아웃(Hangouts), 유튜브(Youtube), 구글 플레이 스토어(Google Play), 지메일(Gmail)과 같은 애플리케이션에 적용하였다. 이를 통해 플랫 디자인의 단점인 편의성을 보완할 수 있었으며, 사용자들은 웹(Web)과 애플리케이션을 아우르는 일관된 사용자 경험(UX: User eXperience)을 향유할 수 있게 되었다[33].
그림 8. 안드로이드 6.0 마쉬멜로우 안드로이드 롤리팝 내비게이션 바[34]
3.2 머티리얼 디자인의 특징
머티리얼 디자인은 질감이 느껴지는 종이 같은 현실적인 요소에 그림자 효과를 더해 움직임과 입체감을 부여한 시차적 효과인 패럴랙스(Parallax)를 보였다[21][32][35]. 이러한 시각적 차이를 둔 효과를 통해 사용자로 하여금 우선순위를 보여 정보 구조를 쉽게 인지할 수 있게 한다[23].
또한, 머티리얼 디자인의 컴포넌트(Component)는 ‘떠 있는 듯한’ 형태의 플로팅 액션 버튼(FAB: Floating Action Button), 세 개의 선으로 이루어진 햄버거 버튼(Hamburger Button)과 화살표 디자인으로 이루어져 뒤로 가기, 홈(Home) 그리고 메뉴(Menu)로 갈 수 있는 내비게이션 바(Navigation Bar)가 대표적이다. 특히, 상술한 컴포넌트들은 주로 화면 하단에 배치되어 사용자가 한 손으로 기기를 잡았을 때 엄지손가락으로 편리하게 누를 수 있도록 도움을 준다[36]. 이러한 구성을 통해 애플리케이션 안에서 핵심적인 기능을 수행할 수 있도록 하는 방식의 가능성을 시사했다.
3.3 머티리얼 디자인의 사례
3.3.1 구글
머티리얼 디자인의 효시인 구글의 [그림 9]는 웹과 애플리케이션 디자인의 일관성을 반영한 아이콘이다. 이를 적용한 [그림 10]과 [그림 11]는 디자인에 그림자 효과를 입혀 시각적 우선순위(Visual Priority)를 강조할 수 있는데, 특히 [그림 10]에서 확인할 수 있는 플로팅 액션 버튼을 통해 메일 작성을 하고자 하는 사용자들에게 접근성을 높였으나, 콘텐츠를 가린다는 평을 받기도 했다[36].
그림 9. 아이콘[37]
그림 10. 구글 드라이브(Google Drive)[38]
그림 11. 구글 폼(Google Form)[39]
3.3.2 애플 iOS 13
애플은 iOS 13을 통해 다크 모드(Dark Mode)를 선보였다. 이는 용어에서 시사하는 바와 같이 검은색 배경과 어두운 색상을 조합한 형태다[40]. 이들이 제안한 iOS 휴먼 인터페이스 가이드라인(HIG: Human Interface Guidelines)에 의하면, 이러한 구성은 “어두운 배경으로부터 도드라져 쉽게 눈에 띌 수 있도록 한” 전략이다[41]. 이러한 시각적인 변화를 통해, 기존보다 발전된 애플리케이션 환경을 조성할 수 있게 되었다. 특히 [그림 12]에서 확인할 수 있는 저조도 환경은 사용자로 하여금 시각적 피로감을 줄여줄 수 있을 뿐만 아니라, 불필요한 전력 소모에도 효력을 발휘한다.
그림 12. 다크 모드를 적용한 애플 iOS 13[42]
3.4 머티리얼 디자인의 한계
플랫 디자인과 머티리얼 디자인은 현재까지 빈번하게 사용되고 있는 디자인이다. 한편, 머티리얼 디자인은 아이콘이 다양하게 해석될 여지가 있음을 간과했다는 비판을 받게 된다. 앞서 살펴본 컴포넌트인 내비게이션 바는 추상적인 요소로 인지되어 사용자 친화적(User Friendly)이지 않았으며, 플로팅 액션 버튼은 다른 UI 요소 위에 배치되어 콘텐츠를 가리게 된다. 그 결과, 해당 디자인은 다양한 기능성과 위치 등의 면에서 ‘불편한 UI’로 평가되기 시작했다.
이를 위해 구글은 기존보다 발전된 머티리얼 2.0을 발표하였다. 앞서 상술한 다크 모드로 개선의 가능성을 시사하였다. 또한, 최근에는 개인 디자이너로부터 새로운 뉴모피즘 디자인(Neumorphism Design)이 등장하게 되었다.
Ⅲ. 뉴모피즘 디자인
온라인 간행물 더 아웃라인(The Outline)과 인풋(Input)의 책임 디자이너인 잭 콜로스쿠스(Jack Koloskus)는 애플의 다음 UI 디자인은 뉴모피즘이라고 전망하였다. 이 전망은 2020년 6월 22일에 열렸던 애플의 세계 개발자 회의(WWDC: World Wide Developers Conference)에서 공개된 맥의 운영체제인 빅설(Big Sur)을 기반으로 예측되었다. 빅설은 기존의 운영체제와 확연히 달라진 모습으로 대중들에게 공개되었다. 이는 19년 만에 처음으로 자사의 운영체제를 새로운 버전으로 바꾸려는 애플의 혁신적인 시도였다. 잭은 애플이 이러한 시도와 더불어 UI 디자인과 아이콘 측면에서도 기존과는 다른 새로운 변화를 시도할 것이며 이제는 사용자들에게 너무나도 익숙해진 플랫 디자인을 대체할 새로운 시도가 바로 뉴모피즘이라고 주장하였다[43]. 그렇다면 과연 뉴모피즘은 잭을 비롯한 여러 매체가 예상하는 것처럼 새로운 UI 트렌드가 될 수 있을까? 이에 본 연구는 이러한 관점으로 뉴모피즘의 특징을 살펴본 후 새로운 UI 트렌드로서의 가능성에 대해 분석해보고자 한다.
1. 뉴모피즘 디자인의 정의
뉴모피즘(Neumorphism)은 뉴(New)와 스큐어모피즘의 합성어로 새로운 스큐어모피즘을 뜻한다. 이 UI 디자인은 디자이너들이 포트폴리오를 공유하는 사이트인 드리블(Dribbble)에 우크라이나의 디자이너 알렉산더 플라이토(Alexander Plyuto)가 선보인 스큐어모프모바일 뱅킹 프로토타입(Skeuomorph Mobile Banking Prototype)에서 시작되었다[44]. [그림 13]에서 확인할 수 있는 뉴모피즘 스타일은 스큐어모피즘과 플랫 디자인이 혼합된 방식이며 그림자의 대비로 버튼이 떠오른 것처럼 보이는 디자인이다. 드리블에 업로드된 이후로 현재까지 30,000개 이상의 조회 수와 4,800개 이상의 추천 수를 기록하며 새로운 UI 디자인 스타일로서의 가능성을 보여주고 있다. 또한 뉴모피즘은 폴란드에 본사를 둔 IT회사인 하이프포(HYPE4)의 UI 디자이너인 미샬 말레위츠(Michal Malewicz)가 자사의 컨퍼런스인 ‘두 굿 쉬트(Do Good Shit)’에서 ‘새로운 스큐어모픽(New Skeuomorphic)’을 ‘뉴모피즘’이라고 정의한 영상이 생중계 되면서 확산되었다[46]. 그동안 UI 디자인의 트렌드는 애플과 마이크로소프트 같은 기업의 주도로 형성되어 온 것과 달리 뉴모피즘은 개인 디자이너의 디자인이 주목을 받은 이례적인 사례이다.
그림 13. 알렉산더 플라이토의 스큐어모프 모바일 뱅킹프로토타입[44]
2. 뉴모피즘 디자인의 특징
뉴모피즘은 머티리얼 디자인과 같이 지나친 사실주의에서 발생하는 기존의 스큐어모피즘 디자인의 단점을 플랫 디자인으로 순화하여 단순한 형태에서 실제 사물과 최대한 비슷하게 표현하고자 하는 UI 디자인이다. 해당 디자인은 배경색, 요소의 형태, 그라데이션, 하이라이트(Highlights)와 그림자를 활용하여 UI에서 3D 스타일(Three-Dimensional Style)을 구현한다. 이러한 스타일을 구현하기 위해 뉴모피즘에서 가장 초점을 맞추는 것은 바로 빛의 움직임이다[43]. [그림 14]에서 살펴볼 수 있듯이 뉴모피즘의 전체 배경색과 요소의 배경색은 동일한 한 가지 색이다. 배경과 요소는 오로지 빛의 움직임을 구현한 그림자 스타일로 구분한다. 이러한 그림자 스타일을 구현하는 방식은 머티리얼 디자인과 비교하여 다음 장에서 서술하였다.
그림 14. 외부, 내부 그림자 효과가 적용된 뉴모피즘 유아이 킷(UI kit) - 메이즈픽셀(MazePixel)[45]
또 다른 뉴모피즘의 특징은 단순한 모양의 요소가 재사용 되어 반복적으로 배치되는 것이다. 이는 전반적으로 통일되고 정돈된 느낌의 UI를 사용자에게 제공한다. 또한 뉴모피즘은 단순한 요소들의 재사용으로 제작이 용이하다. 이는 단순하고 깔끔한 UI 디자인 제작을 가능하게 한다. 나아가 기본적인 뉴모피즘 만의 특징을 유지하면서 배경색을 바꾸는 것과 같은 다양한 활용도 가능하다[그림 15]. 또한 요소들에 둥근 모서리를 적용하기 때문에 부드러운 느낌을 주며 사용자들의 감성을 자극하기도 한다. 이러한 이유로 뉴모피즘은 소프트 UI(Soft UI)로도 불리고 있다[47].
그림 15. 다양한 배경색이 활용된 뉴모피즘 디자인[48]
3. 뉴모피즘과 머티리얼 디자인
뉴모피즘과 머티리얼 디자인은 스큐어모피즘과 플랫 디자인을 결합하여 단순한 형태에 실제와 같은 질감을 넣었다는 공통점이 있다. 하지만 두 디자인의 느낌은 확연히 다르다. 두 디자인의 여러 차이점 중에서 가장 주목해야 할 것은 그림자 스타일이다. 두 디자인은 사실적 표현을 하기 위해 그림자 스타일을 요소에 적용하였지만 다른 방식으로 그림자를 표현한다.
우선 머티리얼 디자인의 그림자 스타일을 살펴보고자 한다. 구글이 머티리얼 디자인 가이드에서 제공하는 그림자 스타일은 [그림 16]과 같다. [그림 16]에서 볼 수 있듯이 머티리얼 디자인의 그림자 스타일에서는 요소가 배경에서 얼마나 떨어져 있는지를 알 수 있다. 머티리얼 디자인에서 요소의 그림자는 실제 사물에서 그림자가 생기는 방식과 최대한 유사하게 표현된다. 또 다른 특징은 요소들의 너비와 높이, 고도는 레이아웃과 콘텐츠에 맞게 달라질 수 있지만 두께는 1dp(dp: Density-independent Pixels)로 균일하게 유지하여야 한다. 이와 같이 고도를 분리시킴으로써 같은 3D 공간에서 요소들이 동일한 지점에 동시에 위치하는 것을 방지한다[그림 17]. 이는 배경과 요소뿐만 아니라 요소들 간의 순서를 정리하는데 효과적이다.
그림 16. 머티리얼 가이드에서의 그림자 스타일[49]
그림 17. 머티리얼 가이드에서 요소들의 분리의 맞는 예(왼쪽), 틀린 예(오른쪽)[50]
반면, 뉴모피즘은 머티리얼 디자인과 다른 방식의 그림자 효과를 사용한다. 이 과정에서 그림자는 3가지 색을 이용해야 한다. 왼쪽과 상단에는 밝은 색, 전체 배경과 요소의 배경은 중간 색, 오른쪽과 하단에는 어두운 색을 적용하면 쉽게 표현할 수 있다[그림 18]. 이러한 방식은 요소들이 배경에서 돌출되어 있는 것처럼 보이게 하는 효과를 준다. 뉴모피즘은 외부 그림자(Outer Shadow) 뿐만 아니라 내부 그림자(Inner Shadow)도 사용하여 한층 더 촉각적인 디자인을 생성한다[그림 19]. 하지만 정반대의 명도를 가진 그림자를 모두 제작하기 위해서는 완전한 흰색과 검은색의 배경을 사용할 수 없다는 한계가 있다.
그림 18. 칸하이야 샤르마(Kanhaiya Sharma), 뉴모피즘 디자인에서의 그림자 스타일 예시[51]
그림 19. 컬러우지 에그부드(Courage Egbude), 뉴모피즘 디자인에서의 그림자 스타일[51]
[그림 20]은 카드에 적용된 뉴모피즘과 머티리얼 디자인의 그림자 스타일이다. 앞서 살펴본 바와 같이 머티리얼 디자인의 그림자는 명도가 낮은 색의 외부 그림자를 적용하여 배경으로부터 카드가 떠 있는 플로팅 효과(Floating)를 준다. 이러한 효과는 카드에 깊이를 발생시키며 선이 없는 경우에는 모양 자체를 정의하기도 한다. 반면에 뉴모피즘이 적용된 카드는 배경에 떠있지 않지만 요소 자체에 3D처럼 보이도록 그림자 스타일이 적용되어 사용자에게 입체감을 제공한다.
그림 20. 카드에 적용된 뉴모피즘과 머티리얼 디자인의 그림자 스타일[52]
[표 1]은 그림자 스타일을 중심으로 뉴모피즘과 머티리얼 디자인을 비교하여 정리한 표이다.
표 1. 뉴모피즘과 머티리얼 디자인 비교
4. 뉴모피즘은 새로운 UI 트렌드가 될 것인가?
뉴모피즘은 새롭다. 이름에서도 알 수 있듯이 뉴모피즘은 기존 UI 디자인과는 다른 새로운 느낌의 디자인이다. 이 새로운 UI 디자인이 주는 경험은 추천 수와 조회 수에서도 확인할 수 있듯이 대중들에게 폭발적인 반응을 얻은 것이다. 이는 오랜 기간 동안 플랫, 머티리얼 디자인을 경험하며 익숙해진 사용자들에게 뉴모피즘은 신선한 UI 디자인으로 다가왔던 것이다. 이는 뉴모피즘의 큰 장점이다.
한편, 뉴모피즘이 사용자에게 호감을 주는 디자인임에도 불구하고, 이는 실용성 측면으로 바라보았을 때 오히려 단점이 될 수도 있다. 구체적으로 웹 접근성에 관련하여 해당 디자인은 치명적인 문제점이 될 수도 있다. UI 요소 중 버튼을 예로 들면, 올바른 버튼은 상태(Status)가 다른 상태와 주변 요소들이 명확히 구별되게 디자인 되어야 한다. 하지만 뉴모피즘이 적용된 버튼 상태는 구별하기가 쉽지 않다[그림 21]. 또한 웹 접근성에 따르면, 버튼과 배경과의 명도 대비는 최소 3:1이 되어야 하고 보통은 4.5:1 이상이 되어야 하지만[53] 전체 배경과 요소의 배경이 같은 뉴모피즘에서 이와 같은 버튼은 구현될 수 없다. 현재 널리 사용되고 있는 플랫, 머티리얼 디자인에서의 버튼과 비교해보아도 기존 두 디자인의 버튼이 사용자가 접근하기에 더 편리하다. 이는 접근성 측면에서 버튼을 비롯한 주요 요소들은 UI로서의 아무런 기능을 하지 못하는 것을 의미한다.
그림 21. 뉴모피즘 디자인에서의 버튼 상태[52]
이러한 맥락에서, 앞서 살펴본 장단점을 가진 뉴모피즘 디자인이 새로운 UI 디자인 트렌드가 되어 실제 서비스에 적용될 수 있는지 살펴보고자 한다. [그림 13] 과같은 프로토타입 같이 현존하는 서비스에서 전체적인 UI 요소들에 뉴모피즘 디자인을 적용하는 것은 어려움이 있을 것으로 판단된다. 우선, 주요 요소들의 접근성이 떨어지게 되면 사용자들은 편리하게 사용하지 못하게 될 것이고, 이는 UI가 아니게 되는 셈이다. 하지만 부드럽고 깔끔한 느낌을 주면서 감성을 자극하는 심미적인(Aesthetic) 디자인으로서의 기능과 이를 템플릿화(Templatization) 하여 사용할 수 있는 제작 용이성 등의 장점은 활용 가치가 높다. 그러므로 정보를 간략하게 ‘시각화’하여 보여주는 애플리케이션 또는 전체가 아닌 일부 요소에 제한적으로 도입해보는 것은 시도해볼 만하다. 실제로 지난 2020년 8월 20일에 출시된 하나은행의 모바일금융 애플리케이션 ‘뉴 하나원 큐’에서 뉴모피즘 디자인이 부분적으로 적용되었다[그림 22]. 이는 실제 서비스에 뉴모피즘 디자인이 적용된 사례였다. 이를 시작으로 많은 사용자들의 관심을 받고 있는 뉴모피즘 디자인이 앞으로 어떠한 방식으로 장단점을 극대화 및 보완하여 새로운 UI 트렌드가 될 것인지의 귀추가 주목된다.
그림 22. 하나은행 어플리케이션 ‘뉴 하나원큐’[54]
Ⅳ. 결론
본 연구는 UI 디자인에 대한 많은 연구가 이루어졌음에도 불구하고, 새로운 뉴모피즘 디자인에 관련된 연구를 찾기 어렵다는 것에서 착안되었다.
이에 본 연구에서는 기존의 UI 트렌드인 스큐어모피즘, 플랫, 머티리얼 디자인을 중심으로 GUI 디자인의 발전 과정을 문헌 연구와 실제 사례로 살펴보았다. 기존 디자인의 발전은 보완을 위한 시도로 이루어진 것으로 분석되었다. 이러한 흐름 속 뉴모피즘의 트렌드로서의 가능성을 알아보기 위해 초기의 스큐어모피즘, 플랫 디자인 그리고 가장 최근의 머티리얼 디자인과 비교하였다. 뉴모피즘 디자인은 스큐어모피즘 디자인의 단점을 플랫 디자인으로 순화하여 단순한 형태를 실제 사물과 최대한 비슷하게 표현하고자 하는 UI 디자인이다. 더불어 해당 디자인은 ‘빛의 움직임’을 통해 구현하는데, 이를 그림자 스타일을 기준으로 머티리얼 디자인과 비교하여 제시하였다.
또한, 뉴모피즘 디자인이 앞으로 UI 디자인 트렌드가 될 것인지에 대해 분석하였다. 이를 위해 본 연구에서는 해당 디자인의 활용을 극대화하기 위해 이를 부분적으로 적용하는 방법을 제안하였다. 이를 위해 뉴모피즘 디자인을 간략한 정보의 시각화 및 일부 요소에만 부분적으로 차용한다면 좋은 효과를 낼 것으로 판단된다.
본 연구는 아직 연구가 진행되지 않은 새로운 뉴모피즘 디자인의 분석과 더불어 UI 디자인 트렌드가 될 가능성을 제시한 점에서 의의를 갖는다. 이는 앞으로의 뉴모피즘 디자인 연구와 그 활용의 예측에 있어 이론적 기반이 될 것으로 판단된다.
그러나 향후 연구에서는 다양한 시도와 보완이 이루어져야 할 필요가 있다. 동시에 본 연구의 한계점은 두 가지로 나누어진다.
첫째, 본 연구의 목적은 UI 디자인의 발전 과정과 새로운 트렌드를 분석하는 데에 있다. 하지만 뉴모피즘이 새로운 UI 디자인 트렌드가 될 것인지에 대한 실증적 연구가 이루어지지 않았다. 이를 위한 사용성 평가는 추후 연구로 진행될 예정이다.
둘째, 접근성은 뉴모피즘을 포함한 UI 디자인에서도 중요한 문제로 떠오르고 있는 주제다. 그러나 본 연구는 사례 중심으로 이루어져 접근성 연구가 이루어지지 않았다. 이에 추후 연구에서는 뉴모피즘을 접근성 측면에서 심층 분석한 연구가 이루어져야 할 것이다.
References
- 박지수, 김헌, UX 디자인 7가지 비밀, 안그라픽스, 2013.
- https://terms.naver.com/entry.nhn?docId=1179975&cid=40942&categoryId=32842, 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. https://doi.org/10.17280/JDD.2013.13.2.045
- 김보연, 한석환, "iOS 사용자 인터페이스 디자인의 스큐어모피즘 - 시뮬라크르 연속 단계 이론을 통한 해석 -," 커뮤니케이션 디자인학연구, 제67권, pp.198-208, 2019.
- 정동훈, "모바일 플랫폼의 미학적 특징과 UX 평가," 감성과학, 제18권, 제3호, pp.71-80, 2015. https://doi.org/10.14695/kjsos.2015.18.3.71
- 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_seq=20&artcl_seq=4593&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?docId=3377369&cid=42346&categoryId=42346, 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://doi.org/10.14400/JDC.2019.17.12.461
- 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?docId=1588590&cid=50333&categoryId=50333, 2020.09.28.
- https://cm.asiae.co.kr/article/2015110307273609097, 2020.09.28.
- 김수희, 오치규, "스마트 폰 UI의 디자인 철학에 따른 잠재적 사용자 확보," 한국콘텐츠학회논문지, 제16권, 제10호, pp.503-513, 2016. https://doi.org/10.5392/JKCA.2016.16.10.503
- 김건웅, 고장혁, 정혜경, "머티리얼 디자인을 적용한 북크로싱 서비스," Journal of Integrated Design Research, 제15권, 제1호, pp.21-30, 2016. https://doi.org/10.21195/jidr.2016.15.1.002
- 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. https://doi.org/10.14400/jdc.2019.17.4.261
- 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?hl=ko, 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?idxno=108462, 2020.09.28.