놀라운 웹디자인을 만드는 5가지 방법

독특한 웹디자인은 마치 예술작품을 보는 것 같다. 유저에게 영감을 선사하고, 창의적인 발상을 제시한다. 반면, 프레임워크로 만든 웹디자인은 모두 같은 얼굴을 하고 있다. 색상과 레이아웃만 보더라도 어떠한 프레임워크를 사용했는지 알 수 있을 정도다.

 

놀라운 웹디자인이 고프다

 

웹디자이너 & 개발자라면 누구나 유저에게 영감을 줄 수 있는 작품을 만들고 싶어한다. 문제는 어떻게해야만 창의적이고 독특한 웹디자인을 만들 수 있느냐는 것이다. 이에 대한 답변이 '감각'이라면, 평범한 사람의 입장에서 정말 답이 없다. 비록 지금부터 짚어볼 5가지 발상법이 정답이라고 할 수는 없지만 어떻게든 빈틈을 만들어보자. 그나마 뭔가 남다른 웹디자인을 제작할 수 있는 시발점이 될 수 있다는 점에 의의를 두자. 

 

 

---

반응형

반응형은 언제나 신선함을 선사한다. 같은 콘텐츠도 반응형을 도입하면 훨씬 감각적으로 변한다. 가령, '책'을 반응형 CSS그리드로 제작한 AndyBarefoot의 웹 디자인을 보자. 

Responsive CSS Grid - Books

E-book 게시판

 

뭔가 대단한 기법이 사용되지는 않았다. CSS를 활용한 hover효과, 반응, 애니메이션 등 웹디자이너라면 누구나 잘 구현할 수 있는 기법들이다. 핵심은 상황이다. 'AndyBarefoot'은 책장에서 책을 꺼내는 상황을  감각적으로 연출했다. 

 

'상황'을 요리하는 방법은 다양하다. 가령, 'Romina'의 'Who can get my blood?'는 일러스트를 결합한 방식으로 상황을 보여준다. 'Romina'의 디자인은 이런저런 설명이 필요없다. 유저가 이것저것 클릭하다보면 이해할 수 있다. 

 

Who can get my blood?

by.Romina

 

'반응형' 웹디자인의 특징은 유저의 이벤트를 통해 주제를 찾아가는 '상황'에 있다. 이는 유저와 함께 성장해간다는 느낌과 비슷하며, 교육콘텐츠 or 구조 설명 등에 적절하다.

 

 

 

---

  과장 & 축소형

 

과장&축소 스타일의 웹디자인의 핵심은 '디테일'에 있다. '과장 & 축소'를 구현하려면, 어떤 부분을 과장하거나 축소할 것인지 정확하게 알아야한다.  'Jhey Tomkins'의 주문버튼이 대표적인 사례이다.

 

T-Shirt Cannon Button 🚀

svg order button

 

버튼이 로켓으로 변하며 날아가는 버튼은 톡톡 튀는 즐거움을 선사한다. 'Jhey Tomkins'는 로켓버튼 이외에도 일러스트와 사운드를 결합하는 방식으로 여러가지 프로젝트를 만드는 것으로 유명하다. 

 

재미있는 웹디자인은 다음과 같은 아주 간단한 장면에서도 사용할 수 있다. 'Mikael Ainalem'의 버튼은 의미를 형상화하여 감각적이면서 강력한 효과를 만들어낸다.

 

Password Reveal

비밀번호 표시&숨김 아이콘을 '눈'으로 대체

 

버튼을 활용한 웹디자인은 무궁무진하다. 즐거운 디자인을 제작하는 'Aaron Iker'의 디자인은 유저를 기대하게 만든다. 

 

(v2) Paper plane button

메일=종이비행기

 

'과장 & 축소' 방식은 시적이며, 은유적이다. 『'A'는 'B'와 같다』에서 A가 아닌 B를 표현하는 방식이 중요하며, 은유적 표현을 과감하게 '과장'하거나 '축소'하는 방식으로 독특함을 전달할 수 있다.

 

 

 

---

스토리형

 

스토리형은 가장 고심하며 제작해야 하는 단점이 있지만 파급력이 상당한 장점이 있다. 스토리형은 말 그대로 '스토리'를 전달하는 디자인이다. 주로 스크롤을 통해 스토리를 전달하며, 아래와 같은 방식이 대표적이다.

 

ScrollTrigger Demo

by- 'Mariusz Dabrowski'

 

스토리형 디자인은 브랜드 스토리 혹은 기업철학을 간단하게 전달하는 용도에 적합하다. 가령, 'Aysenur Turk'의 경우, 간단한 반복을 통해 이야기를 전달하고 있다. 

 

CSS Night Train Ride Animation

 

스토리형은 반응형, 과장&축소형 등과 결합했을 때 가장 강력한 효과를 발휘한다. 순간적인 재치와 독특함은 쉽게 잊혀질 수 있지만 스토리와 결합한 웹디자인은 각인이 된다. 만일 기업철학 & 소개를 준비하고 있다면, 'Steve Gardner'의 스토리 디자인을 고려해보자.

 

Airplanes.

마우스 스크롤 + 스토리 + 반응형

 

 

---

현실 모방형

 

'현실 모방형'의 대표적인 사례는 애플의 스큐어모피즘이다. 현실을 그대로 모방하면서 필요한 부분만 남겨두는(미니멀리즘) 방식의 잠점은 '각인 효과'에 있다. 현실에 접했던 형태가 그대로 옮겨져 있기 때문에 일단 친근하다. 따라서 이도저도 아닌 상황이라면, 차라리 현실 모방형 스타일을 과감하게 접목시켜보는 선택도 나쁘지 않다. 개인적으로 가장 현실모방을 잘 했다고 생각한 웹 디자인은 '타임지'를 그대로 옮겨놓은 'Olivia Ng'의 작품이다.

 

CSS Grid: Newspaper Layout

대표적인 현실모방형 웹디자인 

 

좀더 미니멀리즘을 추구한다면, 스마트폰 하드웨어를 그대로 옮겨버린 'Aaron Iker'디자인 역시 참고할 만하다.

 

Bouncing tab bar

현실 모방형 방식은 정말 이도저도 안 떠오를 때 사용하는 편을 추천한다.

 

처음 접했을 때는 뭔가 신선한 느낌을 줄 수 있지만 반복될수록 신선함이 급격하게 떨어진다. 게다가 현실을 그대로 옮겨야하기 때문에 굳이 필요없는 부분을 넣어야 하고, 실속없는 디자인을 감안해야 한다. 즉, 이벤트 웹페이지와 같은  단기간 홍보를 위한 용도에 알맞다. 

 

 

 

 

 

---

퓨전형

퓨전형은 "스토리 + 현실모방형" , "과장 & 축소형 + 현실모방형" 등 여러 스타일을 섞은 웹 디자인이다.  섞을 수록 독특한 느낌을 만들기 쉬운데 개인적으로 2~3가지 정도 섞는 방식이 좋지 않을까한다. 'Jhey Tompkins'의 책 디자인을 보자.

 

Little book of GSAP w/ ScrollTrigger

반응형 + 현실모방형 + 스토리형

 

퓨전형의 단점은 '공임'이다. 여러가지 스타일을 섞다보면, 웹디자인 영역을 벗어날 수 있다. 위의 '책 보기' 웹디자인 역시 거의 웹앱처럼 변했다. 만일 '퓨전형' 웹 디자인을 구현할 계획을 세웠다면, 반드시 '시간'을 넉넉하게 잡아놓아야 한다.  

 

ScrollTrigger - Highlight Text

스크롤에 따라 밑줄 강조

 

 

---

정리

독특하고, 창의적인 웹디자인도 좋지만 무리하지 않는 선에서 해결하는 편이 이상적이라 생각한다. 너무 독특하게 하려고 모든 것을 담으려 하기보다는 'Ryan Mulligan'의 'Scroll Trigger'과 같은 간단하면서도 웹앱이 추구하는 주제를 가장 잘 살려줄 수 있는 웹 디자인이 정답이 아닐까한다.