뉴모피즘 디자인에 대해 알아보자
뉴모피즘, 디자인 분야에 관심이 있거나 공부를 하고 있는 사람은
한 번쯤 들어본 적이 있을 거예요.
굉장히 이쁘지 않나요? 저도 처음에 뉴모피즘 디자인을 접했을 때 굉장히 신선하고 인상 깊었습니다.
뉴모피즘 디자인이란, 하나의 색상에 빛과 그림자만으로 입체적인 느낌을 살려주는 스타일입니다.
하지만 저는 뉴모피즘 디자인이 실제 실무에 적용된 거는 본 적이 없는 거 같아요.
바로 뉴모피즘 디자인의 단점 때문인데요
UX, UI 측면에서 봤을 때 가독성이 낮습니다.
또한 시각적 위계가 명확하지 않아 어느 부분이 중요하고 그렇지 않은지 구분이 힘듭니다.
하지만 컨셉에 따라 사용되는 경우도 있으니 만드는 방법을 배워두는 편이 좋겠죠?
뉴모피즘 디자인을 만드는 방법은 크게 복잡하진 않습니다.
우선 원하는 글씨를 써주세요!
흔합 옵션에서 드롭 섀도를 추가해줄게요.
빛이 왼쪽 위에서 온다는 가정하에, 밝은 부분 먼저 만들어보겠습니다.
블렌드 모드는 스크린에, 색상은 배경색을 지정해 주세요.
각도는 -45도, 전체 조명 사용을 해체해 주세요.
거리와 크기에는 정답이 없기 때문에, 조절하면서 적절한 값을 찾아줍시다.
어두운 부분도 만들어야겠죠?
드롭 섀도를 한 개 더 만들어주세요.
블렌드 모드 곱하기(Overlay), 각도 135도로 해주면 됩니다.
이런 결과물이 나왔는데요, 벌써 입체적인 느낌이 나죠?
여기서 좀 더 디테일하게 만들어볼게요!
처음에 만든 드롭 섀도인 밟은 부분을 하나 더 추가해서
불투명도를 50%, 거리와 크기 값은 이전보다 좀 더 크게 만들어줍니다.
어두운 부분의 드롭 섀도도 하나 더 추가해 주세요.
마찬가지로 불투명도 50%, 거리와 크기값을 더 크게 해주시면 됩니다.
마지막으로 그레디언트 오버레이 선택해 주세요!
각도는 -45도로 설정해 줍니다.
색상은 앞쪽은 배경색, 쪽은 배경 보다 조금 어두운색으로 지정해 주면 됩니다.
이렇게 완성되었습니다!
레이어 스타일 효과만으로 간단히 만들어본 뉴모피즘 스타일이었습니다.