Portfolio v2 - 1. Design

UI Design

이번 디자인 컨셉은 'Neumorphism'으로 정했다.

간혹 SNS에서 웹 디자인 관련 게시글이 추천되는데, 그 중 눈길을 사로잡는 디자인이 있어 찾아보니 이런 이름을 가졌다는 것을 알게 되었다.

Neumorphism은 나름의 장단점이 있으나 포트폴리오 페이지를 만드는데는 장점이 더 크게 작용할 것이라 생각되어 사용하기로 하였다.

 

Neumorphism

https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking

Neumorphism의 대표적인 이미지이다.

특징이라면 단순한 색 구성에 더불어 버튼이나 카드가 단순히 배경에서 떠있는 것이 아닌 배경으로부터 솟아오른 듯이 보이는 것이다.

이는 좌상단과 우하단에 서로 다른 두 가지 box-shadow를 적용하여 구현할 수 있다.

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Neumorphism은 skeuomorphism과 flat design에 기반한 디자인으로 여겨진다.

Skeumorphism은 현실의 물체처럼 버튼을 입체적으로 표현하는 것이고 flat design은 이와 반대로 모든 요소를 평면적으로 표현하는 것이다.

Neumorphism은 skeumorphism의 입체적인 특징은 가져오되 특유의 반짝거리는 듯한 효과는 배제하고, flat design의 미니멀함은 가져오되 평면에 약간의 입체적인 요소를 가미했다고 보면 된다.

아래 이미지에서 왼쪽부터 순서대로 skeumorphism, flat design, neumorphism의 특징을 잘 보여준다.

https://www.justinmind.com/ui-design/neumorphism

장점

이 디자인의 가장 큰 장점은 이러한 디자인을 접해보지 않은 사람에게 굉장히 신선한 느낌을 줄 수 있다는 것이다. 처음 보는 경우에는 굉장히 미니멀하면서도 입체적인 디자인에 매료될 것이다.

또한 최소한의 색만을 사용하면서 그림자만으로 요소들을 표현하기 때문에 눈에 피로도가 굉장히 적다. 이러한 이유로 Soft UI라고 불리기도 한다.

개발하는 입장에서도 box-shadow만 잘 적용해주면 깔끔한 디자인을 완성할 수 있기 때문에 공수도 어느 정도 적을 것이라 생각된다.

단점

이미 이 디자인이 소개된지 몇 년이 지났기 때문에 기존에 디자인에 관심이 있거나 현직에 종사한 사람들을 대상으로는 더 이상 신선한 디자인이 아닐 것이다. 이것 만으로도 가장 큰 장점이 반감된다.

또한 이 디자인 특유의 깔끔함이 오히려 접근성을 떨어뜨리기도 한다. 요소의 구분이 그림자만으로 이루어지는 경우가 많기 때문에 버튼을 알아차리기 어려운 경우가 생길 우려가 있다.

또한 UI의 상태가 변화할 때 이를 표현할 방법도 명확치 않은 면이 있다. Flat design의 경우 버튼의 색을 바꾸는 방법으로 상태 변화를 쉽게 시인할 수 있도록 하겠지만, Neumorphism은 기본적으로 버튼 색과 배경색이 같기 때문에 이런 것에서 어려운 점이 있다.

선택 이유

물론 가장 큰 이유는 예뻐서이다. 진성 P인 나에게 지금 당장 끌리는 것을 뿌리칠 힘은 없다.

거기에 더해 조금 더 이성적인 이유를 붙여보자면,

• 디자인에 노력을 덜 들일 수 있을 것이라 예상된다. 제대로 디자인 공부를 해본 적 없는 개발자인 나에게는 이것만으로도 큰 장점이다.
• 내가 이번에 제작하는 것은 포트폴리오 페이지이기에 기능성이 크게 중요하지 않다. 따라서 Neumophism의 기능 시인성이 떨어지는 단점은 크게 느껴지지 않는다.

물론 단점을 아는 입장에서는 실제 제품 개발에 neumorphism을 적용하기에는 어려움이 있을 것 같다.

그게 현재 대부분의 앱이나 페이지가 flat design을 선호하는 것이 아닌가 생각된다.

 

개발 관련 결정 사항

이번에도 Next.js로 개발을 진행한다.

최근 가장 많이 사용되는 프레임워크인 만큼 나도 더 많은 경험을 쌓을 필요가 있으며, 확실히 React만으로 개발을 할 때보다 편의성이나 효율면에서 뛰어나다는 인상을 받고 있다.

 

스타일링은 SCSS로 진행할 예정이다.

TailwindCSS도 몇 번 체험을 해봤지만, 아무래도 className이 지나치게 길어지면서 지저분해지는게 영 마음이 가지 않는다.

더군다나 협업을 진행하며 파라미터를 정확하게 공유하며 사용하는 경우라면 모르겠지만 혼자서 개발하는 입장에서는 그닥 큰 장점이 느껴지지 않는다.

Styled-components를 선택하지 않은 이유는 아무래도 정보를 여러 파일로 나눠서 관리하는걸 좋아하는 개인 성향 + Next.js의 CSS module로 className의 중복을 걱정하지 않아도 되기 때문이다.

 

상태관리...라고 해도 포트폴리오에서 전역적으로 관리할 상태는 잘 없을 것이라고 생각되긴 한다.

그래도 언어 선택이나 다크 모드 구현에서는 조금 활용해볼 여지가 있을 것 같다.

어찌되었던 RTK를 사용할 예정이다.

개인적으로는 MobX나 Zustand가 1인 개발에 편리하다고 생각되긴 하지만 그럼에도 현재 가장 많이 쓰이는 기술에 대한 연습은 필요하기에 사용해보려 한다.