워드마크 로고로 그리드 만들기(1)
브랜드 아이덴티티가 반영된 그리드 시스템 만들기
컨텐츠 자율배치(Freeform) 레이아웃에 대한 시리즈입니다. 이 시리즈는 절대적 법칙은 아니지만 컨텐츠를 자유롭게 배치하는 디자인을 할 때 구도를 잡는 것을 어려워하시는 분들을 위한 내용입니다.
지난 시간에는 일반적인 그리드 시스템을 활용한 레이아웃 디자인에 대해 말씀드렸습니다. 이번 회차부터는 브랜드 아이덴티티를 베이스로 하여 조금 특별한 그리드시스템을 직접 만들어 보고 컨텐츠를 배치해 보는 예제까지 진행하도록 하겠습니다. 총 3화로 연재할 예정이며 크게 3가지의 이야기를 다룹니다.
1. 워드마크형 로고로 그리드 시스템 만들기(3 Chapter)
2. Symbol로 그리드 시스템 만들기(2 Chapter)
3. 곡선이 포함된 그리드 시스템 만들기(2 Chapter)
워드마크 형태(타입으로만 이루어진 형태)의 로고를 통해 그리드 시스템을 제작해 보도록 하겠습니다. 일반적으로 로고를 제작할 경우 작도법을 사용하게 됩니다. 그 작도를 이용하여 그리드 시스템을 만드는 것이 원리입니다.
PRADA 로고를 이용하여 일반적인 워드타입 로고 케이스를 이용한 그리드를 만들어 보고, 이미지를 자유롭게 배치해보겠습니다.
Step.01
위의 로고를 세리프의 돌출 부분을 제외하고 기본 축을 표기하면 아래와 같습니다.
위의 이미지를 보시면 타입의 넓이와 자간이 완벽하게 일치하지는 않지만 유사하게 배치되어 있음을 알 수 있습니다.
Step.02
그럼 추가로 타입 하나의 넓이와 자간의 비율을 보도록 하겠습니다.
대략 좁은 자간(X)을 기준일 경우 3.4:1, 넓은 자간(Y)을 기준으로 할 경우 2.8:1로 수치화를 할 수 있습니다. 이 수치에서 반올림, 반내림을 통해 소수가 아닌 정수로 3:1이라는 근삿값(2.8의 반올림, 3.4의 반내림)을 얻을 수 있습니다. 이것으로 우리는 무엇을 얻을 수 있을까요?
5 글자니까 5 분할, 분할면과 거터의 비율은 3:1
Step.03
위의 수치를 이용하여 그리드를 제작해 보도록 하겠습니다. 추후에도 지속 언급하겠지만 모든 수치는 해상도 1920px, 분할면과 거터의 값은 8의 배수로 진행하도록 하겠습니다. 다들 아시겠지만 그래도 왜 8의 배수로 진행하는지에 대해 모르시는 분이 있으시다면 아래 링크를 참조해 주세요. 브런치 정윤선 님이 잘 정리해 주신 글입니다.
https://brunch.co.kr/@blackindigo-red/8
결론은 아래와 같은 그리드 시스템을 만들 수 있습니다. 이때 여백은 자율입니다. 저는 8의 배수를 지키기 위해 48px을 여백으로 설정하였습니다. (당연히 여백값을 높이면 거터와 분할면은 줄어듭니다.)
Step.04
그럼 위의 그리드에 맞춰서 이미지를 배치해보도록 하겠습니다. 지난 시간에 언급한 것처럼 메인 이미지를 세로로 배치해 줍니다. 이전 회차의 경우와 동일하게 3:4, 4:3 이미지만 사용하겠습니다. 이미지의 세로 간격은 "3x(288px)"로 설정해 주었습니다. 이 간격 또한 자율이지만 제약이 있습니다. "x(96px)"의 배수로 설정해 주세요.
이때 2 분할면의 넓이를 메인 이미지로 지정하고 시작점의 X좌표를 다르게 배치합니다. 그러면 세로로 4장의 이미지를 배치할 수 있습니다. 2 분할면의 넓이값을 메인 이미지로 지정한 이유는 만약 더 크게 3 분할면을 사용하게 될 경우 여백의 활용 경우의 수가 적어지고 이미지도 최대 세로로 3장을 배치할 수 있다는 제약이 생깁니다. 디자인 제약을 줄이기 위해 2 분할 넓이의 이미지를 메인 이미지로 지정한 이유입니다.
메인(중심)이 되는 이미지의 배치, 간격값은 전부 1 분할면의 넓이(3x, 288px)로 고정Step.05
바로 보조 이미지를 배치해 줍니다. "5x(1 분할면+2 거터)"의 간격만큼 띄우고 배치해 주세요.
Step.06
전체 구도를 보고 대칭이 아쉬운 부분들은 위치 조정 및 순서 변경을 해 줍니다. 이때는 일부 간격이 좁혀질 수 있습니다.
대칭(균형)을 위해 간격이 좁아진 4번째 줄Step.07
글과 로고를 적용해 보면 아래와 같습니다.
Step.08
PRADA 로고의 서체는 세리프가 현대적으로 변형된 트랜지셔널 형태를 지니고 있으며 세리프의 특징인 브래킷을 가지고 있습니다. 브런치 "type n blank"님의 글을 통해 트랜지셔널 폰트와 브래킷에 대한 설명을 보실 수 있습니다.
https://brunch.co.kr/@type-n-blank/11
이 브래킷을 액자틀에 적용하여 특별함을 추가해 줍니다. 개인적인 바람은 어떤 브랜드를 표현하더라도 이 과정은 꼭 해주셨으면 좋겠어요.
로고의 브래킷을 적용한 액자틀전부 적용하지 말고 1,2개만 적용해 줍니다. 저는 2개를 적용하였습니다. 완성작입니다.
이상으로 워드마크 형태의 로고를 이용하여 그리드를 직접 만들어 배치해 보고, 브랜드 아이덴티티까지 시각적으로 반영해 보았습니다. 워드마크 로고의 글자 수가 분할면의 기준이 된다는 것을 용용하시면 됩니다. (5 글자면 5 분할, 8 글자면 8 분할).
다음 시간에는 워드마크 형태의 로고 중 분할이 균등하지 않은 경우 그리드를 만들어보는 방법에 대해 알아보도록 하겠습니다. 바로 아래와 같은 경우입니다.
피그마 파일과 서체 공유합니다. 읽어주셔서 감사합니다.
https://drive.google.com/file/d/1z6Uz5WQdTAxfnJtk27_mWIcG6yjALgV-/view?usp=share_link
