소개
최근 핫한 flowith도 그렇고 Lovart도 그렇고 컨버스 기반의 AI 에이전트가 나오기 시작했습니다.
오늘 다뤄본 MagicPath도 이런 맥락의 캔버스 형태로 웹/앱디자인 부터 바로 발행하고 편집까지 할 수 있는 툴입니다.
이 툴을 보면서 유버플로우차트/와이어프레임을 만들면 좋겠다! 라는 생각을 했습니다.
<참조이미지 / 펌/핀터레스트_유저플로우>
진행 방법
무료로 가입하면 기본적으로 1프로젝트가 생성된 상태에서 일주일 동안 쓸 수 있는 50컴포넌트 크레딧을 줍니다. 이 크레딧은 매일 5개씩 제공하더라고요
처음에 시작할때는 여느 에이전트와 동일하게 챗으로 시작합니다.
새로운 컴포넌트(대지)를 만든상태에서 챗을 실행하면됩니다.
저는 핀터레스트에서 테스트해볼 랜딩페 이지 디자인을 가져왔고, 간단하게 프롬프팅?을 해서 실행시켰습니다.
이게 제가 참조시킨 랜딩페이지 디자인이고, 아래가 매직패스가 만들어준 디자인입니다.
https://api.magicpath.ai/components/278447383652753408/revision/278447918673977344#
기능이 직관적이고 툴이 단순해서 처음사용하는데 어려움 없이 다뤄볼 수 있었습니다.
툴은 총 6가지(챗, 편집, 플로우, 변형, 미리보기, 코드보기) 인데, 여기에서 코드보기는 무료에서는 사용할 수 없었습니다.
편집툴을 누르면 요소를 선택할 수 있게 되고, 선택하면 오른쪽에 편집툴이 활성화됩니다.
AI를 활용해 자연어로 수정할 수도있고
아니면 직접 수치와 텍스트를 입력해서도 사용할 수 있었습니다.
플로우를 사용하면
기존의 메인페이지를 기반으로 톤앤매너를 유지한채 하위페이지도 디자인 할 수 있었습니다.
변형을 사용하면 기존 디자인에서 약간씩 레이아웃을 변형해서 디자인을 제시합니다.
코드는 프로버젼부터 볼 수 있습니다
결과와 배운 점
최근 브랜드 맵과 웹페이지를 구축하면서 고객 여정(UX)의 중요성을 깊이 깨달았습니다. MagicPath를 활용하면 웹사이트 설계를 초기부터 명확하게 구조화할 수 있어, 고객에게 보다 매끄럽고 직관적인 경험을 제공할 수 있을 거라고 생각합니다. 이처럼 디자인 초기에 고객 경험을 명확하게 설계하면 높은 사용자 만족도와 전환율 향상이라는 긍정적 결과를 얻을 수 있지 않을까? 하는 생각입니다 ㅎㅎ