이커머스 콘텐츠 디자이너는 무슨 일을 할까?
글ㅣLynn 이커머스 콘텐츠 디자이너
이커머스 콘텐츠 디자이너는 무슨 일을 할까?
일자
상시
유형
아티클태그
이 아티클은 <그 디자이너 선배의 포트폴리오> 시리즈의 2화입니다.
안녕하세요, 저는 7년 차 이커머스 콘텐츠 디자이너 Lynn입니다. 이커머스 콘텐츠 디자이너는 연차별로 어떤 업무를 하는지 제 경험을 기반으로 소개해 드리려고 해요. 이번 화에서는 1년 차 신입사원 시절의 업무를 소개해 드릴게요.
안녕하세요, 저는 7년 차 이커머스 콘텐츠 디자이너 Lynn입니다. 이커머스 콘텐츠 디자이너는 연차별로 어떤 업무를 하는지 제 경험을 기반으로 소개해 드리려고 해요. 이번 화에서는 1년 차 신입사원 시절의 업무를 소개해 드릴게요.
이커머스란 쿠팡, 오늘의집, SSG, 11번가 등 온라인 마켓을 의미하는데요, 이러한 온라인 마켓은 오프라인 마켓과 다르게 한정된 스크린 안에서 상품을 구성하고 어필해야 합니다. 또한, 오프라인처럼 실물에 대한 제약이 없기 때문에 빠른 주기로 마케팅/콘텐츠에 변화를 주기에도 용이하죠. 따라서 월간으로 업데이트되는 크고 작은 마케팅/콘텐츠 수량은 몇백여 건에 육박하게 됩니다. 이러한 콘텐츠들이 사용자에게 최종적으로 노출되기 위해 시각물이 필수적이기 때문에 콘텐츠 수량과 동일한 수량의 디자인을 제작하고, 콘텐츠 비주얼 퀄리티, 통일성, 사용성 관리가 필요합니다. 이러한 업무를 담당하는 직무가 이커머스 콘텐츠 디자이너이고요.
첫 퀘스트, 메인 배너를 운영하다
신입사원으로 입사한 첫 해, 저에게 주어진 업무는 온라인몰의 메인 배너를 제작하고 운영하는 것이었어요. 당시 온라인몰의 메인 배너는 <그라데이션 배경 + 상품 누끼 + 브랜드 캐릭터>를 활용하는 제작 가이드가 있었는데요. 꽤나 다양한 요소가 섞여야 해서 마치 입시 미술의 기초 디자인과 비슷한 맥락으로 레이아웃 기본기를 다질 수 있었습니다.
이러한 가이드로 작업하며 몇 개월이 지난 시점에, 메인 배너의 텍스트 위치와 영역 사이즈가 변경되는 업데이트가 생겨 새로운 메인 배너 가이드를 수립해야 했습니다. 여러 테스트를 거쳐 <기존의 누끼형 가이드에서 실사 연출컷을 활용하는> 가이드로 변경하게 됐어요. 메인 배너의 텍스트와 주요 오브젝트가 겹치지 않는지, 메인 배너 비율에 맞게 실사 연출컷 이미지가 적절하게 크롭됐는지 정도의 검수만 진행하면 됐기에 이전처럼 메인 배너를 팀 내부에서 제작하지 않고, 연출컷 이미지를 수급 받아 디자인 협력사에 의뢰하는 프로세스로 바뀌었습니다. 저는 디자인 협력사의 작업물을 검수하고 피드백하는 업무로 이전보다 여유가 생겨 새로운 업무를 추가로 맡을 수 있었어요.
그리고 최근 생성형 AI가 실시간으로 발전하고 있어 배너 제작의 리소스가 더 줄어들었습니다. 이전에는 배너 비율에 맞지 않거나 이미지 해상도가 너무 작은 경우 새로운 이미지로 재수급을 요청하고 다시 제작해야 하는 프로세스였다면, 이제 어도비 포토샵의 생성형 확장과 같은 AI 툴을 활용해 이미지를 늘리고, 삭제하고 싶은 요소를 없애는 정도는 간단하게 해결할 수 있게 됐어요. 예전보다 단순 이미지 작업에 대한 리소스를 확보할 수 있게 돼 좀 더 고민이 필요한 업무에 팀 리소스를 집중 투입할 수 있었죠.
비약적인 그래픽 역량을 쌓을 기회, 상품기획전
1. 디자인 콘셉트 기획과 레퍼런스 수집
다시 저의 1년 차로 돌아가 볼게요. 메인 배너 운영 업무가 줄어들며 ‘상품 기획전’ 디자인 업무를 추가로 맡게 되었어요. 상품 기획전은 MD나 BM이 한 가지 주제로 여러 상품을 엮어 소개하는 말 그대로 ‘상품 기획전’이에요. 여러분도 온라인몰에서 ‘겨울맞이 패딩 기획전’, ‘올해 크리스마스 집 꾸미기’ 등과 같은 타이틀로 접해본 기억이 있으실 거예요. 디자이너는 이러한 기획을 문서로 전달받아 기획에 맞는 비주얼적인 연출을 고민하고, 사용자에게 보이는 페이지 시안을 제작하는 업무를 담당합니다.
저는 기획서를 받으면, 가장 먼저 2-3개 정도의 비주얼 키워드를 도출했어요. 그리고 이 키워드를 핀터레스트(Pinterest)나 비핸스(Behance)와 같은 디자인 사이트에 검색해 레퍼런스를 서치했습니다. 레퍼런스를 서치하다 보면 눈을 사로잡는 멋진 그래픽 작업물이 많아 이것 저것 담아 레퍼런스 창고가 너무 방대해지기 쉬운데요. 그렇게 되면 실제 제 작업물에 코어가 없이 단순히 좋아 보이는 것들로 덕지덕지 채워지게 되더라고요. 저는 디자이너의 역할은 기획을 연출적으로, 비주얼적으로 극대화해 표현해 주는 것이라고 생각하기 때문에, ‘비주얼 기획’을 통해 한 가지 콘셉트를 정했다면 그 콘셉트를 표현해 줄 스타일을 골라내 레퍼런스도 동일한 톤앤 매너로 수집하는 게 좋다고 생각합니다. 그래야 내 결과물도 코어가 명확한 결과물이 되고요.
초반에는 내 비주얼 기획의 방향성이 맞는지 헷갈릴 수 있어요. 그럼 혼자 고민하지 말고, 바로 선임에게 달려가세요! 내가 옳고 그른지 평가 받기 두렵고 창피하다는 이유로, 스스로 완벽하다고 느껴지면 그제야 컨펌을 요청하는 경우가 많은데요. 초반 기획부터 확인 받고 시작하면 수정할 부분이 적어지기 때문에 비교적 수월하게 주어진 일정 내 시안을 완성할 수 있습니다. 제 경우 선임께 “제가 해당 기획을 이런 레퍼런스와 같은 비주얼로 풀어보려고 하는데 맞는 방향일까요?’ 도움을 요청하면 본인 레퍼런스 창고에서 더 나은 방향성을 찾아 보여주시거나, 방향에 살을 더 붙여주시는 등 항상 크고 작은 도움을 주셨던 게 기억에 남습니다.
2. 키비주얼 제작
방향성이 잡혔다면, 이제 키비주얼을 제작해야 합니다. 이때는 그래픽 디자이너로서의 역량이 중요한데요, 최근 그래픽/업계 트렌드를 파악하고 타깃에 어필할 수 있는 매력적인 그래픽을 제작해 내야 합니다. 온라인몰의 매출 혹은 브랜드 이미지에 도움을 줘야 하죠. 저는 이 당시 다양한 스타일의 그래픽 작업을 할 수 있다는 점이 가장 만족스러웠던 부분이었어요. 그러면서 그래픽 역량이 정말 비약적으로 늘어갔던 것 같습니다. 그래프로 친다면 가장 가파르게 그래픽 역량이 늘어갔던 시기였어요. 주로 작업했었던 스타일 두 가지를 소개해 드릴게요.
✅ 콘셉트를 드러내는 배경에 상품 누끼를 자연스럽게 합성하며 한 장의 연출컷으로 제작
ⓒPaul Bassett
이 케이스는 자연스러운 합성 역량이 중요합니다. 빛 방향이나 그림자 등 자연스럽게 한 개의 이미지처럼 보일 수 있도록 디테일을 쌓아가며 작업했습니다. 예를 들어, <여름 음료 기획전>을 제작한다면 1) 3-4개의 음료 누끼를 실제 상품 크기의 비율로 맞추고 2) 여름이 느껴지도록 파란 하늘 배경을 깔아 줍니다. 그다음 3) 하얀 단상 위에 음료 누끼를 배치합니다. 그리고 4) 하늘에서 내려오는 자연광을, 상품의 그림자를 처리해 줍니다. 마지막으로 5) 전체적으로 시원한 바람과 청량감이 느껴지는 색감으로 보정해 <여름에 마실 수 있는 시원한 음료>로 느껴질 수 있도록 연출합니다.
✅ 상품 누끼와 텍스트를 에디토리얼 형식으로 배치
이 케이스는 자연스러운 합성 역량이 중요합니다. 빛 방향이나 그림자 등 자연스럽게 한 개의 이미지처럼 보일 수 있도록 디테일을 쌓아가며 작업했습니다. 예를 들어, <여름 음료 기획전>을 제작한다면 1) 3-4개의 음료 누끼를 실제 상품 크기의 비율로 맞추고 2) 여름이 느껴지도록 파란 하늘 배경을 깔아 줍니다. 그다음 3) 하얀 단상 위에 음료 누끼를 배치합니다. 그리고 4) 하늘에서 내려오는 자연광을, 상품의 그림자를 처리해 줍니다. 마지막으로 5) 전체적으로 시원한 바람과 청량감이 느껴지는 색감으로 보정해 <여름에 마실 수 있는 시원한 음료>로 느껴질 수 있도록 연출합니다.
✅ 상품 누끼와 텍스트를 에디토리얼 형식으로 배치
ⓒ(주)자몽인터내셔널
이 케이스는 타이포그래피(Typography)와 레이아웃에 감을 익힐 수 있었어요. 트렌디하고 패션 매거진 느낌을 표현할 수 있죠. 최근의 29cm, 무신사, W컨셉과 같은 패션 이커머스의 콘텐츠에서 많이 볼 수 있는 방식입니다. 예를 들어, <지중해 요리 레시피와 그에 필요한 상품>을 소개하는 기획전을 제작한다면, 타이틀에 건강하고 산뜻한 느낌을 주는 캘리그라피 서체를 사용하고, 서브 문구를 정렬에 따라 배치합니다. 이미지는 아래에서 소개할 지중해 요리 연출컷을 잡지 표지처럼 연출하되, 한 장씩 넘겨지는 인터렉션 효과를 줘 온라인에서만 보여줄 수 있는 연출을 할 수도 있습니다.
3. 하단 상품 카드 제작
이 케이스는 타이포그래피(Typography)와 레이아웃에 감을 익힐 수 있었어요. 트렌디하고 패션 매거진 느낌을 표현할 수 있죠. 최근의 29cm, 무신사, W컨셉과 같은 패션 이커머스의 콘텐츠에서 많이 볼 수 있는 방식입니다. 예를 들어, <지중해 요리 레시피와 그에 필요한 상품>을 소개하는 기획전을 제작한다면, 타이틀에 건강하고 산뜻한 느낌을 주는 캘리그라피 서체를 사용하고, 서브 문구를 정렬에 따라 배치합니다. 이미지는 아래에서 소개할 지중해 요리 연출컷을 잡지 표지처럼 연출하되, 한 장씩 넘겨지는 인터렉션 효과를 줘 온라인에서만 보여줄 수 있는 연출을 할 수도 있습니다.
3. 하단 상품 카드 제작
ⓒ올리브영
상품 기획전은 ‘상품’을 엮어 소개하는 기획전인 만큼, 키비주얼 하단에 상품 이미지, 가격, 할인가, 할인율, 소구 문구 등이 포함된 ‘상품 카드’가 노출됩니다. 최근에는 대부분의 이커머스에서 시스템으로 노출하나 기존 시스템에 없는 케이스의 상품 카드가 필요한 경우, 키비주얼과 하단 영역의 비주얼 콘셉트를 통일되게 보여줘 이벤트의 느낌을 더 살리고 싶은 경우에는 별도로 디자인하기도 합니다. 상품 카드는 이커머스에서 가장 근본이 되는 컴포넌트(Component)라고 할 수 있는데요. 저는 또한 여러 가지 유형의 상품 카드를 디자인해 본 덕분에 추후 디자인 가이드를 개발할 때 어떤 유형이 가장 자주 사용되고, 가이드화를 해야 하는지 등의 영역에서 많은 도움을 받았습니다.
1년 차에는 이렇게 메인 배너 제작과 운영, 상품기획전 제작과 같은 업무를 하며 주니어로서 다양한 역량을 쌓을 수 있었던 것 같습니다. 2년 차 이후부터는 상품기획전보다 더 볼륨이 큰 행사를 맡아 진행할 수 있었어요. 이 내용은 다음 화에서 소개해 볼게요.
상품 기획전은 ‘상품’을 엮어 소개하는 기획전인 만큼, 키비주얼 하단에 상품 이미지, 가격, 할인가, 할인율, 소구 문구 등이 포함된 ‘상품 카드’가 노출됩니다. 최근에는 대부분의 이커머스에서 시스템으로 노출하나 기존 시스템에 없는 케이스의 상품 카드가 필요한 경우, 키비주얼과 하단 영역의 비주얼 콘셉트를 통일되게 보여줘 이벤트의 느낌을 더 살리고 싶은 경우에는 별도로 디자인하기도 합니다. 상품 카드는 이커머스에서 가장 근본이 되는 컴포넌트(Component)라고 할 수 있는데요. 저는 또한 여러 가지 유형의 상품 카드를 디자인해 본 덕분에 추후 디자인 가이드를 개발할 때 어떤 유형이 가장 자주 사용되고, 가이드화를 해야 하는지 등의 영역에서 많은 도움을 받았습니다.
1년 차에는 이렇게 메인 배너 제작과 운영, 상품기획전 제작과 같은 업무를 하며 주니어로서 다양한 역량을 쌓을 수 있었던 것 같습니다. 2년 차 이후부터는 상품기획전보다 더 볼륨이 큰 행사를 맡아 진행할 수 있었어요. 이 내용은 다음 화에서 소개해 볼게요.
