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

수평 레이아웃과 비대칭 레이아웃

지성민

2024-05-01

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

No의 Bottel & Label 디자인

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

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

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

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

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

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

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

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

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

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

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

등인데요

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

수평 레이아웃

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

비대칭 레이아웃

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

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

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

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

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

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

왜?

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

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

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

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

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

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