프롬프트 하나로 풀스택 웹앱을 만드는 Marblism
프롬프트 하나로 풀스택 웹앱을 만드는 Marblism
안녕하세요, 윌리에요!
오늘은 프롬프트 하나로 SaaS를 비롯한 다양한 웹앱을 만들어주는 Marblism을 소개하려 해요. 이번 글은 자세한 사용 후기를 담은 만큼 이미지와 글이 많은데요, 이 프로덕트에 인상깊었던 UX는 아래와 같았아요. 만약 AI 제품을 만들고 있다면 참고해보세요.
- AI 제품은 사용자가 선택할 수 있는 옵션의 수를 최소화해 의사결정의 난이도를 낮춰야해요. Marblism은 AI App, SaaS, Marketplace, Social Network, Internal Tool 5가지의 선택지만을 제시합니다.
- 복잡한 기능을 점진적으로 노출해 사용자가 한 번에 많은 정보를 처리하지 않도록 해야 해요. Marblism은 풀 스택 웹앱 개발이라는 복잡한 과제를 세 단계로 나누어 유저가 부담 없이 구현할 수 있도록 해요.
- 예상치 못한 보상을 단계별로 제공해 사용자의 참여를 유도하는 것이 중요해요. Marblism은 각 단계를 완료할 때마다 놀라운 결과물을 제공해 사용자가 지속적으로 동기부여를 받을 수 있도록 합니다.
제품을 만들기 시작할 때의 어려움
코딩을 해본 경험이 있다면 이 밈에 공감할 수 있을 것 같아요. 그만큼 제품을 만들기 위해서 필요한 환경을 구축하는 것은 개발자에게도 복잡하고 어려운 일이에요. 결국 개발환경을 구축하는 단계에서 발생하는 버그를 수정하기 위해 많은 리소스를 사용하게 되는데요, 이 리소스를 줄일 수는 없는 걸까요?
개발자들의 반복 업무를 줄이고, 창의적인 생각에 몰입할 수 있는 세상을 만드는 것이 목적인 Marblism을 사용해 본 후기를 상세하게 적어봤습니다.
Marblism의 첫인상이에요. 하나의 프롬프트를 작성하면 SaaS를 만들어준다는 문구가 인상깊어 바로 사용해봤어요. 저는 디스콰이엇처럼 제품과 피드를 업로드하고, 다른 유저를 팔로우할 수 있는 소셜 네트워크 만드는 것을 목적으로 했어요.
1단계 : 프로젝트 이름, 유형, 프롬프트, 유저 경험 작성하기 (1분 소요)
프로젝트를 시작하면 가장 먼저 이름과 유형을 설정할 수 있어요. 개인적으로 프로젝트 유형을 SaaS, AI App, Marketplace, Social Network, Internal Tool 등으로 구분해둔 것이 정말 좋았는데요, 복잡하게 프롬프트를 입력하는 경험을 효율적으로 만들어준 것 같아 만족스러웠어요.
다만, Project Description을 작성할 때는 얼마나 구체적으로 작성해야할지 감이 오지 않아 어려웠습니다. 그래서 처음에는 제품에 필요한 기능을 거의 전부 적었는데요, 몇 번 사용하다보니 모든 기능을 나열하는 것보다 내가 만들려는 프로덕트와 비슷한 프로덕트의 이름을 프롬프트에 포함시켜 간결하게 작성하는 것이 더 좋은 결과물을 만들었어요.
그래서 제 프롬프트도 이렇게 바꿔 작성했습니다.
a social app like product hunt
2단계 : 페이지별 유저경험 설계하기 (5분 소요)
다음은 조금 놀란 부분이었는데요, ‘a social app like product hunt’라는 프롬프트를 토대로 필요한 페이지를 정의하고, 페이지별 유저의 경험과 시나리오를 아래와 같이 아주 상세하게 정의했어요.
UX 정의
- 사용자로서, 나는 내 필요에 맞는 도구를 찾을 수 있도록 AI 도구들의 분류된 목록을 둘러볼 수 있다.
- 사용자로서, 나는 각 AI 도구에 대한 간단한 설명과 URL 링크를 볼 수 있어 도구에 대해 더 많이 알고 해당 도구의 메인 페이지에 접근할 수 있다.
- 사용자로서, 나는 언어 처리, 머신 러닝, 데이터 분석 등과 같은 카테고리별로 도구를 필터링할 수 있어 특정 관심 분야의 도구를 빠르게 찾을 수 있다.
- 사용자로서, 나는 AI 도구들을 이름이나 키워드로 검색할 수 있어 특정 도구를 쉽게 찾을 수 있다.
시나리오
- 디렉터리 둘러보기: 사용자가 홈 페이지에 있을 때, 목록을 둘러보면 AI 도구들이 유형별로 분류되어 보인다.
- 도구 필터링: 사용자가 홈 페이지에 있을 때, 카테고리 필터를 선택하면 목록이 해당 카테고리의 도구들만 보여준다.
- 도구 검색: 사용자가 홈 페이지에 있을 때, 검색어를 입력하면 목록이 검색어와 일치하는 도구들을 보여준다.
사진에는 Home 페이지에 대한 정보만 있지만, 이외에도 프로덕트 업로드 페이지, 알림, 프로필, 로그인, 프로덕트 디테일 페이지 등 10개 이상의 페이지를 스스로 만들어서 제안했어요.
AI는 유저의 프롬프트를 읽고 그 의도를 읽어내는 행위를 잘하는데요, 그 부분을 잘 활용한 UX였어요.
사실 알림 페이지와 같은 디테일은 저도 놓치고 있던 부분이었는데, 디테일한 페이지까지 알아서 생성해 주니 인상 깊었습니다.
3단계 : 데이터베이스 생성 (5분 소요)
‘다음’ 버튼을 누르면 지금까지 정의한 유저의 경험을 토대로 DB를 만들어서 제안해요. 이때 복잡도가 높은 프로덕트일수록 자잘한 에러가 있었어요. 대부분의 에러가 칼럼이 중복되거나 누락된 경우였고요.
대신 프로젝트 시작 단계에서 기존에 이미 존재하는 프로덕트 이름을 포함해 프롬프트를 작성하면 DB 생성 시의 에러를 줄일 수 있었습니다. 예를 들어 대다수의 SaaS가 비슷한 DB 구조로 되어 있다 보니 정확도가 높았던 것 같고요.
4단계 : 배포
마지막 단계에서는 프로젝트를 배포할 수 있어요. 하지만 완벽한 프로덕트가 완성된 것은 아니었고, 템플릿에 가까웠어요. 그래서 이미지의 Launch Workspace를 클릭해 페이지 별로 기능과 디자인 등을 다듬어야 합니다.
만약 개발을 할 줄 안다면 본인의 깃헙 프로필을 초대해 코드베이스를 활용할 수 있어요.
Marblism이 생성하는 웹앱의 스택은 그림을 참고해 주세요!
5단계 : 워크스페이스에서 수정하기
// 우측에서 프리뷰를 보고, 좌측에서 프롬프트로 수정하는 구조
개발을 할 줄 모른다면 Marblism에서 지원하는 Workspace를 활용할 수 있는데요, 개인적으로는 코드를 보지 않고 프롬프트만으로 제품을 만드는 경험이 생각보다 불편했습니다. 예를 들어, 특정 div의 사이즈를 조절하거나 색상을 변경하는 간단한 프롬프트를 입력하면, Marblism이 스스로 task를 생성/수행하고 배포하지만, 변경 사항이 반영되지 않는 상황이 반복되었어요. 더욱 답답했던 점은 왜 변경 사항이 반영되지 않는지 알려주지 않는다는 점이었고요.
아래는 Marblism으로 만든 웹페이지 입니다. 원인 모를 에러를 수정하지 못해 기능은 작동하지 않네요. 참고용으로 봐주세요 :)
웹페이지 링크 : https://disquietai.app.io/home
Marblism — UX 리뷰
1~5단계를 거치면서 AI 제품이 갖춰야 할 UX를 정리해 봤어요.
1. Hick’s Law — 옵션의 수를 최소화해서 의사결정 난이도 낮추기
높은 자유도는 AI 프로덕트의 양날의 검이에요. 유저 입장에서는 원하는 바를 편하게 표현할 수 있지만, 지나친 자유도는 선택의 부담을 만들어낼 수 있기 때문이에요. 이때 옵션의 수를 최소화해서 의사결정의 난이도를 낮추는 것을 힉스의 법칙이라고 하는데요.
Marblism처럼 제품이 가장 잘 수행할 수 있는 선택지를 선별하고, 유저에게 제안함으로써 유저는 좋은 퀄리티의 결과를 빠르게 받아볼 수 있어요.
2. Progressive Disclosure — 복잡한 풀스택 개발과정을 점진적으로 구성
인기 있는 노코드 툴인 버블과 Marblism을 비교하면 풀스택 웹앱을 만들기 위한 학습곡선의 차이를 명확하게 느낄 수 있어요. ‘풀스택 웹앱 개발’이라는 task를 세 단계로 쪼개 정말 간편하게 구현했다는 점에서 복잡한 기능에 압도되지 않도록 UX를 잘 구성했어요.
3. Variable Reward — 예상치 못한 뛰어난 결과물 제안
마지막으로, 복잡한 과정을 세 단계로 쪼개고 각 단계를 수행할 때마다 기존의 개발경험에서는 느낄 수 없는 보상을 줍니다. 가령, 프롬프트만 작성했는데 제품에 필요한 페이지가 정의되고, 페이지 별 기능이 정의되는 경험이죠. 매 단계마다 랜덤한 보상을 줌으로써 동기를 부여하는 것도 좋은 UX 같아요.
Marblism의 방향성 — 초개인화 보일러플레이트를 생성하기
Marblism을 사용하면서 프롬프트 하나와 약간의 수정만으로 유저경험을 설계하고, 코드베이스가 만들어지는 경험은 와우할만한 경험이었어요. 그런데 코드베이스가 만들어진 이후에 직접 코드를 수정하는 workspace 기능이 정말 아쉬워서 의문이었습니다.
이렇게 경험의 질이 차이가 나는 것을 보고 이질감을 느꼈고 그 이유를 알아봤어요. 그리고 Marblism의 블로그에서 그 힌트를 찾을 수 있었어요.
A SaaS boilerplate, is a pre-built template for SaaS applications, including all standard features.
(SaaS 보일러플레이트는 SaaS를 구성하는 기본적인 기능을 이미 갖춘 템플릿입니다.)Developers can focus on creating unique and innovative features for their customers, rather than building basic functionalities like authentication, user accounts, and billing flows from scratch.
(보일러플레이트를 통해 개발자는 인증, 사용자 계정, 결제와 같은 기본적인 기능을 처음부터 구축하지 않아도 됩니다. 대신 고객을 위해 독창적이고 혁신적인 기능을 만드는 것에 집중할 수 있습니다.)
여기서 보일러플레이트는 Next.js 같은 프레임워크와는 다른데, 정확히는 프레임워크 위에서 만들어진 템플릿이에요. 기본적인 인프라 설치를 넘어, 인증, 사용자 계정, 결제와 같은 기본 기능까지 구현되어 있어 제품 개발의 생산성을 극대화할 수 있죠.
기존에도 여러 유형의 보일러플레이트를 템플릿으로 제공하는 Makerkit.dev , shipfa.st 같은 서비스가 있지만, Marblism은 프로젝트 유형에 따라 프롬프트만으로 보일러플레이트를 자유롭게 생성할 수 있다는 차별점이 있어요.
이와 같은 이유로 현재는 원하는 기능을 포함하는 코드베이스를 빠르게 만들어내는 것에 더 집중하고 있다는 생각이 들어요 :)
- 보일러플레이트로 제품을 만들어본 분은 AI 프로덕트 클럽에 가입해서 경험을 공유해주세요!
fyi - 참고로 Marblism은 2명이 만들고 있다고 하네요 ㅎㅎ
