이미지와 글을 조화롭게 배치해 보기 다섯 번째 시간입니다.
목차
1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
6. 글의 흐름에 이미지 결합하기
7. 이미지를 글로 마스킹하기
글 만으로 페이지를 구성하는 경우의 대부분은 원페이지 디자인이 주를 이루고 있습니다. 담백하게 시작되는 이 페이지는 스크롤 후에 보일 내용에 대한 준비과정이기도 합니다. 담백하게 시작할수록 이어서 나오는 내용이 더 극적인 대비효과를 얻게 됩니다. 보통 아래와 같은 구성입니다.
숨겨진 영역을 보여주기 전에 미리 예고하는 타이포그라피
즉 글로만 이루어진 하나의 페이지는 분석 결과 대체로 일종의 문서 표지(디자이너라면 포트폴리오의 표지)와 같은 역할을 하고 있음을 알 수 있었습니다. 같은 이유로 문서의 표지를 만든다고 생각하고 디자인을 하시면 됩니다.
왜?
타이포그라피로만 이루어진 디자인의 장점은 일정 수준에 이르지 못한 이미지를 같이 사용되는 것보다 되려 세련되게 디자인을 할 수 있습니다. 바로 큰 여백을 사용할 수 있기 때문입니다. 제작 사례는 채용사이트의 프론트 페이지를 테마로 잡아 적용하였으며, 타이포 자체에 너무 많은 효과를 주는 것보다는 최소의 시각효과(형태의 변형 등)를 이용한 사례로만 제작해 보았습니다.
사례 1.
기본 형태
2024년에도 지속적으로 트렌드의 상위권을 차지하고 있는 빅 타이포그라피 형태입니다. 제목을 크게 써주고 나머지 내용을 그리드에 맞춰 배치하시면 됩니다.
기본형태(큰 제목 카피 + 서브 카피)
유사사례
사람인(人) 자를 빅 타이포그라피로 활용하면 아래와 같은 형태가 구현됩니다.
사람과 사람이 만나면 동료가 됩니다.
사례 2.
서술 형태
간결한 제목보다는 서술에 포커스를 맞춘 디자인입니다. 제목이 없거나 혹은 작게 배치하고 서술형 메세지를 크게 적용합니다.
서술형태의 페이지
사례 3.
레이어드 형태
글의 배경이 글이 될 수 있습니다. 제목과 내용이 나뉜다면 둘 중에 하나를 배경으로 두고 고도차를 이용하여 배치해 줍니다.
글을 레이어드 한 디자인
사례 4.
의도적 표기
아래 이미지처럼 의도적으로 수정 부분을 노출함으로써 의미가 더 강조가 될 수 있습니다.
수평적인 조직문화를 대비를 통해 의도적으로 강조
사례 5.
컨셉추얼 형태(반사)
반사광과 그림자를 통해 의미를 전달할 수 있습니다. 구성원이 됨을 환영하는 메세지(Greeting)가 보이지만 반사되는 것은 성장(Growth)입니다.
환영합니다. 그리고 성장합니다.
사례 6.
컨셉추얼 형태(인위적 여백)
원격 근무는 말 그대로 멀리 떨어져서 일을 하는 것입니다. 원격과 근무를 멀리 떨어지게 하여 의미를 극대화하여 전달할 수 있습니다.
원격 근무
사례 7.
컨셉추얼 형태(곡선)
성장은 상승하는 그래프의 곡선을, 리스크 감소는 하강하는 그래프의 곡선의 형태를 인용하였습니다. 둘이 만나 지퍼를 채워가면서 성장하는 모습을 표현할 수 있습니다. 이때 약간의 인터렉션을 사용할 경우 더 확실하게 의미를 전달할 수 있습니다.
지퍼가 채워지는 형태
사례 8.
컨셉츄얼 형태(키워드)
핵심이 되는 키워드들을 자유롭게 배치할 수도 있습니다. 이 키워드들을 CTA로 활용하여도 좋습니다.
눌러보고 싶은 표현
사실 이러한 표현법은 굉장히 많은 방법이 존재합니다. Word design, Typograpy design 등을 검색하여 많은 작품들을 보시길 권장드리며 이번 회차에는 이 정도로만 다루도록 하겠습니다. 이번 글에서 가장 중요한 점은 타이포 자체에 큰 효과를 주지 않아도 특별한 의미를 부여할 수 있는 마이크로 한 방법들이 존재한다는 것을 숙지하시면 조금 더 성장할 수 있는 계기가 되지 않을까 합니다.
읽어주셔서 감사합니다.
지성민님의 더 다양한 글을 더 보시려면
👉 브런치 https://brunch.co.kr/@jisungmin
