매력적인 히어로 페이지를 위한 7가지 방법(5)

이미지와 결합한 타이포그라피
2024-06-19

이미지와 글을 조화롭게 배치해 보기 네 번째 시간입니다. 현재까지 절반이 진행되었습니다.

목차

1. 글과 이미지를 균등하게 배치해 보기

2. 딤드(Dimmed) 이미지와 글 레이어드

3. 이미지만으로 구성해 보기

4. 이미지 중심의 글 결합해 보기

5. 글만으로 표현해 보기

6. 글의 흐름에 이미지 결합하기

7. 이미지를 글로 마스킹하기


4번째 이미지 중심을 글을 결합해 보는 케이스입니다. 글을 이미지의 일종의 장식 요소로 사용하는 기법이며 예를 들면 아래와 같습니다.

여성이 드레스를 입고 서 있는 이미지가 있습니다.

글을 앞으로 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 이미지보다는 글이 강조되는 경우입니다.

만약 배경과 오브젝트를 분리하여 그 사이에 글을 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 글보다는 이미지가 더 강조된 케이스입니다.

위의 사례와 같이 글과 이미지가 영역을 나누지 않고 같이 결합하되 이미지가 조금 더 강조되는 기법들을 이번 시간을 통해 말씀드리고자 합니다.


왜?

이런 기법을 사용할 경우는 아래의 4가지 경우에 해당됩니다.

글을 배치할 공간이 확보되지 않을 경우

이미지에 공간감과 입체감을 부여하고자 할 때

컨셉을 극대화하고자 하는 경우

오브젝트를 강조하고 싶을 경우

이 기법은 전반적으로 매거진의 헤더 이미지, 프로모션의 키 이미지 등에서 보던 LOOK & FEEL 스타일의 결과물이 생성됩니다. 그래서 컨텐츠 & 프로모션 디자이너들에게 좋은 영감을 줄 수 있었으면 하는 바람입니다.


그럼  위의 4가지 경우를 원본 이미지와 비교해 보고 어떤 식으로 적용되는지 알아보도록 하겠습니다.

사례 1.

글을 배치할 공간이 확보되지 않을 경우 사례입니다. 왼쪽 이미지는 오브젝트들이 화면 전체에 분산되어 있어 글을 쓸 영역을 확보하기가 어려운 형태입니다. 그래서 이미지의 배경과 오브젝트를 분리하여 그 사이에 글을 삽입하였습니다. 이때 오브젝트 뒤에 글이 있지만 글이 가려지더라도 읽히도록 배치하는 것이 중요합니다.

HOT CHILI PEPPER


사례 2.

이미지에 공간감과 입체감을 부여하고자 할 경우 사례입니다. 마찬가지로 글을 배경과 오브젝트 사이에 배치하여 평면적인 이미지를 공간감 있게 바꾸어 줍니다. 이에 해당하는 몇 개의 사례를 보도록 하겠습니다.

2-1. 글의 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.

달고 신선하고 맛있고 영양만점



2-2. 위와 같은 사례입니다. 오브젝트의 공간감이 더 풍성해지는 것을 확인하실 수 있습니다. 또한 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.

BLACK FRIDAY

2-3. 글이 온전히 전부 전달되어야 할 경우 글의 일부는 오브젝트의 뒤로, 일부는 앞으로 배치할 수 있습니다.

겨울, 더 따뜻하게

2-4. 배경과 오브젝트 사이가 아닌 하나의 오브젝트에서도 글을 삽입할 수 있습니다. 아래 이미지의 경우 머리카락과 피부 사이에 글(브랜드 명)을 배치하여 공간감을 주었습니다.

머리카락과 피부 사이로 삽입된 브랜드

2-5. 오브젝트가 두 개 이상일 경우 둘 사이에 글을 삽입할 수 있습니다. 아래 이미지의 경우 남성과 여성 사이에 글을 배치하여 공간감을 부여했습니다. 여기에서 하나 더 주목할 부분이 가로로 확장된 알파벳 “O”입니다. 글이 온전히 읽혀야 하는 경우 글자를 아래와 같이 변형하여 사용할 수 있습니다.

SUMMER COLLECTION


사례 3.

컨셉을 극대화하고자 할 경우 사례입니다. 바로 사례를 보도록 하겠습니다. 컨셉이 다이나믹한 액티비티라면 글을 아래와 같이 결합하여 오브젝트와 글이 마치 한 몸처럼 역동적으로 표현되게 할 수 있습니다.

SKI


사례 4.

특정 오브젝트를 강조하고자 할 경우 사례입니다. 이 경우는 강조하고자 하는 오브젝트의 형태를 이용하여 적용하는 것이 핵심입니다. 아래 이미지는 핸드크림의 둥근 형태를 따라 글이 적용되었습니다. 이때 주의해야 할 점은 공간감을 부여하기 위해 단순이 감싸는 것이 자연스럽게 결합된 모습이 중요합니다. 다시 아래 이미지를 보시면 몇몇 글자는 손가락보다 뒤쪽으로 위치해 있습니다. 이런 디테일들을 놓치지 말아 주세요.

ORGANIC PURE CREAM

이미지와 글을 조화롭게 결합해 보는 방법에 대해 몇 가지 사례를 통해 알아보았습니다. 다시 한번 언급하지만 정해져 있는 틀을 벗어나 글을 어느 곳에 어떻게 배치하느냐에 따라 때로는 놀라운 결과물들의 생성될 수 있습니다. 추가로 작은 디테일까지 챙긴다면 더욱 성장하는 디자이너가 될 수 있을 것입니다. 다음 시간에는 이미지 중심에서 벗어나 글만으로 구성된 화면에 대한 영감을 줄 수 있는 컨텐츠로 인사드리겠습니다.

읽어주셔서 감사합니다.

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

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

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

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

조회수
92

의사는 곧 병원이다! #닥터 브랜딩 .

스타 원장님이 필요한 병원 담당자님 주목! 위픽만의 병의원 마케팅 노하우...
퍼포먼스 마케팅, 트렌드, 커머스, 브랜딩, 디자인, AI
함께 읽으면 좋아요
아티클
‘검색에서 발견되는 것’보다 ‘검색되는 브랜드’가 되는 것
AI 마케팅전략 마케팅트렌드 브랜딩
아티클
제가 알려드릴게요.
자기계발 직장생활
아티클
지금의 마케팅은 그냥 보편화된 기술입니다.
마케팅전략 브랜딩
팝업스토어
드디어 찾아온 가비지타임 팝업...! 같이 지상고등학교 입학하러 갈래...?
WPL limited
나의 마케팅 성향 누구와 닮았을까?!
문화콘텐츠 미디어트렌드
WPL limited
위픽레터가 마케팅 명언을 소개합니다.
지성민

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요
퍼포먼스 마케팅, 트렌드, 커머스, 브랜딩, 디자인, AI