–

히어로 이미지는 서비스를 대표하는, 연관성 있는 모습을 보여줄 수 있는 중요한 역할을 합니다. 궁금증을 불러 일으킬 수도 있고, 강조하고 싶은 하나의 메시지를 담을 수도 있는 히어로 이미지는 사용자가 아래로 이어지는 웹사이트 구성에 대한 전개를 미리 예상할 수 있도록 도와주기도 합니다. 역으로, 히어로 이미지가 서비스나 브랜드 이미지에 대한 사용자의 기대와 일치하지 않거나, 전반적인 맥락과 다른 경우 사용자에게 혼란을 줄 수도 있습니다.

그럼, 다른 서비스들은 히어로 이미지를 어떻게 활용하고 있을까요? 오늘은 실제 서비스, SaaS에 적용된 히어로 이미지 사례를 볼 수 있는 곳을 소개하고자 합니다.

–

이곳에 들어가면, 하나의 리스트로 구성된 다양한 서비스의 히어로 이미지를 ‘큼직’하게 확인할 수 있습니다. 히어로 이미지를 제공하기 위해 따로 만들어진 공간은 아니며, ‘Draftss’라는 웹사이트 빌더와 그래픽 이미지 제작 기능을 제공하는 곳에서 편의를 위해 만든 곳입니다. 웹사이트 구성을 위해 다양한 요소를 고민하게 되는데, 이런 고민을 덜 수 있는 가장 좋은 방법이 레퍼런스를 제공하는 방법이기 때문입니다. 피그잼이나 미로 등이 다양한 템플릿을 제공해 시작 전 고민의 시간을 줄여주는 것과 같은 맥락이라고 할 수 있어요.

서비스 카테고리나 이름 등을 리스트에서 볼 수 없는 것이 아쉽고, 화면 구성 역시 단순하지만 등록된 히어로 이미지 사례만큼은 꽤 다양합니다. 얼마전 소개한 ‘다크모드가 적용된 웹페이지를 큐레이션 해주는 곳!‘과 같이 우리가 직접 하나씩 찾는데 필요한 시간을 단축시킬 수 있다는 점에서 유용한 역할을 해준다고 생각합니다.

상세화면으로 이동하면, 더 자세한 히어로 이미지의 모습을 살펴볼 수 있습니다. 히어로 이미지만 있었다면 이렇게 디자인하고 배치한 이유를 파악하는데 시간이 필요했을 텐데 다행히(?) 서비스 소개 내용도 함께 제공하고 있어, 왜 이런 히어로 이미지를 활용하고 있는지에 대해 조금 더 빠르게 확인할 수 있습니다.

예를 들어 위의 이미지는 to-do list 서비스로 히어로 이미지 내 서비스에 대한 주요 특징과 주요 화면을 담고 있습니다. 우리에게 익숙한 to-do를 어떻게 더 편리하게 쓸 수 있는지에 초점을 맞춘 것을 알 수 있는 모습이기도 합니다.

정확한 수는 나와있지 않지만, 제가 처음 접했을 때 꽤 많은 히어로 이미지를 봤기에 충분히 도움이 될 수 있는 공간이라는 생각이 듭니다. 꾸준히 업데이트할 예정이라고 하니, 히어로 이미지에 대한 사례와 정보가 필요하다면 한 번씩 활용해보시면 어떨까 싶네요! 더 자세한 내용은 ‘링크’를 참고해주세요!

–

Post Views: 50

RELATED ARTICLESMORE FROM AUTHOR