안녕하세요. 강남언니 프로덕트 디자이너 Anna입니다.
이번 글엔 강남언니의 일러스트 가이드라인 제작기를 들려 드리고자 합니다.
실제로 업무에 잘 사용하고 계신 동료들의 인터뷰를 통해 일러스트 시스템의 실효성과 더불어, 동료들의 피드백을 통해 일러스트 시스템이 한 발자국 더 나아갈 수 있는 Lesson & Learn도 함께 들려드릴게요.
강남언니에 입사하자마자 맡게 된 협업을 훌륭히 해내 주신 프로덕트 디자이너 Summer, 감사드립니다!
*이미지 스틸과 제작 과정은 Behance에서 상세하게 확인 가능합니다.
계기
브랜드 가이드라인 강화를 위해
강남언니는 지난 해 리브랜딩을 진행했습니다. 빈약했던 브랜드 스토리에 살을 붙여 강남언니가 고객에게 전하고자 하는 가치를 더욱 견고히 하는 시간이었습니다. 브랜드 가치를 제품에 녹였을 때 고객이 가장 먼저 마주하는 것이 비주얼인 것에 비해, 과거의 강남언니의 비주얼에선 '강남언니스러움'을 찾기 어려웠던 것이 사실입니다.
또, 브랜드 가이드라인에서 제시하는 플랫하고 직관적인 비주얼이 아닌, 효율성만을 고려해 이모지를 아이콘으로 활용했던 것도 디테일 면에서 아쉬웠습니다. 이번 프로젝트를 통해 빅아이콘으로 사용하던 이모지 아이콘을 직접 그린 일러스트 타입 아이콘으로의 교체도 함께 진행했습니다.
모든 브랜드 접점에서의 일관된 이미지 전달을 위해
강남언니는 인스타그램, 페이스북 등의 SNS와 유튜브에 지속적으로 콘텐츠를 업로드합니다. 강남언니에서 SNS는 주로 마케터분들이, 유튜브는 PD분들이 콘텐츠를 꾸려 나가는데요. 콘텐츠 소스들을 직접 제작하거나 다운받아 가공해 사용하는 방식으로 콘텐츠를 제작하다 보니 각기 다른 톤앤매너로 전개되는 모습도 어렵지 않게 볼 수 있었습니다. 수고롭게 만들어진 콘텐츠들이 강남언니라는 하나의 브랜드로 보이기 어렵다는 점이 한편으로 아쉬웠습니다.
전속 모델과 의료모델 사용의 어려움
현실적인 문제도 존재 했는데요. 강남언니의 전속 모델의 계약이 만료되어 이미 업로드 된 배너나 웹페이지에서 인물을 제거하고, 다른 소스로 교체 해야만 했습니다.
또, 이미지 사이트에서 '의료뷰티'로 분류된 인물 이미지가 아니라면 성형 플랫폼에서의 사용이 대부분 불가능합니다. 그러다보니 실사를 이용하게 되면 콘텐츠에 Before와 After를 한 명의 모델로 표현하는 것이 어렵고, 고객이 하고 있는 고민을 실사 모델로는 리얼하게 전달하기 어려웠습니다.
기대효과
일러스트 시스템은 인터페이스 디자인 시스템 구축의 장점과 동일하게 여러 명의 디자이너가 그려도 한 사람의 결과물처럼 시각적 통일감을 가지게 합니다. 시각적 통일감은 여러 채널에서 보여지는 강남언니의 제품과 콘텐츠가 하나로 결로 묶여 보이는 데에 도움을 줍니다.
구축된 벡터 소재를 키트 형태로 강남언니의 마케팅 스쿼드와 미디어 스쿼드 등 콘텐츠에 사용할 여지가 많은 스쿼드에 배포해 해당 작업을 PD나 마케터들이 효율적으로 처리할 수 있게 합니다. 그 효과로 업무 중 일러스트를 그리거나 소스를 서치하고 가공하는 데에 낭비되는 리소스보다 본 업무의 주제에 집중하여 더욱 퀄리티있는 콘텐츠 제작에 도움을 줍니다.
또, 강남언니의 핵심가치의 극도의 협업을 추구합니다. 전체의 최고 성과를 추구하는 과정에서 오는 부분의 비효율화를 기꺼이 감내하며, 이번 리햅* 때 진행한 일러스트 시스템이 프로덕트 디자이너의 수고로 여러 스쿼드의 이익이 되기를 바랐습니다.
리햅(Rehab): 고기를 썰다보면 칼이 무뎌지기 마련입니다. 그 칼을 다시 날카롭게 가는 기간을 힐링페이퍼에선 리햅이라고 지칭하는데요. ‘동료에게 가치주기‘, ‘새로운 시도‘, ‘극도의 효율화’를 테마로 업무 효율이 높아지지만 업무 중 따로 시간을 내어 할 수 없었던 프로젝트들을 진행합니다. 팀을 짜거나 단독으로 진행하며 3~4번의 업무 사이클 후 1~2주 간 진행합니다.
일러스트의 역할
강남언니의 일러스트는 어려운 정보를 쉽게 표현하여 직관적으로 콘텐츠의 맥락을 파악할 수 있도록 도와줄 수 있습니다. 또한 사용자가 글을 자세히 읽지 않아도 의미 전달을 빠르게 하죠.
완성도 측면에서는 제품을 더욱 풍성하게 만들어 줄 뿐만 아니라 시각적 환기를 통해 집중도를 높일 수 있습니다. 또한 기존 앱 내에 일러스트 대신 사용하던 이모지를 일러스트 타입 아이콘으로 대체하며 더 일관성있는 브랜드 경험을 완성할 수 있었습니다. 단순한 정보 전달 이상의 브랜드 톤 앤 매너를 단단히 하는 가치가 있습니다.
프로젝트를 함께 진행해주신 디자이너 Summer가 남긴 멋진 말이 있어 함께 덧붙입니다.
'지속적이지 않다면 그것은 일관적이지 않은 것이다'
제작과 공유
어도비 일러스트레이터를 사용했고, 벡터 소스로 제작되었습니다. 주된 사용처가 콘텐츠 제작이니 그대로 사용하거나, 쉽게 가공해 사용할 수 있도록 모든 패스는 유지된 상태로 공유했습니다.
또 어도비 클라우드를 사용해 업데이트가 되거나 소스가 추가되면 제작자가 별도의 공유 없이 바로 사용이 가능하도록 했습니다.
일러스트 시스템의 사용 후기와 피드백
직접적인 제작자인 디자이너, 마케터, PD들이 제작한 일러스트 시스템을 사용한 소스가 많아 질 수록 거대한 클라우드가 되어 해당 직군 뿐만 아니라 타 직군에서도 쉽게 사용 가능할 것임을 예상했습니다. 예시로 PR 담당자의 기사 자료, 운영 지원 담당자의 공지 콘텐츠, 경영 담당자의 프리젠테이션 슬라이드 등 여러 곳의 사용처가 발행하는 콘텐츠가 더 풍부해지는 효과도 있었습니다.
디자인에서의 시스템을 구축할 때 가장 고려하는 지점 중 하나는 시스템과 가이드라인이 '제약조건'으로 느껴지지 않게 하는 것이었습니다. 강남언니가 운영하는 유튜브 채널인 '강언티비'의 썸네일 또한 무조건적으로 일러스트 시스템을 따르기보다, 시청자의 시선을 이끌 수 있도록 더 동적이고 드라마틱한 표현을 위해 시스템을 완전히 어긋나지 않는 선에서 변형된 형태를 따릅니다. 채널 별 특성도 분명히 고려할 필요가 있었고, 시스템 정립 후 이점만 취할 수 있도록 해당 스쿼드의 구성원들과 머리를 맞대고 더 유연하게 운영이 가능하도록 논의했습니다.
이후 일러스트 시스템을 업무에 적극 사용하시는 동료분들의 인터뷰를 통해 일러스트 시스템의 효과와 피드백을 받아보았습니다.
1. 어떤 업무를 담당하고 계신가요?
🌹Rosie(콘텐츠 마케터): 강남언니 공식 SNS 및 외부 매체용 콘텐츠 기획&제작, 광고 운영 업무를 주로 합니다.
🎤Joanne(커뮤니케이션): 강남언니의 대내외 커뮤니케이션을 담당하고 있어요.
🎨Lingling(브랜드 콘텐츠 디자이너): 강남언니의 콘텐츠 디자인 업무를 맡고 있습니다.
🎬Khal(PD): 회사에서 제작하는 강남언니의 각종 영상 콘텐츠를 촬영/제작합니다.
2. 일러스트 시스템이 부재했을 때와 생긴 뒤를 비교해보았을 때 업무진행 시 생긴 변화가 있다면 어떤 것들이 있나요?
🌹 Rosie(콘텐츠 마케터):
재사용하고 싶은 소스를 제작한 디자이너 분에게 수급 받아야 하는 번거로운 과정을 거쳤어요. 해당 디자이너분이 부재중이거나 하실 땐 어쩔 수 없이 콘텐츠 발행 일정을 미루거나 다른 이미지를 찾아야만 하는 어려움이 있었죠. 다른 이미지를 찾는 것은 강남언니 브랜딩의 결(컬러, 일러스트의 통일된 느낌 등)을 맞춰 찾고, 일일이 수정을 해야 하기 때문에 정말 오랜시간 소요되는 작업이기도 해요. 하지만 일러스트 시스템이 생기고 난 뒤에는 이런 번거로운 과정들이 생략되니 콘텐츠 제작 효율이 엄청나게 개선되었고, 미처 있는지도 몰랐던 다양한 소스들을 바로바로 확인할 수 있어서 콘텐츠 디자인을 할 때 기존 아이디어를 디벨롭시켜 비주얼적으로 더 좋은 콘텐츠를 제작해 볼 수도 있었어요.
🎤 Joanne(커뮤니케이션):
PR에서의 디자인 업무 및 협업에 있어 놀라운 변화가 있습니다. 결론은 "써보니까 놀랍도록 편하다! 예전으로 돌아가지 못한다!"입니다.
기존에도 대외 홍보 콘텐츠에 필요한 디자인은 디자인 챕터에 사전에 요청하여 협업하고 있었지요. 시급 건일 경우에는 예전 자료를 재탕하거나 부랴부랴 포토샵을 만져서 자체적으로 해결해야만 하기도 했습니다. 후자의 경우에서 때로는 속도가 중요했기 때문에 디자인 완성도를 포기해야만 할 때도 있었는데요. 일러스트 시스템을 사용할 줄 알게된 후에는, 제가 만져도 기본적으로 브랜드 디자인 가이드에 크게 위배되지 않는 선에서 완성도까지 추구할 수 있게 되었습니다. 완성된 일러스트 재료들을 가지고 배열을 하면 됐고, 콘텐츠에 필요한 틀과 텍스트만 제작하면 되었거든요. 마무리로는 디자인챕터를 태그하여 간단한 피드백을 받는 것이면 빠르게 끝났습니다.
속도, 완성도 두 마리 토끼를 모두 잡을 수 있게 된 것이지요.
🎨 Lingling(콘텐츠 디자이너):
입사 초반 저와 강남언니의 톤앤매너를 맞춰가고 적응시키는데에는 정말 많은 도움이 되었습니다.
입사하고 진행했던 ‘앱내 시술 콘텐츠’는 어떤 시술에 대한 궁금증을 카느뉴스로 풀어내는 작업으로 해당 시술과 관련 된 일러스트 소스가 너무나 필요했던 순간이 있었습니다.
고객들로 하여금 어떻게 시각화하면 이 시술에 대한 궁금증이 해소될지 고민하며 컬러, 오브젝트 표현방법 등 정해진 가이드 원칙을 토대로 작업했던 기억이 납니다. 이미 구축되어있던 가이드라인을 기반으로 제작하니 어마무시하게 빠른 스피드로 제작할 수 있었던 경험이었습니다.
정해진 규칙 안에서 새로운 소스를 만들어내야 한다는 부담감이 현저히 줄었고, 이를 확장해 나갈 수 있는 범위를 점차 늘여가는 재미 또한 느낄 수 있었습니다.
🎬 Khal(PD):
미디어 챕터 내에서 제기된 문제점들이 몇 있었는데요. 그중 하나가 유튜브 환경에서 가장 잘 워킹할 수 있게 설계된 썸네일 등의 그래픽 요소들이 강남언니의 디자인 문법과 달라 강남언니가 제공하는 콘텐츠처럼 안 보이고 앱에 붙는 찌라시 광고처럼 보이는 등의 ‘이질적인 느낌’이 있었습니다.
그리고 그 시점에 Anna가 작성한 "배포된 일러스트 시스템을 츄라이해보라"는 슬랙 쓰레드를 보게 됩니다. 어? 제작 시간 엄청 짧아지는 소리가 들렸습니다.
그렇게 일러스트 시스템을 뜯어보다가 그냥 그대로 한번 러프하게 스케치를 만들어봤는데 완성된 디자인 요소를 가져다 쓰는 작업이라 속도가 무척 빨랐고 퀄리티도 굳이었습니다. 밀키트를 통해서 요리하는 느낌이었어요. 진짜 🐶편했습니다. 고려해야하는 요소들이 손질된 형태로 손에 쥐어지니 요리 속도가 엄청나게 빨라진 셈이죠.
초반 몇개의 영상에서 일러스트 시스템을 영상에 그대로 사용하기에 무리가 있었던 요소들을 하나씩 찾아나가면서 미디어 챕터에서 쉽게 쓸 수 있는 베이스가 완성되었습니다. (결과는 강남언니 유튜브채널과 강남언니 앱에서 확인할 수 있습니다)
2. 더 보강되거나 개선되었으면 하는 점이 있나요?
🌹 **Rosie(콘텐츠 마케터):**
새로운 소스가 등록 되었을 때 알 수 있는 방법이 있었으면 좋겠어요!
항상 익숙하게 사용하던 소스만 쓰게 될 때가 많은데, 새로운 소스가 등록된 것을 알게되면 콘텐츠를 제작할 때 한번 더 상기시켜 새로운 소스를 활용해 볼 수 있을 것 같습니다! 🙂
🎤 Joanne(커뮤니케이션):
현재 일러스트 시스템에 있는 자료 말고도 강남언니 앱 콘텐츠에 활용된 일러스트가 더욱 많은 것으로 알고 있는데요. 이런 것들도 카테고리별로 더 많이 일러스트 시스템에 포함되었으면 좋겠다라는 욕심이 있습니다! ㅎㅎ 다른 팀의 디자인 협업에도 많은 배려와 고민을 해주셔서 감사합니다! 👏
🎨 Lingling(콘텐츠 디자이너):
초반에 구축되었던 가이드는 기준이 되는 지점이었기 때문에 가짓수가 부족했고 다양하지 못하단 점이 아쉬웠습니다. 이를 토대로, 성별에 따른 헤어스타일이나 옷스타일, 포즈, 수술&시술에 관련된 아이템 그리고 bg등을 계속해서 추가하고 있습니다.
디자이너가 아닌 다른 롤의 동료들이 콘텐츠에 맞는 소스를 바로 찾아 쓸 수 있을만큼 더 다양한 범위로 확장되기를 바라며 더불어 저도 많은 노력을 쏟고 있습니다!
🎬 Khal(PD):
필요한 소스를 그때그때 만들어놓고 있는데, 시스템에 등록하는 방법을 알려주시면 좋겠습니다. 일러스트 시스템을 통해서 베이스를 잡긴 했으나 이후에 추가해서 우리가 비슷한 결로 만들고 있는 요소들을 강언티비용 일러스트 시스템그룹에 모아둘 수 있으면 좋겠다고 생각하기 때문이예요.
강남언니 일러스트 시스템의 다음 스텝
디자인의 손을 거쳐 만들어진 시스템들은 한 번 만들어진 뒤 배포가 끝이 아닙니다. 이후 실제로 사용하는 유저라고도 할 수 있는 동료들의 피드백을 받아 한층 더 높은 수준의 시스템으로 업그레이드 시켜줄 일종의 유지보수가 필요합니다. 어디를 어떻게 더 개선시켜볼 지의 시작은 사용자에게 직접 묻는 것 만큼 좋은 방법도 없죠. 미뤄왔던 제작기를 작성하며 동료들에게 값진 피드백을 얻게 되어 이 다음의 일러스트 시스템의 개선점을 다음과 같은 액션 아이템으로 추출할 수 있었습니다.
✔️ 클라우드에 아이템 업로드 하는 방법 전파하기
✔️ 새로운 아이템이 추가될 때마다 사용자들에게 공지하기
✔️ 이미 사용되었던 아이템들도 클라우드에 업로드하도록 하는 룰 만들고 전파하기
✔️ 다양한 카테고리로 확장하기
✔️ 시즌 별로 사용할 수 있는 소스들을 그룹핑하기
시스템 정립을 시작한 사람(일 벌린 사람...)으로서, 이후 만들어진 소스 클라우드를 함께 만들어 나가는 점이 매우 즐겁습니다. 사실 저는 브랜드 가치와 가이드라인을 회사에 전파하는 것은 오버커뮤니케이션이 무조건적인 답이란 생각이 지배적이었는데요. 전파한 내용을 전해받는 것에 그치지 않고 함께 만들어나가려는 maker가 동료라면 그것이 더 쉽고 영향력이 있음을 알 수 있었습니다. 사용자이며 작업자일 수 있는 멋진 동료들에게 감사함을 전합니다.
강남언니 일러스트 시스템 1.5로 돌아옵니다!