랜딩페이지 히어로 이미지란 무엇인가요?
랜딩페이지 히어로 이미지는 페이지 맨 위에 크게 놓이는 비주얼입니다. 방문자가 가장 먼저 보는 요소이기도 합니다. 분위기를 정하고 제안을 보여 주며, 스크롤을 이어 갈지 말지를 좌우합니다. 비중이 큰 만큼 흔한 스톡 이미지로는 한계가 있습니다.
광고를 눌러 들어오는 랜딩페이지라면 더 그렇습니다. 광고 소재와 히어로 이미지의 분위기가 다르면 방문자가 바로 떠날 수 있습니다. 모바일로 들어오는 방문자가 많은 만큼, 세로 화면에서의 구도도 함께 설계해야 합니다.
Morphic에서는 라이브러리에서 빌려 오는 대신 내 페이지에 맞는 히어로 이미지를 생성합니다. 장면과 분위기, 헤드라인이 들어갈 자리를 설명하세요. 브라우저에서 시안을 만들고 맞는 것을 다듬어 HD로 내려받으면 됩니다. 가까운 사진을 고르는 것이 아니라 내 메시지에 맞는 이미지가 나옵니다.
글자 자리를 기준으로 구도 잡기
히어로 이미지는 헤드라인, 버튼과 한 화면을 나눠 씁니다. 카피가 놓일 자리를 먼저 정하고, 그 영역이 비도록 비주얼을 설계하세요. 이미지 한쪽에 여백을 요청하면 헤드라인이 잘 읽힙니다. 한글 헤드라인은 글자 폭이 넓으니 여백을 넉넉히 잡으세요.
장면과 분위기 설명하기
이미지에 무엇이 나오고 어떤 느낌이어야 하는지 Morphic에 알려 주세요. 밝고 에너지 넘치게, 차분하고 고급스럽게, 또는 힘 있고 극적으로 정할 수 있습니다. 피사체, 장소, 조명을 구체적으로 적으세요. 시안을 몇 가지 만들어 분위기를 비교한 뒤 정하세요.
브랜드에 맞게 다듬기
고른 시안의 색과 톤을 브랜드에 맞게 조정하세요. 팔레트, 조명, 스타일링을 조금씩 바꾸세요. 그러면 스톡 이미지를 끼운 느낌 대신 사이트의 일부처럼 보입니다. 방향이 거의 맞는다면 처음부터 다시 하지 말고 스타일만 바꾸세요.
페이지에 필요한 크기로 내보내기
히어로는 보통 가로로 넓은 PC용과 세로로 긴 모바일용이 따로 필요합니다. 두 비율 모두 피사체가 프레임 안에 들어오도록 조정하고, 각각 HD로 내려받으세요. 두 화면 모두 글자 자리가 비어 있는지 확인하세요.
같은 헤드폰 히어로를 반대쪽 글자 공간으로 구성한 두 버전입니다.
좋은 히어로 이미지의 조건
| 기준 | 의미 | 중요한 이유 |
|---|---|---|
| 카피 여백 | 헤드라인과 버튼을 놓을 깨끗한 공간 | 이미지 위에서도 메시지가 잘 읽힙니다 |
| 분명한 초점 | 눈이 가장 먼저 닿는 피사체 하나 | 방문자가 제안을 한눈에 이해합니다 |
| 브랜드에 맞는 톤 | 색과 분위기가 사이트와 어울립니다 | 페이지가 이어 붙인 것이 아니라 의도한 것처럼 보입니다 |
| 반응형 구도 | PC와 모바일 화면 모두에서 쓸 수 있습니다 | 어느 화면에서도 히어로가 안정적으로 보입니다 |
Morphic과 스톡 사진 비교
| Morphic | 스톡 사진 라이브러리 | |
|---|---|---|
| 비용 | 브라우저 툴 하나 | 이미지마다 라이선스 비용이 쌓입니다 |
| 시간 | 브라우저 한 번의 작업으로 맞춤 히어로 완성 | 비슷한 사진을 찾는 데 몇 시간 |
| 필요한 기술 | 명확한 프롬프트 작성 | 검색 능력과 맞추기 위한 편집 |
| 메시지와의 적합도 | 원하는 장면을 그대로 생성 | 가장 가까운 스톡 결과로 타협 |
자주 묻는 질문
카피가 놓일 쪽에 여백을 요청하세요. 글자 자리를 기준으로 구도를 잡으면 복잡한 배경과 다투지 않아 헤드라인이 잘 읽힙니다.
한글 헤드라인은 글자 폭이 넓어 영문보다 자리를 더 차지하는 경우가 많습니다. 글자를 올릴 쪽에 여백을 넉넉히 요청하세요. 실제 헤드라인을 얹어 보고 모자라면 여백을 늘려 다시 생성합니다. 글자는 이미지 안에 넣기보다 페이지에서 텍스트로 얹는 편이 고치기 쉽습니다.
네. Morphic으로 만든 히어로 이미지는 마케팅 페이지와 캠페인에 게시할 수 있습니다.
네. 생성한 이미지의 팔레트와 톤이 브랜드와 맞을 때까지 다듬으세요. 방향이 거의 맞는다면 처음부터 다시 하지 말고 색과 조명만 조정하면 됩니다.
대개 그렇습니다. PC용 가로 이미지와 모바일용 세로 이미지를 각각 내려받으세요. 어느 화면에서도 피사체가 프레임 안에 들어오고 글자 자리가 비어 있습니다.
HD로 내려받으면 큰 화면과 고해상도 디스플레이에서도 선명합니다. 처음부터 깨끗하게 생성해야 크기를 바꿔도 품질이 유지됩니다.