개요
이 글은 AI 웹 빌더 5종 비교 실험 중 MagicPath 편입니다.
실험 배경:
평소 노션에 기록해둔 "친구와 만날 때 중간지점 찾기" 아이디어를 AI 웹 빌더들로 실제 구현해보며, 각 서비스의 역량을 비교해보는 실험을 진행했습니다.
선정 이유: 단순한 랜딩 페이지가 아닌, 외부 API 연동, 상태 관리, 모바일 최적화 등이 필요한 실제 웹 애플리케이션 수준의 프로젝트로 각 서비스의 한계를 명확히 파악하고자 했습니다.
실험 조건:
- 무료 플랜으로만 작업
- 직접 코드 수정 최소화
- Claude와 작성한 PRD 기반 단계별 구현
평가 라운드:
- Round 1: 기본 레이아웃 구현 (사이드바, 지도, 마커, 중간점 표현)
- Round 2: 장소 추천 시스템 (중간 지점에 있는 장소 bottom sheet로 제공)
- Round 3: 실시간 투표 (추천된 장소에서 투표 기능 구현)
- Round 3: 약속 확정 하기 (투표 결과에 대한 약속 정하기 및 벌칙 정하기)
Round 1: 기본 UI 구현
목표: 중간지점 찾기 기본 화면 구성
- 지도 영역 (또는 시뮬레이션)
- 2-5명 출발지 입력
- 중간지점 계산 및 표시
- 각자 거리 표시
먼저 첫번째 라운드 입니다. magicPath의 경우는 다른 웹 빌더랑 좀 느낌이 다릅니다.
일반적으로 ChatGPT, Claude의 UI가 아니라 Figma가 연상이 됩니다.
또 상단에 Design System 버튼이 강조되어 있는걸로 보아 이 서비스는 개발자보단 디자이너에게 익숙한 서비스라는 성격이 느껴집니다.
하단의 New Component 버튼을 클릭하고 component에 대한 구현을 Ask MagicPath 버튼을 통해서 시작할 수 있었습니다. 이 역시 직접적으로 카카오 Map을 사용할 수 는 없었기에 Mock 데이터를 사용했습니다. 다른 서비스와는 조금 묘하게 다르게 구현을 해주었습니다.
Round 2: 중간 지점 장소 추천 시스템
목표: 중간지점 근처 장소 추천 UI
- 카테고리 탭 (카페/음식점/술집)
- 장소 카드 디자인
- 평점, 거리, 태그 표시
- 필터/정렬 기능
1라운드에서는 잘 못느꼈는데, 2라운드에서는 확실히 느껴졌습니다. magicPath는 되게 예쁘게 잘 만들어주네요! 지금은 버튼에 강한 색을 사용했음에도 불구하고 통일감도 느껴지고 기능과 역할을 담당하는 컴포넌트에 대한 이해를 잘하고 구현했다는 느낌이 들었습니다. 그리고 radius 값들이 정돈이 되어 있다는 느낌도 들었습니다. 이전에 bolt와 비교했을떄 이 부분은 더 크게 느껴집니다.
이 과정에서 중간중간 자체 에러가 나는 경우는 몇차례 있었습니다.이는 try again 버튼을 통해서 해결 할 수 있었습니다.
지금까지 느꼈을땐, UX적으로 다른 서비스에 비해 한 단계 위에 있다고 느껴집니다.
Round 3: 투표 기능 구현
목표: 5명이 함께 장소 결정하는 투표 시스템
- 후보 선택 단계
- 실시간 투표 UI
- 프로그레스 바와 애니메이션
- 결과 발표
투표 기능도 구현을 해줬습니다. 다만 이 과정에서 투표를 하기도 전에 투표 결과 팝업이 나오고 이게 닫더라도 계속 열리는 문제가 있었습니다. 수차례 요청을 했으나 이게 잘 고쳐지지는 않습니다. 하지만 투표 관련 컴포넌트는 지금까지 테스트 했던 모든 서비스에서 제일 만족스럽습니다
Round 4: 약속 확정까지의 플로우 구현
목표: 투표→약속→벌칙까지 연결된 UX
- 투표 후보 선정, 2개 이상 장소 선정시 투표 시작하기 버튼 활성화
- 투표에서 약속 정하기, 지각 벌칙 정하기까지 플로우 구현
- 지각 벌칙 설정
- 최종 확정 및 공유
마지막 4 라운드 입니다. 투표 기능을 좀 더 강화하고, 투표가 완료 됐을시, 약속 시간을 정하고 약속시간이 확정되면, 늦은 사람이 벌칙으로 커피 쏘기 기능입니다.
오 이것도 제 기대보다 훨씬 예쁘게 잘 구현해줬습니다. 얼마전 동료 개발자들과 바이브 코딩 관련되서 이야기 했을때가 생각 납니다.
한 개발자는 일부러 요청을 하고 기술 스택을 요청하지 않는다고 이야기 했었는데요
이유는 기술 스택을 제한하지 않고 구현하고자 하는 기능을 명확하게 요청했을때 새로운 접근법을 알려주고 이걸 다시 공부하면서 인사이트를 넓히는데 AI를 사용한다는 이야기 였습니다.
magicPath를 사용하면서 좀 안정성은 떨어지지만 "이렇게 구현하니깐 UX적으로 훨씬 좋구나" 를 느끼며, 이런 것들이 AI 툴을 쓰면서 발견하는 재미라고 느꼈습니다. 이 관점에서 magicPath를 써보길 추천한 분께 감사함을 느꼈습니다.
기능들은 모두 잘 구현이 되었을 뿐더러 이 디자인을 실제 서비스 개발에 차용해야겠다고 결심했습니다.
결론
⭐️⭐️⭐️⭐️
magicPath의 개인적인 평가는 별 4개 입니다! 사실 이글을 작성하면서 각 서비스들을 2회씩 똑같은 요청을 하고 있는데, 1회 사용시에는 기능 구현이 완벽하지 않아서 이걸 왜 써야하나 그렇게 느꼈습니다. 왜냐하면 구현이 잘 안됐기 때문입니다.
계속해서 retry를 해라, 뭔가 수정한게 바로 반영이 안되거나 응답을 안한다거나 서비스가 약간은 불안하다고 느꼈습니다.
그런데 2회차 사용시에는 전혀 다른 평가를 할 수 밖에 없었습니다. 다른 서비스보다 많은 부분에서 안정적인 UI/UX 를 구현했고, 제가 놓치고 있는 부분이나 프롬프트에 누락된 부분들을 잘녹여줬습니다. 또 전체적인 디자인 통일성도 너무 좋았습니다. 확실히 가벼운 마음으로 디자인 자체를 놓고 평가한다면 당연 1등입니다.
다만!
magicPath에서 제공하는 Create Flow 기능(버튼을 눌렀을때 팝업 컴포넌트를 별도로 구현하여 연결 같은) Create Variants 를 사용하려면 조금 더 공부를 해야될거 같습니다.
또 한가지는 코드를 확인하기 위해는 유료 요금제를 써야하는 것과 github 연동이 아직 미지원이라는 점은 좀 크게 아쉬웠습니다. 또한 다른 웹 빌더들은 배포 기능까지 가능하지만 magicPath는 지원하지 않는 것 같습니다.
마지막 결론을 말씀 드리면 아직은 magicPath는 AI 웹 빌더의 역할보다는 디자인 툴로서 활용하는 것이 좋을거 같다는 생각이 들었습니다.
하지만 체계적으로 디자인 시스템을 설계해서 각 컴포넌트 단위로 관리할 수 있는 숙련된 디자이너에게는 초기 기획과 간단한 mvp 개발까지 가능하게 할 효과적인 도구라는 평가를 할 수 있겠습니다.
Bolt와 정반대! 서비스의 자체의 완성도는 크게 높지 않지만 강력한 프로덕트 디자인 능력!
마지막 편 예고
[AI 웹빌더 5종 테스트 총정리] 2일간 써본 솔직 후기
