뉴모피즘(New Morphism) 계산기 디자인 해봤습니다. (XD 디자인 소스)

뉴모피즘 스타일로 계산기를 디자인해봤습니다. 이번 작업의 목표는 이미지를 사용하지 않고 심플하면서도 부드러운 느낌의 UI를 만드는 것인데요. 지난번에 자바스크립트로 만들었던 계산기를 리뉴얼하려고 디자인 작업을 했습니다. 앞으로 CSS까지 완료되면 CSS소스도 공유해드리겠습니다. 이번 포스팅에선 XD 디자인 소스까지 공유해드릴게요.

 

Chat GPT로 만든 HTML 계산기 바로가기

 

계산기 뉴모피즘 스타일 / 스토리블럭

 

뉴 모피즘 디자인 스타일인데요. 좀 더 뉴모피즘을 강조한다면 버튼들에 테두리도 없애는 게 맞을 거 같습니다. 아래는 버튼에 라인을 없앤 디자인입니다. 라인을 빼면 훨씬 부드럽게 보이죠.

 

계산기 뉴모피즘 스타일 / 스토리블럭

 

뉴모피즘이라는 디자인이 유행인데요. 아니, 어쩌면 지금은 뉴모피즘 보다는 훨씬 심플한 디자인이 유행인 것 같습니다. 실제로 뉴모피즘은 디자인 작업물들 외에 양산된(?) 제품의 UI로는 잘 쓰지 않는 것 같아요.

 

뉴모피즘이란?

뉴모피즘은 객체와 배경을 그림자로만 분리하여 볼륨감 있게 디자인하는 것을 말합니다. 전반적으로 UI는 플랫 디자인이 대세죠. 뉴모피즘은 플랫디자인 보다는 볼륨감이 있습니다. 플랫디자인과 스큐어모피즘의 중간에 해당하지만 스큐어모피즘보다는 플랫디자인에 가깝죠. 

 

오래전 아이폰의 앱 디자인들은 스큐어모피즘의 교과서격이었습니다. 버튼하나도 그냥 만들지 않았고, 녹음기는 실제 마이크 같은 스타일이었죠. 뉴스스탠드라는 것엔 잡지가 진열되어 있는 것 같은 UI였습니다. 그리고 당시에도 정말 많은 곳에서 스큐어모피즘을 따라했는데요.

 

 

요즘 아이폰 앱 디자인은 그야말로 플랫합니다.

 

 

플랫디자인의 특징은 그야말로 미니멀함입니다. 미니멀하지만 그분감이 확실하고 단순한 만큼 명확합니다. 물론 너무 단순해서 뭘 어떻게 해야할지 모르겠다는 의견도 있을 거예요. 그리고  이런 플랫디자인이 유행하게 된 것은 모바일 기기가 갖고 있던 한계 때문이기도 합니다.  단순하고 명료해야 부족한 공간, 작은 화면에 복잡한 것을 줄일 수 있으니까요. 또한 불필요하게(?) 무거운 이미지를 저장해야할 필요도 없게 되구요.

 

하지만 심심한 것도 사실이라 플랫디자인을 대신할 수 있는 뉴모피즘의 등장은 촉각적이고 시각적으로 신선합니다. 

 

뉴모피즘 스타일 계산기 디자인하기

엄밀히 말하면 제가 작업한 것은 뉴모피즘을 섞은 플랫디자인이라고 할 수 있습니다. 뉴모피즘이 그림자로만 구분감을 주는데 어딘가 명료하지 못하고 부옇게 보이는 듯한 인상을 줍니다. 그래서 버튼에 라인을 넣어서 구분감을 주고 배경과도 좀 더 경계감을 확실히 했습니다. 계산기가 단순해서 복잡한 UI는 아니지만 뉴모피즘만으로 디자인을 하면 보다 복잡한 내용을 담았을 때 구분감이 떨어져서 오히려 난잡해보이는 문제가 있습니다. 또한 그림자 때문에 배경색도 뚜렷하게 대비되는 색을 쓰지 못하죠. 

 

 

계산되는 숫자가 보이는 창은 크게 했는데요. 원래는 여기에 계산식이 보이게 하고 싶어서 크게 해놨는데, 제가 지난번 만들었던 자바스크립트 계산기는 계산식은 보이지 않아 이렇게 클 필요는 없지만 나중에 업그레이드 하게 되면 표현해보고 싶습니다.

 

순수하게 작업은 XD로만 했구요. 아래 XD 디자인 소스를 공유해드리니 별 것 아니지만 참고해보셔도 좋을 것 같습니다. 혹시라도 도움이 된다면 저도 좋을 것 같네요.

 

calculator_design_storyblock.xd

0.31MB

 

서체는 Opensans를 사용했습니다. 

 

Opensans는 구글폰트에 공개된 오픈소스 서체이니 구글폰트에서 다운로드 하시면 됩니다.

 

Open Sans Google Fonts 

Open Sans - Google Fonts

 

마치며,

오늘은 뉴모피즘 스타일 계산기 디자인을 소개해드리고 간단한 작업물이지만 XD 소스도 공유해드렸습니다. 다음번엔 디자인을 계산기에 적용해서 실제로 사용해볼 수 있도록 해보겠습니다.

 

고맙습니다.