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

이미지를 읽다.
2024-07-03

이미지와 글을 조화롭게 배치해 보기 여섯 번째 시간입니다.

목차

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

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

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

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

5. 글만으로 표현해 보기

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

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


글의 흐름에 이미지를 결합하는 기법은 이미지가 글의 내용 안에 포함되어 자연스럽게 글을 읽듯이 이미지를 읽어갈 수 있는 스타일입니다. 이번 시간에는 대략 7가지 정도로 구분하여 표현해 보았습니다. 이 또한 최근 트렌드에 지속적으로 언급되는 스타일이기도 합니다. 긴 설명보다는 사례를 보면서 가볍게 스크롤을 내리시면 어떤 스타일인지 이해하실 수 있습니다. 지난 회차의 타이포그라피 디자인 기법에서 약간의 비주얼 요소가 포함된 형태라고 인지하시면 됩니다.

사례 1.

단어와 단어 사이에 비주얼 요소를 삽입하는 기본형태입니다. 스페이스 바 영역에 삽입합니다.

브런치 글 이미지 2

사례 2.

비주얼 요소는 단어 안의 글자 사이사이에 삽입될 수도 있습니다. 

브런치 글 이미지 3

사례 3.

사각형의 그리드에 맞추기 위해 비주얼 요소의 볼륨감이 달라질 수 있습니다.

브런치 글 이미지 4

사례 4.

영역을 확장하여 복수의 단어 사이에 위치할 수 있습니다.

브런치 글 이미지 5

사례 5.

글자의 형태와 유사한 경우 글자 대신 사용할 수 있습니다.

브런치 글 이미지 6

사례 6.

때로는 단어를 대체할 수 있습니다.

브런치 글 이미지 7

사례 7.

가독성을 저하하지 않는 정도에서 배경 이미지로도 활용 가능합니다.

브런치 글 이미지 8

이미지를 글처럼

이 스타일의 가장 핵심은 글 안에 이미지가 포함되도록 인지할 수 있도록 구성하는 것입니다.  두 요소가 구분되어 보이면 목차의 첫 번째(글과 이미지를 균등하게 배치해 보기)에 해당되게 되므로 두 기법은 어느 정도의 차이가 있습니다. 둘을 비교해 보시고 더 어울리는 표현 방법에 대해 고민할 수 있는 시간이 되었으면 하는 바람입니다. 다음 시간에는 글과 마스킹에 관한 주제로 글을 발행하도록 하겠습니다.

읽어주셔서 감사합니다.

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

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

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

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

조회수
22

몇 백만원으로도 TV 광고 할 수 있어요! .

원하는 타겟에게만 노출하는 IPTV광고를 경험해보세요
함께 읽으면 좋아요
아티클
41. 가로로 긴 데이터를 모바일에서 보여주는 방법 [토스] 주식 차트 보기 모바일 기기에서는 PC와 달리...
디자인 레퍼런스
아티클
무엇을 표현할 경우, 그 방법이 꼭 거창할 필요는 없습니다.
아티클
그때 그랬더라면 지금은 좀 더 나아졌을까
디자인 직장생활 커리어
아티클
세상은 계속 변하고 배움의 길은 끝이 없다
디자인 직장생활 커리어
아티클
글 없이 이미지만으로 더 매력적으로 어필하기
아티클
가이드가 있어도 자꾸 가이드 외의 새로운 케이스를 들고 오면 어떡하나요
디자인 직장생활
아티클
딤드(Dimmed)가 모든 것을 해결해주지는 않습니다.
아티클
글과 이미지를 균등하고 조화롭게 표현하는 방법
지성민

마케터에게 제안하기

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