웹사이트 구축 전 필독, '매력적인 레이아웃'의 비밀

웹사이트는 기능적인 측면도 중요하지만 미적인 측면도 중요합니다. 조금 불편하더라도 웹사이트 자체가 예쁘면 한 번이라도 더 방문하고 싶죠. 반면, 아무리 기능이 편리해도 엉성하거나 올드한 디자인의 웹사이트는 왠지 방문이 꺼려집니다. ‘웹사이트 디자인’이라고 하면 ‘나는 미적 감각이 부족한데 어쩌지?’라는 걱정이 앞설 수 있습니다.

​

하지만 걱정 마세요.

​

웹사이트 디자인은 결국 ‘레이아웃’에서 출발하며, 이는 몇 가지 이론만 알고 있어도 충분합니다.

​

✍️ 이 글의 순서

• 웹사이트 디자인의 비밀, 레이아웃
• 웹디자인 레이아웃 유형들
• 웹디자인 레이아웃 활용하기

​

​

​

웹사이트 디자인의 비밀, 레이아웃

​

웹디자인 레이아웃이란 웹사이트의 구조, 즉 뼈대를 결정하는 일입니다. 웹페이지가 아무리 다양하고 복잡해 보여도 사실 뜯어보면 대부분 비슷한 레이아웃을 갖고 있습니다. 따라서 어떤 레이아웃을 선택하느냐에 따라 웹사이트의 전체적인 디자인이 좌우됩니다.

​

이때, 웹디자인 레이아웃은 크게 5가지 유형으로 정리할 수 있습니다. 항상 같은 레이아웃만 이용하기보다는, 웹사이트의 성격과 유형, 그리고 전체적인 분위기를 고려한 뒤, 혼합하여 사용하는 것이 좋습니다. 아래 각 유형의 특징을 살펴보세요.

​

​

웹디자인 레이아웃 유형들

​

(1) Z 패턴

웹디자인 레이아웃에서 가장 흔하게 사용하는 유형입니다. 인간의 눈이 시각적으로 스캔하는 방식에 따라 설계한 레이아웃이기 때문이죠. 우리의 눈은 왼쪽에서 오른쪽으로, 위에서 아래로, 다시 왼쪽에서 아래로 정보를 파악합니다. 시선이 ‘Z’ 모양을 그리기 때문에 Z 패턴 레이아웃이라고 부릅니다.

​

Z패턴으로 정보를 배치하면 일단 사용자는 시각적으로 편안함을 느낍니다. 또, 빠르게 핵심을 파악할 수 있어, 판단을 내리기도 용이하죠.

​

💡 사용처: 전환율을 목적으로 하는 랜딩 페이지

​

​

(2) F 패턴

F 패턴 역시 Z 패턴과 비슷한 원리로 작동합니다. 특히, 신문이나 책을 읽을 때 우리 시선을 떠올리면 F 패턴 레이아웃이 중요한 까닭을 알 수 있습니다. 따라서 콘텐츠가 많은 경우 F 패턴 레이아웃으로 설계하는 것이 좋습니다. 핵심 콘텐츠는 최상부에 배치하고, 주제와 관련한 내용을 그 아래에 두어 사용자가 차근차근 읽게 합니다.

​

💡 사용처: 뉴스, 블로그, SNS 웹 페이지

​

(3) 전체 화면 이미지

웹페이지 중앙에 크고 선명한 이미지를 배치하는 구조로, 주로 사용자의 시선을 사로잡기 위해 사용하는 레이아웃입니다. 카피 텍스트는 길지 않아야 하며, 최대한 감각적인 이미지를 사용하는 게 유리합니다.

​

💡 사용처: 영화, 작품 등 홍보 웹페이지

​

​

(4) 분할 화면 / 고정 사이드바

웹페이지를 수직으로 분할한 레이아웃 유형. 서로 다른 콘텐츠를 한 번에 보여줄 수 있으므로 다른 성격의 콘텐츠를 한 번에 보여줄 때 유리합니다. 보통 한쪽은 시각적 이미지를, 다른 한쪽에는 텍스트를 배치하여 사용자가 선택적으로 콘텐츠에 몰입할 수 있게 해 줍니다.

​

이와 비슷한 레이아웃으로 ‘고정 사이드바’ 레이아웃이 있습니다. 말 그대로 항상 사이드바가 화면 한쪽에 떠 있는 레이아웃을 일컫는데요. 사용자가 웹사이트의 구조를 손쉽게 파악할 수 있다는 장점이 있고, 웹사이트가 체계적이라는 느낌을 줍니다. 단, 탐색할 수 있는 화면이 줄어들어 사용자가 답답함을 느낄 수도 있습니다.

​

💡 사용처: 시각+텍스트 콘텐츠가 많은 웹페이지

​

(5) 카드 그리드

카드를 펼쳐놓은 것처럼 여러 개의 콘텐츠를 한꺼번에 펼쳐 보이는 레이아웃입니다. 썸네일이 있는 콘텐츠를 깔끔하고 구조적으로 보여줄 수 있지만, 썸네일에 통일성이 없을 경우 오히려 지저분해 보일 수 있습니다.

​

💡 사용처: 쇼핑몰, 블로그, 갤러리

​

​

​

웹디자인 레이아웃 활용하기

​

웹디자인 레이아웃의 대표적인 유형들을 알았다면, 이제 다음과 같이 조합하여 사용할 수 있습니다. 어떤 웹페이지를 만들 것인지, 또 그 목적은 무엇인지에 따라 달라집니다. 아래 2가지 예시를 통해 여러분의 의도에 어울리는 레이아웃을 그려보세요.

​

1. 랜딩 페이지는 ‘Z 패턴’으로 설계하여 회원가입을 유도하고, 로그인한 뒤에는 ‘카드 그리드’로 설계하여 콘텐츠를 한 번에 볼 수 있게 한 뒤, 콘텐츠를 클릭하면 F 패턴으로 제품 정보를 상세하게 적는다.

​

2. 랜딩 페이지는 ‘전체 화면 이미지’로 설계하여 브랜드 이미지를 강조하고, 제품 페이지로 진입하면 ‘고정 사이드바’ 레이아웃을 통해 제품 종류를 빠르게 파악할 수 있게 한다.

​

---

​

물론 정답은 없습니다. 감각적이고 시각적인 브랜드라면 전체 화면 이미지를 적극적으로 활용하는 게 좋고, 콘텐츠 수량이 많거나 텍스트 콘텐츠가 많다면 F 패턴 및 분할 화면 레이아웃을 적극적으로 활용해야겠죠. 웹사이트의 분위기와 목적에 맞게, 웹디자인 레이아웃을 결정하시기 바랍니다.

​

💡 about 위시켓 ​ : 2012년 설립된 위시켓은 지금까지 '세상이 일하는 방식을 더 행복하게' 만들기 위해 IT 아웃소싱 시장에 혁신을 만들어가고 있습니다. 현재까지 97,569개의 기업이 누적 7,519억 원 이상의 프로젝트를 믿고 맡겨주셨습니다.

​

---

​

✅ 함께 보면 도움 되는 글

​

1️⃣ 홈페이지 제작 업체 미팅 전, 후 '이것' 점검하세요.

2️⃣ 홈페이지와 웹사이트, 랜딩페이지 차이점

3️⃣ '웹사이트 제작 비용'과 '퀄리티', 어느 것도 놓치기 싫다면?

 

 

IT 외주, 성공 확률을 높이고 싶다면?
국내 1위 IT 아웃소싱 플랫폼 위시켓과 함께하세요!