삼쩜삼 애셋 라이브러리를 소개할게요
안녕하세요, 삼쩜삼 프로덕트 디자이너 고정빈입니다.
삼쩜삼에게 5월은 특히나 바쁜 달이에요.
시시각각 변하는 지표를 보며 다양한 가설을 세우고, 실험을 만들고, 빠르게 배포하는 과정을 반복해요. 그러다 보니 디자이너에게는 빠르고 효율적인 작업 환경이 매우 중요했어요.
이런 상황에서 저희에게 큰 힘이 되어준 것이 바로 '삼쩜삼 애셋 라이브러리'였어요. 애셋 라이브러리는 디자이너의 업무 비효율을 개선하기 위해 진행한 미니 프로젝트로, 두 명의 프로덕트 디자이너가 주도하고 플랫폼 디자이너, BX 디자이너, FE 개발자가 함께 힘을 모아 만들었어요.
오늘은 이 애셋 라이브러리가 어떻게 탄생했고, 어떻게 삼쩜삼의 디자인 업무 효율을 혁신적으로 끌어올릴 수 있었는지 그 이야기를 들려드릴게요.
애셋, 어떻게 사용하고 있었나요?
애셋 라이브러리가 만들어지기 전의 프로세스를 먼저 살펴볼게요.
디자인 작업 중 필요한 애셋이 생기면…
BX 작업 파일, 다른 PD의 작업 파일을 돌아다니면서 적절한 애셋을 직접 찾아서 사용했어요.
만약 적당한 애셋이 없다면, BX에게 제작을 요청했어요.
애셋 전달 및 관리
완성된 애셋을 개발자에게 전달했어요.
개발자는 직접 애셋 이름을 정하고, 개발 라이브러리에 올려서 사용했어요.
이러한 문제점이 있었어요
기존 프로세스에서 PD/BX/FE 각각 비효율을 느끼는 부분이 있었어요.
직군별로 자세히 살펴볼게요.
처음 생각했던 것과 달리 애셋 라이브러리는 다양한 직군의 이해관계가 얽혀있었어요. 따라서 효율적인 애셋 라이브러리를 만들기 위해서 일의 순서를 먼저 정해야 했습니다.
애셋 라이브러리 제작
저희 팀은 아래 순서에 맞춰 애셋 라이브러리를 만들어 갈 계획을 세웠어요.
1. 애셋 네이밍 컨벤션 제작
2. 피그마에 애셋 라이브러리 파일 제작 및 레이아웃 정리
3. 라이브러리에 적재할 애셋 선별
애셋 네이밍 컨벤션 제작
네이밍 규칙 정하기
가장 먼저 시작한 일은 애셋 네이밍 규칙을 정하는 것이었어요. 애셋을 라이브러리에 넣으려면 모두 겹치지 않는 고유한 이름을 가져야 하는데, 저희는 정해진 규칙이 없었기 때문에 이를 만드는 것이 가장 중요한 일이었습니다.
네이밍 컨벤션을 정할 때 저희가 가장 신경 썼던 부분은, 이름만 보고도 어떤 애셋인지 쉽게 유추할 수 있도록 하는 것이었어요. 그래서 애셋의 ‘의미’가 아닌 ‘형태’와 관련된 단어를 사용하기로 했어요.
예를 들어, 종 모양의 아이콘이 있다고 해볼게요. 이 아이콘을 의미와 연결 지으면 alarm이 되겠지만 형태와 연결 지으면 bell이 돼요.
이렇게 형태에 집중하여 이름을 짓는 방식에는 몇 가지 장점이 있어요.
직관적이고 일관성이 높아요
시각적 형태에 집중하기 때문에, 누가 보더라도 'bell'은 종 모양을 연상해요. 하지만 'alarm'은 사람마다 종, 경광등, 삼각 표지판 등 다양한 이미지를 떠올릴 수 있어요.
다양한 직군이 함께 사용하는 라이브러리인 만큼, 누구나 쉽게 이해할 수 있는 것이 중요했거든요.
유지보수가 쉬워요
만약 의미 기반으로 이름을 지었을 때 어떤 문제가 생길 수 있는지 설명하면 더 이해하기 쉬울 거예요. 예를 들어, 우리가 'alarm' 아이콘을 앞으로 종 모양이 아닌 경광등 모양으로 바꾼다고 가정해 볼게요.
이 경우, 네이밍을 수정해야 하고 관련 동료들에게 변경 사항을 알려야 하는 번거로움이 생겨요. 하지만 형태 기반 네이밍은 이런 문제에서 자유로워요.
네이밍 컨벤션
애셋 네이밍 컨벤션은 가장 큰 범주부터 가장 작은 범주로 세분화해야 혼란을 줄일 수 있다고 생각했어요. 따라서 저희의 네이밍 컨벤션은 아래의 순서를 따르고 있어요.
[ Asset Type_Category1_Category2_Character(n)_3d ]
이제 각각 항목에 대해 자세히 설명할게요.
Asset Type
Asset type은 말 그대로 애셋이 어떤 타입인지 설명하는 가장 큰 범주예요. 총 5가지의 타입이 있어요.
Category 1
Category 1은 네 가지 타입으로 분류했어요.
creature과 object로 분류한 것은 보편적인 개념 상 구분하기 쉬웠기 때문이에요. 이 분류는 앞으로 추가되는 모든 애셋을 논리적으로 포함할 수 있다는 장점도 있어요.
'money'는 사전적으로 'object'의 하위 개념으로 볼 수 있지만, 저희는 삼쩜삼 서비스의 핵심적인 성격을 고려해 독립된 상위 카테고리로 분리했어요.
세금과 돈을 다루는 서비스인 만큼, 돈 관련 애셋의 양이 많고 종류도 매우 다양하기 때문이죠. 디자이너가 실제 작업 시 돈 관련 애셋을 가장 자주 찾게 된다는 걸 고려하면, 'money'를 별도 카테고리로 분리하는 것이 훨씬 효율적이라고 판단했어요.
Category 2
Category 2는 1에서 더 세분화된 분류를 의미해요.
Asset type과 Category1은 고정적이지만, Category2부터는 디자이너가 자유롭게 추가할 수 있어요.
Character
Character은 애셋의 고유 특징을 살리 역할인데요, 쉽게 얘기하면 형용사처럼 쓰이는 부분이에요.
Character는 생략될 수도 있고, 아래 가이드에 부합한다면 언제든 자유롭게 쓸 수 있어요.
애셋 라이브러리 파일 제작 및 레이아웃 정리
저희는 접근성이 좋은 피그마로 애셋 라이브러리 파일을 만들기로 결정했어요.
가장 신경 쓴 부분은 애셋 라이브러리 파일의 구조와 네이밍 컨벤션의 구조를 일치하게 만드는 것이었어요. 따라서 Asset type은 페이지 단위로 구분하고, Category 1과 2는 타이틀 크기를 통해 구분했어요.
라이브러리에 적재할 애셋 선별
라이브러리의 기반이 만들어졌으니, 다음은 애셋을 넣을 차례였어요.
우선 라이브러리에 넣을 애셋을 선별하는 과정이 필요했어요. 기존에는 오래된 애셋과 최신 애셋의 구분이 명확하지 않았거든요. 이 상황이 유지된다면 브랜드 퀄리티와 일관성을 유지하기 어렵다고 생각했어요.
그래서 라이브러리에는 최신 브랜드 이미지에 맞는 애셋만 남기기로 했어요. 그리고 오래된 애셋들 중 리뉴얼이 필요한 것들은 새롭게 제작하기로 결정했어요.
애셋 라이브러리, 이렇게 완성됐어요
PD 2명, 플랫폼 디자이너와 Fe, BX가 함께 만들어낸 애셋 라이브러리예요.
한눈에 봤을 때 애셋을 찾기 쉬울 것 같지 않나요? 모든 애셋은 컴포넌트화 되어 각기 다른 피그마 파일에서 빠르게 가져다 쓸 수 있고, 네이밍 규칙 덕분에 검색도 쉬워졌어요.
하지만 이것이 애셋 라이브러리의 최종 완성은 아니에요. 서비스를 실제로 사용해 보고 피드백을 받는 것도 중요한 과정이었기 때문이에요.
저희는 라이브러리 완성 이후 직접 사용해 보면서 개선할 점을 찾았어요.
애셋 라이브러리, 개선점 찾기
애셋을 매번 네이밍 하고 컴포넌트화 하는 건 비효율적인걸?
애셋 라이브러리를 통해 많은 비효율이 개선되었지만, 한편으로 또 다른 개선해야 할 점이 생겼어요.
이미 라이브러리에 등록된 애셋을 사용하는 것은 빠르고 쉬웠지만, 새로운 애셋을 추가할 때는 아래 과정을 거쳐야 했거든요.
1. 네이밍 컨벤션 규칙에 맞게 이름 짓기
2. 애셋 컴포넌트화
3. 퍼플리시
저도 직접 해보았는데 어려운 과정은 아니지만 조금 번거롭게 느껴졌어요. 특히 추가해야 할 애셋이 두 개 이상일 경우, 같은 과정을 반복해야 해서 효율이 떨어졌어요.
애셋 라이브러리 미팅을 했을 때도 비슷한 반응이 나왔어요. 그래서 저희 팀은 이 과정을 효율화할 방법을 고민하기 시작했어요.
AI 네이밍 플러그인 제작
저희가 찾은 해결책은 AI 네이밍 플러그인이었어요.
이전부터 FE 개발자로부터 피그마 플러그인을 만들 수 있다는 이야기를 들었고, 최근 AI가 다양한 분야에서 활용되는 것을 보면서 네이밍 작업도 AI가 자동화할 수 있을 것 같았어요.
따라서 네이밍 컨벤션을 AI에게 학습시키면, 디자이너가 일일이 이름을 짓는 수고를 덜 수 있을 것이라고 판단했어요. 개발자와의 미팅에서도 충분히 해볼 만하다는 답변과 함께, 컴포넌트화도 플러그인으로 한 번에 가능하다는 이야기를 들었어요.
AI 네이밍 플러그인을 활용하면 과정이 이렇게 줄어들 것으로 예상했어요.
플러그인의 효과가 확실할 것 같았고, 따라서 빠르게 디자인해서 배포하는 것을 목표로 했어요.
여러 가지 시안을 만들었고, 피그마로 프로토타입을 만들어 직접 클릭해 보며 전체 플로우가 어색한지 여러 번 검토했어요. 어색한 부분은 문서로 정리해 두고, 어떻게 바꾸면 좋을지 같이 아이디어를 내고 개선했어요.
삼쩜삼 AI 플러그인 “쩜삼이“ 탄생
AI 네이밍 플러그인을 사용하면
1. 최대 10개까지의 애셋을 한 번에 선택,
2. 자동으로 네이밍을 추천받고
3. 컴포넌트화까지 할 수 있어요!
반응은 어땠을까요?
디자인팀의 25 1H의 PD 회고를 진행했을 때, 애셋 라이브러리와 관련된 긍정적인 피드백이 많았어요.
특히 이 프로젝트의 가장 큰 목적이었던 효율성과 속도에 대한 이야기가 많아서 정말 뿌듯했답니다.
그리고 디자인팀뿐만 아니라 마케터, PM도 애셋 라이브러리에서 필요한 애셋을 골라 사용하는 경우가 많아졌어요.
애셋 라이브러리 파일 분석을 봐도, 다양한 팀에서 많은 애셋을 사용하고 있는 것을 확인할 수 있었어요.
마치며
애셋 라이브러리를 만드는 과정이 쉽지만은 않았어요. 아무런 기반이 없는 상태에서 모든 것을 처음부터 정해야 했기 때문이죠. 하지만 완성된 라이브러리를 동료들이 잘 활용하는 모습을 보면서 큰 보람을 느꼈고, 매우 뿌듯한 경험으로 오래 기억될 것 같아요.
이처럼 문제를 해결하고 사용자들로부터 긍정적인 피드백을 받는 경험은 디자이너에게 큰 원동력이 되는 것 같아요.
혹시 업무 도중 비효율적인 부분이 있다면, 그냥 지나치지 않고 작은 것부터 개선해 보면 어떨까요?
예상치 못했던 큰 변화와 효과를 가져올 수도 있으니까요!
읽어주셔서 감사합니다.
