뉴모피즘과 버튼 UI
바뀌는 것과 바뀌지 않는 것
뉴모피즘에 대한 관심이 많아지고 있다. 드리블(www.dribbble.com)에서도 계속 이 테마로 디자인을 만드는 경우가 많이 보인다. 드리블에서는 Playoff라는 기능이 있어서 유행이 되는 디자인을 경쟁하거나 아이디어를 비교해 볼 수 있다. 이게 많아지면, 디자인 이슈를 소개하는 페이지나 서비스에 랭크되기 쉽다.
버튼을 생각해 본다.
디자인은 원래 다양한 스타일이 있지만, 왤까?라는 것을 생각해봤다. 이름에서 알 수 있듯이 새로운 것이 아니다. 작년에는 스큐어모피즘 2.0이었는데, 역시 이름을 잘 붙여야 하는 것 같다.
실제 UI 디자인에서 뉴모피즘을 생각해 볼 때, 왜? 어떻게? 를 몇 가지 생각해보았다.
흑백으로 진행해 보았다. 하얀 배경 위에 하얀 버튼을 올려보려고 한다.
요즘 버튼이다. 이 버튼은 만들기 쉽고, 적용하기 쉬우며, 인식하기 쉽다. 린이나 애자일, 미니멀리즘이나 머티리얼 디자인 가이드의 유행으로 이러한 스타일이 많이 사용한다.
그런데 버튼은 하나가 아니다. 제스처나 상태, 용도에 따라 모양과 색이 조금씩 달라진다. 사실 이 버튼을 파보면 생각보다 복잡하다. 면, 라인, 투명도, 모서리의 둥근 정도에 따라 다양한 스타일이 있다.
Solid
Line & Ghost button
Rounded
Pill or Capsule(Max Rounded)
FAB (Floating action button)
그리고 각 버튼마다, 상태(state)가 있다.
Enable, Default
Disabled
Active
Hover
Focus
Pressed
사람에 따라서는 라인 버튼이 더 중요하다고 생각할 수 있다.보통 1~3가지 혹은 그 이상의 버튼 스타일이 필요하고, 각각의 버튼마다 상태가 필요하다. 웬만하면 하나로 다 쓰고 싶은데, 일 하다가 보면 잘 안 되는 경우가 많다. 지금 흑백이어서 그렇지, 색상을 도입하면, 만드는 사람은 잘 알지만, 보는 사람에게는 일종의 색상 암호가 되어버리는 일도 있다.
게다가 단순화하면, 다른 컴포넌트랑 비슷해 보이는 문제가 있다. 그렇게 되면, 또 규칙이 추가된다.
흰 배경 위에 올라갔을 때, 각 요소를 구분하는 것은 쉽지 않다.그래서 얼마 전까지 많이 쓰이던 컴포넌트는 이렇게 된다. 그런데 이렇게 계속 바뀌면서 문제가 생겼다. 이쯤 되면, "버튼은 버튼처럼!"이라는 말이 좀 이상해진다.
TMI. 회색 배경 위에서는 밝은 버튼의 회색 그림자와 어두운 버튼의 회색 그림자의 투명도를 다르게 해야 비슷하게 보인다.게다가 요즘엔 버튼에 아이콘이나 애니메이션 등을 넣어서 더 동적인 디자인을 만들려고 하는 움직임도 많다. 그렇게 하면서 버튼 하나를 만드는 기술은 점점 더 복잡해진다. 용어도 계속 늘어난다.
게다가 미니멀한 디자인 요소들로 어떤 페이지를 구성하게 되면, 이상하게 복잡해지는 결과가 나온다. 디자인 요소만 간단해졌지, 사용자가 봐야 하는 정보와 제품이 제공해야 하는 정보가 간단해지지 않기 때문이다.
플랫 디자인의 어려운 점은 정보를 평면 위에 다 늘어놓으면, 공간이 많이 필요해서 스크롤을 열심히 해야 하고, 그렇다고 유연한 카드 컨테이너 안에 넣어 버리면, 사용자가 모든 정보를 확인하기 위해 수많은 서랍을 열었다가 닫았다가 하는 일을 반복해야 한다.
이런 맥락 속에서 토글 버튼(Toggle Buttons)에 대한 한 가지 아이디어가 나왔다.
"한 번 선택한 것을 계속 선택된 상태로 보여준다."
토글 버튼(Toggle Buttons)은 한 번 눌린 버튼이 계속 눌린 상태로 있거나, 내가 선택한 정보가 계속 남아 있어야 한다. 현실에서는 보통 이런 경우가 많다. 전등 스위치 같은 사례다. 그리고 그 상태를 여러 가지 디자인 요소에 반복해서 쓸 수 있으면 더 좋다. 멀리 가지 않아도 답이 있다. 현실에 있는 대로 만들면 된다.
개발보다 드리블 스타일로 만들면 대략 이렇다. 뉴모피즘 디자인 팁을 보면 순백색(#FFFFFF)과 완전히 검은색(#000000)을 사용하지 말라고 한다. 회색 배경을 쓰면 먼저 만든 것처럼 다 회색이 돼서 그림자가 드리운 것처럼 된다. 그래서 색 없이 배경을 흰색으로 유지하면서 눌린 상태와 선택해야 되는 디자인 요소를 밀어낸 이미지를 만들었다.
Inner Shadow와 Gradient Stroke를 이용했다.
돌고 도는 유행과 변하지 않는 것
Latte is horse2012년쯤, 작업한 UI 컴포넌트 연습 작업이다. 복잡하고 손도 많이 간다. 예전에는 뭔가 추가하는게 미덕이었고, 그게 ‘디자인 된’ 거라고 생각하는 사람이 많았다. 지금에 비해 저해상도이며, 비트맵 작업이 많았고, 수많은 레이어가 사용되서, 변형과 공유, 유지보수도 쉽지 않았다. 이 때는 드리블에서 One Layer 스타일이 유행하기도 했다. 레이어는 하나만 쓰고 Effect 기능을 최대한 활용하는 식이다. 툴과 트렌드 시대가 많이 바뀌었음에도 변하지 않는 것이 있다.
1. 디자인은 항상 경쟁이다.
2. 콘텐츠 혹은 기능의 전달은 언제나 중요하다.
3. 효율적으로 빠르게 만들어야 한다.
Neumorphism UI Trend 2020 by OTAKOYI드리블의 OTAKOYI가 공유한 Shot이다. 수치는 피그마로 활용할 수 있다. 현재의 뉴모피즘은 해당 디자인의 효과를 구성하는 수치를 피그마나 스케치 포맷으로 공유하는 경우가 많다. 포토샵 이펙트에 비해서 데이터 공유가 쉬워졌고 개발과 연계되기 좋아졌다.
뉴모피즘도 결국 문제의 해결책을 찾다가 나오는 이야기가 아닐까 한다. UI를 이야기할 때, 브랜딩을 이야기하는 것처럼, 가끔은 다른 것도 만들고 시도도 해봐야 한다. 그래서 배달의 민족이나 Kakao W: Weather app 같은 사례를 눈여겨볼 필요가 있다.
디자인 스타일은 풍파에 계속 변하지만, 컨테이너를 숨기면서 메시지나 스토리를 전달하는 디자인의 목표는 바뀌지 않았다.
단순화는 좋지만, 모든 것이 비슷해지는 결과를 낳는다. 해상도도 더 높아지고, 색상 재현도 잘되는데, 그걸 표현하는 방식은 지나치게 교조주의로 빠지는 건 아닐까 한다. 디자인 시스템이나 효율성을 강조한다고 크리에이티브를 놓치면 안 된다. 모호함 속에 균형을 찾길 바란다.
