매력적인 히어로 페이지를 위한 7가지 방법(1)
텍스트와 이미지를 결합하는 7가지 방법
사이트를 접속하자마자 보이는 첫 화면은
그 기업의 첫인상입니다.
많은 스타트업 기업들이 치열한 경쟁을 하고 있는 시대입니다. 그들은 유/무형의 서비스를 통해 고객에게 새로운 경험을 제공하고 성장하고 있습니다. 이러한 기업들에게 제공하는 서비스만큼 중요한 것이 있습니다. 바로 기업을 소개하는 것인데요. 이들은 웹사이트를 통해 투자자 혹은 사용자들에게 본인들의 정체성과 비전, 철학 등을 소개하고 있습니다. 기업 소개 사이트를 접속하자마자 보이는 첫 화면은 그 기업의 모든 것을 함축한 내용으로 구성되며 일종의 첫인상과 같은 역할을 하게 됩니다.
히어로 이미지란
바로 이 시점에서 키워드 하나가 등장합니다. 바로 히어로 이미지인데요. 이것은 웹 페이지, 앱 또는 프로모션 등의 첫 화면 또는 주요 화면에서 사용되는 큰 크기의 주목을 끄는 이미지를 뜻합니다. 브랜드 디자인 관점의 키 비주얼과 유사한 개념인데요. 히어로 이미지는 사용자의 시선을 끌고 제품, 서비스 또는 컨텐츠에 대한 주요 메시지를 전달하는 데 사용됩니다. 일반적으로 웹사이트를 접속했을 때 처음 보이는 "가장 큰 이미지 + 카피라이팅"의 조합으로 보시면 됩니다.
그렇다면 히어로 이미지 영역의 대표적인 표현 방법 7가지를 사례를 통해 알아보도록 하겠습니다.
사례 1. 이미지와 텍스트의 균등 분할
가장 일반적으로 많이 활용되는 표현 방법으로써, 텍스트와 이미지가 균등하게 배분한 표현 사례입니다.
텍스트와 이미지가 균등하게 배분된 리디와 스포카의 히어로 이미지 영역사례 2. 딤드 이미지와 레이어드 텍스트
딤드(Dimmed) 이미지(동영상)와 레이어드 텍스트로 결합한 표현 사례입니다. 이 방법 또한 많이 쓰이고 있습니다.
딤드(Dimmed) 이미지와 레이어드 텍스트로 결합한 원티드와 우아한 형제들의 히어로 이미지 영역사례 3. 텍스트만 사용
텍스트만으로 표현하는 사례입니다.
텍스트만으로 표현한 왓차와 오늘의 집의 히어로 이미지 영역사례 4. 이미지(동영상)만 사용
이미지(동영상)만으로 표현하는 사례입니다.
이미지(동영상)만으로 표현한 하이브와 플러스엑스의 히어로 이미지 영역사례 5. 텍스트 흐름 안에 이미지
텍스트 중심으로 이미지를 자연스럽게 결합하여 표현한 사례입니다.
텍스트 흐름 안에 이미지가 자연스럽게 포함되게 표현한 크래프톤의 히어로 이미지 영역사례 6. 이미지 중심의 텍스트 결합
이미지를 중심으로 텍스트를 자연스럽게 결합하여 표현한 사례입니다.
이미지를 중심으로 텍스트를 자연스럽게 결합하여 표현한 사례, 출처 https://www.behance.net/gallery/111969951/Universidad-Elite사례 7. 텍스트 마스킹 표현
이미지를 텍스트로 마스킹하여 표현한 사례입니다.
이미지를 텍스트로 마스킹한 사례, 출처 https://codemyui.com/svg-text-mask-video-background/어떤 표현 방법을 사용해야 할까?
텍스트와 이미지를 결합하여 표현하는 대표적인 방법과 사례 7가지를 보았습니다. 히어로 이미지는 어떤 방법으로 표현하느냐에 따라 사용자가 받는 느낌이 달라지게 됩니다. 같은 메시지를 전달하더라도 그러므로 가장 효과적인 표현 방법을 찾고 적용하는 것은 매우 중요합니다. 이번 언재를 통해 가장 적합한 표현 방법에 대해 고민해 보고 실제로 실무에 응용까지 해볼 수 있는 마인드셋이 되는 계기가 되었으면 합니다.
위의 사례를 바탕으로 전부 7차례에 걸쳐 히어로 이미지의 목적에 맞는 표현 방법에 대해 연재하도록 하겠습니다. 목차는 다음과 같습니다.
1. 텍스트와 이미지를 균등하게 배치해 보기
2. 딤드(Dimmed) 이미지와 텍스트 레이어드
3. 이미지만으로 구성해 보기
4. 이미지 중심의 텍스트 결합해 보기
5. 텍스트만으로 표현해 보기
6. 텍스트의 흐름에 이미지 결합하기
7. 이미지를 텍스트로 마스킹하기
다음 연재 글은 목차의 첫 번째 내용으로
1. 텍스트와 이미지를 균등하게 배치하는 여러가지 방법
에 대해 글을 기재하도록 하겠습니다. 감사합니다.
