👀 오늘 소개할 서비스 4
- 제작한 화면을 바탕으로 디자인 시스템을 생성해주는, Creatie
- 디자인 시스템에 필요한 컴포넌트와 사례를 모아주는, Component gallery
- 디자인 시스템 구축부터 문서화까지, Figr Identity
- 폰트와 컬러 스타일을 효율적으로 수정할 수 있는, Batch Styler
1. 제작한 화면을 바탕으로 디자인 시스템을 생성해주는, Creatie
최근 디자인 툴의 핵심이자 가장 큰 관심사는 역시 인공지능(AI)인데요. 오늘 소개할 서비스 역시 인공지능을 활용해 화면 디자인을 효율적으로 진행할 수 있어요. 출시된 지 한 달 밖에 지나지 않았지만 ‘Product Hunt(서비스 소개 커뮤니티로 국내의 디스콰이엇과 유사)’에서 약 1,400표를 얻으며 지난 4월 인기 프로덕트에 선정되었을 만큼 많은 관심을 얻고 있기도 하고요. AI를 통해 주요 컴포넌트를 생성해 주고, 이미지 생성 기능을 기본 제공하며, 제작한 화면을 선택해 자동으로 디자인 시스템을 만들어주거나 검토가 필요한 내용을 정리해 주는 것이 핵심이에요.
주요 기능 소개
서비스에는 앞서 말씀드린 것처럼 인공지능을 적극적으로 활용하는 여러 기능이 포함되어 있는데요. 그중, 오늘의 주제와 가장 밀접한 기능은 ‘스타일 가이드’ 생성 기능이에요. 작업한 레이어를 선택해 컬러, 텍스트 등 6가지 항목 중 원하는 것을 선택한 뒤 생성 버튼을 눌러 가이드를 만들 수 있어요.
저도 샘플로 제공되는 화면을 선택해 스타일 가이드를 생성해 봤는데요. 컬러 스타일로 시작해 텍스트, 버튼, 효과 스타일을 자세히 확인할 수 있고, 필요에 따라 각 스타일 내용을 수정하는 것도 가능해요.
직접 만들기 위해서는 생각보다 많은 시간을 투자해야 하는데, 화면을 빠르게 생성하는 기능과 더불어 스타일 가이드까지 만들어주니 디자인 자체에 집중할 수 있는 환경을 경험할 수 있지 않을까 싶어요. 그게 이들이 서비스를 시작한 이유기도 하고요.
또, 생성한 스타일 가이드를 바탕으로 필요한 검토가 필요한 내용을 자세히 확인하는 기능도 지원해요. 레이어를 선택한 뒤 확인할 항목 (컬러, 텍스트, 효과 등 8가지 항목)를 선택하면 스타일 가이드에 따라 정확한 위치에 코멘트처럼 내용을 확인할 수 있어요. 버튼 클릭 한 번으로 수정이 가능하며, 일괄 수정 기능 또한 지원하죠. 디자인 작업을 하다 놓친 부분을 중간중간 가이드에 따라 확인하기 좋아요.
좋은 점
- 화면 제작, 필요한 이미지 생성 및 탐색, 스타일 가이드 구성 등 핵심 기능을 모두 기본으로 제공해요.
- 플러그인 등을 설치하지 않고도 빠르게 주요 기능을 활용하고 작업에 활용할 수 있어요.
- 레이어를 선택해 해상도를 바로 변경하거나, 페이지 단위의 태그 입력, 음성 코멘트 등록 등 디테일이 좋아요.
- 피그마, XD, 스케치 파일을 불러와 바로 작업할 수 있어요.
아쉬운 점
- 론칭한 지 두 달이 채 되지 않았고, 베타로 제공되는 기능이 많아 종종 원하는 결과를 얻지 못할 때가 있어요.
2. 디자인 시스템에 필요한 컴포넌트와 사례를 모아주는, Component gallery
두 번째로 소개할 서비스는 전 세계 다양한 디자인 시스템을 기반으로 활용 가능한 컴포넌트를 종류에 따라 확인할 수 있는 ‘The Component Gallery’예요. 원하는 컴포넌트 중 특정 케이스를 선택하면 해당 디자인 시스템으로 이동, 예제를 확인하고 적용할 수 있어요.
‘The Component Gallery‘에서는 크게 2가지 구분에 따라 내용을 확인할 수 있는데요. 하나는 컴포넌트, 또 하나는 디자인 시스템이에요. 전 세계 다양한 서비스 및 브랜드의 디자인 시스템 내 컴포넌트를 분류에 따라 정리해 주기 때문인데요. 종류가 꽤 세분화되어 있어 원하는 컴포넌트를 찾기에 충분한 환경을 제공해요.
주요 기능 소개
현재 등록된 컴포넌트 수는 총 67개예요. 리스트를 통해 컴포넌트 이름과 간략한 설명을 확인할 수 있으며 해당 컴포넌트가 포함된 디자인 시스템의 수가 몇 개인지도 함께 살펴볼 수 있어요. 순서로 생각해 보면, 디자인 시스템을 만들 때 포함하고 싶은 컴포넌트를 먼저 찾고, 상세 화면으로 이동해 디자인 시스템 사례를 확인할 수 있는 셈이죠.
‘Rating’ 컴포넌트를 선택해 상세화면으로 이동한 모습이에요. 컴포넌트에 대한 상세 정보가 담겨있고, 어떻게 하면 더 잘 활용할 수 있는지에 대한 아티클도 볼 수 있어요. 핵심은, 해당 컴포넌트가 담긴 디자인 시스템 사례를 제공한다는 점이에요. Ant Design, Uber, Fluent UI 등 잘 알려진 디자인 시스템 페이지로 바로 이동해서 어떻게 적용되어 있는지 확인해볼 수 있어요.
제공되는 디자인 시스템 사례 중, ‘Ant Design’을 선택해 이동, 이곳에서 말하는 ‘Rating’ 컴포넌트에 대한 내용을 확인하는 모습이에요. 이런 연결이 컴포넌트 단위로 모두 적용되어 있기에 우리는 어떤 방법으로 구성을 할 것인지에 대한 내용을 다채롭게 확인하기 좋아요.
좋은 점
- 컴포넌트와 디자인 시스템 사례가 꾸준히 업데이트 되고 있어요.
- 컴포넌트에 대한 기본 정보는 물론, 디자인 시스템 사례가 연결되어 있어 구성에 필요한 정보를 찾기 좋아요.
아쉬운 점
- 개인적으로 아쉬웠던 점은 없어요.
3. 디자인 시스템 구축부터 문서화까지, Figr Identity
세 번째로 소개할 툴은 바로 피그마에서 사용할 수 있는 Figr Identity 플러그인입니다. 특히 Color, Typo, Grid 같은 Foundation을 빠르게 구축하기에 유리한 툴인데요. 스타일 및 변수를 아주 쉽게 생성하고 관리할 수 있어서, 이미 구축된 시스템이 미비하거나 이제 막 구축하려는 분들에게 더욱 추천하고 싶어요.
주요 기능 소개
Figr의 특징을 간단하게 소개하면 아래와 같아요.
- Foundation 카테고리별로 기본적인 속성값이 세팅되어 있음
- 설정한 속성값을 빠르게 스타일 가이드로 생성
- 플러그인을 실행하면, 아래와 같은 화면이 나오게 되는데요. 함께 자세히 살펴볼까요?
플러그인을 실행하면 Color, Typography, Spacing, Grids, Radius, Shadow, Components 이렇게 총 8개의 탭을 확인할 수 있어요.
Color 탭을 살펴보면, 좌측 사이드바에서 기본적인 위계에 맞게 Primay, Secondary, Neutrals 등의 그룹이 세팅되어 있는걸 확인할 수 있는데요. 그리고 우측 팔레트에서 혼자 2칸을 차지하고 있는 Primary 보이시나요? Primary 값을 변경하면 나머지 컬러들이 자동으로 추천됩니다. 10단계, 혹은 그 이상도 설정할 수 있어요. 좌측의 그룹도 내 프로젝트에 맞게 자유롭게 수정 및 추가할 수 있습니다.
타이포그래피도 마찬가지로 Desktop과 Mobile 카테고리로 나눠서 각 폰트별 속성을 설정할 수 있도록 되어 있어요.
컴포넌트 탭에도 기본적인 버튼, 인풋, 컴포넌트들이 세팅되어 있습니다. 컴포넌트들은 Storybook과 유사하게 기본적인 인터렉션 값을 전부 포함하고 있어 클릭하면 동작하는 걸 확인할 수 있었어요. 다만 이 컴포넌트를 원하는 대로 수정하는 것은 코드 라이브러리와 함께 유료로 제공하고 있습니다.
원하는 속성값을 모두 세팅했다면 상단의 generate 버튼을 누르면 됩니다. 그럼 수초 안에 프로젝트 이름을 가진 새로운 스타일 가이드 페이지가 생성됩니다.
생성된 라이브러리는 자동으로 스타일 및 variable로도 등록됩니다. Figr을 활용하면 가이드를 보기 좋게 정리하거나 스타일을 하나하나 등록하는데 시간을 쓰지 않아도 될 것 같네요. Figr 웹사이트에 들어가보니 디자인시스템 외에도 다양한 디자인 툴을 제공하고 있어서, 한 번 둘러보시길 추천합니다!
좋은 점
- 플러그인을 쓰면서 좋았던 점은 제로부터 시작하는 게 아니라 그럴듯한 디폴트 값을 제공해주고, 이를 바탕으로 조금씩 내가 원하는대로 조정해 사용할 수 있다는 점이었어요. 실무에서도 이런 기본적인 속성들은 유사한 값을 사용하는 경우가 많아 시간을 많이 절약할 수 있었습니다. 홈페이지에서는 50초 안에 디자인 시스템을 만들어보라고 소개하는데, 이렇게 미리 세팅된 값을 활용하라는 점을 어필하고 싶었던 것 같아요.
아쉬운 점
- 변경되는 내용이 있을 경우 기존 내용이 업데이트 되기를 기대했는데, 새로운 시스템이 생성되는 점이 아쉽게 느껴졌어요.
4. 폰트와 컬러 스타일을 효율적으로 수정할 수 있는, Batch Styler
네 번째로 소개할 툴은 등록된 폰트 및 컬러 스타일을 빠르게 수정할 수 있는 Batch Styler입니다.
여러 프로젝트를 디자인하다 보면 각 프로젝트마다 스타일도 여러 벌이 만들어지게 됩니다. 그런 경우 대개 기존에 사용했던 UI 키트나 디자인 시스템을 가져와 프로젝트에 맞게 업데이트하는 과정을 거치게 되는데요, 이를 효율적으로 만들어 주는 플러그인이 있어 소개해보려고 합니다!
주요 기능 소개
- 컬러 스타일 변경 (Hue, Saturation, Lightness, Alpha, Hex)
- 타이포그래피 스타일 변경 (Font family, Weight, Line height, Letter spacing)
- 스타일명 일괄 변경 및 스타일 삭제
- 디스크립션 추가
사용 방법은 매우 쉬운데요, 변경을 원하는 항목을 선택하고 원하는 대로 속성을 조정하면 됩니다. 이후 하단의 Update Style 버튼을 누르면 피그마에 스타일이 일괄 업데이트 됩니다. (속성을 변경했으면 다음 스타일로 넘어가기 전에 Update를 눌러주세요!)
좋은 점
- 자체 텍스트 패널에서 폰트 종류 및 단계를 수정하면서 귀찮고 번거로웠던 경험이 있어서, 한 화면 내에서 속성을 빠르게 업데이트 할 수 있다는 좋았습니다.
아쉬운 점
- 잠깐 내가 어떤걸 수정중이었더라? 할 때 지금 선택된 항목에 다른 표시가 없어서 수정중인 항목을 알 수가 없었어요.
- 변수로 등록된 값들은 해당되지 않고, 스타일만 변경이 가능한 점이 아쉬웠습니다.
팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다.
- 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'
- 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커들의 레시피'
- 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십’
- 디자인 업무 효율을 높이는 다양한 툴에 대한 이야기
#지식토스트