퀄리티를 끌어올리는 웹디자인 레이아웃 기본 원칙 3가지

퀄리티를 끌어올리는 웹디자인 레이아웃 기본 원칙 3가지

웹사이트의 이미지와 메시지를 제대로 전달하기 위해서는 레이아웃의 특징을 파악한 후 디자인하는 것이 웹디자인의 기본 원칙이며, 스마트폰, 태블릿 등 다양한 디스플레이 폭을 가진 기기에서 웹사이트를 볼 수 있는 기회도 많아지고 있다.

사용자가 조작하기 쉽고, 보기 편한 레이아웃을 만들기 위해서는 어떤 점에 유의해야 할까? 이번 글에서는 웹사이트를 보다 아름답고 매력적으로 보이게 만드는 레이아웃 디자인의 기본 원칙에 대해 알아보자.

웹디자인 일러스트 디자인 이미지

웹디자인 레이아웃의 기본 ‘근접(그룹화)’

레이아웃 디자인에서 ‘근접성’은 제목과 문장처럼 서로 연관성이 높은 요소들을 의식적으로 가깝게 배치하여 독자에게 관련성을 보여주는 기법이다.

근접에서 중요한 포인트는 웹사이트 방문자가 위화감을 느끼지 않는 거리에 배치하는 것이다. 웹사이트를 내려다봤을 때 관련 요소들이 한 덩어리로 인식될 수 있을 정도의 거리를 유지하는 것이 근접 배치의 요령이다.

이러한 레이아웃 디자인의 장점은 사용하는 색상과 디자인을 최소한으로 줄이면서도 정보를 그룹화하여 전달할 수 있다는 점이다.

또한, 근접 레이아웃은 문자 정보 뿐만 아니라, 이미지나 사진에까지도 적용이 가능하다. 어떤 사진과 관련성이 높은 문장을 연결함으로써 보다 선명하고 인상적인 정보 전달을 도모할 수 있다.

디자인의 통일감을 만드는 ‘정렬’과 ‘반복’

정보의 구조화와 통일성 연출은 웹사이트의 이미지를 보다 아름답게 표현하는 데 필수적인 요소다.

웹사이트에 담고자 하는 정보의 종류와 수가 많을 경우 레이아웃에 대한 고민이 생길 수 있는데, 웹사이트의 정보량이 많을 때 중요한 것이 바로 ‘정렬’과 ‘반복’ 이다.

정렬과 반복은 모두 웹디자인 레이아웃의 기본이라고 할 수 있는데, 정렬은 여러 요소를 상하좌우로 묶어 배치함으로써 정보의 통일감을 주는 역할을 한다. 요소 사이에 의도적으로 여백을 두어 근접한 경우와 마찬가지로 관련 정보들 간의 그룹화가 이루어진다. 시각적 효과 뿐만 아니라 가독성을 높이는 데에도 효과적인 기법이다.

반복은 웹사이트 내에서 정해진 디자인을 반복하여 웹사이트 내 정보에 일관성을 부여하는 기법이다.

동일한 패턴의 헤드라인이나 버튼, 아이콘 등을 반복적으로 넣음으로써 웹사이트의 개성과 이미지를 연출하고 고유의 통일감을 전달할 수 있다. 가시성과 식별성이 향상되기 때문에 사용성과도 연결되는 매우 중요한 기법이다.

유인성을 높이고 주의를 집중시키는 ‘콘트라스트(강약)’

레이아웃 디자인의 기본 원칙 중 마지막 단계는 ‘콘트라스트’ 기법이다. 콘트라스트(contrast)는 웹사이트 내 요소들 간의 차이를 강조하는 방법으로 웹디자인 레이아웃에 있어 활기를 불어넣는 수단으로 활용되고 있다.

근접, 정렬, 반복과 같은 배치나 여백의 방식과는 달리, 색상이나 다른 글꼴을 사용하여 요소의 대비를 구현한다.

강약을 조절하는 구체적인 방법으로는 색조나 명도 차이를 둔 컬러를 사용하거나, 크기의 크고 작음으로 동그라미, 삼각형, 사각형 등의 형태 차이로 식별성을 높이는 것도 대비의 한가지 방법에 포함된다.

‘타이포그래피(글자의 서체나 배치 등의 구성이나 표현)’에서는 제목과 본문의 글자 크기를 바꾸는 ‘점프율’이라는 기법이 있는데, 이 역시 콘트라스트의 일종으로 웹디자인에서 뿐만 아니라 DTP 등 다방면에서 활용되고 있다.

맺음말

웹사이트에서 레이아웃 디자인의 기본 원칙인 ‘근접’, ‘정렬’, ‘반복’, ‘대비’는 웹사이트에 개성을 부여하고 사용자에게 강한 인상을 남길 수 있는 효과적인 기법으로 디자인 영역에서 뿐만 아니라 모든 제작 업무에 폭넓게 활용할 수 있다.

기본이 되는 원칙을 준수하면 보다 세련되고 보다 정교하고 독창적인 나만의 웹사이트를 제작할 수 있다.