그동안 UI/UX를 디자인하기 위한 툴들은 계속하여 변화해 왔습니다. 현재는 피그마가 점유율이 가장 높습니다. 피그마 무료 제공도 한 몫을 했다고 생각합니다. 베타기간을 지나 현재는 대부분 유료화 되었습니다. 또한 격변하는 AI 시대를 맞이하여 또 한번 디자인 툴이 영향을 받고 있습니다. 그 중 올해 출시된 강력한 기능을 가진 Creatie AI에 대해서 소개해 봅니다.
툴의 변화
UI 디자인의 시작
필자는 스마트폰이 보급될 무렵 UI디자인을 시작하게 되었습니다. 3G시절 UI디자이너라는 분야가 따로 없었고 극히 일부의 웹디자이너들이 UI디자인을 시작했습니다. 따라서 적합한 툴이 없었기 때문에 포토샵으로 디자인을 했습니다. 지금 생각하면 정말 말도 안되는 일입니다. 모든 해상도별 디자인을 포토샵으로 진행했고, 네이티브 앱은 퍼블리셔의 손을 거치지 않으므로 포토샵으로 디자인한 화면의 스펙을 일일히 PPT에 기재하여 개발자에게 전달했습니다. 디자인을 하는 시간보다 문서에 스펙을 기재하는 시간이 더 오래 걸렸고, 그래서 이 일만 수행하는 ‘가이더’라는 직업이 한때 유행하기도 했습니다.
왜 툴은 계속 바뀔까?
포토샵은 UI/UX를 설계하기에 적합하지 않은 툴 입니다. 포토샵은 이미지 편집을 목표로 만들어진 툴입니다. 이름이 무려 photoshop 입니다. 이름만 들어도 알 수 있어요.
UI디자이너 수요가 많아지자 어도비는 XD라는 툴을 출시했습니다. 필자는 툴에 관심이 많은 편이라 베타 버전때 열심히 써보는 편입니다. 비슷한 시기에 스케치라는 툴도 유행을 했어요. 스케치는 맥에서만 사용할 수 있었기 때문에 윈도우 유저들은 XD를 많이 사용했습니다. 무료이기도 했고요. 그때당시 윈도우 유저였던 저는 XD를 사용했고, 너무 불안정했지만 대안이 없어 한동안 사용하다가 피그마를 만나게 됩니다. 피그마 베타버전때 사용해보고 너무 좋아서 주변 디자이너들에게 엄청난 피그마 홍보 대사가 되었습니다. 어쩜 그렇게 UI디자이너가 필요한 기능들만 쉽게 쓸 수 있도록 제작해 놓았는지 놀라울 정도였으니까요.
사실 새로운 툴 출시는 사용자 요구와 환경에 밀접한 관계를 가지고 있습니다. 꽤 오랜시간 독점했던 포토샵은 스마트폰의 시대가 오면서 UI디자인에 대한 수요가 급증했고, 이미지 편집이 주 목표였던 포토샵에 사용자는 만족할 수 없었습니다. 다른 니즈가 생겨난 것이죠. 네이티브 앱이 활성화되며 UI디자이너라는 직업 분야가 생겨났고, 피그마는 UI작업에 소요되는 여러가지 일들을 매우 빠르고 간편하게 수행할 수 있도록 제작되었습니다.
코로나 시대를 맞이하며 원격 근무가 증가한것도 한 몫을 합니다. 피그마는 UI/UX 설계를 위해 사용되기도 하지만 협업을 위한 최상의 도구이기도 합니다. 화면을 직접 보며 유관 부서와 협업하기 정말 편리합니다. 그리고 언제 어디서나 접근 가능한 클라우드 기반의 툴이라는 점도 큰 작용을 했습니다. 혹시 필자와 비슷한 시대에 디자인 시작하셨던 분들은 포토샵에서 저장하지 않은 상태에서 몇 시간동안 공들이 작업물을 날린 경험이 있으실 겁니다. 누구를 원망할수도 없습니다. 피그마 시대에서는 상상할 수 없는 일이죠.
이제 AI 시대가 왔습니다. 미드저니로 이미 그래픽 분야는 대변화를 겪고 있습니다. 하지만 아직 UI/UX설계에 적합한 툴은 나오지 않았는데요. 프로덕트를 위한 디자인 툴은 다시한번 체인지 될까요?
AI 시대에는 어떤 툴로 설계할까?
Figma의 대안으로 최근에 이슈가 되었던 툴은 펜팟(Penpot)입니다. 피그마는 대부분의 서비스를 유료로 전환하면서 일부 사용자들이 불만을 사기도 했습니다. 하지만 현재 펜팟은 피그마의 기능을 모두 갖추었으나 무료라는 점에서 많은 관심을 받고 있습니다.
오늘 제가 소개할 툴은 2024년 신규 서비스를 시작한 크리에이티(Creatie)라는 툴입니다. 이 툴 역시 피그마와 너무 닮아있지만 피그마에 없는 몇 가지 기능들이 있습니다.
Creatie 소개
2024년에 등장한 ‘크리에이티’는 Figma와 유사하지만 AI 기능을 대폭 강화한 UI 디자인 도구로 평가받고 있습니다. 이 도구는, Figma, Sketch, Adobe XD 파일을 모두 임포트할 수 있어 기존 툴을 뛰어넘는 다양한 기능을 제공합니다. 크리에이티는 단순한 프로토타입 기능뿐만 아니라, AI 기능을 추가하여 원스탑 프로덕트 디자인 툴로 소개되고 있으며, 화면에 대한 플로우 생성과 코드 확인 및 조정이 가능합니다. Figma의 기능을 유사하게 제공하면서도 AI 기능을 강화한 크리에이티는 UI 디자인 분야에서 주목받고 있습니다.
위 링크에서 크리에이티를 무료로 사용할 수 있습니다. 피그마와 동일하게 웹 기반 사용이 가능합니다.
크리에이티 주요 기능
크리에이티의 첫 화면은 피그마와 매우 유사합니다. 따라서 기존 피그마 유저라면 어렵지 않게 크리에이티를 사용할 수 있습니다. 피그마에 없는 몇 가지 주요 기능을 소개합니다.
AI로 UI 생성
AI ‘크리에이티 마법사’는 화면 선택과 텍스트 요청을 통해 화면 또는 컴포넌트를 생성하는데 도움을 줍니다. 그러나 추천되는 화면 컴포넌트는 스타일이 제한되어 있고, 텍스트를 자연어처럼 처리하지 못해 정확한 작동에 어려움이 있습니다. 이에도 불구하고, AI ‘크리에이티 마법사’의 개념 자체는 매우 유용합니다. 사용자는 기본적인 레이아웃과 컴포넌트를 빠르게 생성하여 초기 디자인을 신속히 구축할 수 있습니다. 이러한 기능은 디자이너가 반복적인 작업에서 벗어나 창의적인 작업에 더 많은 시간을 할애할 수 있도록 도와줍니다.
피그마에서 파일을 하나 가져왔습니다. 가져오는 방법은 피그마에서 File>Save as .fig를 통해 로컬에 저장한 다음 크리에이티에서 import 하면 됩니다. (피그마에서 import하는 방법과 동일)
마법사 모자 모양의 아이콘 크리에이티 마법사를 클릭하고 탭바 영역을 지정해 봅니다. 아래 스크린샷처럼 여러가지 탭바 componets를 제공하고 있고 해당 컴포넌트에 마우스를 대는 즉시 적용된 것을 볼 수 있습니다. 여러가지 컴포넌트에 마우스를 올려 적용된 화면을 보고 마음에 드는 컴포넌트를 클릭하면 화면에 바로 반영됩니다.
스타일 가이드 생성
스타일가이드 생성이 매우 쉽습니다. 위에 가져왔던 화면을 클릭하고 Style Guide 아이콘을 선택하면 어떤 가이드를 제작할지 체크할 수 있습니다. 필자는 일단 텍스트와 라운딩 설정을 선택했는데 완벽하게 스타일 가이드를 생성해줍니다.
이미지 생성
앱 화면을 디자인하다보면 여러가지 아이콘 이미지가 필요합니다. 아이콘 이미지를 화면에 넣는 방법은 여러가지가 있습니다. 유료 사이트의 소스, 피그마 커뮤니티에서 제공하는 소스, 직접 제작한 아이콘 등. 크리에이티에서는 아이콘의 스타일을 생성하여 바로 생성해 볼 수 있는 매직콘 기능이 있습니다.
‘Realistic’ 스타일을 선태하고, 레퍼런스에서 탁장시계 스케치를 선택해 보았습니다. AI가 생성한 거라 조금 말도안되는 우스꽝스러운 이미지도 있지만 귀엽게 잘 생성이 되었습니다. 빨간색으로 표시한 부분은 프롬프트를 입력할 수 있는 곳입니다. 스타일과 레퍼런스를 적절하게 선택하고 프롬프트를 입력하여 정확도를 더 높인다면 매우 유용한 기능이 될 것 같습니다.
참고로 4컷의 이미지를 생성하는데는 미드저니보다 약간의 시간이 더 소요되는 것 같습니다. 무료로 제공되는 기능인점을 감안하면 생각보다 속도가 나쁘지 않습니다.
AI Image enhancer
이 기능은 매우 간단하게 이미지에 적용됩니다. 아웃페인팅, 업스케일, 배경 제거, 벡터화 4가지의 기능은 대단한 기능은 아니지만 피그마에서는 단독으로 이용이 불가합니다. 플러그인을 사용하거나 다른 서비스를 이용하여 해당 기능을 수행해야 합니다.
이미지에서 마우스 우측 버튼을 클릭하면 ‘AI image enhancer’ 창이 열립니다.
더 이상 모자란 배경을 생성하기 위해 포토샵을 열거나 업스케일을 하기 위해 다른 사이트를 방문할 필요가 없습니다. 피그마에서 배경을 지우기 위해 Remove bg 플러그인을 사용하는데, 크리에이터에서 Remove background 기능으로도 배경이 깔끔하게 제거됩니다. 다만, Remove bg 보다 속도는 조금 느린 것 같습니다.
포토샵처럼 배경 제거도 4개의 버전을 제공하고 선호하는 것을 선택하여 사용할 수 있습니다.
아웃페이트 기능은 해당 이미지로 테스트 해 보았을때 아직 미흡한 점이 보이긴 합니다만, 그래도 무료 버전이니 이정도면 꽤 쓸만하다고 생각합니다.
이러한 기능들은 디자이너가 이미지 작업에 소요되는 시간을 크게 단축시키고, 더욱 효율적인 작업 환경을 제공합니다.
사이드 기능
크리에이티 공식 홈페이지에 주요 기능으로 소개되어 있지 않지만, 매우 유용한 사이드 기능을 정리해 보았습니다. 저도 아직 본격적으로 사용해보지 않아서, 더 깊게 사용해보신 분들은 이 외에 유용한 기능을 댓글로 공유해주시면 큰 도움이 될 것 같습니다.
리소스 제공 패널
좌측 패널에 피그마와 다른점을 발견하셨나요? 피그마는 Layer와 Assets이 전부입니다만, 크리에이티는 Resources라는 탭이 하나 더 있습니다. 이미지, 아이콘, 텍스트 등의 리소스를 바로 사용할 수 있는 기능입니다. 물론 피그마에도 플러그인을 통해 리소스들을 불러올 수 있지만 매번 플러그인을 실행해야 하는 번거로움과 시간을 줄여주는 유용한 사이드 기능입니다.
더 작은 파일로 추출
피그마에서는 png, jpg, pdf, svg 네 가지 확장자로 에셋을 추출할 수 있지만 크리에이티에서는 이 네가지 외 webp로도 추출이 가능합니다. 그동안 디자이너분들이나 개발자분들이 용량 문제로 webp로 변환하여 사용하는 경우를 많이 보았는데 매우 좋아할 만한 숨겨져있는 사이드 기능입니다.
결론
크리에이티의 등장으로 UI/UX 디자인 도구는 새로운 국면을 맞이하고 있습니다. AI의 강력한 기능을 통해 디자인 프로세스가 더욱 효율적이고 창의적으로 변화하고 있으며, 앞으로의 발전이 더욱 기대됩니다. 크리에이티는 피그마를 뛰어 넘을까요? 아니면 이보다 더 좋은 툴이 나올까요? 디자이너로서 이러한 혁신적인 도구들을 활용하여 보다 나은 사용자 경험을 제공할 수 있기를 기대해봅니다.