'패럴랙스'에 해당되는 글 2건

  1. 2015.01.13 2015년 주목받는 웹디자인 트렌드 10가지 (4)
  2. 2013.04.06 웹 인터랙션 인포그라피를 만나다



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

마우스 제스처나 휠 스크롤에 따라 반응하는 재밌는 웹사이트를 보신 적 있나요? 인포그래픽에 인터랙션을 더해 재밌게 만들어 놓은 웹사이트를 소개합니다.


1. 원 페이지 웹사이트


웹 인포그래픽을 세 가지 유형으로 나눠봤습니다. 그 중 첫 번째는 최근 유행하는 트렌드인 원 페이지 스타일입니다. 말 그대로 링크 이동 없이 사용자가 지금 보고 있는 하나의 페이지에서 모든 콘텐츠를 보여줍니다. 원 페이지 스타일의 웹사이트들을 모아 놓은 ONE PAGE LOVE(http://onepagelove.com/ )라는 사이트가 있을 정도인데요. 원 페이지 스타일은 정보를 한 눈에 보기 쉽게 정리해야 하는 인포그래픽에 적당합니다. 


ONE PAGE LOVE(http://onepagelove.com/ )


아래 웹사이트는 최근 오픈한 스티브잡스 추모 웹사이트 입니다. 하나의 페이지로 스티브잡스의 일대기에 대해 보여주고 있는데요. 상단의 고정된 메뉴를 클릭하면 웹사이트 자동으로 스크롤 되어 해당 콘텐츠로 이동하게 하는 대표적인 원 페이지 스타일 사례입니다.


스티브잡스 추모 웹사이트 (http://www.rememberum.com/steve-jobs-tribute/)


2. 패럴랙스 스크롤(parallax scroll)


두 번째 유형은 원 페이지 스타일에서 조금 진화한  패럴랙스 스크롤(parallax scroll) 유형입니다. 패럴랙스란 단어는 우리 말로 '시차'로 번역할 수 있는데요. 웹사이트를 스크롤 할 때, 배경이 시차를 두고 이동한다는 의미입니다. 아래 예시 웹사이트를 먼저 봐주세요. 


Vasona networks (http://vasonanetworks.com/)


Vasona networks를 보면 화면의 오브젝트와 배경이 스크롤 되는 속도가 약간 다르다는 걸 볼 수 있습니다. 이렇게 배경과 오브젝트가 시차(parallax)를 두고 움직인다고 해서 이러한 유형을 패럴랙스 스크롤이라고 부른답니다. 화면의 요소들이 시차를 두고 움직이면 더욱 입체감있고 생동감 넘치는 사용자 경험을 전해줄 수 있습니다.

3. 다양한 인터렉션

마지막으로 원 페이지와 패럴랙스 스크롤에 조금 더 세세한 인터랙션을 가미한 유형들을 볼 수 있습니다. The State of Financial & Economic Education(http://surveyofthestates.com/)이라는 웹사이트를 살펴보겠습니다. 

The State of Financial & Economic Education(http://surveyofthestates.com/)


The State of Financial & Economic Education는 교육자금이라는 다소 딱딱할 수 있는 주제를 재밌는 인터렉션을 넣어 재밌게 보여주고 있습니다. 화면을 스크롤하면 상단에 숫자들이 올라가거나 내려가고 말풍선이나 현재 상태를 보여주는 재밌는 애니메이션들이 나타납니다. 내용에 따라 고정되는 오브젝트도 있고 스크롤에 따라 흘러가는 오브젝트들도 있습니다. 필요에 따라 오브젝트들이 애니메이션(이동, 크기 변화)를 보여줍니다. 또한 스크롤 뿐 아니라 요소들을 클릭했을 때, 자세한 정보를 보여주거나 소셜미디어로 공유할 수 있습니다. 


4. 마치며


인포그래픽 내용을 웹으로 옮겨 화면 이동과 스크롤에 반응하는 웹사이트 사례를 살펴봤습니다. 이렇게 인터랙션이 더해진 웹 인포그래픽은 정적인 화면으로 보여주는 것보다 사용자들의 참여를 유도하고 집중하게 만들어 양질의 정보를 제공할 수 있습니다. 


이런 웹 인포그래픽, 인터랙션이 들어간 웹사이트는 마이크로 사이트로 기업의 애뉴얼리포트나 연혁, 캠페인을 소개하기에 적합합니다.


Code for America 의 annual report (http://annual.codeforamerica.org/)


Startups , this is how design works(http://startupsthisishowdesignworks.com/)




더 많은 웹 인포그래픽를 보고 싶으시면 아래 링크를 방문해 주세요.



by 북극곰 발자국

Posted by slowalk