1. 오늘의 아티클
UI 디자인 완성도 올리기, 레이아웃 편 (1)
아티클 원문
2. 아티클 요약
구글 머티리얼 디자인의 지속적인 업데이트와 보완점을 논하고 소통하고자 하는 목적으로 만들어진 사이트가 바로 머티리얼 디자인 블로그 이다. 오늘 요약할 아티클은 블로그의 내용보다 레이아웃에 대하여 설명을 한다.
이 스크린샷 페이지의 레이아웃을 보면 왼쪽 부분의 x좌표(가로 시작점)가 다르다. 2개의 카드 구성요소를 한 묶음으로 정하고. 시작점을 다르게 교차한다. 이러한 레이아웃은 조형요소중 "리듬"에 해당하며, 좌우를 계속 교차시켜 "균형" 또한 적용이 되어있다. 좌우 마진이 동일한 상태에서 컬럼의 커터값(구성요소와 구성요소의 사이 간격)과 동일하게 왼쪽에 여백을 주어 리듬감과 균형감을 준 레이아웃이다.
레드와 블루컬러의 가로값은 같다.
그렇다면 왜? "리듬" 과 "균형" 을 레이아웃에 적용을 하였을까?
리듬
리듬을 적용하는 이유는 바로 생동감 때문이다. 디자인에 생기를 불어넣고 경쾌한 느낌을 전달해 주기 때문이다. 이 블로그는 창작자들이 거부감 없고 자유롭고 친근감있게 다가갈 수 있도록 리듬을 부여해 주었다.
균형
리듬감에 균형이 없다면 매우 불안정하게 느껴진다. 그렇기 때문에 리듬과 균형은 세트 아이템 같은 관계라고 정의를 내릴 수 있다.
균형을 맞추기 위해서는 반복이 필요하다. 반복을 통해서 균형을 만들 수 있다.
- 레이아웃에 리듬감을 줄 경우 생동감, 역동적인 느낌이 발생한다.
- 리듬은 유기적인 느낌을 주기 때문에 컨텐츠 접근에 대한 부담감을 줄여준다.
- UI 디자인에서 리듬감은 반복을 통한 균형이 필수이다. 확장성 때문.
3. 인사이트
생동감 있는 디자인은 사람을 끌어 당기는 매력이 있지만 리듬을 주기위해서 '균형'이 필요하단걸 이 아티클을 통해 알게 되었다. 불규칙적인 배치에서도 균형을 줘야지 생동감이 있어보인다는것도 알게 되었다. 아티클 요약을 통해서 리듬,균형,반복 이라는 조형요소를 많이 듣고 평소에도 사용하는 말이라 익히 알고 있지만 조형요소의 관계에 대해서 자세히 알 기회를 얻어서 좋은것 같다.
