여전히 효율적인 콘텐츠, 이미지
천 개의 단어보다 한 개의 이미지라는 말처럼, 웹사이트의 랜딩페이지와 기타 구성 페이지에서 이미지는 여전히 중요하게 쓰이는 요소 중 하나입니다. 전체이미지로 쓰이기도 하고, 부분적인 썸네일로 쓰이며 방문자 또는 사용자에게 원하고자 하는 내용을 전달하는데 있어 가장 중요한 역할을 하기 때문입니다. 이미지의 활용 방법은 수없이 많이 존재하겠지만, 오늘은 그 중에서도 웹디자인에서 이미지를 활용하는 다섯가지 주요 방법을 정리해보고자 합니다.
1.상황과 맥락에 맞는 이미지의 활용
위의 이미지는 차례대로 국내의 여행 및 아웃도어 스타트업인 ‘마이리얼트립’과 ‘와그’의 웹사이트 메인페이지입니다. 각각 여행과 아웃도어 활동이라는 컨셉에 맞는 이미지를 활용하고 있는데요! 서비스와 적합한 이미지만을 구체적으로 활용하는 것도 좋지만, 위의 사례와 같이 카피를 함께 곁들여 주는 것도 하나의 방법이 될 수 있습니다. 사람들이 랜딩 또는 접속하는 순간 추가적인 행동을 할 필요 없이 어떤 서비스인지를 파악할 수 있기 때문이죠. 또한 더 살펴보고 싶다는 생각과 행동을 유도할 수 있는 좋은 장치가 되기도 합니다.
2.무엇을 말하고자 하는지, 명확한 이미지의 활용
위의 내용은 신형 맥북 프로를 설명하는 상세페이지의 첫 번째 이미지입니다. 보통 노트북 제품을 설명하는 페이지를 보면 해당 제품의 외관이나 전체 모습을 살펴볼 수 있는 이미지를 배치하는 경우가 많은데요! 맥북 프로의 경우 신형에서 추가된 터치바의 모습을 가장 먼저 보여주며, 특징을 상세히 설명해주고 있었습니다. 커머스에서 제품을 구매하는데 있어 상세페이지는 ‘구매’라는 ‘전환율’에 상당히 중요한 영향을 끼치기 때문에 위와 같이 보여주고자 하는 것에 ‘초점’이 잘 맞춰진 이미지를 활용하는 것은 정말 중요합니다.
3.’진짜’ 사람이 나온 이미지의 활용
위의 이미지는 ‘카카오드라이버’의 웹사이트 속 이미지이며, 아래의 이미지는 ‘세탁특공대’의 웹사이트 속 이미지입니다. 두 이미지의 가장 큰 ‘차이’는 바로 ‘진짜’사람이 등장하느냐의 여부인데요! 비록 광고모델이긴 하지만 ‘카카오드라이버’의 경우 서비스를 대표하는 모습으로 사람이 등장하는 반면, ‘세탁특공대’의 경우 어디에나 쓸 수 있는 ‘일반적인’ 사람이 등장하는 스톡이미지를 활용하고 있었습니다. ‘사람’이 포함된 이미지를 활용할 경우, 서비스와 깊게 연관되거나 방문자 또는 사용자들에게 좋은 인상을 심어줄 수 있어야 합니다.
만약, 세탁특공대가 (세탁계의 우버라는 이름으로 화려하게 등장해 초라하게 서비스를 종료했지만) 워시오처럼 실제 서비스와 관련된 사람들의 이미지를 활용했다면 더욱 끌리는 모습이 되지 않았을까 싶네요.
4.고화질의 이미지 활용하기
최근에 이런 사례는 많이 사라졌지만, 고화질의 이미지를 잘 확인하고 사용하는 것 역시 중요합니다. 고화질의 이미지는 필수로 활용하다는 가정하에 한 가지 더 확인해야 할 내용이 있다면, 웹 뿐만아니라 다양한 디바이스에서 접근 가능한 앱이나 모바일 웹에서 역시 최적화된 상태로 보여지느냐가 아닐까 싶네요. 페이지 로딩 속도에도 영향을 끼칠 수 있기에 더더욱 말이죠. 고화질의 이미지를 ‘최적화’된 상태로 활용하는 것! 반드시 확인하고 넘어가야 할 내용 중 하나입니다.
5.개성이 담긴 이미지의 활용
서비스 및 제품을 설명하는데 있어, 개성이 담긴 이미지를 활용하는 것 또한 좋은 방법이 될 수 있습니다. 첫 번째로 소개드렸던 ‘상황과 맥락에 맞는 이미지의 활용’과는 또 다른 느낌을 줄 수 있기 때문이죠. 위의 이미지는 ‘Intercom’의 서비스 소개 이미지의 일부분으로 그림을 활용하여 자신들의 서비스를 재치있게 설명해주고 있었습니다. 어떤 상황에서 어떻게 활용이 가능한지를 그림(일러스트)을 활용해 단계별로 설명해준다면, 조금더 쉽게 이해할 수 있고 서비스에 대한 좋은 인상을 심어줄 수 있지 않을까 싶네요!
함께 보면 좋은 내용
