웹디자인 기본(1) CSS색상표 및 기초

(1) CSS색상표 및 기본

기능에만 집중하다보면, 웹 디자인을 가볍게 여길 수 있다. 그러나 아무리 훌륭한 코드인들 결국 사용자가 느끼는 감각은 웹 디자인에 있다. 최소한 평균 이하가 되지 않도록 기본적인 색상 감각과 비율 그리고 폰트 정도는 프로그래머도 숙지할 필요가 있다.

__::색 감각

웹 디자인을 하려고 미대에 입학 서류를 낼 필요는 없다. flatuicolors.com과 같은 훌륭한 어시스턴트가 있기 때문이다. 플랫 디자인은 윈도우10에 사용된 디자인이다. 그림자나 3D효과같은 군더더기가 없이 아주 깔끔한 디자인을 제작할 때 FlatUI를 활용할 수 있다. flatuicolors에 접속하면, 어울리는 계열의 색상을 간단하게 copy할 수 있다. 

인접색, 보색 대비, 근접색, 연변 대비 등.... 색에 자신이 없을 경우에는 flatuicolors에서 추천한 색들을 섞어서 사용하면 최소한 '어유 촌스럽네~' 소리는 피할 수 있다.

__::구글 디자인

구글은 웹 세계의 신이다. 구글이 밀고 있는 material디자인은 깔끔한 웹 어플을 제작할 때 즐겨찾기를 해야하는 웹 디자인 방식이다. 머트리얼 디자인은 플랫 디자인과 '빛'에서 차이를 보인다. 플랫 디자인은 색의 깊이감에 있어 차이가 없다. 같은 색이 직선운동을 하는 느낌이다. 

 머트리얼 디자인은 이름 그대로 '재질'을 드러내는 효과를 준다. 재질을 만드는 방식은 간단하다. 플랫 디자인의 색에 '빛'을 쏘면, '재질'느낌이 만들어진다. 빛을 활용한 공간감을 드러내는 방식이 바로 구글의 디자인 철학이다. 머트리얼 디자인은 안드로이드 플랫폼에서 시작되었고, 구글 플러스나 구글의 웹 어플 디자인에 사용되고 있다. 

웹 어플리케이션을 만들 생각이라면 구글 머트리얼 디자인이 좋지 않을까.

머트리얼 디자인은 material.io에서 관련 프레임워크 명령어를 배울 수 있다. 

__::원페이지 디자인

원페이지 디자인은 2015년도 가장 Hot했던 웹 페이지 디자인이었다. 모바일로 접속하는 사람들이 늘어나면서, 홍보용 페이지를 하나의 페이지로 제작하는 추세가 이어졌다. 원페이지 방식은 대문 페이지에서 계속 들어가는 페이지 없이 스크롤 기능으로 전체를 살펴보는 방식이다. html5는, 'section'과 같은 테그들이 지원하면서, 프레임 워크를 사용하지 않고 충분히 원페이지를 디자인을 할 수 있다. 

원페이지 디자인에는 가장 유명한 제이쿼리 플러그인 'fullpage.js'가 있다.

하지만 대부분 소개 페이지가 원페이지 디자인으로 제작되면서, 식상한 느낌이 있는 디자인이라 생각한다. 트랜드를 따르는 건 결국 영원히 앞설 수 없음을 의미한다.

__::Grid 레이아웃

그리드 레이아웃은 pinterest 방식으로 불리며, 한때 광풍을 일으켰다. pinterest방식은, 메모지를 핀으로 고정시켜 벽에 붙여놓은 듯한 느낌을 자아냈다. 레이아웃 크기에 따라 카드의 행과 열이 크기에 맞춰 자동으로 달라졌고, SNS에 가장 잘 어울리는 디자인 방식으로 불렸다. 하지만 해당 레이아웃으로 뭔가 엄격한(?) 웹 어플을 제공하기에는 한계가 있다. 

Grid 레이아웃 중에서 Flex방식으로 UI를 제공하는 대표적인 플러그인으로는 'vGrid'가 있다. 아래의 url에 접속하면(클릭) vgrid로 제작할 수 있는 여러가지 UI예시자료를 볼 수 있다.

__::최적 웹 디자인

완벽한 GUI, 웹 디자인은 없다. 용도와 사용 환경에 최적화 된 디자인만이 있을 뿐이다. 따라서 트랜드를 쫓으려고 특정 디자인을 억지로 갖다 붙이다보면, 정체불명의 디자인이 탄생한다. 자신이 만든 서비스를 가장 잘 표현할 수 있는 디자인을 선택하고, 사용자가 쉽고 빠르게 콘텐츠를 이용할 수 있는 디자인이 최고의 웹 디자인이다. 

단, 어떠한 디자인을 사용자들이 선호하는지 정도는 알아 둘 필요가 있다. 아래 사이트를 접속하면, 웹 디자인을 볼 수 있는 안목을 키울 수 있다. 

1] DBCUT::최근 제작된 다양한 웹 디자인 정보 제공

2] awwwards::한해 최고의 웹 디자인을 분야별로 선정

3] koreawebdesign::국내의 최신 웹 디자인 트랜드를 소개