반응형 웹사이트 만들기 (플랫 디자인&카드 UI - 0)

최근 몇 년 사이 가장 두드러지는 웹 디자인 경향 중 하나인 플랫 디자인(flat design)은 어느 날 갑자기 생겨난 것이 아닙니다. 과거에 유행했던 웹 디자인 기법들에서 발견한 단점을 극복하고, 새로 생겨난 환경 요인들을 받아들여서 새로운 트렌드로 떠오른 디자인 기법이죠.

플랫 디자인이란?

플랫 디자인은 플랫(flat)이라는 명칭에서 느낄 수 있듯 '평평' 하고 '납작'한 디자인을 말합니다. '납작하다'는 것은 디자인에서 깊이(depth)를 제거해 입체감을 없앴다는 의미인데요. 여기에서 말한느 깊이란 그림자와 경사, 그러데이션 등 웹 요소을 입체적으로 보이기 위해 사용하는 여러 가지 추가 효과를 통틀어 말합니다.

즉, 플랫 디자인이란 웹 요소에서 입체감을 주는 효과들을 제거하고 단순하게 표현하는 기법을 말하는 것으로, 웹 사이트뿐만 아니라 모바일 앱이나 프로그램 UI에도 사용되고 있습니다.

마이크로스프트사 윈도우 8의 시작 화면에 적용된 플랫 디자인

아래 사이트는 KT&G 메인 사이트로, 기본 메뉴들을 정사각형으로 구성하여 클릭하거나 탭하기 쉽게 만들었습니다. 나머지 여백은 군더더기 없이 단순하게 되어 있으며, 각 메뉴들은 그림자 효과도, 그라데이션도 전혀 없이 표현되어 있습니다. 

플랫 디자인을 사용한 해외 사이트

Flat UI Design(http://fltdsgn.com/) 사이트는 플랫 디자인을 사용한 해외 사이트들을 모아놓은 곳입니다. 플랫 디자인에 대한 감각을 키울 수 있습니다.

플랫 디자인의 기본

플랫 디자인은 복잡한 요소들을 빼고 중요한 것만 남기기 때문에 콘텐츠에 집중할 수 있는 장점이 있습니다.

1. 사용성을 위한 단순함

 - 플랫 디자인에서 가장 중요하게 생각하는 것은 '직관성' 입니다. 버튼이나 아이콘, 내비게이션 등 여러 요소들을 디자인할 때 디자인적인 부연 설명을 하지 않아도 사용자가 직관적으로 이해해서 클릭하거나 탭할 수 있도록 유도하는 것을 우선으로 하는 것이죠.

플랫 디자인 형태의 IOS 아이콘

2. 색상의 활용

- 플랫 디자인에서 색상은 중요한 역할을 합니다. 단순한 도형을 사용하는 대신 색상은 밝고 화려하게 합니다. 일반적으로 플랫 디자인의 웹 사이트는 6~8가지 색상을 메인 색상으로 사용합니다.

플랫 디자인을 하려고 하는데, 메인 색깔을 고르기 어렵다면 Flat UI Colors 사이트(http://flatuicolors.com)를 참고하면 좋습니다. 화면 상단의 'CHOOSE FORMAT' 목록에서 원하는 색상 포맷을 선택한 후 색상 이름을 클릭하면 색상값을 복사할 수 있습니다.

타이포그래피

플랫 디자인에서는 디자인을 최대한 간결하게 표현하고 글자를 통해 의미를 전달합니다. 그래서 글자를 이용한 디자인인 타이포 그래피도 중요한 역활을 하게 됩니다.

플랫 디자인이 밋밋하다면?

플랫 디자인 사이트는 평면적이고 단순한 디자인을 사용하기 때문에 자칫하면 밋밋하고 재미없는 사이트가 될 수 있습니다. 그래서 최근에서는 플랫 디자인 사이트에 트랜지션(장면전환)효과나 패러랙스 스크롤링(parallax scrolling) 같은 효과를 넣어 동적인 느낌을 추가하기도 합니다.

https://hell-o-baby.com/promo. 패럴랙스 스크롤링 효과를 넣어 만든 사이트입니다.

고스트 버튼

최근 웹 디자인 트렌드를 이야기할 때 빠지지 않는 것이 '고스트 버튼(Ghost Button)'입니다. 고스트 버튼은 테두리나 배경이 투명하고 희미해서 문서의 배경이 그대로 드러납니다. 애플은 iOS 7의 UI를 플랫 디자인으로 바꾸면서 버튼 디자인도 고스트 버튼으로 바꾸었습니다. 고스트 버튼은 풀 스크린 배경이 적용된 사이트에서 사용했을 때 더욱 멋있어 보입니다.

장점과 단점

고스트 버튼은 배경 이미지가 투명하게 드러나 깨긋하고 깔금해 보이는 장점이 있습니다. 투명해도 제대로 만들면 사용자가 클릭할 수 있도록 정확하게 유도할 수 있지요. 

고스트 버튼의 단점음 배경 이미지를 잘못 선정할 경우 버튼이 제대로 보이지 않을 수 있다는 점입니다. 또한 웹에 익숙하지 않은 사용자들에게는 혼란스러울 수 있습니다.

카드 UI

카드 UI(card-based UI)는 담고 있는 정보의 양에 따라 자유롭게 크기가 조절되는 카드 형태로, 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식입니다. 보통 한 화면에 여러 개의 카드가 표시되기 때문에 카트에 테두리를 둘러 콘텐츠를 감싸거나 색상을 달리해서 주변에 있는 다른 카드들과 구별합니다.

카드 UI의 장점과 단점

박스별로 콘텐츠가 분리되어 있기 때문에 텍스트가 죽 나열되어 있는 사이트보다 훨씬 많은 양의 정보를 한눈에 파악하기 쉽습니다. 그래서 정보 중심의 사이트를 만들 때 좋습니다.

또한 화면 크기에 따라 표현 방법도 다양하게 바꿀 수 있습니다. 모바일 화면에서 카드를 세로로 쌓았다가 데스크톱 pc나 태블릿처럼 넓은 화면에서는 카드를 90도로 회전시켜서 다시 가로로 배치할 수도 있지요.

일반적인 웹사이트는 아래쪽 내용을 보기 위해 계속 스크롤을 내려야 하는 불편함이 있습니다. 하지만 카드 UI를 사용하면 콘텐츠를 카드 안에 넣고 적당히 접어서 표현할 수 있기 때문에 불필요한 스크롤을 줄일 수 있습니다.

단, 카드 UI도 단점이 있습니다. 우선 카드 UI는 크게 변화를 줄 수 없기 때문에 사용자 입장에서는 계속 비슷한 레이아웃의 사이트를 보게 됩니다. 게다가 내용이 꽤 많은 카드들을 2열, 혹은 3열로 배치할 경우 한번에 훑어보기가 쉽지 않습니다.

카드 UI는 여러 콘텐츠를 목록처럼 나열하는 페이지에 적합한 형태입니다. 목록으로 나열하는 대신 목록의 각 항목을 카드로 만드는 것이죠. 갤러리 사이트나 포트폴리오 사이트에는 카드 UI가 적합하지만 카드 안에 담아야 할 내용이 많거나 콘텐츠를 비교해 봐야 한다면 카드 UI가 적합하지 않습니다.

카드 UI를 구현하기 위한 기술

카드 UI는 화면의 크기가 달라질 때마다 CSS를 사용해 카드의 크기나 위치 등을 지정하기 때문에 직접 CSS를 코딩해서 만들 수 있습니다. 만약 CSS에 자신이 없다면 이미 나와 있는 jQuery 플러그인을 이용해 카드 UI를 만들 수도 있습니다.