소개
AI 튜터를 개발하기 위해서 UI를 구체화해야 했는데, 이를 Visily로 시도해 보았습니다.
진행 방법
1. 해결하고자 하는 문제
지피터스 AI 스터디 참여할 때 많은 분들이 실제 사례를 직접 해 보는 것에 어려움을 겪습 니다. 이 문제를 해결하기 위해서 내부적으로 AI 튜터를 개발하고 있습니다.
이 AI 튜터는 AI 기능을 가진 웹서비스를 사용해 보는 실습을 도와주는 데스크탑앱인데요, 우리가 웹서비스 처음에 가입하고 시작하면, 말풍선, 화살표 등으로 웹서비스 기능을 제공해 주는 그런 기능(SaaS Onboarding)을 하나의 웹서비스가 아닌 모든 AI 도구 사용법에 대해서 알려주는 앱이라 생각하면 됩니다.
<AI 튜터 기능과 유사한 SaaS 온보딩 기능 -- 스크린의 왼쪽 아래에 Getting Started with Userpilot으로 체크리스트가 나오고, 오른쪽에 You can easily filter out ... 이라는 말풍선이 나와서 사용자가 처음 웹서비스를 사용할 때 가이드를 해 줍니다>
이걸 지금 개발자분들이 개발을 시작했는데요, 앱의 UI 디자인이 전혀 없는 상태입니다. 그래서, 아주 구체적인 디자인은 아니더라도 어떤 기능을 만들어야 하는지를 개발자들에게 전달해야 하는 상황입니다.
위의 대략적인 아이디어를 시각화 하는 것이 필요한거죠.
저 자신도 아직 명확하게 아이디어가 시각화가 되어 있지 않은 상태여서, 이걸 AI가 생성해주는 UI로 한번 구체화 해 봐야겠다 생각을 했습니다.
2. AI 디자인 툴의 선택
그래서 먼저 AI 디자인 툴을 추천 받는 것을 OpenAI Deep Research를 통해서 해 보았습니다.
나는 스타트업 창업가야.
내가 만들려고 하는 데스크탑앱, 모바일 앱을 시각적으로 소통할 수 있는 프로토타입의 외관을 빠르게 만드는 AI 기능이 있는 툴을 찾고 있어.
- 대략적인 자연어 묘사, 유사한 스크린샷을 가지고 디자인이 된 소프트웨어의 스크린을 생성해 주는 기능
- 이렇게 만들어진 스크린을 자연어로 혹은 파워포인트 슬라이드처럼 약간 수정할 수 있는 기능
- 이런 스크린을 연결해서 화면 전환 등의 효과를 줄 수 있는 기능
대략 이런 기능을 가지고 있는 것을 생각하고 있어.
이런 툴이 어떤 것들이 있는지 심층 리서치를 진행해줘. 훌륭한 아이디어입니다! 아래 내용을 확인해 주세요. 더 정확한 추천을 위해 몇 가지를 여쭙고 싶습니다:
주요 사용 언어: 한국어 인터페이스/입력을 지원해야 하나요, 아니면 영어 기반이어도 괜찮을까요?
협업 기능: 팀원들과 실시간 협업(예: 피그마처럼)이 꼭 필요한가요?
예산 범위: 유료 SaaS도 괜찮은가요, 아니면 무료/오픈 소스 툴만 원하시나요?
내보내기 옵션: Figma처럼 디자이너-개발 협업을 위한 export(Figma-to-code, Zeplin 등) 기능이 꼭 필요한가요?
이 정보들을 알려주시면, 최적의 도구를 조사하는 데 큰 도움이 될 것입니다.
1. 영어 기반도 상관없음.2. 꼭 필요하진 않아3. 유료도 괜찮아4. 있으면 좋지만 없어도 되니까 비교할 때 참고할 수 있도록 가능 여부만 알려줘...
Uizard - 디자이너가 아닌 사람과 제품 팀에 의한 신속한 프로토타이핑uizard.io; MVP 아이디어를 빠르게 시각화합니다. AI로 디자이너의 워크플로우를 강화합니다. 코딩 없이 UI 컨셉을 초안을 작성하는 초기 단계의 스타트업 창업자에게 특히 적합합니다.
Visily - 디자이너가 아닌 사람을 포함한 팀을 위한 협업 와이어프레이밍 및 UX 브레인스토밍visily.ai. 제품 팀의 빠른 아이디어 구상 및 피드백에 유용 – 예: 제품 관리자는 사양에서 화면을 빠르게 초안 작성할 수 있습니다.visily.aivisily.ai. 또한 전체 디자인에 투자하기 전에 프로토타입 앱 흐름을 제작할 수 있는 예산(넉넉한 무료 계층)이 있는 스타트업에도 적합합니다.
Stitch (Google) – formerly Galileo AI (Stitch Labs) - 빠른 고품질 목업을 원하는 디자이너와 설립자를 위한 초기 단계의 아이디어 구상 및 UI 초안 작성. 컨셉 테스팅 및 빠른 반복에 적합 – 예: 프롬프트를 조정하여 여러 디자인 아이디어 시도juniortoexpert.com. 또한 AI 생성 코드로 프론트엔드 구현을 시작하려는 개발자와 Google 에코시스템에서 표준화된 팀에게도 유용합니다(스티치는 Google의 최신 AI 모델을 기반으로 함).juniortoexpert.comjuniortoexpert.com.
Magic Patterns (YC W23) - UI/UX를 실시간으로 반복하고 기능적인 프론트엔드 코드를 제공하고자 하는 제품 팀과 스타트업. 디자인 지원이 부족한 PM 또는 엔지니어에게 이상적이며, 설명으로 UI를 모형화하고 작동하는 React 구성 요소를 가져와 개발 속도를 높일 수 있습니다.news.ycombinator.comnews.ycombinator.com. 또한 기존 팀의 디자인-개발 핸드오프에도 유용합니다: 디자이너는 AI를 사용하여 아이디어를 구체화한 다음 코드 또는 Figma로 내보내 다듬을 수 있습니다. Magic Patterns는 최소한의 코딩으로 배포할 수 있는 빠른 랜딩 페이지 또는 관리 대시보드에 특히 강력합니다news.ycombinator.comnews.ycombinator.com.UX Pilot - 디자인 전문가와 제품 팀을 위한 엔드 투 엔드 UX 디자인 지원. UX Pilot은 AI가 Figma 기반 워크플로와 통합하면서 일상적인 작업(예: 변형 생성 또는 흐름 채우기)의 속도를 높이고자 하는 UX 디자이너에게 적합합니다aitools.inc. 또한 처음부터 시작하지 않고 UI 흐름을 모형화해야 하는 제품 관리자나 개발자에게도 유용하며, AI는 채팅을 통해 개선할 수 있는 그럴듯한 인터페이스를 생성할 수 있습니다uxpilot.aiaitools.inc. 내장된 분석(사용성 팁, 히트맵)은 사용자 중심 디자인과 UI의 반복적인 개선에 중점을 둔 사람들에게 적합합니다.
...
리서치 결과의 핵심은 위와 같았습니다. 어떤 툴이 있는지는 알게되었지만, 각각이 저의 니즈에 맞는지 정확히 알 수가 없었습니다.
그래서 이번엔 검색만 켜고 o3 모델에게 질문했습니다.
데스크톱 오버레이 앱(Raycast 또는 Zoom과 같은 컴퓨터 화면에서 실행되는 앱)을 프로토타이핑하기 위한 Google 스티치의 장단점. 그런 점에서 Google Stitch를 Visily 및 Uizard와 비교하십시오.Need
Best pick
Rationale
Hack-day POC that must compile & run
Stitch
Generates real React/HTML/CSS instantly; dev can wrap with Electron or Tauri for a demo.
Stakeholder walk-through of UI/UX without code
Visily
Rich desktop templates + low learning curve enable quick, interactive storyboards.
Rapid multi-screen ideation with non-designers
Uizard
Auto-designer plus real-time collaboration keeps brainstorming fluid.
여기서 Visily가 desktop tempates이 많다고 나와서, 저는 데스크탑앱의 UI를 구상해야 하기에, Visily로 최종 선택을 했습니다. 하지만, 다른 툴들도 좀 더 써보고 싶긴 했어요.
3. Visily 초간단 사용법
Visily 자체의 사용법 설명은 너무 길어질 것 같고, 유튜브에서 많은 튜토리얼이 있기에 간단하게만 소개하려합니다.
UI를 만드는 세 가지 방법이 있습니다.
템플릿을 조합해서 UI 그리기 - 대부분의 UI 구성요소가 템플릿화 되어 있어서 이걸 그냥 조합해서 만들면 쉽게 UI를 그릴 수 있습니다.
Generate with AI - 자연어로 설명하면, Visily가 보유한 템플릿을 조합해서 UI를 만들어 줍니다.
Screenshot To Design - 디자인하려는 웹이나 앱과 유사한 디자인을 스크린샷으로 가져와서 그걸 수정해서 디자인을 만듭니다.
저는 세 번째 방법을 시도해 보았습니다.
4. AI 튜터 UI 만들기
AI 튜터앱을 제가 생각하기에 유사한 UI를 가진 것을 나열해봤어요. AI 활용법 실습은 크게 두 가지 세부 세션으로 구성 됩니다.
강사의 설명 세션 - 강사가 오늘 할 실습에 대한 배경지식을 설명하고 어떻게 하는 것인지 시연하는 시간
교육생의 실습 세션 - 시연한 것을 보다 간단하게 구성한 실습안이 제시되고, 그걸 교육생들이 실제 해보면서 잘 안되는 것을 강사에게 문의하여 도움 받으며 해 보는 시간
각 세부 세션에서 AI 튜터의 기능을 나열해 보면 비슷한 UI가 있는 다른 앱을 쉽게 찾을 수 있더라구요.
강사의 설명 세션
AI 튜터는 실습을 강사가 설명할 때 실행해서, 강사 설명에 대해서 더 풀어서 쉽게 설명해주고, 내용 요약을 해 주고, 질문을 하면 답을 해 주는 기능
→ 이건 AI 노트 기능과 유사함. Tiro, Granola.ai 등에서 유사한 기능 이미 제공 중
<tiro 회의록 앱. 첫 화면 UI>
<tiro 회의록 앱. 노트를 새로 만들면, 왼쪽에는 들리는 대화 내용이 정리되고, 오른쪽에는 AI와 대화하는 UI가 나옴>
교육생의 실습 세션
강사가 설명한 것을 바탕으로 실습을 진행할 체크리스트를 만들고, 교육생이 진행하다가 잘 모를 때 아까 강사가 했던 설명을 다시 듣거나, AI에게 문의하거나, AI가 화면에 말풍선과 화살표로 가이드 해 주는 기능
→ SaaS Onboarding UI 가 이런 UI의 대표적인 예시. 여기가면 Figma 디자인 파일 예시가 있음
대략 이런 것들이 AI 튜터의 기능이고, 유사한 UI들이 됩니다.
그래서 저는 Visily에 들어가서, 위의 다른 서비스의 UI를 스크린 캡쳐 한 다음에 넣고, Screenshot to Design 기능으로 디자인으로 바꿨어요.
예를 들면 위와 같이 되는데요, 아주 정확하게는 안되는 경우가 있긴 하지만, 그래도 조금 수정해서 쓸 수 있을 것 같습니다.
이런 식으로 모두 스크린샷을 디자인으로 만들어 주면서, 구체적인 UI와 사용자의 유저 저니에 대해서 고민할 수 있었어요.
하지만, 아직 세부적으로 Screenshot to Design 기능으로 만든 디자인을 손보고, 화면을 구성을 각각 완성해서, 이를 연결하는 프로토타이핑 기능까지는 못써봤습니다. 더 해봐야죠!
결과와 배운 점
Visily에서 Screenshot - To Design 기능만 써서도 제가 원하는 대략적인 UI와 그에 따른 유저 저니에 대해서 고민을 하게 되었습니다. 그 고민을 하게 만드는 것이 결국 대략적인 아이디어를 시각화하는 것이 아닌가 싶었어요.
Visily로 디자인한 것을 보고 디자이너가 또 따로 Figma에서 디자인을 하는 프로세스를 해야 하는 것으로 알고 있는데요, 앞으로 이런 UI툴이 발전하면서 그런 부분도 자동화 될 수 있지 않을까 싶기도 합니다.