2015년 주목받는 웹디자인 트렌드 10가지

웹디자인 산업은 꾸준히 발전하고 있습니다. 그리고 해가 지날수록 어떤 큰 웹의 흐름이 있음을 느낄 수 있는데요. 다가오는 2015년도 역시 다르지 않습니다. Design Bolts에서 소개하는 올해 주목할만한 다양한 웹디자인 트렌드를 만나보겠습니다.

(원문 : 10 Of The Most Anticipated Web Design Trends To Look For in 2015)

1. 카드 디자인 패턴

모바일 웹디자인에서 카드 디자인은 매우 유용하고 실용적인 디자인 패턴입니다. 실제로 모바일 기기를 위한 사이트를 만들 때 카드 디자인이 많이 사용됩니다. 카드는 서로 연관된 내용으로 연결된 칼럼을 쉽게 정리할 수 있도록 도와줍니다. 

카드 디자인은 사용자 친화적 디자인의 좋은 예입니다. 사용자로 하여금 실제 본인이 좋아하는 정보를 고를 수 있게 하고, 디자이너들이 선택하도록 의도한 것들과 구분할 수 있게 합니다. 최근 트위터는 카드 디자인 패턴을 전면적으로 도입했습니다. 그리고 사용자들이 다양한 미디어(사진, 동영상)를 올릴 수 있는 카드를 제공하고, 결과적으로 더 많은 트래픽이 발생하도록 유도했습니다. 새해에는 다양한 곳에 카드 디자인을 사용해볼 수 있지 않을까요?

Twitter의 카드 디자인 패턴

2. 머티리얼 디자인

전에도 소개한 바 있는 머티리얼 디자인입니다. 2014년 구글은 머티리얼 디자인이라는 새로운 시각 언어를 공개합니다. 새로운 안드로이드에 들어가는 디자인인데요. 이는 구글 전체의 새로운 디자인 방향이라고 합니다. 그러나 머티리얼 디자인은 그저 하나의 주목할만한 유행으로만 여겨져 왔습니다. 실제로 많은 사람이 이미 이를 사용하고 있는데도 말이죠. 머티리얼 디자인은 그저 단순한 효과나 그라데이션, 레이어링이 포함된 ‘‘플랫한’ 디자인이 아닙니다. 실제로는 머티리얼 디자인의 성장에 힘입어 카드 디자인 패턴이 함께 발전할 수 있었습니다. 

Google의 Material Design 

3. 고스트 버튼

웹서핑 중에 사각형으로 된 투명 버튼을 본 적이 있을 겁니다. 이런 버튼을 “고스트 버튼”이라고 합니다. 또한, 고스트 버튼들은 색상이 있는 버튼에 비해 조금 더 큰 것을 눈치채셨을 겁니다. 보통 중요하고 큰 영역을 차지하고 있는데, 웹사이트의 랜딩 페이지에 쓰기 적당하며, 사용자의 시선을 사로잡기 위해 큰 사진 배경과 함께 쓰일 때 좋습니다. 고스트 버튼은 사용자들에게 어떤 행동을 유발하는데요. 새해에는 고스트 버튼을 자주 볼 수 있을 겁니다. 

4. SVG 사용

반응형웹은 단순히 작은 모바일 화면에 맞춰 블럭을 재배치하는 것이 아닙니다. 이미지는 화면 크기에 따라 최적화되도록 만들어야 합니다. SVG(Scable Vector Graphics)가 화면 크기에 따라 변화되는 이미지를 만드는 해결책이 될 수 있습니다. 아주 작은 스마트폰부터 고화질의 모니터까지 말이죠. SVG는 벡터이므로 픽셀 단위를 사용하지 않습니다. 따라서 많은 디자이너들이 깔끔한 그래픽을 만들기 위해 사용하고 있습니다. 

5. 클릭보다 스크롤

아마도 당신은 웹서핑을 할 때 ‘클릭’보다는 ‘스크롤’을 사용하는 것을 발견했을지 모릅니다. 예를 들어 애플(Apple)과 같은 브랜드에서는 클릭보다는 스크롤을 이용하는 패럴랙스 스크롤(시차 스크롤)이 적용된 상품 페이지를 만들곤 합니다. 어떤 온라인 설문에 의하면, 패럴랙스 스크롤을 적용하면 사용자의 웹사의트 참여율이 70%까지 올라간다고 합니다.  클릭을 이용한 탐색에 비해 스크롤을 이용한 탐색은 여러가지 장점이 있습니다. 우선 웹사이트를 빠르게 로딩해줍니다. 무엇보다도 계속해서 페이지를 전환할 필요 없이 한 페이지 안에서 손쉬운 정보 탐색을 가능하게 합니다. 2015년에는 패럴랙스 스크롤을 적용한 페이지와  네비게이션을 더 많이 볼 수 있을 겁니다. 

6. 반응형웹디자인의 진화

모바일 웹을 지배할 것으로 예측됩니다. 데스크탑 PC보다 모바일 기기를 이용해 인터넷을 사용하는 사용자는 더욱 늘어나고, 당연히 모두들 모바일 친화적인 웹사이트를 만들 것입니다. 어디든 반응하도록 디자인된 사이트는 스마트폰이든, 태블릿이든, PC든 일관될 사용자 경험을 줍니다. 스마트 TV나 스마트워치같은 새로운 기술이 소개될 때에도 마찬가지죠. 미래에는  반응형웹디자인이 가져다 줄 발전을 더욱 기대할 수 있을 것입니다. 

7. 더 나은 타이포그래피

Arial이나 Time new roman이 웹을 지배하는 시대는 갔습니다(Arial과 Times new romans은 윈도우의 기본 영문 글꼴이죠). 실제로 지난 몇 년 간 높은 품질을 가지고, 창의적이며 적당한 가격이 책정된 웹폰트의 발전을 보았습니다. 결과적으로 웹에서의 디자인은 더 나은 타이포그래피를 주목하고 있습니다. 2015년에는 웹폰트의 창의적인 접근을 볼 수 있을 겁니다. 게다가 작은 화면을 가진 기기들의 사용량 증가와 미니멀한 디자인이 유행함에 따라 확실히 타이포그래피는 더욱 좋아질 것입니다. 

8. UI 애니메이션

올 한 해, “동영상 배경”과 심플한 아이콘 애니메이션의 빠른 성장을 보았습니다. 무엇보다 플래시의 시대는 갔습니다. 따라서 우리는 CSS 애니메이션이 데스크탑과 모바일 인터페이스에 있어 사용자 친화를 위한 중요한 지점이 되고 있음을 주목해야 합니다. 

9. 동영상 배경

2014년에 우리는 큰 크기의 고화질 사진을 활용한 웹사이트를 많이 보았습니다. 다가오는 해에는 큰 크기의 동영상 배경을 보실 수 있을 겁니다. 점점 빨라지는 인터넷 속도에 힘입어 동영상을 제공함으로써 훌륭한 사용자 경험을 전달할 수 있게 되었습니다. 웹사이트에 동영상을 넣으면 방문자의 웹 경험을 향상시키는 데 도움이 되고, 짧은 시간에 메세지를 전달 할 수 있습니다. 

10. 세밀한 인터렉션 (Micro Interactions)

모든 상품은 핵심과 디테일로 이루어집니다. 핵심은 사용자로 하여금 상품을 주목하게끔 만들고 디테일은 그들은 붙잡는 역할을 합니다. 그리고 세밀한 인터렉션이 바로 디테일이죠. 예를 들어 어떤 앱을 평가하거나 비밀번호를 변경하거나 하는 행동에서 우리는 세밀한 인터렉션을 만나게 되는데요. 이는 앱과 웹사이트의 한 부분이며, 사용자가 버튼이나 아이콘을 클릭할 때 실행됩니다. 이러한 인터렉션으로 사용자를 붙잡을 수 있습니다. 불행하게도, 세밀한 인터렉션들은 주목을 받지 못했습니다. 그러나 무시할 수는 없는 존재입니다. 특히 사용자 경험을 향상시키려면 반드시 이를 눈여겨 보아야 합니다. 새해에는 이 트렌드가 널리 퍼질 것입니다. 

pull to refresh

마무리

2014년을 포함한 매해 우리는 크고 작은 웹디자인 트렌드들을 접합니다. 어떤 것들은 사용자 경험을 향상시키는데 중요한 역할을 하지만 어떤 것들은 짧은 유행으로 사라지기도 합니다. 2015년에 관심 가질만한 트렌드 10가지를 함께 살펴보았습니다. 반드시 따라야 할 정답도 아니고, 그 효용이 측정된 것도 아닙지만, 급변하는 웹디자인 시장에서 이런 트렌드에 관심을 가져볼만 합니다. 

by 북극곰 발자국

참고

- 원문 : 10 Of The Most Anticipated Web Design Trends To Look For in 2015

- Micro interactions

- Ghost Buttons

- Google Material design