안녕하세요.
웹/앱 개발 외주 업체 샐리입니다.
ui 트렌드를 아시는 분이라면 썸네일에서 느껴졌을 텐데요.
오늘 주제는 뉴모피즘(Neumorphism)입니다!!
뉴모피즘이란?
기존의 비슷비슷한 플랫 디자인의 단조로움에서 벗어난 새로운 실험적인 ui 스타일인데요.
쉽게 말하면 바로 NEW(새로움)와 스큐어모피즘(리얼리즘 스타일)이 결합된 단어입니다.
뉴모피즘에 대한 자세한 내용과 직접 사용해본 소감은 추후 따로 포스팅을 준비하고 있으니 기대해 주시고요.
오늘은 xd에서 뉴모피즘을 어떻게 만드는지 기술적인 설명을 공유해드리려고 합니다!
뉴모피즘은 음영(그림자)로 형태를 만든다고 생각하면 되는데요.
오늘은 왼쪽 위에서 빛이 비친다는 가정하에 아래와 같이 그림자를 표현해 줄 겁니다.
그럼 이제 xd를 실행시켜주세요!
< 사각형 그리기 >
① 사각형을 그리기 앞서서 아트보드 색상을 변경해 주세요.
뉴모피즘은 배경이 흰색이면 안 돼요. 약간의 회색? 미세하게 색상을 넣어주세요.
저는 #F0F0F3로 변경하고 시작할게요.
② 라운드를 적용시킵니다.
뉴모피즘은 라운드가 들어간 둥글둥글한 스타일이 포인트입니다.
< 어두운 쉐도우 >
① 사각형에 첫 번째 드롭 쉐도우를 다음과 같이 적용합니다.
* Drop Shadow 1 : #AEAEC0 40%, X10 Y10 B30
< 밝은 쉐도우 >
① 사각형을 하나 더 복사합니다.
② 역시 사각형에 드롭 쉐도우를 다음과 같이 적용합니다.
* Drop Shadow 2 :#FFFFFF, X-10 Y-10 B30
< 반사광 >
① 쉐도우가 적용되지 않은 사각형을 두 개 더 복사합니다.
② 사각형 두 개를 다음과 같이 겹친 후 Shape 빼기를 적용합니다.
③ 컬러를 적용합니다 #B9B9B9 8%
< 하이라이트 >
① 반사광을 만든 레이어를 복사한 후 컬러만 #FFFFFF 변경합니다.
< 레이어 정리 >
남은 건 이제 레이어 정리하면 하면 됩니다.
다음과 같이 지금까지 만든 레이어를 겹처서 그룹화 시켜주면 끝!
생각보다 어렵지 않죠?
물론 포토샵으로 쉐도우 표현이 더 쉽지만 xd로도 충분히 표현할 수 있다는 걸 알려드리고 싶었어요.
만약 앞으로 뉴모피즘이 정말 상업적으로도 활용된다면(가능성은 낮지만;;;)
어도비 xd에서도 쉐도우 기능을 업그레이드하지 않을까 싶네요.
그럼 이만!