질문사항
모피즘 디자인 스타일에 대해 정리해보고 쉽게 제작할 수 있는 플러그인이나 플랫폼, 그리고 모피즘 디자인 시 주의해야할 점을 함께 소개해 드리려고 합니다!
답변
아래 내용을 확인해주세요.
답변과 정보에 대한 상세 정보를 작성해주세요.(ex. 플러그인 링크, 관련 해결법 링크, 예시 이미지 등) 질문의 경우 만약 단톡 내에서 해결하지 못했다면 공란으로 남겨놔주세요.
스큐어모피즘(Skeuomorphism): 스큐어모피즘은 실제 사물과 비슷하게 생김새나 질감을 그대로 표현하는 방식의 디자인입니다. ios 초기 아이콘들과 인스타그램초기 아이콘이 이에 해당합니다. 스큐어모피즘 디자인은 피그마로 직접만들기에는 한계점이 많아 타 그래픽 툴로 만들어서 이미지로 가져오는 것을 추천드립니다.
플랫디자인(Flat Design): 플랫디자인은 스큐어모피즘과 반대되는 개념으로 평면에 2D로 간단한게 디자인하는 방식입니다.
뉴모피즘(Neumorphism): 뉴모피즘은 대상에 비치는 그림자에 따라 색이나 라인을 주지 않고 대상의 볼륨감을 주는 디자인입니다.
•
플러그인 beautiful Shadow를 활용해서 만들어보세요!
•
https://neumorphism.io/ 라는 플랫폼에서 웹환경에서 뉴모피즘을 구현해보고 css 코드로 핸드오프 할 수도 있습니다.
•
글래스모피즘(Glassorphism): 글래스모피즘은 대상의 투명도와 흐림을 이용해 유리같은 질감을 내는 디자인입니다.
•
프레임이나 도형에 플러그인 morph ‘Glassy’ 이펙트를 적용해서 쉽게 만들 수 있습니다.
•
https://css.glass/ 라는 플랫폼에서 웹환경에서 글래스모피즘을 구현해보고 css 코드로 핸드오프 할 수도 있습니다.
•
클레이모피즘 (Claymorphism): 클레이모피즘은 점토로 빗어낸 듯한 둥글고 볼륨있는 질감이 특징으로 뉴모피즘과 비슷하지만 조금더 볼륨감이 있고 컬러감을 풍부하게 쓴다는 점에서 차이가 있습니다.
•
프레임이나 도형에 플러그인 morph ‘Skeuo’ 이펙트를 적용해서 쉽게 만들 수 있습니다.
•
https://hype4.academy/tools/claymorphism-generator 라는 플랫폼에서 웹환경에서 클레이모피즘을 구현해보고 css 코드로 핸드오프 할 수도 있습니다.
추가로 알면 좋을 팁
모피즘 디자인 시 주의사항
1.
모피즘 디자인은 대부분(특히 뉴, 클레이, 글래스) 웹접근성 기준에 미달되는 경우가 많습니다. 만약 내가 공공 프로젝트나 금융권 프로젝트 같은 웹접근성이 중요한 프로젝트를 한다면 모피즘 디자인의 적용은 고민을 해보아야 합니다.
2.
개발 공수가 조금 더 들어갈 수 있습니다. 플랫한 디자인은 컬러나 스트로크로 비교적 간단한게 구현이 가능한 방면 모피즘 디자인들은 css에서 필터나 그림자 등을 더 추가해야하는 구현이 가능합니다. 따라서 우리 프로젝트 개발 리소스 등을 함께 체크해야 원활한 작업을 할 수 있습니다.