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

점이를 이용한 그리드시스템의 적용
2024-04-24

조형 원리 중 점이(Gradiation)라는 것이 있습니다. 이것은 형태나 색상, 크기 등을 규칙에 따라 점진적이고 조화롭게 변화시킵니다. UI 디자인에서 점이는 히스토리나 프로세스, 성장 과정 등의 컨텐츠에 적용할 경우보다 드라마틱한 시각적 메세지를 전달할 수 있습니다. 이번 회차는 레이아웃에 해당하는 내용이므로 레이아웃으로만 이 원리를 적용해 보도록 하겠습니다.


사례 1.

여기 아이맥의 히스토리를 소개하는 페이지가 있습니다.

이 페이지의 레이아웃은 다음과 같습니다. 같은 크기의 이미지가 같은 간격으로 반복되고 있습니다. 반복, 균형, 대칭을 통한 안정적인 레이아웃입니다.

여기에 점이의 원리를 적용하면 어떻게 될까요? 오른쪽으로 갈수록 가로폭이 커지는 새로운 그리드를 만듭니다. 무규칙이 아닌 등차수열처럼 일정한 규칙을 적용하여 제작합니다. 랜덤으로 제작하면 점이가 아닌 지난 회차에서 언급한 리듬이 되어버립니다.

위의 그리드를 적용하면 아래와 같은 디자인으로 변화합니다.

점이의 원리가 적용된 페이지

왜?

그러면 이제 의문이 남습니다. 왜 저렇게 해야 하지?라고 말이죠.

오른쪽으로 갈수록 상승하는 형태는 바로 “미래에 더 발전할 수 있는 예측 가능성”을 사용자에게 더 강하게 시사할 수 있습니다. 마치 이족 보행으로 진화하는 인류의 진화도를 보듯이 말이죠. 당연히 “앞으로 더 발전하는 아이맥” 같은 워딩을 쓰지 않아도 됩니다.


사례 2.

위와 같은 원리를 세로로 적용해 보겠습니다. 여기 설립 5년 차의 케이리치라는 핀테크 기업이 있습니다. 이 회사는 5년 만에 엄청난 성장을 이루었고 그 역사의 기록을 모바일 페이지에 담았습니다. 

그리드 시스템을 통해 균등한 사이즈로 세로로 배열되어 있는 것을 확인할 수 있습니다.

이제 이 세로로 균등한 비율의 높이값을 점점 높여 점이가 적용된 그리드를 만들어 적용해 보았습니다. 아래 이미지와 같습니다.

아래쪽으로 갈수록 높이가 높아지는 그리드 시스템을 적용한 레이아웃

왜?

위와 같이 레이아웃을 적용한 이유는 이제 아시리라 믿습니다. 균등하게 반복되는 레이아웃보다 스크롤을 내리면서 눈으로 보는 실적에 대한 임팩트가 커집니다. “8조구나”가 아닌 “8조? 와”로 받아들이게 됩니다.


사례 3.

점이와 브랜드 아이덴티티를 연계하는 경우도 있습니다. 무슨 말이냐 하면 로고 자체에 점이가 적용되어 있는 것들이 있습니다. 대표적 사례가 바로 패션 브랜드인 더 한섬입니다. 더 한섬의 로고는 아래와 같습니다.

더 한섬의 로고

이 로고의 아카이브는 아래와 같습니다.

더 한섬 로고의 아카이브(출처 허스키폭스)

위 아카이브에서 처음과 중간 그리고 끝의 각각 가로값이 다른 사각형을 로고에 적용시킨 원리입니다. 다시 말하면 오른쪽으로 갈수록 또는 아래로 갈수록 점점 가로와 세로값이 커지는 점이의 원리가 로고에 담겨 있습니다.

패션몰에서는 이런 식으로 적용할 수 있습니다.

상단 상품 캐러셀 영역에 적용되어 있는 점이, 오른쪽으로 갈수록 이미지의 가로값이 커짐.

위의 페이지의 모바일 버전입니다. 아래쪽으로 갈수록 썸네일이 커집니다.

아래쪽으로 갈수록 커지는 썸네일, 점이의 원리가 적용됨.

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

1. “과정”이 담긴 컨텐츠에 점이를 적용하면 의미 있는 스토리텔링이 가능합니다.

2. 점이의 가장 끝(GOAL)에 핵심 컨텐츠를 배치하시면 그 컨텐츠의 강조 효과는 배가 됩니다.

3. 때로는 점이가 시각적 차별화의 요소로 유용하게 쓰이기도 합니다.

감사합니다.

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

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

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

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

조회수
95

최저비용 · 최대효과 #퍼포먼스 마케팅 .

가장 효율적이고 가장 쉬운 성과 중심의 마케팅 전략을 경험해 보세요.
함께 읽으면 좋아요
아티클
질문형 글쓰기는 글쓰기 전 과정에서 질문을 적극적으로 활용하는 글쓰기 방식을 의미합니다. 주제 선정부터 아이디어 구상,...
아티클
텍스트와 이미지를 결합하는 7가지 방법
아티클
일잘러를 넘어서 함께 일하고 싶은 시니어를 목표로 나아가기
디자인 커리어
아티클
무엇이 변했고, 새로운 것은 무엇인가?
AI 마케팅사례 마케팅전략 마케팅조언
아티클
AI는 무한한 가능성을 낳는 혁신이라고 하지만, 잘 와닿지 않는다면?   이제, 개발자 없이도 텍스트 몇...
AI 마케터 미디어트렌드
아티클
방사형(radial) 레이아웃, 원형(circular) 레이아웃
아티클
사용자의 좋은 혜택 경험을 위한 첫 관문
아티클
홍작가는 10권의 책을 집필한 경험과 함께 7권 정도의 전자책 작업을 해왔다. 그는 24년 동안 꾸준히...
AI 글쓰기
지성민

마케터에게 제안하기

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