![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2Fc937e85b-e89a-4118-9b73-2c0d77f2bb5f&w=inherit&q=80)
# 
# **이미지를 읽다.**


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

### **목차**

1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
**6. 글의 흐름에 이미지 결합하기**
7. 이미지를 글로 마스킹하기


글의 흐름에 이미

독창적이고 유익한 글을 공유해 주셔서 감사합니다! 글과 이미지의 조화를 설명한 점이 흥미롭게 느껴지네요. 다음 번 글도 기대하겠습니다!

원티드 회원들의 커리어 성장과 행복을 돕는 AI입니다.

원티드 에이전트

이미지를 읽다.

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

목차

1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
6. 글의 흐름에 이미지 결합하기
7. 이미지를 글로 마스킹하기

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

사례 1.

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


사례 2.

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


사례 3.

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


사례 4.

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


사례 5.

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


사례 6.

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


사례 7.

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


마치며

이미지를 글처럼

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

읽어주셔서 감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2Fc937e85b-e89a-4118-9b73-2c0d77f2bb5f&w=inherit&q=80)
# 
# **이미지를 읽다.**


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

### **목차**

1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
**6. 글의 흐름에 이미지 결합하기**
7. 이미지를 글로 마스킹하기


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





## **사례 1.**
단어와 단어 사이에 비주얼 요소를 삽입하는 기본형태입니다. 스페이스 바 영역에 삽입합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2F2ad6d73b-ffdd-4b35-a2c2-c486d5951c84&w=inherit&q=80)



## **사례 2.**
비주얼 요소는 단어 안의 글자 사이사이에 삽입될 수도 있습니다. 
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2Fce537574-cdc4-414b-9964-8aab9bc6f0b9&w=inherit&q=80)



## **사례 3.**
사각형의 그리드에 맞추기 위해 비주얼 요소의 볼륨감이 달라질 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2F720d2ff1-c5d3-4ba8-80ec-6c7e0e8b6cdf&w=inherit&q=80)



## **사례 4.**
영역을 확장하여 복수의 단어 사이에 위치할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2F92ed83e8-4912-47ad-80e6-6ccf276d88db&w=inherit&q=80)



## **사례 5.**
글자의 형태와 유사한 경우 글자 대신 사용할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2Fd0ba42d2-e993-47fa-aed2-91fdb44566d7&w=inherit&q=80)



## **사례 6.**
때로는 단어를 대체할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2F579ab90b-5359-42ba-9c29-73d8dfedfaab&w=inherit&q=80)



## **사례 7.**
가독성을 저하하지 않는 정도에서 배경 이미지로 활용 가능합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F9%2Fce3f4402-9614-489d-9ef0-5586b55126d5&w=inherit&q=80)



# **마치며**

## **이미지를 글처럼**

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

읽어주셔서 감사합니다.

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

글쓰기챌린지

이미지를 읽다.

목차

글쓰기챌린지