<p style="text-align:justify;">최근 디자인 툴의 핵심이자 가장 큰 관심사는 역시 인공지능(AI)입니다. 오늘 소개할 <a href="https://creatie.ai/"><u>‘Creatie’</u></a> 역시 인공지능을 활용해, 화면 디자인을 효율적으로 진행할 수 있는데요. 아직 출시된 지 한 달 밖에 지나지 않았지만, ‘프로덕트 헌트(Product Hunt, 서비스 소개 커뮤니티로 국내의 디스콰이엇과 유사)’에서 약 1,400표를 얻으며, 지난 4월 인기 프로덕트에 선정되었을 만큼 많은 관심을 받고 있습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">위 이미지는 <a href="https://creatie.ai/"><u>‘Creatie’</u></a> 블로그에서 확인한 내용으로, 이들이 어떤 가치를 제공하기 위해 시작되었는지 확인할 수 있습니다. 피그마와 스케치가 컴포넌트 단위의 관리에 초점을 맞추고 있다면, 이들은 디자이너가 더 나은 유저 인터페이스를 만드는 것에 집중할 수 있도록 돕습니다. AI가 디자인 업무를 대체하는 것이 아니라 디자이너로서의 각각의 능력을 강화하고, 올바른 균형 감각을 유지할 수 있게 돕고 싶다는 내용입니다. 그럼 지금부터 ‘Creatie’에 어떤 기능이 있는지 하나씩 살펴보겠습니다.</p><div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div><h3 style="text-align:justify;"><strong>쉬운 작업의 시작, 피그마와 스케치 파일 가져오기</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/image7.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">우선 서비스 가입 후 대시보드에 진입하면, 툴을 학습하는 데 필요한 내용이 미리 생성된 것을 확인할 수 있습니다. 그리고 우측 상단에 보면, 새로운 디자인 파일 생성하기와 임포트(가져오기) 버튼을 확인할 수 있는데, 피그마, 스케치, XD, Axure 등을 지원합니다. 파일을 등록해서 불러올 수도 있고, 링크를 복사해 가져오는 기능도 지원합니다. 링크를 통해서도 피그마 등에서 작업한 파일을 가져올 수 있기에, 피그마와 비교하거나 이어서 작업하는 환경을 원할 때 유용하게 사용할 수 있습니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>피그마와 유사한 기본 기능</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie2.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">새로운 툴을 쓸 때, 중요한 기준이 되는 것 중 하나가 바로 ‘학습 난이도’인데요. ‘Creatie’는 피그마와 거의 유사한 구조를 갖고 있어, 피그마를 몇 번 사용해 봤다면 어렵지 않게 사용할 수 있습니다. 위 이미지는 가입과 동시에 확인할 수 있는 ‘프로젝트 - 둘러보기’에 포함된 내용으로, 디자인 작업을 위해 사용할 수 있는 주요 기능을 잘 정리하고 있습니다.</p><p style="text-align:justify;"> </p><blockquote><p style="text-align:justify;"><strong>①</strong> 캔버스는 공간 제약이 없는 작업 공간입니다. 화면을 작업하거나, 이미지를 생성하거나, 프로토타입 등을 만들 수 있습니다. 피그마, 스케치 등에서도 동일하게 제공되는 공간이기도 합니다.</p><p style="text-align:justify;"><strong>②</strong> 크리에이티 핵심 기능을 확인하고 사용할 수 있는 도구 모음입니다. 프레임과 섹션을 생성할 수 있고, 도형을 만들 수 있으며, 피그마에서는 플러그인을 사용해야 하는 화면 간 연결 등을 작업할 수 있습니다. 또 텍스트를 입력할 수 있으며, 오늘 소개할 핵심 기능 중 하나인 UX/UI 생성 기능과 이미지 생성 기능도 포함된 모습입니다.</p><p style="text-align:justify;"><strong>③</strong> 다음은 속성 패널로 레이어와 도구/기능 관련 속성을 확인하고 수정할 수 있습니다.</p><p style="text-align:justify;"><strong>④</strong> 왼쪽 사이드바에서는 모든 문서 페이지와 검색 레이어를 확인하고 선택할 수 있습니다.</p><p style="text-align:justify;"><strong>⑤</strong> 탐색 모음에서는 보기 옵션을 수정하고, 공동 작업자의 상태를 확인하고, 더 많은 사람들과 파일을 공유할 수 있습니다.</p></blockquote><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>핵심 기능 1. Create wizard</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie3.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">‘Creatie’의 첫 번째 핵심 기능 중 하나인 ‘Create wizard’는 AI를 활용해 컴포넌트를 생성해 주는 기능입니다. 상단 도구에서 마법사의 모자 아이콘을 클릭한 뒤 영역을 지정하면, 컴포넌트, 아이콘, 영감 등 세 가지 구분에 맞춰 다양한 종류의 컴포넌트를 확인하고, 클릭 한 번으로 적용할 수 있습니다. 피그마에서는 이런 작업을 진행할 때, 플러그인을 쓰거나 템플릿을 확인한 뒤 적용하는 경우가 많은데요. ‘Create wizard’ 기능을 활용하면 클릭 몇 번으로, 와이어프레임 이상의 작업물을 만들어낼 수 있습니다.</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie4.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">위 그림은 캘린더와 사진 갤러리를 영역 지정 후 클릭 한 번으로 적용한 모습입니다. 이미지가 아닌 컴포넌트로 반영되기에 세부적인 편집이 가능하며, 일반적으로 쓰이는 컴포넌트를 추천해 줘서 꽤 완성도 높게 초기 디자인을 작업하는 데 도움받을 수 있습니다. 이렇게 생성한 컴포넌트의 경우 자동으로 컬러 스타일을 만들어주기 때문에, 별도로 컬러값이나 폰트를 지정해야 하는 번거로움도 줄일 수 있어 활용도가 더 높습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>핵심 기능 2. Magicon</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie5.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">두 번째 핵심 기능은 원하는 조건에 맞춰 이미지를 생성할 수 있는 ‘Magicon’입니다. 이미지 생성 자체는 피그마 플러그인을 포함해 많은 서비스에서 독립 또는 연계 방식으로 제공하고 있지만, ‘Creatie’에서의 장점은 작업 과정에서 자연스럽게 사용할 수 있다는 점입니다. 지금 작업하고 있는 화면 또는 기능과 적합한 이미지 등을 다른 곳에서 만들어 복사하는 것도 꽤 귀찮은 일이기에, 서비스를 벗어나지 않고 활용할 수 있다는 점은 꽤 매력적입니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie6.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">이미지는 스타일과 원하는 레퍼런스를 선택하는 것으로 생성할 수 있고, 유사하지만 서로 다른 결과를 한 번에 4개까지 만들어줍니다. 생성 후엔 배경을 제거할 수 있는데, Creatie는 기본적으로 불러오거나 적용한 이미지에 대해 배경 제거, 벡터화 등 이미지 개선 기능을 기본적으로 적용하고 있습니다. (다만, 아직 생성 속도나 편집 기능이 완전하지 않아서 서비스에 사용할 수준으로 100% 기대하긴 어렵습니다.)</p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie7.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">또한 사이드바의 ‘리소스’ 메뉴를 통해 이미지와 아이콘을 제공하고, 원하는 종류의 이미지를 생성해 주는 기능도 함께 지원합니다. 예를 들어, 특정 화면에 포함된 영역을 선택한 뒤 이미지 - 자연 메뉴를 선택하면 관련 이미지를 생성해 채워줍니다. 조건을 따로 지정할 순 없지만, 대략 어떤 분위기의 이미지가 필요하다 정도를 보여줄 때 유용하게 사용할 수 있습니다. 이름, 날짜 및 시간, 이메일 주소, 주소 등 더미 데이터에 해당하는 내용을 빠르게 채워주는 기능도 지원합니다. 확실히 불필요한 작업에 쓰이는 시간을 줄이려는 노력을 자주 접할 수 있습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>핵심 기능 3. Automated style guide</strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie8.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">세 번째 핵심 기능은 스타일 가이드 생성 및 디자인 검토 기능입니다. 먼저 검토 기능을 보면 검토에 필요한 레이어를 선택한 뒤, 확인할 항목(컬러, 텍스트, 효과 등 8가지 항목)을 선택하면 스타일 가이드에 따라 검토가 필요한 내용을 자세히 확인할 수 있습니다. 정확한 위치에 코멘트처럼 내용을 확인할 수 있어 개별 수정도 가능하며, 일괄 수정 기능 또한 지원합니다. 디자인 작업을 하다 놓친 부분을 중간중간 가이드에 따라 확인하기 좋은 기능입니다. </p><p style="text-align:justify;"> </p><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie9.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">아직 스타일 가이드가 없는 상태라면, 작업한 레이어를 선택해 스타일 가이드를 생성해 주는 기능을 활용할 수 있습니다. 컬러, 텍스트 등 6가지 항목 중 원하는 것을 선택한 뒤 생성 버튼을 누르면 위 이미지처럼 상세한 가이드를 확인할 수 있습니다. 스타일 가이드는 보통 별도로 작업하고 업데이트하는 경우가 많은데, 이 기능을 잘 활용하면 최초 생성과 수정을 어렵지 않게 진행할 수 있지 않을까 싶습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><h3 style="text-align:justify;"><strong>한 번은 꼭 써봐야 하는 이유 </strong></h3><figure class="image image_resized" style="width:100%;"><img src="https://yozm.wishket.com/media/news/2605/Creatie10.png"><figcaption><출처: Creatie></figcaption></figure><p style="text-align:justify;"> </p><p style="text-align:justify;">‘Creatie’는 레이어를 선택해 화면 해상도를 바로 변경하거나, 페이지 단위로 컬러 태그를 입력하거나, 코멘트를 음성으로 남길 수 있는 기능을 지원하는 등 우리가 기존의 유사 서비스에서 경험하지 못한 디테일한 기능도 지원합니다. 반나절 정도 사용해 보며 느낀 점은 피그마의 유용한 플러그인을 내재화하고, 생성형 AI를 적재적소에 활용한 서비스라는 점입니다. </p><p style="text-align:justify;"> </p><p style="text-align:justify;">물론 피그마에서도 AI를 적극적으로 도입했고 커뮤니티라는 강력한 도구를 보유하고 있지만, 아직 출시된 지 한 달 정도밖에 되지 않은 ‘Creatie’의 가능성 또한 높다는 생각이 들었습니다. 무엇보다 귀찮고 손이 많이 가는 기존 작업들을 기능으로 하나씩 구현했기 때문이죠. 앞으로도 이 방향성에 초점을 맞출 거라고 하니, 더 나아질 모습을 기대해 봐도 좋을 것 같습니다.</p><p style="text-align:justify;"> </p><p style="text-align:justify;"><참고></p><p style="text-align:justify;"><a href="https://creatie.ai/"><u>https://creatie.ai/</u></a></p><p style="text-align:justify;"> </p><p style="text-align:justify;"> </p><figure class="table"><table><tbody><tr><td><p style="margin-left:0px;text-align:center;"><strong>[위시켓 AI 컨설팅 무료 이벤트]</strong></p><p style="margin-left:0px;text-align:center;">요즘IT 독자들을 위해 준비했어요. 챗봇/데이터 자동화/업무 효율화 등 AI 도입을 고민하고 있다면 위시켓의 AI 컨설팅을 무료로 신청해 보세요. 문제 상황 정의부터 성과 추적, 솔루션 구축까지 한 번에 제안 드립니다.</p></td></tr></tbody></table></figure><figure class="image image_resized" style="width:100%;"><a href="https://tally.so/r/mB89JY?utm_source=yozm_it&utm_campaign=oncontent_241227"><img src="https://yozm.wishket.com/media/news/2605/CD-1_1280x320.png"></a></figure><p style="margin-left:0px;text-align:center;"><span style="color:rgb(153,153,153);">©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.</span></p>