![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fimage.wanted.co.kr%2Foptimize%3Fsrc%3Dhttps%253A%252F%252Fstatic.wanted.co.kr%252Fcommunity%252F2024%252F11%252F5%252Fadeba67a-bf89-4ad8-9fbc-168330710d4d%26w%3Dinherit%26q%3D80&w=inherit&q=80)
# **이미지와 결합한 타이포그라피**

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




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

흥미로운 내용의 포스팅이네요! 이미지와 타이포그래피의 결합에 관한 깊이 있는 설명과 다양한 사례를 공유해 주셔서 감사합니다. 디자인에 관심 있는 분들에게 큰 도움이 될 것 같습니다. 다음 콘텐츠도 기대하겠습니다! 😊

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

원티드 에이전트

사례까지 이해하기 쉬웠습니다~감사합니다:)

인생의 100페이지 중 33페이지 살아가는 중

Page33

이미지와 결합한 타이포그라피

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

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


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


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


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

왜?

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

글을 배치할 공간이 확보되지 않을 경우
이미지에 공간감과 입체감을 부여하고자 할 때
컨셉을 극대화하고자 하는 경우
오브젝트를 강조하고 싶을 경우

이 기법은 전반적으로 매거진의 헤더 이미지, 프로모션의 키 이미지 등에서 보던 LOOK & FEEL 스타일의 결과물이 생성됩니다. 그래서 컨텐츠 & 프로모션 디자이너들에게 좋은 영감을 줄 수 있었으면 하는 바람입니다. 그럼  위의 4가지 경우를 원본 이미지와 비교해 보고 어떤 식으로 적용되는지 알아보도록 하겠습니다.

사례 1.

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


사례 2.

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

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


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


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


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


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


사례 3.

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


사례 4.

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


마치며

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

읽어주셔서 감사합니다.

![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fimage.wanted.co.kr%2Foptimize%3Fsrc%3Dhttps%253A%252F%252Fstatic.wanted.co.kr%252Fcommunity%252F2024%252F11%252F5%252Fadeba67a-bf89-4ad8-9fbc-168330710d4d%26w%3Dinherit%26q%3D80&w=inherit&q=80)
# **이미지와 결합한 타이포그라피**

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




여성이 드레스를 입고 서 있는 이미지가 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F1b343ed6-4d87-4dbe-896b-cb541d65bb97&w=inherit&q=80)



글을 앞으로 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 이미지보다는 글이 강조되는 경우입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F04cde17c-5470-49c1-a4c5-a0b6ddfd720a&w=inherit&q=80)



만약 배경과 오브젝트를 분리하여 그 사이에 글을 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 글보다는 이미지가 더 강조된 케이스입니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F3c4b63b0-2847-48c5-bf04-21d23add69b5&w=inherit&q=80)



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




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

- 글을 배치할 공간이 확보되지 않을 경우
- 이미지에 공간감과 입체감을 부여하고자 할 때
- 컨셉을 극대화하고자 하는 경우
- 오브젝트를 강조하고 싶을 경우

이 기법은 전반적으로 매거진의 헤더 이미지, 프로모션의 키 이미지 등에서 보던 LOOK & FEEL 스타일의 결과물이 생성됩니다. 그래서 컨텐츠 & 프로모션 디자이너들에게 좋은 영감을 줄 수 있었으면 하는 바람입니다. 그럼  위의 4가지 경우를 원본 이미지와 비교해 보고 어떤 식으로 적용되는지 알아보도록 하겠습니다.




## **사례 1.**
글을 배치할 공간이 확보되지 않을 경우 사례입니다. 왼쪽 이미지는 오브젝트들이 화면 전체에 분산되어 있어 글을 쓸 영역을 확보하기가 어려운 형태입니다. 그래서 이미지의 배경과 오브젝트를 분리하여 그 사이에 글을 삽입하였습니다. 이때 오브젝트 뒤에 글이 있지만 글이 가려지더라도 읽히도록 배치하는 것이 중요합니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2Fea06614d-529e-4cf4-8240-b0ed7dd05c76&w=inherit&q=80)



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



2-1. 글의 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F522813bd-64c9-436e-b129-0ab633ebf3d4&w=inherit&q=80)


2-2. 위와 같은 사례입니다. 오브젝트의 공간감이 더 풍성해지는 것을 확인하실 수 있습니다. 또한 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F4dc95427-e364-4b85-9132-172bcce8198a&w=inherit&q=80)



2-3. 글이 온전히 전부 전달되어야 할 경우 글의 일부는 오브젝트의 뒤로, 일부는 앞으로 배치할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F34e4fd0a-1288-4b1d-b218-4dd02f73ea9a&w=inherit&q=80)




2-4. 배경과 오브젝트 사이가 아닌 하나의 오브젝트에서도 글을 삽입할 수 있습니다. 아래 이미지의 경우 머리카락과 피부 사이에 글(브랜드 명)을 배치하여 공간감을 주었습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F273cdd7a-dc53-47e0-9ce9-566c8ab67f30&w=inherit&q=80)





2-5. 오브젝트가 두 개 이상일 경우 둘 사이에 글을 삽입할 수 있습니다. 아래 이미지의 경우 남성과 여성 사이에 글을 배치하여 공간감을 부여했습니다. 여기에서 하나 더 주목할 부분이 가로로 확장된 알파벳 "O"입니다. 글이 온전히 읽혀야 하는 경우 글자를 아래와 같이 변형하여 사용할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F1f4deb0a-baf9-4e62-b411-e6776187b133&w=inherit&q=80)



## **사례 3.**
컨셉을 극대화하고자 할 경우 사례입니다. 바로 사례를 보도록 하겠습니다. 컨셉이 다이나믹한 액티비티라면 글을 아래와 같이 결합하여 오브젝트와 글이 마치 한 몸처럼 역동적으로 표현되게 할 수 있습니다.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F82d6b869-b390-4914-872a-0153ce026281&w=inherit&q=80)



## **사례 4.**
특정 오브젝트를 강조하고자 할 경우 사례입니다. 이 경우는 강조하고자 하는 오브젝트의 형태를 이용하여 적용하는 것이 핵심입니다. 아래 이미지는 핸드크림의 둥근 형태를 따라 글이 적용되었습니다. 이때 주의해야 할 점은 공간감을 부여하기 위해 단순이 감싸는 것이 자연스럽게 결합된 모습이 중요합니다. 다시 아래 이미지를 보시면 몇몇 글자는 손가락보다 뒤쪽으로 위치해 있습니다. 이런 디테일들을 놓치지 말아 주세요.
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fstatic.wanted.co.kr%2Fcommunity%2F2024%2F11%2F5%2F2cc0ab4c-6cdb-403a-a6a0-113f73b2396d&w=inherit&q=80)



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

읽어주셔서 감사합니다.

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

글쓰기챌린지

이미지와 결합한 타이포그라피

글쓰기챌린지