brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Dec 22. 2016

[번역]Web Design Trend 2015~2016

웹 디자인 트렌드에 관한 해외 아티클을 이것저것 모아다가 2016년이 가기 전에 한번 종합해 보았습니다. 좀 중구난방이긴 한데 예시 사이트만 한 번씩 보셔도 지금까지 웹 트렌드의 전반적인 분위기를 보실 수 있을 것 같네요. 예시 사이트들을 보면 패턴화와 애니메이션(인터렉션), 메터리얼(플랫) 디자인이라는 세 가지 큰 틀 안에서 웹사이트의 성격에 목적에 맞는 디자인이 나타나는 것 같습니다.

UI Patterns

반응형 웹이 일반화되면서 웹사이트들이 모두 비슷한 디자인을 보여주고 있다. 반응형 웹뿐만 아니라, 워드프레스가 널리 사용되고 웹디자인 테마 시장이 커지면서 유사한 디자인이 많이 보이는 것 같다. 하지만 비슷해 보이는 웹디자인들이 나쁜 것만은 아니다. 사용자가 웹을 소비하는 방식이 변하면서 공통된 UI 디자인 패턴들이 형성되었고, 수많은 UI 패턴을 벗어난 UI가 나오기가 어렵게 되었다. 체크박스는 체크박스처럼 동작해야 한다. 사용자에게 가장 효율적이고 익숙한 디자인을 일부러 바꿀 필요는 없는 것이다.

1. The hamburger menu

햄버거 메뉴를 사용하면 주요 내비게이션 옵션을 화면에서 바로 사용할 수 없게 함으로써 사용성을 크게 저해한다는 견해도 많이 있지만, 화면이 작은 앱에서의 사용성을 위해 메인 메뉴를 전면에 노출시키지 않고 햄버거 메뉴 버튼을 통해 보이도록 하는 방식이 많이 적용되고 있다. 메뉴를 늘어놓지 않음으로써 디자인을 깔끔하고 기능적으로 만들 수도 있다. 앱 중심의 디자인이라고 볼 수 있다. 이제는 햄버거 메뉴가 널리 사용되면서 사용자도 메뉴의 위치에 대해 쉽게 인식하고 사용하고 있다.

2. Flyout/slideout app-like menus

화면의 좌 or 우측에서 밀고 나오는 메뉴 방식이다. 최근까지 웹사이트는 우선 데스크톱의 뷰에 맞춰 디자인되고, 모바일이나 태블릿에서도 문제없이 잘 보이도록 하는 방식으로 디자인되었다. 하지만 문제없이 보이는 정도를 넘어서 디바이스에 관계없이 동일한 디자인을 제공하는 사이트들도 많아지고 있다. 웹에서도 전형적인 헤더 부분의 GNB 대신 앱과 동일한 flyout / slideout 메뉴 버튼을 적용하고 있다.

3. LongScroll

화면이 작은 모바일 중심으로 디자인이 되면서 작은 화면에 정보를 담기 위해 세로로 긴 레이아웃이 일반화되었다. 컨텐츠가 스토리텔링 형식으로 되어있을 때 특히 유용하며, 멀티페이지 사이트도 섹션을 명확히 구분하여 long scroll 형태로 적용할 수 있다.

4. Storytelling and interaction

인터렉션을 통한 스토리텔링. 스크롤, 호버 등의 인터렉션을 유도하여 컨텐츠가 가지고 있는 일련의 스토리를 보여준다. 재미있고 기발하게 적용하여 사용자에게 와우 이펙트를 줄 수 있다.

5. CardStyle interfaces

Pinterest와 Material 디자인의 영향으로 카드 스타일은 여러 웹사이트에서 찾아볼 수 있다. 카드 레이아웃은 정보를 작은 덩어리로 담고 있어 웹사이트의 정보를 스캐닝하기에 아주 적합하다. 각각의 카드는 컨텐츠 컨테이너로서 역할을 하고, 디바이스의 화면에 따라 재배열하기도 쉽게 되어 있다.

6. HeroVideo Headers

인간의 감각 중 가장 강한 감각이 시각이다. HD급의 Hero 이미지는 사용자의 주의를 빠르게 잡을 수 있다. Hero 이미지를 이용한 레이아웃은 보통 hero 이미지 아래에 지그재그 스타일이나 카드 형식의 콘텐츠가 따라오는 형식이다.
인터넷 속도가 빨라지고 비디오 플러그인이 발전함에 따라 Hero 이미지에 동영상을 적용하는 웹사이트도 많아지고 있다. 기존에는 해상도가 낮은 작은 크기의 짧은 동영상 위주였다면, 요즘에는 풀스크린의 전체 스토리를 보여주는 동영상이 많아지고 있다. 동영상의 해상도도 좋아져 영화나 TV에서만 느낄 수 있었던 경험을 온라인에서도 사용자에게 제공하고 있다.

7. Illustrations and Sketches

일러스트레이션과 스케치는 웹사이트에 신선하고 재미있는 느낌을 줄 수 있다. 일러스트레이션은 어린이를 위한 사이트 외에도 거의 모든 종류의 사이트에 사용되고 있으며, 웹사이트의 아이콘이나 UI 요소의 작은 부분에서부터 사용되기 시작했다. 일러스트레이션이 사용되면 웹사이트가 좀 더 개인적으로 느껴지도록 해 주면서 사용자와 사이트 사이에 연결고리를 만들어 줄 수 있다.

8. Even more beautiful typography

다른 트렌디한 요소들과 함께 크고 굵은 타이포가 잘 어울리기 때문에 타이포그래피를 활용하는 트렌드는 앞으로도 계속될 것 같다. 구글 폰트나 어도비 타입킷과 같은 웹 타입 툴이 주로 사용되고 있다. 타이포그래피는 다른 요소들에 더 많은 공간을 내어주면서도 뛰어난 가독성으로 메시지를 확실히 전달해준다. 가독성 있는 폰트와 재미있고 신선한 폰트를 함께 쓰는 것도 좋은 방법이다.

9. Bolder, Brighter Color

강하고 밝은 색상을 사용하는 것은 메터리얼 디자인에서 시작되어 전반적인 트렌드가 되고 있다.

10. Websites with Slides

슬라이드 형식으로 전체 화면을 보여주는 웹사이트. 클릭, 스크롤 또는 타이밍으로 화면 전환이 된다.

Rich Animations

애니메이션은 사이트의 스토리텔링을 효과적으로 전달해주고, 사용자 경험을 인터렉티브하고 즐겁게 해주기 위해 점점 많이 사용되고 있다. 애니메이션은 사이트의 스토리나 개성을 표현해 줄 수 있는 방향으로 적용되어야 한다. 애니메이션의 종류는 아래 두 가지로 나눌 수 있다.

1. Large scale animations
시차를 둔 스크롤링이나 팝업 알림과 같이 사용자와 인터렉션 하며 큰 임팩트를 주는 애니메이션이다.

2. Small scale animations
로딩 애니메이션이나 hover와 같이 사용자의 인풋을 필요로 하지 않는 작은 애니메이션이다.

1.Scrolling

시차를 둔 스크롤을 통해 사용자와 인터렉션 하며 스토리텔링을 효과적으로 전달한다.

2. Backgroundanimations / Videos

적절하게 적용된 배경 애니메이션은 사이트를 훨씬 더 주목할 수 있게 만들어 주지만, 과하게 사용되면 사용자의 시선을 어지럽힐 수도 있다. 분리된 섹션에만 적용하거나, 이미지 전체를 살짝 움직이는 정도가 좋다.

3. Loading animations

웹에서 사용자가 지루한 경험을 해야 할 경우 재미있고 기분 좋게 해주는 역할을 한다. 단순하게 만들고 사운드를 넣지 말아라. 사이트의 컬러 팔레트를 반영하는 등의 방법으로 사이트의 개성을 느끼게 해주는 것이 좋다.

4. Hover animations

Hover 효과는 사용자가 컨텐츠 위로 마우스를 올렸을 경우 매우 직관적인 느낌을 제공해 준다. 웹사이트의 어떤 요소에 대한 기능을 모르는 사용자는 시각적인 피드백을 받기 위해 hover를 하는 경향이 있다.

5. Tiny Animations

가벼운 애니메이션 역시 메터리얼 디자인 트렌드에 따라 널리 적용되고 있다. 애니메이션이 적용된 인터페이스는 사용자가 로딩을 기다리는 동안 작은 재미나 즐거움을 줄 수 있다. 애니메이션을 적용할 때는 왜 애니메이션 효과를 적용하며, 사용자에게 무엇을 기대하도록 해 줄 것인지 목적을 분명히 해야 한다.

6. Micro Interactions

요즘은 대부분의 웹이나 앱에서 마이크로 인터렉션을 볼 수 있다. 마이크로 인터렉션은 다음과 같은 기능을 한다.
1. 현재 상태나 피드백을 전달한다.
2. 액션에 대한 결과를 보여준다.
3. 사용자의 조작을 돕는다.

마이크로 인터렉션은 앱의 매우 중요한 부분이며 과도하지 않고 가볍고 단순하게 보여야 한다. 디테일에 신경 쓰고, 인간적으로 만들어야 기계적인 느낌이 아닌 소통을 하는 느낌을 줄 수 있다. 이러한 인터렉션이 사용자에게 더욱 인간 중심적인 디자인을 경험할 수 있도록 해준다.

Material Design

Flat 디자인을 대체할 수 있는 디자인으로써 메터리얼 디자인이 등장했다. 메터리얼 디자인은 그림자를 사용하고, 사용자에게 더욱 실감 나게 느껴지도록 움직임과 깊이에 대한 콘셉트를 적용하였다.
메터리얼 디자인의 목적은 UX에 기반한 깨끗하고 모던한 디자인을 만드는 것이다. 구글의 디자인이 많이 폄하되고 있긴 하지만, 현재 메터리얼 디자인은 디자인 트렌드를 주도해 나가고 있다. 미니멀한 룩과 함께 메터리얼 디자인은 Flat 디자인과 매우 유사하다. 그러나 메터리얼 디자인은 깊이와 그림자를 적용하여 순수한 Flat 디자인에 비해 깊이감을 제공해주고 있다.

Flat Design

Flat 디자인은 미니멀리즘, 메터리얼 디자인 등과 같이 양립하고 있으며, 앞으로도 계속 이어질 것이다.
Flat 디자인은 다음과 같은 방향으로 진화할 것으로 보인다.

1.Long shadows : Flat 디자인에 깊이감을 더해준다.
2.Vibrant color schemes : 널리 쓰이는 UI Framework나 템플릿들에 매우 선명한 색상들이 보이고 있다.
3.Simple typography : 단순한 폰트는 텍스트를 읽기 쉽게 해 준다.
4.Ghost Buttons : UX를 방해하지 않고 기능을 수행하며, 보통 아웃라인 형태의 버튼으로 보여준다
5.Minimalism : 요소의 개수를 최소화하여 신선하고 깔끔한 UI를 보여준다.