UI스케치, AI 없이 하지 마세요
레퍼런스 100개 보다 나은 Creatie/Readdy 근황 - 혠작가
이 글을 보시면 도움이 되실 분들:
✅ UX/UI 디자이너 (혼자서 일하는 분들은 특히! 꼭 써보세요)
✅ 디자이너 없는 곳에서 UX/UI 만들어야 하는 누군가
✅ 그래서 AI가 실제로 일의 생산성을 높여주는가 궁금하신 분들
5월 Config(Figma 콘퍼런스)를 기다리다가 어느 날 갑자기 예전에 신나게 사용했던 Creatie가 생각이 나서 들어가 보니, UI 생성(Generate UI) 기능이 Readdy라는 이름으로 바뀌어 있었습니다. AI 뉴스가 쏟아지는 와중에 딱히 소식이 들리지 않아 뭐 하나 싶었는데, 그 사이 또 엄청난 레벨업이 있었습니다.
따로 업그레이드했다는 건, 그만큼 자신 있다는 뜻이겠죠?Generate UI는 Creatie의 다른 AI 기능들(아이콘 생성, 자동 Audit 등) 중에서도 개인적으로 가장 임팩트가 컸던 기능이었는데 결국 독립적인 서비스로 업그레이드되었습니다. 무엇보다도 이제 피그마 Export를 지원합니다�! Readdy는 강점은 다음과 같습니다.
1️⃣ 말 한마디로 알아서 UI뿐만 아니라 인터랙티브한 프로토타이핑까지 생성합니다 (웹 링크로 공유까지 한방에 ㄷㄷ)
2️⃣ UI에 들어가는 예시 텍스트들도 서비스의 방향만 알려주면 취지에 맞추어 말이 되는 예시로 채워줍니다.
3️⃣ 코드로도 Export 됩니다 (HTML, VUE, REACT 지원)
AI 호들갑은 그만 떨고 싶지만 이번엔 같이 스터디하는 분들과 정말 호들갑 떨면서 써봤습니다. 예시 프로젝트로 예전에 포스팅했던 '12가지 영역의 할 일'에 대해 제작을 요청했습니다.
구글번역기에 돌립니다 (영어를 더 잘 알아듣지 않을까 하는 막연한 기대로..!)2~3분 정도 있으면 두 가지 시안을 가지고 오는데, 보통 두 시안 간의 큰 차이는 나지 않는 것 같았습니다. 미니멀 디자인을 요청해서 뭔가 심심한 결과가 나왔지만 그래도 깔끔합니다.
눈여겨볼 부분은 Bottom Navigation 부분인데, Progress나 Anaytics와 같이 내가 굳이 요청하지는 않았지만 다른 유사한 UI 패턴에서 자주 쓰일만한 메뉴로 채워준다는 점입니다. 바로 이런 점에서 혼자 일하시는 분들이나, 빠르게 작업 완성도를 높여야 하는 분들, UI 스케치 단계에게 큰 도움이 될 듯해 보였습니다.
또한 다음 flow를 만들 때에도 진입점이 되는 컴포넌트 (주로 버튼이겠죠)을 누르고 'Continue to Generate'를 선택하면 별도의 프롬프팅이 없어도 패턴에 근거하여 제작해 줍니다.
말하지 않아도 뭘 필요로 하는지 전 알고 있습니다 (훗)아직 놀라기엔 이릅니다. 이렇게 생성된 다이얼로그 팝업의 인풋 필드들은 실제로 인터랙션을 보 수 있습니다! 제가 시키지도 않았는데 된다니 고맙고 무섭습니다만 아무튼 아래와 같이 동작하는 것을 볼 수 있습니다. 그 외 스크롤 등도 모두 동작합니다. n 년 전 동료들과 피그마 프로토타이핑 하느라 야근했던 어느 날이 생각나면서 마음이 짠해지네요.
응 시키지 않았지만 해줘서 고마운데 좀 무서워...아직까지 일부 드롭다운 메뉴가 화면 밖을 빠져나가는 등의 귀여운(?) 오류가 보이지만 최종 산출물이 아니라 사용자의 행동 흐름을 이해/평가하는 데는 충분한 프로토타이핑이라고 생각됩니다.
참고로 테스트로 제작한 프로토타이핑은 아래의 주소에서 구경하실 수 있습니다. (요청하진 않았지만 Life Balance라는 브랜딩도 해주었네요.)
https://readdy.site/share/77 b0745 dc669 cc7 cd543 a3 ce6 e1008 c0
이 정도 수준이라면 UI스케치에서 Readdy를 안 쓰는게 되려 시간낭비일 것 같습니다. 과연 피그마에서는 이보다 나은 것을 들고 올 수 있을까요? 현재 공개된 AI기능만으로는 Creatie/Readdy의 승리로 보이는데요... 5월을 기대해 보겠습니다.
