웹디자인 산업은 꾸준히 발전하고 있습니다. 그리고 해가 지날수록 어떤 큰 웹의 흐름이 있음을 느낄 수 있는데요. 다가오는 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 



Posted by slowalk



반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다.


디자이너 산디스 씨(Sandijs Ruluks)블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요.

 

반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요. 우리는 다양한 스크린 크기에 맞춰 유동적으로 레이아웃을 만들 수 있는 반응형 웹디자인을 정확하게 알 필요가 있습니다.


1. 반응형 웹디자인 vs 적응형 웹디자인 (Responsive vs Adaptive web design)

비슷한 말이지만 같지 않습니다. 적응형 웹디자인이라는 단어는 생소할 수도 있는데요. 반응형 웹디자인은 모든 스크린 크기 맞춰 유동적으로 작동합니다. 하지만 이 블로그에서 말하는 적응형 웹디자인은 아래 gif과 같이 특정 크기에서만 반응하는 방식입니다. 더 좋고, 안 좋은 방식은 없으며, 콘텐츠에 맞춰 방향을 정하시면 됩니다.




2. 플로우 (Flow)

스크린이 작아졌을 때, 콘텐츠들은 수직 공간을 더 차지합니다. 그리고 그것 아래 요소들은 아래 첫 번째 gif처럼 밀려나게 되죠. 그것을 플로우(Flow)라고 합니다.




3. 상대적인 요소들 (Relative units)

사용자는 다양한 사이즈의 기기를 쓰기때문에, 유연하고 어디서나 작동하는 유연한 레이아웃이 필요합니다. 예를 들어 아래의 gif처럼 50% 단위를 쓰면 데스크톱은 물론이고 모바일에서도 50%의 크기를 유지하겠죠. 저는 개인적으로 반응형 웹사이트를 만드는 데 핵심이라고 생각하는 부분입니다.

 



4. 분기점(Breakpoints)

분기점을 이용하면 특정 크기에 맞는 코딩으로 바꿀 수 있습니다. 예를 들어 데스크톱에서는 3단의 레이아웃을 쓰고 싶은데, 모바일에서 3단을 유지하면 너무 작게 보이는 경우가 있습니다. 이럴 때 분기점을 이용해, 특정 넓이 이하에서는 3단을 1단으로 바꿀 수 있습니다.




디자이너분들이 이걸 잘 사용한다면 모바일웹에서도 본인이 원하는 디자인으로 맞출 수 있습니다. 하지만 레이아웃을 바꿔서 다른 요소들에 영향을 주는지 주의하세요. 웹사이트를 순식간에 망가트릴 수 있습니다.

 


5. 최댓값과 최솟값 (Max and Min values)

가끔 모바일 웹사이트를 열었는데 이미지가 화면에 꽉 차면서 깨지는 경우가 있습니다. 그것은 이미지가 브라우저 넓이보다 작은 데 억지로 늘려놓았기 때문이죠. 이미지 넓이에 최댓값을 설정해준다면 브라우저 크기가 이미지를 크기를 훨씬 넘어가도 더 이상 커지거나 깨지지도 않을 것입니다.




6. 그룹 지은 요소들 (Nested objects)

요소들이 많아 통제하기 힘들 때, 그 요소들을 그룹으로 만들어 한꺼번에 통제할 수 있습니다. 이 방식은 로고나 버튼 같은 크기의 변경이 필요없는 요소들에 유용합니다.




7. 모바일 혹은 데스크톱 우선 작업 (Mobile or Desktop first)

모바일에서 데스크톱으로 프로젝트가 반응형 작업을 할 때와 데스크톱에서 모바일로 진행될 때 기술적으로 큰 차이는 없습니다. 하지만 모바일에서 먼저 시작할 때 제한이 적고, 콘텐츠 배치를 결정할 때 수월하게 할 수 있습니다. 그래도 프로젝트별로 다를 수 있으니 프로젝트에 맞춰서 해보시길 권합니다.  




8. 웹폰트와 시스템 폰트 (Webfonts vs System fonts)

반응형 웹디자인에서 유동적인 레이아웃을 위해 이미지보다 폰트를 많이 쓰는데요. 폰트는 접속 시 내려받아 설치하는 웹폰트와 사용자 기기에 원래 설치된 시스템폰트가 있습니다. 웹폰트를 사용하면 웹사이트를 예쁘게 만들 수 있는 것은 사실입니다. 하지만 웹폰트를 다양하게 쓰는 것은 그만큼 페이지를 느리게 할 수 있습니다. 개인적으로 제목이나 디스플레이를 위한 폰트는 웹폰트로 하고 본문은 시스템폰트를 사용하는 것을 제안합니다.




9. 비트맵 방식과 벡터 방식 (Bitmap images vs Vectors)

여러분이 만든 아이콘이 스큐어모픽 스타일처럼 화려하고 디테일하다면 비트맵 방식(jpg, png, gif등등)을 사용하는 것이 맞습니다. 하지만 이런 스타일이 아니라면 벡터방식(svg)을 써보세요. 해상도가 높은 기기에서도 선명하게 보일 것입니다. (예시)



Svg는 가볍고 선명하지만 구형 브라우저에서 지원하지 않아 분기해서 써야 하는 불편함이 있습니다. 또한 굴곡이 많다면 비트맵보다 무거울 수도 있으니 주의해서 써주세요.

 


저는 퍼블리셔로 일하면서도 반응형 웹디자인의 개념만 대충 알고 있었습니다. 하지만 클라이언트와 미팅 중에 반응형 웹디자인에 대해 설명해야 되는 상황이 있었는데요. 저도 모르게 전문용어를 남발해서 클라이언트를 난감하게 만들었습니다.

전문성은 자신이 가진 지식이나 업무능력이 전부가 아니라고 생각합니다. 클라이언트 혹은 사용자들에게 이런 개념을 잘 전달하는 소통능력도 중요하지 않을까요? :)



by 숭이발자국


출처: FroontBlog





Posted by slowalk