홀수의 법칙이란, 정보를 표기할 때, 1, 3, 5 개의 패턴을 주로 보여주는 방식을 이야기합니다. 반복되는 컨텐츠를 보여줘야할 때. 2나 4처럼 짝수를 피해야한다는 이야기인데요. 이 키워드는 기존 랜딩페이지 디자인 실무 팁에서 다뤘던 내용 중 일부입니다. 이번 시간에는 이 키워드가 실제로 다른 서비스에서 얼마나 검증될 수 있는지. 이 부분을 집중적으로 찾아보겠습니다.
1. 스케치 (Sketch) 랜딩페이지의 사례
스케치는 UI 디자인에서 자주 사용되는 디자인 소프트웨어입니다. 스케치에서 주로 사용하는 방식은 3개의 커다란 그리드를 잡고. 이 부분을 나눠서 3개로 사용하거나, 1:2로 사용하거나. 1개를 넓게 쓰는 방식으로. 매우 단순한 방식을 사용하고있습니다.
스케치 랜딩페이지의 경우, 일부 컨텐츠를 제외하면 대부분 1:1:1 비율과, 1:2 비율이 많이 사용되었습니다. 컨텐츠 영역 너비가 조금 넓긴 하지만, 패턴이 단순하고, 통일성이 높아 내용을 읽고 확인하기에 편했습니다. 글씨나 비례가 조금 큰 편이었는데, 이 부분은 최근 트렌드를 반영한 것으로 보이네요.
2. Adobe XD의 랜딩페이지의 사례
Adobe XD는 Adobe에서 만든 UI 디자인 소프트웨어입니다. Adobe는 좀 특이한 접근방식을 사용하는데요. 컨텐츠 영역이 두가지 타입으로 나뉩니다. 다만 이 두가지 모두 좌우 너비가 조금 과한 편이라. 시각요소가 너무 거대하게 보이는 단점이 있습니다. 또한 너무 다양한 레이아웃이 사용되고있어서, 산만한 느낌을 줍니다.
메인 컨텐츠를 보여주는 화면에서조차 그리드가 안맞습니다. 시각물을 풍부하게 보여주려는건 알겠는데. 여러가지를 시도해봐도 그리드가 안맞더군요.
XD는 짝수가 메인인것처럼 보이는데. 중간중간 홀수 배율을 섞어서 사용하고있습니다. 게다가 특이한 레이아웃을 보여주기 위해 굉장히 다양한 패턴을 사용합니다. 그러나 이 방식이 별로 효과적이진 못해서. 왜 이건 이 패턴을 사용한건지. 왜 다른건 다른 패턴을 쓴건지. 원칙이 잘 느껴지지 않는 레이아웃입니다.
사진이나 일러스트레이션은 너무 크고, 타이틀 텍스트는 너무 크거나. 본문 텍스트는 너무 작게 느껴지는 부분이 종종 등장합니다.
3. 피그마 (Figma) 랜딩페이지의 사례
피그마는 스케치와 XD의 대안으로 떠오르는 UI 디자인 소프트웨어입니다. XD나 스케치와는 달리 웹 기반으로 동작하기 때문에. 매우 가볍고 실시간 공유가 가능합니다. 저도 애용하고있는 서비스지만, 랜딩페이지의 그리드는 별로 좋아보이지않네요. 일단 컨텐츠 영역은 최대 1280정도이지만. 첫 화면에서는 1140정도로 더 좁은 것 처럼 보입니다. 하지만 스크롤을 내리자마자 1280이 되어버리죠.
피그마 랜딩페이지에서 사용되고있는 여러 화면들은 그리드를 거의 무시하고 만들어진듯 합니다. 타이틀 텍스트가 들어가는 아티클 영역과. 이미지 사이의 간격이나 비례가 계속 달라지는데요. 이건 의도했다기보다는 신경을 쓰지 않는 것처럼 보입니다.
피그마의 경우, 컴포넌트들이 대붑분 '자기멋대로' 비율을 사용하고있습니다. 딱 떨어지는게 별로 없고. 이미지 사용역시 높낮이가 다 다릅니다. 별로 권장하고싶진 않은 방식이네요.
정리하는 글
디자인의 특이성보다는 전략과 효율이 중요한 시대입니다. 어떤 레이아웃을 왜, 어떤 이유에서 사용해야하는지. 그리고 서비스에서 다뤄야할 정보가 어떤 것들이 있는지. 이런 지점을 잘 살펴보고 만들지않으면 여러 문제가 생깁니다. XD처럼 너무 많은 UI 패턴을 갖게되거나. 피그마처럼 그때그때 맞추다보니 컴포넌트별 통일성이 사라지죠. 사용성과 정보전달이 우선되기보다. 레이아웃이 쓸데없이 복잡해지는 사례는 항상 피해야합니다.
결과적으로 보면, 스케치를 제외한 케이스에서는 대부분 짝수를 사용했고. 완성도가 별로 높지않아 홀수의 법칙을 확인하기가 쉽지 않았습니다. 게다가 복합적인 레이아웃이 많이 사용되어, 정보를 확인하는 과정이 불편했죠. 잠시 머무는 랜딩페이지니까. 이 경우는 크게 문제가 없다고 생각할 수도 있습니다. 그러나 서비스가 확장, 변형되게 될수록 기본 설계는 단순해야합니다. 패턴을 재사용할 수 있는 형태여야하죠.
다음 시간에는 다른 분야의 서비스들도 이런 방식을 사용하고있는지. 더 좋은 케이스는 없는지 직접 한 번 찾아보도록 하겠습니다.
리플러스의 UD LAB에 대해 더 궁금하시다면, 다음 링크를 확인해보세요!
UD LAB - 이용안내
안녕하세요, 리플러스입니다. UD LAB (구 UI 디자인 연구소)은 UI 디자인과, IT 생태계를 집중적으로 다루고있는 커뮤니티입니다. 크게 단톡방과 디스코드 채널로 이루어져있으며, 주기적으로 디스
udlab.tistory.com
'UI 디자인 연구' 카테고리의 다른 글
| UI 설계 개선하기 : 방송통신대학 - 시험일정 확인 (0) | 2021.02.12 |
|---|---|
| UI 디자인 : 웹페이지와 홀수의 법칙 ? - 컨텐츠 목록 (0) | 2021.02.08 |
| UI 디자인 : 랜딩 페이지 디자인 - 실무 팁 13 (0) | 2021.02.06 |
| UI 설계 개선하기 : 방송통신대학 - 일정화면 (1) | 2021.02.02 |
| UI 패턴 핵심정리 : 지도 서비스 (0) | 2021.01.21 |
댓글