스큐어모피즘부터 글래스모피즘까지, 사용성을 고려한 디자인은?

 

요즘 부트캠프에서 UI 강의를 듣고 있다. 지난 주 실습 중 하나는 AI를 활용해서 앱 화면을 구현해보는 거였고, 나는 평소에 관심있던 '스마트홈'을 주제로 피그마 메이크를 활용해 UI 화면을 만들어봤었다. 왼쪽이 피그마 메이크에서 뽑은 초안이고, 이걸 토대로 오른쪽으로 디벨롭해봤다.

 

오른쪽 UI 화면도 완성본은 아니긴 한데.. 자꾸만 이게 맞나? 하는 의심이 들었다. 사용자 경험 같은 건 무시하고 일단 구현해놓은 듯한 느낌이 들어서다. 물론 이 화면을 기획하기 전에 데스크리서치조차 하지 않았고, 실습 내용도 그저 AI를 활용하는 게 목적이었지만 말이다. 그래도 이왕 만들 거 좀 현실에 있을 법하고, 실제로 구현했을 때 사람들한테 도움이 되는 디자인이면 좋겠다 싶어서 디벨롭해보기로 했다.

 

디벨롭하기에 앞서 제일 먼저 든 생각은 '타겟을 누구로 하느냐?' 였다. 지금까지 2번의 프로젝트를 진행했지만 가장 난감하고 끝까지 명확해지지 못했던 것 중 하나가 바로 '타겟'이다. 무엇보다도 기본적인 건데 난 왜 항상 타겟 정하기가 어려운 것인가... 고민 끝에 이 스마트홈 컨트롤 앱의 메인 타겟은 60대 이상 노인으로 정했다. 강의에서 '접근성'에 관해 배우기도 했고, 시니어가 디지털화된 환경에서 소외되는 문제를 언젠가는 해결해보고 싶다고 생각했기 때문이다. 

 

이러한 생각 끝에 디자인을 어떻게 바꾸면 좋을지 생각하던 중, 핀터레스트에서 이러한 레퍼런스를 발견했다.

이미지 출처를 찾지 못하겠으나.. 구글 검색 결과 '디터 람스' 선생님이 브라운 사의 제품 디자인을 위해 제작한 이미지라는 소문(?) 이 있다.출처를 찾게 되면 수정하도록 하겠다.

 

보기만 해도 손이 저절로 움직일 것 같은 직관적인 디자인이다. 어르신들은 어쩌면 현재의 플랫한 UI 보다 이런 직관적인 디자인이 적용되었을 때 디지털 기기를 작동하기 더 수월하시지 않을까 생각했다. 그래서 제미나이에 내가 이전에 기획한 화면과 위 레퍼런스를 입력했더니 아래와 같은 결과물이 출력되었다. (제미나이에서는 코드만 뽑고, 시각적 구현은 피그마 메이크에서 진행했다)

 

 

제미나이가 말하길, 레퍼런스와 같은 디자인을 보고 '스큐어모피즘(Skeuomorphism)' 이라고 한다고 했다. 왼쪽 이미지만 봤을 땐 약간 뉴모피즘처럼 뽑히지 않았나.. 싶은데 '커피 내리기' 버튼이나 '난방 설정' 조절기를 보면 그래도 AI 친구들이 스큐어모피즘을 반영해줬음을 알 수 있다. 

 

UX 디자이너가 되고 싶다면서 이런 말 하기 머쓱하지만.. '스큐어모피즘' 이라는 말을 처음 들어봤다 ! (이런) 그래서 검색해봤다. 글래스모피즘은 요즘 자주 들리기도 하고, 매일 쓰고있는 핸드폰에서도 경험하고 있으니 얼추 알고있는데 스큐어모피즘은 생소했다.

 

스큐어모피즘은 "실제 존재하고 있는 사물의 특징을 디자인에 반영하는 기법(출처: 요즘 IT '스큐어모피즘부터 뉴모피즘까지, 스마트폰 UI의 역사')" 이라고 한다. 

 

출처: https://www.iphoneincanada.ca/

 

책들이 마치 책장에 꽂혀있는 것처럼 배경에 나무 질감을 표현한다던지, 음성녹음 어플 UI에 실제 마이크를 3D로 구현해둔다던지 하는 실제와 같은 디자인들이 바로 스큐어모피즘인 것이다. 이렇게 실제와 같은 디자인을 함으로써 얻는 효용은 사용자의 액션을 자연스럽게 유도할 수 있다는 점이다. '행동유도성(Affordance)' 디자인의 한 예시라고 할 수 있을 것 같다. 

 

아이폰이 보급되었을 초창기 무렵, 스큐어모피즘은 애플의 철학과도 같았다고 한다. 디지털 기기를 사용하는 데 익숙하지 않았을 대중을 위해 애플에서는 직관적인 사용성을 보장하고 디지털 기기에 대한 거부감을 줄여 접근성을 높이려는 시도를 한 것이다. 스마트폰이 보급된지도 오랜 시간이 지났고, 이제는 대중들이 보급형 디지털 기기에 익숙해졌기 때문에 직관성을 높이려는 시도는 점점 줄어들고 오늘날의 플랫한 디자인들이 널리 퍼지게 되었다. 오히려 스큐어모피즘과 같은 디자인 형식이 한물 간 디자인이라고 여기는 여론들도 심심찮게 볼 수 있었다. 

 

대중들이 디지털 기기 사용에 익숙해졌다고 하는데, 내가 본 주변 어르신들은 여전히 스마트폰 사용을 어려워하신다. 스마트폰 뿐만 아니라 키오스크나 은행 ATM 기기도 마찬가지였다. 정확히 어떤 부분에서 사용에 어려움을 느끼시는지는 잘 모르지만, 스큐어모피즘 디자인이 디지털 기기를 사용하는 데 있어 어떠한 혼동을 방지해줄 수 있지 않을까? 하는 궁금증이 생겼다.

 

좌측: 내 핸드폰 화면 / 우측 출처: https://skyryedesign.com/design/ux-ui/neumorphism-ui-ux-lets-explore-this-soft-stylish-design-trend/

 

스큐어모피즘이 구시대적이라고 여겨지는 요즘 트렌드라고 불리는 디자인 기법은 단연 글래스모피즘과 뉴모피즘인 듯 하다. 검색해보다 놀랐던 건 뉴모피즘이 글래스모피즘보다 타임라인 순으로 과거에 나온 것이었으며, Dribble 에서 한 유저가 처음 만들었다는 사실이었다. 한 개인이 만든 디자인이 '트렌드' 라고 불릴 정도로 널리 퍼졌다는 게 놀라웠다. 글래스모피즘은 지난 해 애플이 IOS 26으로 업데이트하면서 도입하게 된 디자인 기법이다. '리퀴드 글래스' 라고도 불리는데, 뉴모피즘과는 달리 요소들이 투명해서 배경이 살짝 비춰지는 게 특징이다. 

 

출처: Apple

 

두 디자인을 접했을 때 든 생각은 '미래적이다!' 는 거였다. 그도 그럴 것이, 글래스모피즘은 비전OS의 영향을 받았다고 애플에서 공식 입장을 내놓았다고 한다. 아이폰이 처음 대중들에게 판매되었을 때 디지털 기기의 접근성을 올리려고 현실과 같은 디자인의 스큐어모피즘을 도입했다면, 글래스모피즘을 도입한 이유는 미래지향적인 디자인을 우리에게 익숙하게 만들어 새로운 기기가 탄생했을 때 거부감을 줄이려는 시도 같았다. 뉴모피즘의 경우에도 왠지 우주비행선 내의 대시보드가 떠오르면서 미래를 상상하게 만들곤 한다.

 

내가 여기서 짚고 싶었던 점은 글래스모피즘과 뉴모피즘이 사용성을 향상시키는 데 얼마나 도움을 주는지에 관한 것이다. 개인적인 견해지만, 이 두 디자인 기법은 장식적인 요소를 극대화했을 뿐 사용성 향상에는 그닥 효용이 없는 것 같았기 때문이다. 그나마 뉴모피즘은 맨들맨들한 디자인 형태를 지니고 있어 사용자로 하여금 '눌러보고 싶게끔 만드는' 효과를 준다는 말도 있기는 했다. 반면, 글래스모피즘의 경우에는 시선을 분산시키고 글자와 겹쳐지거나 단색이 아닌 배경에 올려졌을 때, 인식이 쉽지 않다는 문제점이 있다. 

 

출처: Nielsen Norman Group

 

실제로 글래스모피즘이 적용된 화면과 기존의 플랫한 디자인을 두고 히트맵을 관찰했을 때도, 후자에서는 아이콘이나 위젯에 시선이 분산되는 반면, 전자에서는 아이콘보다 배경에 시선이 집중되는 현상이 발견되기도 했다. 

 

최근 애플 뿐만 아니라 다른 앱에서도 리퀴드 글래스를 도입한 사례가 많은 것 같다. 트렌드를 따라가서 더 많은 사람들에게 자사 디자인이 트렌드를 고수하고 있다거나 젊은 브랜드 감각을 알리는 것은 좋으나, 사용성이 저하되지 않는 선에서 적용되어야할 것 같다. 나 또한 디자인할 때 무작정 트렌드를 따라가기 보다는, 해당 디자인 기법을 왜 도입해야하는지 먼저 고민해봐야겠다.