'webdesign'에 해당되는 글 2건

  1. 2016.01.11 2016 꼭 알아야 할 웹 디자인 트렌드
  2. 2015.11.17 웹 그리드시스템을 위한 가이드 (1)

최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다.





1. UI 패턴의 증식

반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. 


Cypress North


그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다.

즉, 체크아웃은 체크아웃이고 그 자체의 역할을 합니다. 로그인 모델도 마찬가지입니다. 휠 UI를 재발견할 다른 이유는 없습니다. UI 패턴은 매끄러운 경험을 통해 사용자를 안내합니다. 


몇 가지 친숙한 패턴에 대해 살펴보겠습니다. 


햄버거 메뉴 

약간의 비판이 있긴 하지만, 햄버거 메뉴를 광범위하게 사용하면 사용자들이 기능을 쉽게 인식할 수 있다는 것이 분명합니다.


Silenza


계정 등록

사이트에 가입할 때 볼 수 있는 패턴입니다. 정보를 입력하는 부분이나 소셜 계정의 로그인을 이용하는 버튼이 있을 것입니다. 여러 단계로 나눠진 폼 마법사는 필수 항목을 확인하고 다음 단계로 넘어가기 때문에, 사용자가 가입 프로세스를 잘 통과할 수 있도록 만듭니다. 


Typeform


긴 스크롤

대부분의 사람들은 모바일 기기 덕분에 긴 스크롤에 익숙합니다. 이 기술은 스토리텔링을 통해 사용자들을 이끄는 사이트에 특히 잘 어울립니다. 또한 특정 섹션으로의 스크롤로 멀티 페이지 사이트를 흉내 낼 수 있습니다.


Vimeo


카드 레이아웃

핀터레스트가 사용한 카드 패턴은, 정보를 훑어보기에 적절한 크기로 보여주기 때문에 많이 사용됩니다. 각 카드는 하나의 통합된 개념을 나타냅니다. 직사각형 형태의 카드는 '콘텐츠 컨테이너'로서, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.


TheNextWeb


대표 이미지

시각은 가장 강력한 인간의 감각이기 때문에, 고화질의 대표 이미지는 사용자의 시선을 사로잡는 가장 빠른 방법 중 하나입니다. 대역폭과 데이터 압축 기술의 발전 덕분에 사용자들은 긴 로딩 시간에 고생하지 않아도 됩니다. 스크롤 상단에 대표 이미지가 있고, 그 아래 지그재그 섹션이나 카드를 나열하는 것이 일반적인 레이아웃입니다.


Maaemo



(광고)



2. 풍부한 애니메이션

애니메이션은 사이트의 스토리텔링, 더 많은 상호작용이나 즐거운 경험을 주기 위해 점점 더 많이 사용되고 있습니다. 

하지만 아무 곳에나 애니메이션을 넣을 수는 없습니다. 사이트의 이야기 요소와 특성에 애니메이션을 추가할지의 여부를 신중하게 고려해야 합니다. 애니메이션에 대해 다음의 두 가지 관점으로 생각해볼 수 있습니다.


- 대규모 애니메이션 : 페럴렉스 스크롤링이나 팝업 알림과 같은 효과를 포함하며, 사용자에게 좀 더 영향을 미칠 기본적인 인터렉션 도구로써 사용됩니다. 

- 작은 규모의 애니메이션 : 스피너, hover 도구 및 로딩 바를 포함하며, 사용자 입력이 필요하지 않습니다.


가장 인기 있는 애니메이션에 대해 알아보겠습니다.


로딩 애니메이션

로딩 애니메이션을 보면서 사용자는 즐겁거나 기쁨을 느낄 수도 있고 반대로 지루함을 느낄 수도 있습니다. 로딩 애니메이션은 주로 플랫한 디자인, 미니멀리즘, 포트폴리오나 싱글 페이지 사이트에 사용됩니다.


Slack via Lauren Tan


로딩 애니메이션은 되도록 단순하게 만들고 사운드를 넣지 마세요. 사이트의 특성이나 주요 컬러와도 잘 어울려야 합니다.


네비게이션과 메뉴

숨겨진 네비게이션 메뉴는 화면 공간을 절약할 수 있어서 더욱 더 인기가 많아지고 있습니다. 특정 버튼을 클릭하여 메뉴를 드러낼 때, 어색한 전환을 막기 위해 애니메이션을 사용합니다.


갤러리와 슬라이드쇼

갤러리 및 슬라이드 쇼는 사용자의 과부하 없이 여러 이미지를 보여줄 수 있는 효과적인 방법입니다. 사진 사이트, 제품 쇼케이스, 포트폴리오 사이트에 중요합니다.


Born Fighter


모션 애니메이션 

움직임은 사용자의 주의를 집중시키는 훌륭한 도구입니다. 움직임은 시각적 계층을 만드는데도 효과적이며, 입력 폼과 메뉴, 사용자의 행동을 유도하는 요소에 적용하면 사용자의 눈길을 끌 수 있습니다.


Bugaboo


스크롤

부드러운 스크롤에는 애니메이션이 필요합니다. 사용자의 스크롤 조작으로 애니메이션이 펼쳐지는 속도가 달라질 수 있습니다.


Squarespace


배경 애니메이션/비디오

단순한 애니메이션 배경은 사이트에 가시성을 더할 수 있지만, 산만할 수 있기 때문에 적당히 사용되어야 합니다. 개별 섹션이나 전체 이미지의 부드러운 움직임을 만드는 데에 사용하는 것이 중요합니다.


Dunckelfeld



3. 마이크로 인터렉션(Microinteractions)

휴대전화의 알림을 끄는 것에서부터 페이스북의 고양이 사진에 좋아요를 누르는 것까지, 마이크로 인터렉션은 우리 주변 곳곳에 있습니다. 


Slack


마이크로 인터렉션은 상태나 피드백을 전달하거나 행동의 결과를 보여주고 사용자가 무언가를 조작하는 데에 도움을 줍니다. 마이크로 인터렉션은 모든 어플리케이션에서 중요한 부분입니다.



4. 머터리얼 디자인(Material Design)

구글은 머터리얼 디자인이라는 새로운 스타일의 언어를 출시했습니다. 이는 더 현실적인 디자인을 위해 깊이와 움직임의 개념, 그림자 효과를 사용합니다.


Google Now


머터리얼 디자인의 목표는 UX 중심의 깔끔하고 현대적인 디자인을 만드는 것입니다. 미니멀한 모습에서 다른 트렌드인 플랫 디자인과 공통점이 많아보이지만, 머터리얼 디자인은 순수한 플랫 디자인보다 더 많은 깊이와 그림자를 사용합니다. 

지난 6월 구글은 웹사이트에 적합한 Material Design Lite를 발표했습니다. Lite는 vanilla CSS, HTML, JavaScript 를 사용하며, 웹 사이트에 머터리얼 디자인의 모습과 느낌을 간단하게 추가할 수 있습니다.



5. 반응형 디자인

최근 몇 년 동안 모바일 인터넷 사용의 증가로 반응형 웹 디자인은 여전히 인기를 끌고 있습니다.


UXPin


모든 기능을 갖춘 모바일 친화적인 사이트를 구축하는 것이 비교적 간단하고 저렴할 수 있습니다. 그러나 적절히 수행하지 못할 경우, 퍼포먼스와 관련하여 몇 가지 문제가 있을 수 있습니다. 최상의 반응형 퍼포먼스를 위해 Guy's Pod의 가이드를 참고해보세요.

반응형 디자인은 유용하지만, 좋은 UX를 제공하기 위해 속도를 개선하는 등의 노력과 고민이 필요합니다.



6. 플랫 디자인 (Flat Design)

플랫 디자인은 미니멀리즘, 반응형 웹 디자인, 머터리얼 디자인과 같은 다른 트렌드와 인기를 함께하고 있습니다.


Beoplay


앞으로 플랫 디자인에서는 다음과 같은 트렌드를 볼 수 있습니다.


- 긴 그림자 : 평면 디자인에 깊이를 더해 줄 것입니다.

- 생기가 넘치는 컬러 : 인기있는 UI 프레임워크와 템플릿은 더 생동감 있는 컬러를 사용하고 있습니다. 

- 간결한 타이포그라피 : 플랫 디자인에서 간결한 타입페이스는 텍스트의 가독성을 높여줄 것입니다.

- 고스트 버튼 : UX 측면에서 산만하지 않고, 사용자가 가리켰을 때 클릭할 수 있는 링크를 보여주어 기능을 수행할 수 있도록 합니다.  

- 미니멀리즘 : 신선하고 깔끔한 UI를 위해 요소의 수를 줄이는 시도가 보입니다.



지금까지 2016년의 웹 디자인 동향 6가지를 살펴보았습니다. 2015년과 크게 다른 흐름은 아니지만 그 안의 작은 요소들이 조금씩 변하고 있는 것 같습니다. ‘힙한’ 트렌드라고 무작정 따라하지 마세요. 사용자에게 최선이 무엇인지 먼저 생각해보는 것이 중요합니다.



출처 : AWWWARDSDESIGN.CCIT WORLD


by 비숑 발자국



(광고)


Posted by slowalk

흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다.


그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다.





1. 고려 사항

그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의 디자인과 배치에 도움을 주는 프레임 워크이지만, 모든 것에 두루 적용되지는 않습니다. 기본적으로 내용 구성에 있어서 풀어야 할 문제를 먼저 생각해야 합니다.  


기술적인 제약 및 지침

구글의 Material Design을 보면, 어플리케이션 디자인에서 8dp의 사각형 격자를 기준으로 하는 그리드 시스템을 사용하지만, 타입과 툴 바의 아이콘에는 4dp 사각형 격자 기준의 그리드를 적용합니다. 



웹에서는 그리드 규칙에 더 많은 와일드 카드가 있지만, 반응형 웹에서 그리드가 어떻게 반영되어야 할지도 고민해봐야 합니다.


비즈니스 제약

브랜딩은 주요한 제약 조건입니다. 그리드에 브랜드 자산을 맞춰보았을 때 규칙에 벗어나는 그리드를 만드는 것은 아무 소용이 없습니다. 대부분의 브랜드는 특정한 간격이나 사용 규칙이 있는 로고를 갖고 있는데, 이를 그리드의 유닛에 적용할 수 있습니다. 


콘텐츠 제약

그리드 작업에 앞서, 어떤 콘텐츠가 담기는지 고려해야 합니다. 그 내용이 기사인지, 쇼핑몰인지에 따라 그리드를 다르게 설계해야 합니다. 또한 고정된 광고 영역이 있는지, 요소들의 크기가 변경될 수 있는지 생각해봐야 합니다.

처음에는 이러한 제약 사항들이 귀찮을 수도 있지만, 이것으로 더 쉽게 그리드 시스템을 구축할 수 있습니다. 제약 사항이 곧 그리드의 기준이 될 수 있기 때문입니다. 



2. 그리드 용어

그리드는 칼럼, 베이스 라인처럼 간단하지 않습니다. 사실, 같은 주제를 다루는 많은 책에서 용어의 차이가 있지만, 전반적으로 동일한 것을 설명하고 있습니다.


유닛 (UNITS)

유닛은 페이지에서 가장 작은 수직적 구분으로, 대개 어떤 의미 있는 콘텐츠를 수용하기에는 작지만 그리드를 구축하기 위한 가장 기본적인 그리드입니다.




칼럼, 열 (COLUMNS)

칼럼은 그룹으로 묶인 유닛의 집합입니다. 예를 들어, 기본 12개 유닛의 그리드 시스템에서 6개 씩 2열로 묶거나 4개 씩 3열, 또는 2개 씩 6열로 묶어 나눌 수 있습니다. 칼럼의 크기가 작을수록 다양한 측정이 가능합니다.




영역 (REGIONS)

영역은 페이지 레이아웃의 기초를 형성하는 칼럼의 그룹입니다. 예를 들어, 8개의 칼럼으로 구분된 16 유닛 그리드 시스템은 6개의 칼럼과 2개의 칼럼, 두 영역으로 나눌 수 있습니다. 이렇게 하여 본문과 사이드 영역이 있는 기본적인 페이지 레이아웃을 구성할 수 있습니다.




베이스 라인 (BASELINE)

베이스 라인은 서체가 놓이는 수평선을 가리키는 타이포그래피 시스템입니다. 콘텐츠에 수직 방향의 리듬감을 주며, 그리드에 포함되는 유용한 도구입니다. 




필드 (FIELDS)

필드는 페이지를 수평으로 분할한 것입니다. 요소를 수직적으로 배치하고 섹션을 동일하게 분할하는 기준으로 베이스 라인 그리드를 사용합니다.




거터 (GUTTERS)

거터는 요소 사이의 빈 공간, 유닛과 칼럼, 영역 사이의 수직적 빈 공간, 필드 사이의 수평적 공간을 말합니다. 



3. 그리드를 그리는 방법

이 방법은 최종 개발 단계 보다, 포토샵/스케치에서 그리드를 만드는데 적합합니다. 

첫 번째로 제약 조건을 따져봅니다. 페이지 한 켠에 구글 애드센스의 큰 유닛(336px X 280px)이 있는 블로그의 그리드를 생성하는 예를 들어보겠습니다. 앞서 말한 바와 같이, 이 제약 조건은 그리드 시스템을 만드는데 좋은 출발점이 됩니다. 이 광고 유닛을 중심으로 그리드를 생성합니다. 

모바일보다도 오히려 최대 너비의 디바이스를 기준으로 두는 것이 좋습니다. 보통, 모바일에서는 하나의 컬럼에 콘텐츠를 쌓는 구조로 만들기 때문에, 보다 그리드를 고민해야하 하는 큰 디바이스에 콘텐츠를 배치하는 것이 좋습니다. 


이번 예에서는 사이트의 컨테이너 폭을 표준 모니터 크기(1280px * 1024px)에 적절하고 기수 4로 잘 분할할 수 있는 크기인 1200px로 가정해보겠습니다.

기수 4는 사이트에 사용되는 모든 계산에서 16px(4 * 4 = 16)의 표준 em 크기로 나눌 수 있어야 한다는 디자인 개념입니다. 예를 들면, 1em(16px)인 글꼴의 line height는 글꼴 크기의 150%인 24px(4*6=24)이어야 한다는 규칙이 있습니다.


1200은 기수 4로 아주 깔끔하게 나뉩니다 :  


1200/4 = 300, 1200/8 = 150, 1200/12 = 100, 1200/16 = 75 


유닛의 가로폭 계산을 위해 간단한 공식을 사용할 수 있습니다.


(전체 페이지 너비 / 유닛의 수) - 거터 폭 = 합

((합 * 유닛의 수) - 거터 폭) / 유닛의 수 = 유닛의 폭


8개의 유닛으로 나뉘고 16px의 거터로 구성된 전체 1200px 너비의 페이지를 예로 들면,  다음처럼 계산할 수 있습니다 : 


(1200 / 8) - 16 = 134


최종적으로 유닛의 폭을 구하려면 유닛의 수로 합계를 나눠야 합니다. 유닛의 폭은 132px인 것을 알 수 있습니다.


((134 * 8) - 16) / 8 = 132


이제 페이지에 고정된 제약 요건인 광고 유닛을 16px의 거터와 4개의 컬럼을 사용하는 가장 기본적인 그리드에 배치할 수 있습니다.



두 개의 칼럼 영역에 광고 배너가 자리잡았습니다.  그러나 두 개의 칼럼을 합친 영역 너비와 실제 광고 영역의 너비가 맞지 않아 여백이 많이 생기게 됩니다. 이 그리드를 8개의 칼럼, 12개의 칼럼으로 바꿔봅시다. 




12개로 변경한 결과, 유닛의 폭이 소수점으로 떨어집니다. 이럴 때는 거터를 16px에서 12px로 줄여 유닛의 가로폭을 정수로 얻을 수 있습니다. 

더 균형 있는 모습을 위해 유닛들을 크게 3개의 칼럼으로 나눠 칼럼 2개는 본문 영역으로, 나머지 칼럼은 aside로 사용할 수 있습니다. 


목표는, 가능한 가장 간단한 그리드(가장 적은 수의 유닛 / 칼럼 / 영역)를 사용하여 그리드를 만드는 것입니다. 우리는 16/20/24 등으로 유닛을 늘릴 수 있지만, 콘텐츠를 배치할 때 너무 많은 경우의 수를 주는 것이 오히려 함정이 될 수 도 있습니다. 디자인에서 말하는 less is more는 여기에서도 적용됩니다. 



4. 그리드 생성을 돕는 도구 

웹 페이지의 그리드 생성을 돕는 도구도 있습니다. 수식 계산이 필요 없이 간단하게 원하는 너비와 칼럼 수로 그리드를 만들어줍니다.



Grid.guide는 그리드 생성을 돕는 좋은 온라인 리소스입니다. 단순히 전체 폭과 열의 수를 입력하면 자동적으로 거터 너비 별로 그리드의 수치를 계산하여 보여줍니다. 





Guide Guide는 포토샵 익스텐션으로, 원하는 다양한 설정으로 포토샵에서 그리드를 쉽게 생성할 수 있습니다.


그리드를 생성하는 방식이 다소 복잡해 보일 수도 있지만, 충분히 고민해 볼 부분입니다. 디자인 초기 단계에서 그리드 시스템을 사용한다면, 보다 일관되고 정보 전달에 효과적인 레이아웃을 설계할 수 있으며, 웹 페이지 제작을 빠르고 쉽게 할 수 있습니다.



출처 : Tom Newton Blog


by 비숑 발자국

Posted by slowalk