안녕하세요! 그린컴입니다.

옷에도 유행하는 스타일이 있듯, UI 디자인에도 트렌드가 있습니다.

또한 그 트렌드는 문제를 해결하면서 변화하고, 때로는 다시 돌아오기도 합니다.

오늘은 지난 한 해 화제가 됐던 뉴모피즘, 그리고 2021년 새롭게 떠오른 글래스모피즘에 대해 알아보겠습니다.

뉴모피즘(Newmorphism)은 new(새로운)와 skeuomorphism(스큐어모피즘)의 합성어로, 새로운 스큐어모피즘을 뜻합니다.

뉴모피즘을 이해하기 위해서는 먼저 스큐어모피즘에 대해 알아야겠네요.

2007년 애플이 아이폰을 출시하면서 만들어낸 UI 디자인 트렌드가 바로 스큐어모피즘입니다.

현실에 있는 사물을 그대로 화면에 구현한 것이 특징인데요. 예를 들어볼까요.

위 피아노 연주 어플리케이션 화면이 대표적인 스큐어모피즘 사례라고 볼 수 있습니다.

실제 피아노 모양을 있는 그대로 담아서 사용자가 직관적으로 이해할 수 있습니다.

하지만 이러한 스큐어모피즘은 창의적이지 않고, 제작 시간도 오래 걸리며, 과도하게 구체적으로 묘사돼있어 오히려 사용자의 주의를

분산시킨다는 단점이 있었습니다.

이에 애플은 2013년, ios 6에서 7로 넘어가면서 '플랫 디자인'이라는 새로운 디자인 양식을 선보입니다.

왼쪽이 스큐어모피즘, 오른쪽이 플랫디자인에 해당합니다.

스큐어모피즘의 단점을 보완하고자 등장한 플랫디자인은 이처럼 3차원이 아닌 2차원이며, 평평하고 단순한 느낌을 주는게 특징입니다.

그러나 유행은 돌고돈다고,

2020년에 스큐어모피즘은 뉴모피즘으로 다시 돌아옵니다.

스큐어모피즘처럼 3차원의 입체감을 표현하지만, 표현 방식은 오로지 그림자와 빛.

또한, 질감이 느껴지지 않아 매끈한 도자기같은 인상을 주는 것이 특징입니다.

하지만, 뉴모피즘은 디자인은 그럴싸하지만 '접근성'이 매우 낮아 실제 UI로 표현하기 힘들다는 큰 문제점을 안고 있습니다.

위 사진을 보면 아시겠지만, UI요소간의 구분이 확실하지 않습니다.

그럼 시력이 매우 낮은 장애인, 혹은 노약자가 이용하기 어렵겠죠.

접근성은 웹 표준과 더불어 웹, 혹은 앱의 완성도를 평가하는 기준이 되기 때문에 뉴모피즘은 전문가들에게 좋은 평을 받지 못했습니다.

그래서 그럴듯한 디자인에도 불구하고 실제로 뉴모피즘이 적용된 UI사례는 찾기 힘들죠.

뉴모피즘은 접근성 이슈로 메인 트렌드가 되지 못했지만, 해가 바뀌면서 또 다른 스타일이 화제가 됐습니다.

바로 글래스 모피즘인데요.

이름 그대로 유리같은 레이어를 사용해 디자인합니다.

반투명한 유리를 댄듯한 효과를 주고, 투명도를 강조하기 위해 배경에 비비드한 컬러를 사용하는 것이 특징입니다.

글래스 모피즘의 시초는 2013년, ios 7에 도입된 배경 블러입니다.

이후 타 브랜드 UI에도 영향을 미쳤죠.

글래스 모피즘을 디자인할 때 가장 중요한 게 두가지 있는데요.

첫번째는 투명도 설정입니다.

개체는 우리 눈에 가까워질 수록 더 많은 빛을 끌어모으므로 더 앞에 있는 요소일수록 더 투명해야 합니다.

그리고 두번째는 배경 선정입니다.

위 글래스모피즘 예시 사진들을 보면 하나같이 비비드한 색이 돋보이는 흐릿한 사진이 배경으로 쓰였음을 알 수 있습니다.

톤의 차이가 분명히 구별되는 사진이어야 투명한 레이어가 눈에 띌 수 있기 때문입니다.

뉴모피즘에 비해 개선되긴 했지만, 글래스모피즘 역시 판독성이 아주 좋은 편은 아닙니다.

따라서 잠재적인 접근성 문제를 가지고 있다고 볼 수 있습니다.

하지만, 이 디자인 양식을 어떤 기능에 적용하느냐에 따라 충분히 유용하게 활용할 수 있기 때문에 전문가들은 지속적인 연구와 적용을 거듭하고 있습니다.

확실히 디자인 자체는 매력적이니까요.

오늘은 이렇게 최근 UI 디자인 트렌드인 뉴모피즘과 글래스모피즘에 대해 알아봤습니다.

우리가 아무 생각없이 쓰는 스마트폰, 웹 사이트의 인터페이스가 이렇게 끊임없이 문제를 개선하며 발전하고 있었네요.

앞으로는 또 어떤 UI 디자인이 생겨날지, 관심을 가지고 지켜보면 좋을 것 같습니다.

그린컴퓨터아카데미는 HTML&CSS, JAVA Script를 기반으로 한 웹 디자인 및 웹 퍼블리싱, 프론트엔드 과정을 운영하고 있습니다.

비전공자도 이해할 수 있도록 기초 이론부터 체계적으로 수업하며, 수강생은 자신만의 포트폴리오까지 완성할 수 있습니다.

다양한 국비 지원 제도로 수강료 부담없이 배울 수 있으니 많은 문의 부탁드립니다.

-참고자료

01화 뉴모피즘은 새로운 UI 트렌드가 될 수 있을까? (brunch.co.kr)

뉴모피즘 디자인은 어떻게 좀비가 되었나 - 재그지그의 개발 블로그 (wormwlrm.github.io)

2020년 한 획을 그을 UI 디자인 트렌드, 뉴모피즘 - Wishket

UI 속의 글래스모피즘 - Wishket

UI 속 글래스모피즘 (brunch.co.kr)