Web Design

웹사이트의 레이아웃

by THEVOS posted Mar 14, 2019 Views 580 Likes 0 Replies 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form

웹사이트는 많은 정보를 담고 있습니다.

저마다 각양각색의 콘텐츠를 다양한 형태의 레이아웃으로 배치합니다.


레이아웃이란 디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일(출처 : 두산백과)이라고 합니다.


우리가 보는 여러 매체들은 이러한 법칙에 의거하여 다양한 형태의 레이아웃으로 디자인되어있습니다.


(c) Pinterest


(c) Pinterest

보통 책이나 신문과 같은 매체들의 레이아웃은 "Grid"라는 격자를 바탕으로 텍스트와 이미지 그밖에 여러 요소들을 배치하게 됩니다.



(c) Google

방대한 텍스트의 가독성과 여러 페이지에 일관된 형태를 부여하기 위해서 2단 3단 혹은 4단 등 다양한 단의 경우의 수를 적용합니다. 


아마도 이러한 것들이 편집디자인의 개념이라고 볼 수 있겠죠^^

편집이 잘되어있다는 말은 "가독성"과 "심미성"등이 적절히 적용되었다는 말과 같습니다.


그렇다면 웹사이트도 이런 편집의 개념이 적용될까요?


(c) Pinterest

그렇습니다. 웹디자인도 "그리드"와 "단", "여백"등 편집의 요소가 적용이 됩니다. 텍스트와 이미지 혹은 그밖에 여러 가지 요소를 보기 좋게 그리고 사용성에 맞게 배치하는 개념은 동일합니다. 

(c) Pinterest


그렇다면 일반적인 종이매체의 편집과 웹사이트의 편집은 무엇이 틀린가요?


(c) Pinterest

책이나 인쇄물은 인쇄할 대상에 맞는 크기로 격자를 만듭니다.

하지만 웹사이트는 "해상도(Resolution)"라는 개념이 적용되죠.


(c) Pinterest

보통 웹사이트의 그리드에서 단(Coulume)을 12개까지 만들면 PC부터 Mobile까지 다양한 해상도에 대응 할수 있는 레이아웃을 만들 수 있습니다.




일반적으로 책에서는 "목차"를 통해 원하는 곳을 갈 수 있습니다.

(c) Pinterest


웹사이트에서는 GNB메뉴를 통해 원하는 메뉴를 더욱더 빠르게 이동할 수 있습니다.

(c) Pinterest


또한 버튼을 통해 사용자가 원하는 기능을 실행시킬 수도 있습니다. 사용자와 어떠한 서비스를 연결해주는 매개체가 바로 UI인데 웹디자인에서는 이러한 UX/UI개념을 바탕으로 레이아웃을 고민하게 됩니다.

(c) www.dominos.co.kr



그리고 모션을 통해 단순한 콘텐츠를 좀 더 생동감 있게 전달하기도 합니다.


결론적으로 편집+웹사이트의 속성을 잘 이해하고 그것을 적절히 접목하면 보기도 좋고 사용성 좋은 웹디자인을 만들 수 있을 것입니다.


웹디자이너로서 편집과 새로운 레이아웃을 만드는 것이 취약하다고 느끼신다면, 이러한 디자인의 기본 속성인 "레이아웃"에 대한 이해가 부족해서 일수도 있습니다.


카드 디자인과 빅 비주얼의 조합이라는 하나의 트렌드가 비슷한 모습을 보일 수는 있지만, 좀 더 디자인의 기본적인 개념에 입각하여 작업한다면 안정적이고 경쟁력있는 디자인을 할 수 있습니다.



오브로
디자이너

에이전시 - 스타트업 - 증권사인하우스 디자이너로 근무하고 있습니다. 글이 한동안 올라오지 않은점 죄송합니다. 곧 새로운 글로 인사드리겠습니다.


[ 원문출처 ] https://brunch.co.kr/@5bro/66

Facebook [ko]댓글