교육 플랫폼이 직접 이모티콘을 제작한 이유 : 클라썸의 새로운 얼굴, 썸모티콘

CLASSUM
CLASSUM 클라썸
Published in
9 min readMar 17, 2022

2022년 3월부터 클라썸에 새로운 이모티콘 “썸모티콘”이 공개되었습니다.

교육 플랫폼인 클라썸은 왜 이모티콘 제작에 심혈을 기울였을까요? 썸모티콘을 만들게 된 데에는 클라썸의 철학과 가치를 담기 위한 중요한 이유가 있었는데요. 17종의 썸모티콘이 탄생한 배경과 과정을 디자인팀 헤드 스티그와 프로덕트 디자이너 크리스탈에게 직접 물어봤습니다.

안녕하세요, 자기소개 해주세요.

스티그 안녕하세요. 클라썸의 디자인 헤드 스티그입니다. 삼성전자 디자인그룹에서 파트장으로 근무하던 중 클라썸의 대표 Lynn, Jin을 만났습니다. 회사에 다니며 수년간 다양한 곳에서 강의를 하며 교육에 대한 관심과 열정을 가지고 있었고, 쉽게 바꿀 수 없었던 조직의 문화나 업무 프로세스를 새롭게 만들어 갈 수 있다는 점 또한 저에게는 새로운 도전이자 기회 요소였기에 2020년 10월 합류하게 되었습니다.

클라썸 디자인팀은 프로덕트와 브랜드 파트로 나뉘는데요. 두 파트를 이끄는 헤드로서 팀원들이 비즈니스를 성장시키는 데 기여하고, 자신의 성장도 도모할 수 있도록 지원해주고 있습니다.

크리스탈 안녕하세요. 프로덕트 디자이너 크리스탈입니다. PM, 개발자분들과 함께 프로덕트 디자인과 서비스 개선 업무를 담당하고 있습니다.

클라썸에 오기 전에는 고객사의 니즈를 맞춰 짧은 단위로 디자인-개발하는 외주사업부에 근무했는데요. 사용자에게 집중하는 일, 말 그대로 사용자의 경험(User Experience)을 관찰하고, 고민하고, 디자인하는 일을 하고 싶어 클라썸에 입사하게 되었습니다.

클라썸에선 더블 다이아몬드라는 방법론을 실무 프로세스에서 사용하고 있는데요. UX 수업에서 배우기만 했던 방법론을 직접 적용하고 있다니! 이 부분이 저에게는 큰 매력 요소였습니다.

스티그 더블 다이아몬드 모델은 생각의 확산과 수렴을 반복하는 과정을 두 개의 다이아몬드로 표현한 것입니다. 발견(확산)-정의(수렴)-개발(확산)-전달(수렴)을 거치며 다양한 생각을 키워 나가고 정리해 좁혀가는 것입니다. 클라썸 디자인팀에선 기획자와 디자이너의 구분이 없이 모든 영역을 담당해 오너십을 갖추고 자기 주도적으로 업무에 임할 수 있습니다.

클라썸의 더블 다이아몬드 모델
썸모티콘 대표 이미지

클라썸의 새로운 얼굴, 썸모티콘이 탄생했어요. 그 이유는 무엇인가요?

스티그 두 가지 이유가 있습니다. 1) 클라썸에는 [저도 궁금해요]와 같이 기능 역할을 하는 이모티콘이 있는데요. 그런 이모티콘을 기능에 더 부합하도록 개선하는 것 2) 이모티콘에 클라썸의 브랜드 스토리와 방향을 담을 수 있도록 만들어 브랜딩에 활용하는 것입니다.

크리스탈 맞아요. 예를 들면, 기존의 [저도 궁금해요]는 🤔고민하는 표정에 가까웠지만, 클라썸은 ‘나 역시 같은 질문이 있다’라는 공감의 의미를 나타내고 싶었어요. 또 기존 디자인은 다른 서비스의 이모티콘을 바탕으로 제작되었다 보니 클라썸의 아이덴티티를 담기에 한계가 있어 개편을 진행했습니다.

저는 주로 프로덕트 UX/UI 디자인을 하고 있지만, 카카오 브랜드 IP팀에서 인턴으로 근무했던 경험을 살려 이번 썸모티콘 프로젝트를 맡게 되었습니다.

썸모티콘 개편 전후 비교
[저도 궁금해요] 기능 설명

크리스탈! 썸모티콘 제작 과정을 들려주세요.

네, 이모티콘 개편 과정을 말씀드릴게요. 이번 썸모티콘 제작도 앞서 설명한 더블 다이아몬드 모델을 바탕으로 진행했습니다.

첫 번째(발견) 최대한 많은 레퍼런스를 찾았습니다.

영감을 얻기 위해서는 다양한 경험과 자료를 접하는 게 중요해요. 다른 기업의 이모티콘 개편 아티클을 보고, 평소에 좋아하던 일러스트 작가님의 작업물, 픽사 애니메이션, IP를 이용해 브랜딩하는 회사의 결과물까지 넓은 영역을 여행했습니다.

두 번째(정의) 디자인 원칙과 목표를 세웠어요.

기존 이모티콘의 문제와 새로운 썸모티콘으로 사용자들에게 전달해야 할 메시지에 대해 깊게 고민해 디자인 원칙과 목표를 세웠어요. 이 과정에서 IP 개발 방향성을 더 정확하게 좁힐 수 있었습니다. 프로젝트 가이드라인도 수립했는데요. 중요한 것은 마냥 귀엽고 예쁜 이모티콘을 만드는 것이 아니라 소통, 질문, 공감과 같은 클라썸의 아이덴티티를 시각적으로 나타내는 것이었습니다.

(1) 이모티콘 디자인 키워드 (2) 디자인 목표 (3) 세부원칙

세 번째(개발) 최대한 많은 스케치를 했어요.

앞서 세운 목표와 원칙 그리고 가이드라인을 바탕으로 스케치를 시작했고, 여러 스케치에서 시안 A,B를 도출했습니다. 시안 A는 동그랗고 노란 얼굴의 일반적 형태로 사용자들이 자연스럽게 받아들일 수 있다는 장점이 있었어요. 시안 B는 클라썸의 핵심 아이덴티티인 ‘질문’을 시각화한 말풍선 형태로 만들었습니다. 우리의 가장 큰 가치는 ‘질문과 토론을 통해 소통하고, 함께 배운다’는 것이거든요. 클라썸의 가치를 담고, 다양하게 바꿀 수 있는 것이 장점인 시안이었어요.

네 번째(전달) 모두 함께 썸모티콘을 완성했어요.

클라썸 모든 팀원이 참여하는 서베이를 진행해 의견을 모았습니다. A안을 선택해주신 분들의 의견은 전반적으로 통일된 형태가 감정 표현에 집중할 수 있다는 것이었어요. 이로 인해 모바일과 같이 작은 화면에서는 A안이 B안 보다 이모티콘의 역할을 잘 할 수 있을 거라는 기대를 남겨주셨습니다.

B안을 선택해주신 분들은 말풍선이 줄 수 있는 클라썸의 아이덴티티와 기존 이모티콘과는 다른 부분을 장점으로 짚어주셨어요. A안을 발전시켰지만 B안을 골라주신 분들의 가치 역시 담는 방향으로 후속 작업을 진행해 썸모티콘을 완성했어요.

완성한 썸모티콘을 게시글, 댓글을 포함한 다양한 곳에 적용했습니다. 클라썸 곳곳에 있는 썸모티콘을 찾아보세요!

클라썸의 썸모티콘 17종(왼쪽)과 클라썸 서비스에 반영된 썸모티콘(오른쪽)

이번 프로젝트 어땠나요?

크리스탈: 확실히 디자이너로서 무거운 책임감을 느끼며 작업했어요. 이모티콘을 만드는 작업은 ‘기능을 보여주는 대표성’과 ‘모두가 공감할 수 있는 객관성’이 필요하기 때문에 신경 써야 할 부분이 많았죠. 하지만 귀여운 것을 보며 일하다 보니 덕업일치가 된 듯한 느낌이 들기도 했답니다. 일과 힐링을 함께 하는 기분이 들고 재밌었어요!

모두 클라썸 안에 숨겨진 썸모티콘을 잘 발견하고, 더 많은 소통을 위해 활용했으면 좋겠습니다.

스티그 이미 브랜드 아이덴티티가 확립된 기업이 아닌 스타트업에서 이런 디자인 프로젝트를 진행하는 것은 과정이 꽤 다르기 때문에 어려움이 많습니다. 이 프로젝트 사례가 곧 브랜드 디자인 프로세스로 정착할 수 있기 때문에 부담스러운 일이기도 하죠. 그런 의미에서 크리스탈이 많은 부담을 느꼈을 텐데 훌륭히 그 역할과 책임을 다해 주셔서 감사하게 생각하고 있습니다.

클라썸 디자인팀에 관해 좀 더 소개해주세요.

크리스탈: 클라썸 디자인팀은 책임감 있게 일하고, 부족하다 느끼는 점은 공유를 통해서 채워주는 관계예요. 실제로 각자 하는 고민에 관한 논의가 활발한데요. 다른 파트에 속한 팀원들도 어떤 일을 진행하고 어떤 고민을 하고 있는지 알 수 있어서 좋습니다.

스티그: 클라썸 디자인팀은 실무 경험과 개인 역량이 한 분야로 치우치지 않은 ‘디자인 리더’로 성장할 수 있는 환경입니다. 우리는 ‘한입 크기’의 프로젝트를 처음부터 끝까지 책임지기 때문에 오너십을 갖고 업무에 임할 수 있죠. 이는 성공적인 프로덕트로 가기 위한 단단한 기반이 됩니다.

클라썸 디자인팀과 함께할 디자이너를 찾는다고 들었어요. 어떤 분이 오시면 좋을까요?

스티그: 기획자와 디자이너의 구분이 없는 만큼 각 영역에 대한 기본 지식을 갖추고, 긴 과정을 즐겁게 해낼 수 있는 낙천적 성격을 지닌 분을 찾고 있습니다. 또한 각 영역에서 더 깊이 연구하고자 하는 학자적 호기심과 집착을 갖춘 디자이너가 클라썸의 디자이너라고 말할 수 있습니다.

크리스탈: 나의 성장과 클라썸의 성장을 같이 생각하고 열정을 가진 동료와 일하고 싶어요. 우리는 일주일 중 가장 오랜 시간을 클라썸의 프로덕트를 발전시키는 데에 쓰고 있어요. 우리가 이렇게 정성을 다하는 시간이 나의 성장을 위한 시간이라고 생각하면 더 보람을 느끼지 않을까요? 그런 생각으로 오랫동안 에너지를 잃지 않고, 서로에게 성장 동력이 되는 디자이너를 많이 만나고 싶습니다!

👉 클라썸 디자이너 채용 공고 보러가기: 2022년 상반기 브랜드(BX) 디자이너 채용

썸모티콘 이렇게 활용해요!

질문이 많아질수록, 학습자 간 소통이 늘어날수록 교육의 질은 올라갑니다! 썸모티콘을 활용하여 질문과 댓글에 반응한다면 소통이 배로 늘어날 거에요. 썸모티콘 활용 가이드를 참고해보세요.

에듀테크 트렌드, 비대면 시대 고퀄리티 온라인 교육하는 방법, 인사담당자의 비대면 교육 전환기가 궁금하다면, 에듀테크 백서, 웨비나 보러가기👉 resource.classum.com

클라썸은 KAIST, 경희대학교, 이화여자대학교, 인천광역시교육청, 삼성전자, 시세이도, 월드비전 등 이용 중인 강의별 소통 플랫폼입니다. 클라썸이 궁금하다면? 👉 www.classum.com

줌 공식 파트너, 클라썸에서 줌을 구매하세요. 할인 가격부터 계약 지원까지 놓칠 수 없는 혜택 3가지를 제공합니다. Zoom 구매 문의하기👉 www.classum.com/ko/zoom-partner

--

--