🔥 디자인 시스템 구축에 도움이 되는 서비스 4

안녕하세요. 구독자님, 오늘도 팁스터 뉴스레터와 함께 해주셔서 감사합니다. '디자인 업무 효율을 높이는 툴' 아홉 번째 주제는 '디자인 시스템'입니다. 디자인 시스템 구축이 되는 4개의 서비스를 에디터들이 직접 써보고 정리했어요. 그럼, 이번 뉴스레터도 재미있게 읽어주세요! 

🚜 파밍 클럽 1기 모집 안내 (~5/30 목요일)

🎁 클럽을 통해 무엇을 얻을 수 있나요?

나는 어떻게 일하고 있을까?를 업무 단계, 역량, 커리어의 관점에서 살펴봐요.
다른 디자이너는 어떻게 일할까?에 대한 답을 확인하고 내 업무와 비교, 발전시켜요
업무를 더 생산적으로 진행할 수 있는 방법에 대해 고민하고 답을 찾아갈 수 있어요.
단계별 업무 방식, 역량, 커리어, 툴 활용 방법 등에 대한 아티클을 매니저들이 공유해요.
사용하기 좋은 툴, 아티클 등이 정리된 디렉토리(full ver.) 접근 권한을 드려요.

디자인 툴 디렉토리 (샘플 확인하기)

나만의 업무 방법 및 사용하기 좋은 툴을 정리할 수 있는 노션 템플릿을 드려요.
업무 단계별 효율을 높이는데 도움이 되는 질문과 답을 정리할 수 있어요.
온/오프라인으로 진행되는 모임에 가장 먼저 참여할 수 있는 기회를 드려요.

보다 자세한 내용 확인 및 신청은 아래 링크를 참고해주세요!

💡 업무 효율을 높이는 2개 클럽의 신규 기수 모집 안내!

디자이너를 위한 파밍 클럽, PM/서비스 기획자를 위한 프로덕트 레시피 클럽

maily.so

👀 오늘 소개할 서비스 4

제작한 화면을 바탕으로 디자인 시스템을 생성해주는, Creatie
디자인 시스템에 필요한 컴포넌트와 사례를 모아주는, Component gallery

디자인 시스템 구축부터 문서화까지, Figr Identity
폰트와 컬러 스타일을 효율적으로 수정할 수 있는, Batch Styler

1. 제작한 화면을 바탕으로 디자인 시스템을 생성해주는, Creatie

최근 디자인 툴의 핵심이자 가장 큰 관심사는 역시 인공지능(AI)인데요. 오늘 소개할 서비스 역시 인공지능을 활용해 화면 디자인을 효율적으로 진행할 수 있어요. 출시된 지 한 달 밖에 지나지 않았지만 ‘Product Hunt(서비스 소개 커뮤니티로 국내의 디스콰이엇과 유사)’에서 약 1,400표를 얻으며 지난 4월 인기 프로덕트에 선정되었을 만큼 많은 관심을 얻고 있기도 하고요. AI를 통해 주요 컴포넌트를 생성해 주고, 이미지 생성 기능을 기본 제공하며, 제작한 화면을 선택해 자동으로 디자인 시스템을 만들어주거나 검토가 필요한 내용을 정리해 주는 것이 핵심이에요.

주요 기능 소개

서비스에는 앞서 말씀드린 것처럼 인공지능을 적극적으로 활용하는 여러 기능이 포함되어 있는데요. 그중, 오늘의 주제와 가장 밀접한 기능은 ‘스타일 가이드’ 생성 기능이에요. 작업한 레이어를 선택해 컬러, 텍스트 등 6가지 항목 중 원하는 것을 선택한 뒤 생성 버튼을 눌러 가이드를 만들 수 있어요.

저도 샘플로 제공되는 화면을 선택해 스타일 가이드를 생성해 봤는데요. 컬러 스타일로 시작해 텍스트, 버튼, 효과 스타일을 자세히 확인할 수 있고, 필요에 따라 각 스타일 내용을 수정하는 것도 가능해요.

직접 만들기 위해서는 생각보다 많은 시간을 투자해야 하는데, 화면을 빠르게 생성하는 기능과 더불어 스타일 가이드까지 만들어주니 디자인 자체에 집중할 수 있는 환경을 경험할 수 있지 않을까 싶어요. 그게 이들이 서비스를 시작한 이유기도 하고요.

또, 생성한 스타일 가이드를 바탕으로 필요한 검토가 필요한 내용을 자세히 확인하는 기능도 지원해요. 레이어를 선택한 뒤 확인할 항목 (컬러, 텍스트, 효과 등 8가지 항목)를 선택하면 스타일 가이드에 따라 정확한 위치에 코멘트처럼 내용을 확인할 수 있어요. 버튼 클릭 한 번으로 수정이 가능하며, 일괄 수정 기능 또한 지원하죠. 디자인 작업을 하다 놓친 부분을 중간중간 가이드에 따라 확인하기 좋아요.

좋은 점

화면 제작, 필요한 이미지 생성 및 탐색, 스타일 가이드 구성 등 핵심 기능을 모두 기본으로 제공해요.
플러그인 등을 설치하지 않고도 빠르게 주요 기능을 활용하고 작업에 활용할 수 있어요.
레이어를 선택해 해상도를 바로 변경하거나, 페이지 단위의 태그 입력, 음성 코멘트 등록 등 디테일이 좋아요.
피그마, XD, 스케치 파일을 불러와 바로 작업할 수 있어요.

아쉬운 점

론칭한 지 두 달이 채 되지 않았고, 베타로 제공되는 기능이 많아 종종 원하는 결과를 얻지 못할 때가 있어요.

적용 가능한 업무 단계 및 활용 방법

업무 단계	활용 방법
화면 기획 및 디자인	컴포넌트 추천 및 생성에 인공지능을 적극적으로 활용할 수 있어요.
	스타일과 맞지 않는 부분들에 대한 검토 내용을 빠르게 확인, 수정할 수 있어요.
	화면에 필요한 아이콘, 아미지 세트를 제공하며 생성형 AI로 직접 제작할 수 있어요.
디자인 시스템 제작	제작한 화면(레이어)에 따른 디자인 시스템(스타일 가이드)을 자동으로 생성해줘요.
	최초 생성한 스타일 가이드를 직접 수정할 수 있어요.

학습 난이도 ⭐⭐

기본적인 기능 사용과 UI 등은 피그마와 유사해 어렵지 않게 적응할 수 있어요.
주요 기능에 대한 학습 콘텐츠를 대시보드에서 바로 확인할 수 있어요.

가격 정책

현재 모든 기능을 무료로 사용할 수 있어요.

Creatie 바로가기

2. 디자인 시스템에 필요한 컴포넌트와 사례를 모아주는, Component gallery

두 번째로 소개할 서비스는 전 세계 다양한 디자인 시스템을 기반으로 활용 가능한 컴포넌트를 종류에 따라 확인할 수 있는 ‘The Component Gallery’예요. 원하는 컴포넌트 중 특정 케이스를 선택하면 해당 디자인 시스템으로 이동, 예제를 확인하고 적용할 수 있어요.

‘The Component Gallery‘에서는 크게 2가지 구분에 따라 내용을 확인할 수 있는데요. 하나는 컴포넌트, 또 하나는 디자인 시스템이에요. 전 세계 다양한 서비스 및 브랜드의 디자인 시스템 내 컴포넌트를 분류에 따라 정리해 주기 때문인데요. 종류가 꽤 세분화되어 있어 원하는 컴포넌트를 찾기에 충분한 환경을 제공해요.