매력적인 히어로 페이지를 위한 7가지 방법(5)
이미지와 결합한 타이포그라피
이미지와 글을 조화롭게 배치해 보기 네 번째 시간입니다. 현재까지 절반이 진행되었습니다.
목차
1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
6. 글의 흐름에 이미지 결합하기
7. 이미지를 글로 마스킹하기
4번째 이미지 중심을 글을 결합해 보는 케이스입니다. 글을 이미지의 일종의 장식 요소로 사용하는 기법이며 예를 들면 아래와 같습니다.
여성이 드레스를 입고 서 있는 이미지가 있습니다.
글을 앞으로 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 이미지보다는 글이 강조되는 경우입니다.
만약 배경과 오브젝트를 분리하여 그 사이에 글을 배치하면 아래와 같은 이미지가 제작됩니다. 이 경우는 글보다는 이미지가 더 강조된 케이스입니다.
위의 사례와 같이 글과 이미지가 영역을 나누지 않고 같이 결합하되 이미지가 조금 더 강조되는 기법들을 이번 시간을 통해 말씀드리고자 합니다.
왜?
이런 기법을 사용할 경우는 아래의 4가지 경우에 해당됩니다.
글을 배치할 공간이 확보되지 않을 경우
이미지에 공간감과 입체감을 부여하고자 할 때
컨셉을 극대화하고자 하는 경우
오브젝트를 강조하고 싶을 경우
이 기법은 전반적으로 매거진의 헤더 이미지, 프로모션의 키 이미지 등에서 보던 LOOK & FEEL 스타일의 결과물이 생성됩니다. 그래서 컨텐츠 & 프로모션 디자이너들에게 좋은 영감을 줄 수 있었으면 하는 바람입니다.
그럼 위의 4가지 경우를 원본 이미지와 비교해 보고 어떤 식으로 적용되는지 알아보도록 하겠습니다.
사례 1.
글을 배치할 공간이 확보되지 않을 경우 사례입니다. 왼쪽 이미지는 오브젝트들이 화면 전체에 분산되어 있어 글을 쓸 영역을 확보하기가 어려운 형태입니다. 그래서 이미지의 배경과 오브젝트를 분리하여 그 사이에 글을 삽입하였습니다. 이때 오브젝트 뒤에 글이 있지만 글이 가려지더라도 읽히도록 배치하는 것이 중요합니다.
HOT CHILI PEPPER사례 2.
이미지에 공간감과 입체감을 부여하고자 할 경우 사례입니다. 마찬가지로 글을 배경과 오브젝트 사이에 배치하여 평면적인 이미지를 공간감 있게 바꾸어 줍니다. 이에 해당하는 몇 개의 사례를 보도록 하겠습니다.
2-1. 글의 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.
달고 신선하고 맛있고 영양만점2-2. 위와 같은 사례입니다. 오브젝트의 공간감이 더 풍성해지는 것을 확인하실 수 있습니다. 또한 반복을 통해 패턴화 배경으로 적용이 가능합니다. 글이 반복되므로 사용자는 어떤 내용인지 인지할 수 있습니다.
BLACK FRIDAY2-3. 글이 온전히 전부 전달되어야 할 경우 글의 일부는 오브젝트의 뒤로, 일부는 앞으로 배치할 수 있습니다.
겨울, 더 따뜻하게2-4. 배경과 오브젝트 사이가 아닌 하나의 오브젝트에서도 글을 삽입할 수 있습니다. 아래 이미지의 경우 머리카락과 피부 사이에 글(브랜드 명)을 배치하여 공간감을 주었습니다.
머리카락과 피부 사이로 삽입된 브랜드2-5. 오브젝트가 두 개 이상일 경우 둘 사이에 글을 삽입할 수 있습니다. 아래 이미지의 경우 남성과 여성 사이에 글을 배치하여 공간감을 부여했습니다. 여기에서 하나 더 주목할 부분이 가로로 확장된 알파벳 "O"입니다. 글이 온전히 읽혀야 하는 경우 글자를 아래와 같이 변형하여 사용할 수 있습니다.
SUMMER COLLECTION사례 3.
컨셉을 극대화하고자 할 경우 사례입니다. 바로 사례를 보도록 하겠습니다. 컨셉이 다이나믹한 액티비티라면 글을 아래와 같이 결합하여 오브젝트와 글이 마치 한 몸처럼 역동적으로 표현되게 할 수 있습니다.
SKI사례 4.
특정 오브젝트를 강조하고자 할 경우 사례입니다. 이 경우는 강조하고자 하는 오브젝트의 형태를 이용하여 적용하는 것이 핵심입니다. 아래 이미지는 핸드크림의 둥근 형태를 따라 글이 적용되었습니다. 이때 주의해야 할 점은 공간감을 부여하기 위해 단순이 감싸는 것이 자연스럽게 결합된 모습이 중요합니다. 다시 아래 이미지를 보시면 몇몇 글자는 손가락보다 뒤쪽으로 위치해 있습니다. 이런 디테일들을 놓치지 말아 주세요.
ORGANIC PURE CREAM이미지와 글을 조화롭게 결합해 보는 방법에 대해 몇 가지 사례를 통해 알아보았습니다. 다시 한번 언급하지만 정해져 있는 틀을 벗어나 글을 어느 곳에 어떻게 배치하느냐에 따라 때로는 놀라운 결과물들의 생성될 수 있습니다. 추가로 작은 디테일까지 챙긴다면 더욱 성장하는 디자이너가 될 수 있을 것입니다. 다음 시간에는 이미지 중심에서 벗어나 글만으로 구성된 화면에 대한 영감을 줄 수 있는 컨텐츠로 인사드리겠습니다.
읽어주셔서 감사합니다.
