neumorphism 적용한 form validator

요즘 핫한 neumorphism.
명색이 트렌드 관련 프로젝트 진행 중인데 디자인 트렌드를 적용 안해볼 수 없지. 하면서 빠져버린 디자인.

처음에는 징그럽나 싶었는데, 매력있당.

 

neumorphism form validation

vue 프로젝트를 진행하면서 매일 프레임워크랑 라이브러리만 쓰다보니까 편안함에 점점 잠식되는 내 모습 발견. 어떻게든 vuetify 내에서 해결하고자 하는 내 모습이나 아주 기본적인 javascript 코드를 작성하지 못해 구글링 ㅎㅏ는 나를 본다. 이러지 말자 진챠!

 

다시금 기본으로 돌아가 vanilla JS 공부하고자 form validator를 만들었다. 재밌게 하고 싶어서 뉴모피즘 디자인도 적용해보고 하니까 대략 요런 너낌 ? 아주 기본의 기본. 귀엽다. 버튼 누르면 폭닥 들어가는 것도 좋다.  

 

다만 아쉬운 점은 뉴모피즘을 적용하면서 색상의 자유를 잃어버렸다. 버튼이나 인풋에 다른 색상을 주기가 무척 곤란하다. 배경과 다른 색을 적용하면 적용한 요소만 다른 서비스에서 온 친구같달까 ...흠

 

누군가는 뉴모피즘이 대중화되면 더욱 다양한 색의 서비스들을 만나볼 수 있을 것(==배경 색이 반드시 있어야 하니까)이라고 말했지만, 나는 조금 반대의 의견을 갖고 있다. 오히려 더 일관적인 색의 서비스를 만나게 될 수도 있을 것 같다. 지금 당장도 비핸스나 핀터레스트 에 neumorphism 검색하면 회색 투성이이다. 다른 요소들과 어울릴 무난한 배경 색의 폭이 크게 넓지 않아보인다. 

 

하지만 실력좋은 디자이너들은 분명 그 속에서도 자신들의 아이덴티티를 살릴 수 있는 해결책을 짠 하고 보여주겠지? 기대된당.

 

 

 

+나는 뉴모피즘 제너레이터로 아래 사이트를 사용했다.

https://neumorphism.io/#267082