기본 그리드와 수치의 활용
자유로운 레이아웃 속의 단단한 질서와 규칙
프롤로그에서 밝힌 바 있듯이 Freeform Layout에 대해 알아보고 익히는 시간을 갖고자 합니다.
본 내용은 매거진 형태의 UI를 제작할 경우 컨텐츠 배치에 도움이 되고자 하는 목적으로 작성한 내용입니다. 평소 이런 레이아웃에 자신이 있는 디자이너분들은 가볍게 읽어보세요. 만약 어려움을 겪고 계신다면 수치화하여 좀 더 단단하게 배치하는 방법에 대해 작게나마 도움이 될 것입니다.
모든 케이스를 제작해 볼 수는 없으므로 사전 조건을 설정하였습니다.
1. 비율은 두 가지로 제한합니다.(4:3, 3:4)
2. 그리드는 5 분할 그리드를 사용합니다.(해상도 1920px, 좌우여백 100px, 거터 60px)
Step 01.
먼저 중심축을 만들겠습니다. 4장의 이미지(4:3 비율 2장, 3:4 비율 2장)를 5 분할 그리드 중 2 분할 넓이를 활용하여 시작점(붉은 선)이 겹치지 않도록 배치해 줍니다. 배치는 자율이며 같은 붉은 선에 두장 이상의 이미지가 시작점이 겹치지 않도록만 해주세요. 이 이미지를 "주 이미지"로 명칭을 정하도록 하겠습니다.
Step 02.
간격이나 사이즈 등의 모든 수치는 어렵게 생각하지 마시고 그리드에서 파생된 수치의 배수로 지정하시면 됩니다. 4장의 이미지의 세로 간격은 거터값(60px)의 배수로 적용합니다. 저는 4배인 240px로 균등 적용하였습니다.
Step 03.
4장의 이미지의 좌우로 빈 곳에 1 분할 넓이 값의 이미지들을 배치해 줍니다. 이 이미지를 "보조 이미지"로 명칭을 정하겠습니다. 이때 각각 주 이미지의 세로 좌표의 중앙에 맞게 매칭해 줍니다. 이때 바로 옆에 붙이지 말고 가로로 분할면 한 칸의 여백(X값)을 더 두고 배치해 줍니다. 이때 X값을 준 이유는 "여백이 주는 세련미"를 위해 필요한 공간이라고 생각하시면 됩니다. 더불어 답답한 느낌을 개선해 줍니다. 한 줄에 1 공간씩 만들어 주세요.
Step 04.
대칭을 살펴보시고 빈 영역(붉은색 원)을 이미지를 추가하거나 이동하여 채워줍니다.
Step 05.
글을 배치하면 결과물 완성입니다.
여기에서 Tip
1. 위의 결과물을 보면 크게 세로로 4줄입니다. 그리드 분할은 "세로로 배치할 이미지 수 + 1"을 해주시면 됩니다. 만약에 세로로 5줄을 배치할 계획이라면 그리드는 가로로 6 분할을 해주시면 됩니다.
세로로 5줄, 가로로 6 분할 그리드가 적용된 결과물이제 몇 가지 응용을 해보겠습니다.
응용 1.
보조 이미지의 y좌표 값을 변형할 수 있습니다. 주 이미지를 기준으로 하여 중앙이 아닌 위쪽 정렬, 하단 정렬, 혹은 거터값(60px의 배수)을 활용하여 간격을 만들어 배치해 줍니다.
응용 2.
좌우 여백과 맞닿게 위치한 이미지는 좌우 여백을 침범하여 표현할 수 있습니다.
여백을 침범하지 않은 형태(좌)와 좌우 여백을 침범한 형태(우)응용 3.
특정 일부분은 규칙에 벗어나도록 표현할 수 있습니다.(조형 원리 변화, 강조).
세 번째 줄의 이미지를 극단적으로 크게 배치하여 강조
누끼컷을 이용한 분위기 전환요약입니다.
1. 주 이미지를 먼저 배치하세요.
2. "주 이미지의 수 + 1"로 그리드 분할을 하세요.
3. 보조 이미지는 주 이미지 기준으로 대칭에 맞추어 배치하세요.
4. 보조 이미지와 주 이미지는 간격을 1 분할만큼 떨어지게 배치해 주세요.
5. 일부분에 변화를 주면 더 기억에 남는 페이지를 만들 수 있습니다.
다음 회차는 단순한 컬럼 그리드가 아닌 브랜드 아이덴티티가 반영된 특별한 그리드를 직접 만들어보고 이미지를 배치해 보는 내용으로 이루어질 계획입니다. 본문 내용이 담긴 Figma 파일 공유합니다.
https://drive.google.com/file/d/1I04_vVza4C4VqFZsh2UsFapzXwMvH2sW/view?usp=share_link
읽어주셔서 감사합니다.
