상세페이지 디자인
상세페이지 디자인을 하는 ‘콘텐츠 디자이너’ 이해하기
상세페이지 디자인 관련된 내용을 포함하여, 디자이너란 직업은 알면 알수록 끝도 없이 세분화가 가능한 직업인 것 같습니다. 그래픽 디자이너, 산업 디자이너, 패션 디자이너, 인테리어 디자이너, 공예 디자이너 등 큰 카테고리만 봐도 디자인이 얼마나 생활과 산업 곳곳에 적용되는지 알 수 있습니다. 특히나 SNS와 모바일 결제가 활성화되면서 ‘웹디자인’ 영역이 더욱 확장된 것으로 보입니다. (혹은 영역 간의 경계가 흐릿해지는 것일 수도 있겠습니다.) 웹디자인은 웹사이트에서 콘텐츠를 계획하고 배열하여 미적 요소와 기능적 요소를 결합하는 분야인데요. 요즘은 웹디자인의 다른 분야보다 SNS와 스마트 스토어에 필요한 상세페이지, 배너, 이벤트 페이지 등을 만드는 ‘콘텐츠 디자인’이 더욱 부각되고 있습니다.
콘텐츠는 고객에게 메시지를 빠르고 명확하게 전달할 수 있어야 하므로 가시성이 매우 중요합니다. 디자인은 내용 작성을 넘어 사용자의 요구를 파악하고 사용자의 경험까지 충분히 이해해야 하죠. 짧은 시간에 많은 내용을 제공해야 하기 때문에 어쩌면 더욱 까다로운 작업이라고 말할 수 있을 것 같습니다.
비티와이플러스는 와디즈 공식 파트너로 지정되기 전부터도, 수많은 프로젝트를 기획하고 만들어 왔습니다. 기획자들이 머릿속으로 구상하던 이미지가 결과물로 나올 때마다 디자이너의 능력에 경의를 표해왔습니다. 이렇게 멋진 콘텐츠 디자인을 구현하는 비티와이플러스의 디자이너를 만나 그가 일하는 방식에 대해 물어봤습니다.
상세페이지 디자이너의 중요한 업무적 스킬
Y : 당연하게 들릴 수 있지만, 툴을 자유자재로 다루는 능력이 아닐까 생각합니다. 콘텐츠 디자이너는 클라이언트나 기획자가 원하는 특정 효과부터 제품을 강조하기 위한 합성까지, 포토샵과 일러스트레이터 이외의 다양한 툴을 효과적으로 다룰 필요가 있습니다. 또한 이미지의 비율, 그리드 시스템, 타이포그래피 등 디자인 전반에 대한 이해가 있어야 일정한 퀄리티의 상세페이지 디자인을 도출할 수 있죠. 비티와이플러스에서는 콘텐츠 디자이너가 접하는 기획서의 볼륨이 크기 때문에 기획서를 이해하고 흐름을 읽는 능력 또한 중요하다고 생각합니다.
디자이너에게 필요한 사회적 스킬
Y : 콘텐츠 디자이너를 포함한 모든 디자이너에게 필요한 사회적 스킬은 바로 ‘대화’입니다. 디자이너는 기획자와 클라이언트와 소통을 할 일이 많은데요. 단순히 심미적인 디자인만 바란다면 크게 중요하지 않지만, 콘텐츠 디자이너가 제작하는 콘텐츠들을 보통 기업, 제품, 문화 등의 홍보를 위해 미디어나 웹상에서 보이는 시각적인 결과물입니다. 따라서 클라이언트와 원활한 커뮤니케이션을 통해 소구하는 포인트가 어떤 것인지 파악하고 전체적인 무드, 키 컬러, 폰트, 레이아웃 등 기획 의도에 맞는 디자인 방향성을 수립하고 진행할 필요가 있습니다. 또한 도출된 상세페이지 디자인이 어떤 의도를 가지고 제작되었는지 설명할 수 있는 능력 또한 요구된다고 생각합니다.
시야를 확장하기 위한 노력
Y : 확장된 시야를 갖기 위해 핀터레스트, 비핸스 등을 수시로 탐색합니다. 디자인 관련 전시 또한 필수죠. 그외에 타이포그래피 서적, 타 브랜드 상세페이지를 보며 전체적인 레이아웃 구성을 공부합니다. 어떤 부분들을 클라이언트와 접목시킬 수 있을지 고민하는 편입니다. 해외 디자인 유튜브를 참고하며 더욱 빠르고 효과적인 디자인 방식을 배우기도 합니다.
콘텐츠 디자이너로 항상 갖고 있는 생각이나 질문
Y : 기획자의 의도에 맞게 효과적으로 디자인하고 표현하는 방식을 끊임없이 고민합니다. 또한 어느 플랫폼에서 보든 비티와이플러스가 만든 것이다! 라고 알 수 있는 시그니처 디자인을 어떻게 구축할 수 있을지에 대한 고민도 하고 있습니다.
비티와이플러스 콘텐츠 디자이너의 도구 모음
그렇다면 콘텐츠 디자이너가 주로 사용하는 툴은 무엇이 있을까요? 기획자인 저는 디자인과 툴에 문외한이지만 디자인을 고민하고 그것을 표현하기 위한 툴을 다루는 일이 결코 쉽지 않다는 것을 알고 있습니다. 파트너와 기획자가 원하는 바를 두 손으로 캔버스에 그려내는 마술사 같은 존재, 비티와이플러스의 디자이너가 콘텐츠를 제작하며 사용하는 툴 일부를 소개합니다.
Generative Fill
포토샵의 AI 기능 중 Generative Fill 이 최근 새로 업데이트되었습니다. 현재 아주 유용하게 사용하고 있는 툴인데요. 기존에는 이미지를 늘리거나 합성하는 방법으로 수정했는데, Generative Fill 은 프롬프트에 하고 싶은 작업을 입력만 하면 손쉽게 변형하거나 추가할 수 있어 매우 간단합니다. 하지만 간혹 엉뚱한 이미지가 튀어나와 당황스럽기도 하죠. 그래도 AI 기술이 정말 많이 발전했구나, 느낄 수 있었습니다.
위 이미지의 여백이, 아래처럼 채워집니다.
색상 조합
상세페이지 디자인을 할 때, 파트너의 ‘아이덴티티’ 또는 ‘패키지’가 명확할 때에는 색상 조합을 사용하기 쉽지만, 반대의 경우에는 비주얼 컬러를 뽑기 어려울 때가 간혹 있습니다. 그럴 경우 촬영 무드에 톤을 맞추거나 임의의 색상을 뽑는 경우가 있는데 이때 사용하는 것이 바로 ColorHunt 와 ColorSpace 사이트입니다. ColorHunt의 경우 무드에 맞는 색 조합을 찾기 쉽고, ColorSpace 의 경우에는 ColorPicker 기반의 색상 조합을 찾을 수 있어 상황에 따라 맞춰 활용하고 있습니다.
GIF 효과
프리미어나 애프터 이펙트처럼 다양한 효과를 자유자재로 활용할 수는 없지만, 포토샵에서도 충분히 임팩트를 줄 수 있습니다. 콘텐츠에서 강조하고 싶은 부분에 사용한다면 자칫 단조로울 수 있는 상세페이지 디자인을 더욱 완성도 있게 표현할 수 있습니다.
3D GIF 효과
제품의 특성에 따라 다양한 표현을 만들어낼 수 있지만 간혹 파트너의 요청으로 인하여 3D 오브젝트를 만들어야 하는 경우가 발생합니다. 이때는 작업의 속도가 다소 느려지기는 하지만 완성을 했을 때 퀄리티가 올라감과 동시에 제품의 소구점을 완벽하게 표현했다는 것에 보람을 느끼곤 합니다.
폰트
디자인에 많은 영향을 끼치는 요소 중 하나는 바로 폰트입니다. 글꼴에 따라 콘텐츠의 무드가 180도 달라진다고 말할 수 있는데요. 명조, 고딕, 스크립트 등 다양한 글꼴이 있으며 어떤 폰트에 사용하느냐에 따라 때로는 감성적이게, 때로는 모던하면서 깔끔한 디자인을 연출할 수 있습니다. 폰트 사용시에는 저작권 허용 범위를 반드시 숙지하고 사용해야 문제를 미연에 방지할 수 있습니다.
상세페이지 제작 관련된 더욱 자세한 내용은 ‘와디즈 상세페이지 제작’ 글을 참고해주세요 :)
