UI 디자인 완성도 올리기, 레이아웃 편(3)

수평 레이아웃과 비대칭 레이아웃
2024-05-01

여기 프리미엄 100 퍼센트 천연 화장품 브랜드가 있습니다. 브랜드명은 Natural Organic입니다. 줄여서 No라는 로고를 사용합니다.

No의 Bottel & Label 디자인

브랜드를 런칭하였으니 웹사이트를 만들었습니다. 제품을 가운데에 배치하고 매우 큰 영역의 여백을 사용하여 깨끗한 이미지를 부각하였습니다.

큰 여백의 사용으로 제품이 부각되는 웹사이트 PC 버전

No의 웹사이트 PC 버전의 그리드 시스템

이 시점에서 이 브랜드는 순수 100 퍼센트 꽃 추출물을 사용한다는 점을 화면에 보여주고자 합니다. 아래의 이미지입니다.

화장품 컨셉 어시스트 이미지

레이아웃을 유지하면서 화면에 적용하는 일반적인 방법은 아래와 같습니다. 배경이미지로 활용하면서 제품을 레이어드 시키는 방식입니다. 참고로 레이어드 방식을 사용하는 이유는 배경과의 합성을 할 필요가 없는 장점이 있습니다. 배경과 제품 간의 구도적 이질감이 발생해도 무관하기 때문입니다. 레이어드 하지 않고 풀 배경을 사용한다면 이미지를 배경에 어울리도록 합성해야 합니다.

레이아웃을 유지한 채 변경된 페이지


이 시점에서 위의 페이지를 보면 몇 가지 의문점이 발생하게 됩니다.

1. 배경이 너무 선명해서 블러처리를 하여 초점을 제품에 집중되게 해야 하지 않을까?

2. 제품이 잘 안 보이는데 배경의 명도를 조절하여 제품을 좀 더 잘 보이게 해야 하지 않을까?

3. 제품을 키우고 싶지만 작은 병이라 키울 수도 없고 어떻게 해야 할까?

등인데요

바로 오늘의 주제 두 가지를 이제부터 말씀드리겠습니다. 바로 수평 레이아웃과 비대칭 레이아웃입니다.

수평 레이아웃

PC의 모니터 화면은 피봇 하지 않는 한 태생적으로 가로가 더 넓습니다. 비율의 차이가 있을 뿐입니다. 컨텐츠 구성의 흐름이 상하보다는 좌에서 우로 이동하는 것이 이 화면 비율을 가장 최적화하여 사용할 수 있습니다. 반대로 모바일 화면은 세로 비율이 더 높으니 수직 레이아웃이 더 어울립니다.

비대칭 레이아웃

비대칭 레이아웃은 화면을 분할하여 분할된 영역이 대칭이 되지 않도록 구성하는 레이아웃입니다. 아래 예시 이미지를 통해 대칭과 비대칭 레이아웃의 차이를 볼 수 있습니다.

중앙을 기준으로 두 이미지의 볼륨감이 같아 대칭을 이루는 대칭 레이아웃

중앙을 기준으로 두 이미지의 볼륨감이 달라 비대칭을 이루는 비대칭 레이아웃


그렇다면 상단의 페이지를 수평 레이아웃과 비대칭 레이아웃을 적용하면 어떻게 될까요? 아래와 같은 페이지가 만들어집니다.

수평 레이아웃과 비대칭 레이아웃이 적용된 페이지

상단 비대칭 레이아웃의 그리드 시스템

왜?

그럼 수평 레이아웃과 비대칭 레이아웃을 왜 적용할까요? 상단 이미지를 보면 답이 나와 있습니다. 아까 문제가 되었던 부분을 다시 한번 리마인드 하겠습니다.

1. 배경이 너무 선명해서 블러처리를 하여 초점을 제품에 집중되게 해야 하지 않을까?

2. 제품이 잘 안 보이는데 배경의 명도를 조절하여 제품을 좀 더 잘 보이게 해야 하지 않을까?

3. 제품을 키우고 싶지만 작은 병이라 키울 수도 없고 어떻게 해야 할까?

이렇게 문제가 되었던 3가지가 한방에 해결되었습니다. 제품도 잘 보이고 컨셉 이미지도 잘 보입니다. 이렇듯 비대칭 구조를 쓸 경우 두 가지의 느낌을 동시에 제약 없이 받을 수 있으며, 희소성과 역동성까지 부여됩니다. 즉 전형적인 레이아웃을 탈피하고자 할 경우 많이 쓰는 구조입니다. 이제 어떤 것을 더 강조해야 하는지에 따라 위의 시안을 응용하여 제품영역을 키울 수도 줄일 수도 있습니다. 좌우 비대칭의 비례를 조정하여 특별한 사이트를 만들어 보세요.

컨셉 이미지 영역이 확장된 비대칭 레이아웃

제품 영역이 확장된 비대칭 레이아웃


응용 사례 1.

선글라스 브랜드

응용 사례 2.

와인 브랜드

응용 사례 3.

모바일 케이스, 위의 개념을 이용하여 수직 레이아웃 + 비대칭 레이아웃을 적용하면 아래와 같습니다.

상하 비대칭 레이아웃 케이스들, 첫 번째와 두 번째 페이지처럼 좌우로 추가로 비대칭을 주면서 응용해 보세요.

이번 회차를 정리하면 다음과 같습니다.

1. 화면 비율에 맞게 수평, 수직 레이아웃을 활용하면 더 좋은 결과물을 만들 수 있습니다.

2. 비대칭 레이아웃을 적용하면 리듬감을 주게 되어 역동성이 생기고, 더 특별한 UI를 가능하게 합니다.

3. 비대칭 레이아웃은 사용자가 다음 단계를 예상할 수 없는 것이 매력입니다. 이로 인해 발생하는 호기심은 최대 장점입니다.

4. 비대칭 레이아웃은 목적성에 맞게 써야 합니다. 대칭형보다 컨텐츠를 읽는 피로도가 증가하기 때문입니다.

수평 레이아웃이 적용된 사례 링크입니다.

https://grids.obys.agency

비대칭 레이아웃 사례 링크입니다.

https://dami.it

감사합니다.  

지성민님의 더 다양한 글을 더 보시려면

👉 브런치 https://brunch.co.kr/@jisungmin

포트폴리오 https://www.behance.net/sungminn

링크드인 https://www.linkedin.com/in/sungminji

조회수
145

타겟 적중률 91.5% #코어타겟 문자광고 .

성별, 연령, 앱/웹 접속 이력, 거주, 근무지역, 통화 이력까지 정교하다...
함께 읽으면 좋아요
아티클
방사형(radial) 레이아웃, 원형(circular) 레이아웃
아티클
사용자의 좋은 혜택 경험을 위한 첫 관문
아티클
점이를 이용한 그리드시스템의 적용
AI 디자인
아티클
이 조직을 만들어야 하는 이유, 조직의 업무에 대한 정의를 해야 한다
아티클
어도비 파이어플라이, 텍스트 효과 주기
AI 디자인
아티클
어느 정도 연차 이상 디자이너라면 이 실수를 하지 말아야 한다
디자인 마케팅조언
아티클
AI 시대를 리드하는 디자이너가 되기 위해 필요한 핵심 역량에 대해   “몇 십 년이 필요할...
AI 디자인 브랜딩
지성민

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요
브랜딩, 디자인