매력적인 히어로 페이지를 위한 7가지 방법(3)
딤드(Dimmed)가 모든 것을 해결해주지는 않습니다.
목차
1. 글과 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 글 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 글 결합해 보기
5. 글만으로 표현해 보기
6. 글의 흐름에 이미지 결합하기
7. 이미지를 글로 마스킹하기
두 번째 주제입니다. 이미지를 딤드(Dimmed) 하는 기법은 배경 이미지의 부분 혹은 전체에 반투명 레이어를 레이어드 후 글을 배치하는 기법을 말하며 가장 큰 사용 목적은 효율성입니다. 배경이 되는 이미지가 교체되더라도 디자인을 다시 할 필요가 없이 현재 사용하는 형식을 그대로 쓸 수 있기 때문입니다. 아래의 형태가 해당되며 이미 수많은 사이트에서 사용 중인 방법이기도 합니다.
키비주얼에 딤드 기법을 활용한 사례위의 이미지를 보고 공통점을 느끼셨나요? 딤처리를 하더라도 글이 표시되는 배경 부분은 단색 혹은 가장 단조로운 부분(왼쪽부터 치마, 니트, 아우터)을 배치하고 있습니다. 다시 한번 위의 이미지를 봐주세요.
이렇듯 어떤 배경 이미지를 넣더라도 표현이 가능하도록 쓰이긴 하지만 딤드 기법이 만능은 아닙니다. 바로 이미지와 글의 밸런스 문제입니다. 글의 가독성에 포커스를 맞출 경우 이미지의 시인성과 개성이 사라지게 되는 경우가 그러합니다. 아래의 이미지를 통해 확인 가능합니다.
원본의 깨끗한 느낌이 사라짐위의 이미지의 경우 20% 정도의 투명도는 가독성 측면에서 위험합니다. 위와 같이 흰색에 가까운 배경을 가진 이미지는 글의 가독성을 위해 딤드 50% 이상의 투명도가 필요합니다.(투명도가 높을수록 글이 잘 보임) 하지만 원래 이미지가 갖고 있던 깨끗함이 많이 퇴색되었습니다. 이미지가 글을 위해 어느 정도의 희생을 한 셈이죠. 부분 딤이 아니고 전체 딤을 할 경우 이 문제점은 더 눈에 띄게 나타납니다. 아래 이미지를 보겠습니다.
글의 가독성을 위해 파스텔톤 이미지의 정체성이 퇴색되어 전부 어둡게 보임위의 사례에서 예상할 수 있듯이 특히 PC 버전일 경우 한 페이지에 딤처리 이미지가 8장, 12장 정도 동시에 보일 경우를 상상해 보세요. 전부 어두운 비슷한 이미지가 반복이 되겠죠? 색감이 좋지 않음은 물론 컨텐츠 간의 변별력 또한 무너지게 됩니다. 결국 연하게 딤처리를 할 수밖에 없는데요. 그러기 위해서는 간결한 부분을 찾아 글 뒤의 배경으로 위치시키거나 단조롭게 만들어서 배치해야 합니다. 이 원리를 적용하여 딤드 기법을 사용할 경우 정리되어 보이고 글의 가독성 또한 확보가 되는데 크게 4가지 방법(지향점)이 있습니다.
딤드 표현의 4가지의 방법(지향점)
피사체를 제외한 배경의 명도를 어둡게 해 주세요.
피사체에 배경의 톤을 맞추어 주세요.
피사체와 글이 겹치지 않게 해 주세요.
복잡한 배경 사진일 경우 구성요소 및 색상요소를 줄여주세요.
사례 1.
당연하게도 흰 글씨 색상이 주로 쓰이므로 배경의 명도를 어둡게 해 주시면 좋습니다. 여기서 핵심은 피사체는 그대로 두는 것입니다. 이미지 전체를 어둡게 하여 피사체를 왜곡하면 안 됩니다. 아래 사례를 보도록 하겠습니다. 우선 원본 이미지입니다.
원본 이미지위의 원본 이미지를 가공해 보겠습니다. 왼쪽이 이미지 전체를 어둡게 하였고 오른쪽은 배경만 어둡게 하였습니다. 배경만 어둡게 한 경우 원본이 같은 피사체의 색감과 피부톤등을 유지할 수 있습니다.
전체를 어둡게 / 배경만 어둡게위에서 가공한 오른쪽 이미지로 이제 딤드 + 글을 적용하면 아래와 같습니다. 미세하지만 원본과 글의 가독성 차이를 느껴보세요.
유사사례
원본(좌)에서 배경만 어둡게 가공한 유사사례사례 2.
때로는 글이 배치되는 부분의 피사체와 배경의 톤을 맞추어 주세요. 경계가 모호해 지므로 글이 더 눈에 잘 들어옵니다.
원본(좌) / 배경을 피사체 톤에 맞추어 가공(우)유사사례 1.
원본(좌) / 배경을 피사체 톤에 맞추어 가공(우)유사사례 2.
원본(좌) / 배경을 피사체 톤에 맞추어 가공(우)사례 3.
가능하다면 피사체와 글이 겹치지 않게 해 주세요. 글의 더 가독성이 뚜렷해집니다.
오른쪽을 지향유사사례 1.
오른쪽을 지향유사사례 2.
오른쪽을 지향사례 4.
복잡한 배경 사진일 경우 최대한 간결한 부분을 글이 배치되는 곳에 배치해 주세요.
오른쪽(간결한 부분(물결)을 글의 배경으로 배치)을 지향유사사례
오른쪽(요소가 적은 간결한 부분을 글의 배경으로 배치)을 지향딤드 표현은 극적으로 완성도가 좋아진다기보다는 작은 미세한 노력들이 합쳐져 하나의 큰 완성도를 이루게 됩니다. 만약 그동안 내가 했던 디자인은 왜 세련되지 못하지?라고 의문을 품으시는 분들은 이러한 세심한 부분을 신경 써서 디자인해보세요. 완성도는 반드시 올라갈 것입니다.
다음 주제인 이미지만으로 구성해 보기 편으로 다시 찾아뵙겠습니다. 다음 편은 스토리텔링에 관한 이야기가 주를 이룰 예정입니다. 읽어주셔서 감사합니다.
