Alarm 
My Page 
Favorites 
Dark Mode 
Youtube 
Instagram 
Twitter 
Facebook Column
작품 이미지를 매력적으로 어필하기 위한 5가지 가이드라인
김민오
| 2020-10-06 23:40
유료 웹툰 서비스는 이미지와 스토리로 구성된 제품을 판매하는 커머스 서비스입니다. 이런 이유로 다른 형태의 커머스 서비스보다 더욱 이미지에 대한 디자인 가이드라인이 중요한데요, 전 이번 기회를 통해 웹툰 서비스에서 이미지를 매력적으로 보이게 하려면 어떤 요소들이 필요한지 조사해보았습니다. 그리고 다음과 같은 가이드라인 5가지를 정리했습니다.
첫째, 작품의 성격을 명확하게 보여줄 것
작품 이미지가 작품의 성격을 명확하게 보여주고 있는지 체크해야 합니다. 여기서 작품의 성격이란 그림체와 분위기를 뜻합니다. 이 둘은 웹툰 서비스 사용자들이 작품을 선정할 때 큰 영향을 주기 때문이죠. 특히 작품 캐릭터들의 표정은 사용자들에게 작품의 그림체와 분위기를 암시하는데 큰 영향을 줍니다. 넷플릭스에서는 배우의 표정이 잘 보이는 영화 포스터의 클릭률이 높다는 테스트 결과를 공유한 적이 있었는데요, 웹툰에서는 작품 캐릭터들이 이와 같은 역할을 할 수 있을 것으로 보입니다. 이런 이유로 웹툰 플랫폼에서는 사용자들이 작품의 성격을 빠르게 파악할 수 있는 이미지 사이즈를 찾아야 합니다. 아무리 작품 이미지를 잘 만들었어도 이미지가 작다면 캐릭터의 표정 혹은 그림체가 잘 안 보여서 작품의 성격을 파악하기 어렵기 때문입니다. 추가로, 모바일에서 노출되는 이미지의 경우는 반드시 모바일 스크린에서 실제 사이즈로 확인하셔야 합니다. 데스크탑 모니터에서 작업한 작품 이미지의 인상과 모바일 스크린에서 보이는 작품의 인상은 매우 다르기 때문입니다.
둘째, 이미지 비율의 특징을 잘 살렸는지 확인할 것
작품 이미지의 내용이 이미지 비율 특성에 맞게 제작되었는지 체크해야 합니다. 작품 이미지의 비율에 따라 작품에서 느낄 수 있는 인상이 다르기 때문입니다. 작품의 비율은 크게 정사각형, 세로형, 가로형 이미지로 나눌 수 있습니다. 각 비율별 특징을 간단하게 설명드리자면 다음과 같습니다. 정사각형 이미지의 경우, 증명사진처럼 작품 캐릭터에 시선이 집중됩니다. 작품 캐릭터 이외의 배경이나 추가 정보를 제공할 수 있는 공간이 없기 때문이죠. 세로 이미지의 경우, 정사각형 이미지처럼 작품 캐릭터에 시선이 집중되는 특징은 동일합니다. 하지만 모바일 스크린에서 노출되는 면적이 정사각형 이미지보다 더 많기 때문에 더 많은 정보를 제공할 수 있는 장점이 있습니다. 마지막으로 가로 이미지의 경우, 작품 캐릭터에 대한 시선 집중도가 앞서 말한 2가지 이미지 비율에 비하면 떨어집니다. 좌우 공간이 넓기 때문에 시선이 배경으로 분산되기 때문이죠. 하지만 이런 특징 때문에 캐릭터가 처한 작품 내의 분위기를 암시하거나, 프로모션 텍스트 같은 추가 정보를 넣어야 하는 경우에는 다른 이미지 비율보다도 유용하게 사용될 수 있습니다. 이미지 비율에 대한 자세한 설명은 사진가 석창훈님의 글에서 확인 바랍니다.
셋째, 이미지 안의 정보 위계질서가 명확한지 확인할 것
작품 이미지 안의 정보 위계질서가 명확한지 체크해야 합니다. 이에 영향을 미치는 요소로는 작품 이미지의 사이즈와 비율 그리고 이미지를 구성하는 내용(캐릭터, 배경, 타이틀 로고, 텍스트 등)들이 있습니다. 사람들이 특정 그래픽을 볼 때 심미성이 높다고 생각하는 결과물들은 정보들의 위계질서가 잘 잡혀있습니다. 이미지 안에서 가장 중요한 정보, 그다음으로 중요한 정보, 중요도가 낮은 정보의 위계질서가 명확하게 표현되었다는 뜻이죠. 이는 시선의 흐름을 편안하게 만들어서 사용자들이 필요한 정보를 빠르게 인지하도록 유도합니다. 추가로, 앞서 언급한 이미지 비율에 따라 정보의 위계질서를 표현하는 방식이 달라지는데 이를 염두하여 작품 이미지를 제작해야 합니다.
넷째, 타이틀 로고의 가독성이 좋은지 확인할 것
작품 이미지 안에 타이틀 로고가 들어가는 경우, 타이틀 로고가 잘 보이는지 체크해야 합니다. 타이틀 로고 가독성에 영향을 미치는 것은 타이틀 로고의 컬러와 이미지 배경 컬러에서 나타나는 명암비, 타이틀 로고에 사용된 폰트의 굵기, 타이틀 로고의 사이즈가 있습니다. 특히 타이틀 로고와 이미지 배경 컬러가 비슷한 경우 로고와 컬러의 명암비가 낮아져서 시각적으로 구분하기가 어렵습니다. 예를 들어 타이틀 로고의 컬러는 파랑색인데, 이미지 배경 컬러는 하늘색인 경우를 들 수 있습니다. 이런 경우 타이틀 로고를 진한 검은색으로 바꾼다면 배경색과 구분이 되어 명암비가 높아지고 이는 작품 타이틀 로고를 읽을 수 있는 가독성 향상으로 이어집니다. 이외에도 타이틀 로고의 굵기, 사이즈 조절, 그림자 등의 효과를 통해서 타이틀 로고의 가독성을 높일 수 있습니다.
다섯째, 이미지 주위에 여백을 충분히 주었는지 확인할 것
작품 이미지 주위에 충분한 여백을 주었는지 체크해야 합니다. 잘 만든 작품 이미지라도 그 주위에 아무런 여백 없이 다양한 이미지들이 붙어있다면 시각적으로 숨을 쉴 수 있는 공간이 없습니다. 이런 이유로 사람들은 어떤 이미지에 집중해야 할지 알 수 없게 되고 작품 이미지는 주목을 받지 못하게 됩니다. 여백은 아무 의미없이 비어있는 공간이 아닙니다. 여백은 비움을 통해 이미지를 강조한다는 사실을 잊지 말아야 합니다.
지금까지 작품 이미지를 매력적으로 어필할 수 있는 요소들을 알아봤는데요, 최소 위의 5가지 가이드라인이 지켜진다면 작은 모바일 스크린 안에서도 작품의 매력을 최대화할 수 있다고 생각합니다. 이는 사용자들이 자신이 원하는 작품을 찾는데 큰 도움을 줄 것이고요. 웹툰 플랫폼 안에서 많은 작품들이 더 많은 사용자들에게 사랑받게 되는데 이 글이 도움이 되길 바랍니다. 이번 달은 여기까지 입니다. 감사합니다.
참고자료
구글 [웹사이트] URL: https://material.io/design/usability/accessibility.html#color-and-contrast
