AI와 함께 성장하는 PM들을 위한 AI-Powered Product Manager 시리즈입니다. 이번 글은 서비스에 AI Feature를 붙여보는 프로토타입 제작 사례를 공유합니다.
🤖 AI Feature 만들어보기
이제 거의 모든 서비스들이 비즈니스 성장과 고객 경험 향상을 위해, 새로운 AI 기능 적용을 검토하고 시도하고 있을 것이라고 생각한다.
불과 1~2년 전만해도 AI 기능 개발은 딴세상 얘기로 들렸다. 비용과 전담인력이 없이는 거의 불가능한 일이었기에. 하지만 이제는 상대적으로 매우 적은 비용과 난이도로 AI 기능을 붙여 볼 수 있다. 다만, API를 활용 해야하다보니, 여전히 전략/기획/디자인 업무에서 AI 기능을 활용하는 데모/프로토타입을 쉽게 상상하고 만들기 어렵다고 느낀다.
하지만 찾아보면 비개발자도 AI Feature를 충분히 테스트해볼 수 있다. 바로, 노코드 빌더인 Gemini Canvas, Claude Artifacts, Lovable 등으로 AI 기능을 직접 구현할 수 있기 때문이다. LLM을 직접 제공하고 있는 AI 코드툴이거나 LLM 툴과 연동이 편리한 도구들이다.
💡Case: AI가 도와주는 견적계산기
B2B SaaS 사이트에서 많이 사용되는, [견적계산기]를 사례로 진행해보았다.
일반적으로 견적은 입력하는 조건에 따라 예상 가격이 달라진다. 그래서 사용자가 선택항목을 잘 이해하고, 올바르게 설정 하는 것이 중요하다. 이때, “어떻게 사용자의 이해와 판단에 도움을 줄 수 있을까?” “모든 케이스에 대해서 로직을 짜는 일은 엄청 귀찮을텐데.. AI로 구현하면 어떨까?”라고 가볍게 생각해봤다.
만일 제품팀이 이러한 가설이 있다고 했을 때, 빠르게 프로토타입을 만들어 내부 고객(영업팀)이나 외부고객에게 검증을 해볼 수 있을 것이다.
견적계산기에 AI 기능을 추가하는 사례로, 심플하게 잘 만들어진 원티드 긱스 견적사이트를 참고했다. 그리고 기존 서비스에 AI 기능을 붙여보는 Practice이기 때문에, 기존 소스를 Magic Patterns로 추출하여, 작업을 하였다.
(기존 코드 소스를 붙여넣어 프로토타이핑을 하는 자세한 방법은 다른 아티클을 참고)
💡세가지 툴 비교: Gemini Canvas, Claude Artifacts, Lovable
간단한 요약 비교 및 코딩툴 하나씩 구현 사례를 자세히 설명하고자 한다(⚠️스크롤 주의)
💠 툴비교 - 노코드로 AI 기능을 구현할 때
AI 코딩툴 | Pros | Cons |
Gemini Canvas
(2.5 Pro) | - 프롬프트 길이, 컨텍스트 윈도우 제한 거의 없음. 처리 속도 빠름
- Gemini API 무료 자동 연결 + AI 기능 적용을 추천해주고 알아서 생성해줌. | - 디자인, 코드품질이 그저 그럼
- 웹페이지로 퍼블리시 안됨 |
Claude Artifacts
(Claude 4 Sonnet or Opus 선택) | - 뛰어난 디자인, 코드 품질
- 앱빌드에 최적화 되어, 쉽고/직관적/친절함. 필요한 기능은 대부분 제공: 특정 요소 수정, 코드복사, 배포 | - 프롬프트 길이, 컨텍스트 윈도우 제한 걸리면 난감
- AI 기능 자연스럽게 연결은 안됨 |
Lovable
(Claude 4 Sonnet) | - 코딩 품질, 속도 상대적으로 부족
- AI 기능 구현을 위한 AI모델 API 수동으로 붙여야함(하지만 프롬프트 가이드에 따라 쉽게 할수 있음) | - AI 코딩 특화된 툴이라 다양한 기능 많음(Restore, Refactoring Error 수정, 텍스트 Edit, Knowledge 등등)
- 깃헙, Supabase 연동 가능 |
1. Gemini Canvas
아래와 같이 프롬프트를 넣으니, AI 기능이 붙은 화면이 바로 생성이 되었다.
#Role 너는 한국 최고 디자인 에이전스의 시니어 UX디자이너야 #Goal 프리랜서를 연결해주는 웹서비스내 견적계산기 페이지의 [견적확인] CTA 전환율을 높이는 목표야 #Context AI기반 정보 추천 기능을 추가해서, 고객의 관심&흥미 및 이해도를 높여서, 견적확인 전환율을 높이는 프로토타입을 제안하려고해 #Task ##Reference의 웹페이지의 디자인 스타일을 유지하면서, 아래 요구사항을 반영하여 웹페이지를 수정해줘 - 항목을 선택할 때마다 AI가 선택 값에 대한 부가 설명 노출 - [견적확인] 버튼외 [AI 견적보고서 보기] 액션을 추가해서, 선택값에 대한 종합 의견과 견적 가이드를 제안해줘 #Reference ##웹사이트 URL https://www.wanted.co.kr/gigs/prediction ##HTML 소스 ..(길어서 생략)
- 사용자가 입력값을 선택하면, AI가 설명 메세지를 하단에 노출해준다.
- 응답이 좀 느린데, Gemini API에서 공짜로 주는 Gemini Flash 2.0가 적용되었더라..
- [AI 견적 보고서 보기] 버튼을 누르면, 아래와 같이 리포트를 생성해준다!
- 실제 Code를 열어보면 아래와 같이 프롬프트와 Gemini API Call 함수가 들어있다.
- 궁금해서 API Key는 뭘 사용했나 물어보니, Canvas 자체에서 알아서 했다고..
2. Claude Artifacts
다음 타자로, 클로드에서 새롭게 출시된! Artifacts 를 활용해보았다.
2025년 6월 26일에 클로드에서 “Turn ideas into interactive AI-powered apps” 라는 타이틀과 함께, 대대적으로 리뉴얼하며 소개되었다. 매우 간단하게 AI 서비스를 만들고 공유할 수 있는 기능이다.
- 견적계산기 스크린샷과 함께 위 Gemini와 동일한 프롬프트를 제공했다.
- HTML 전체는 너무 길어서 스크린샷 밖에 안된다. 클로드의 한계..
- BUT, 매우 깔끔한! 화면이 구성되었다(역시 코드품질은 Gemini Pro보다 탁월한 것 같다)
- 선택값에 따라 보기좋은 AI 응답값과 견적보고서를 확인할 수 있다
- 하지만, 몇 가지 보완사항이 있었다.
- AI 보고서를 생성하니 에러발생 → 코드 오류 수정 요청. 혼자 한참 코드를 수정한다..
- Gemini처럼 API를 직접 활용하는 것이 아닌 정적인 응답이 나옴 → “기타 요청사항”을 추가하여, 개인화된 AI 견적보고서를 구현 요청
- 일부 보고서 내용이 채용자가 아닌 구직자에게 맞춰서 나옴 → 수정 요청
- 몇번 티카타카 끝에 아래와 같은 최종 AI 견적보고서가 나왔다.
- 아래 URL로 배포까지 해보았다.
참고로 Claude에서 계속 바이브 코딩을 하니, Pro 요금제임에도 Daily Limit에 걸리거나 Context Window가 초과되었다는 문구가 나온다. 당황스럽고 아쉽다.
👆 이럴때는 당황하지 말고, 클로드로 이쁘게 만든 소스를 Gemini Canvas로 옮겨서 작업. 그러면 제한없이 작업을 이어나갈 수 있다.
3. 끝으로, Lovable
- (Claude와 마찬가지로) HTML 소스코드 길이가 길어 프롬프팅 제약이 있다. 스크린샷 + 프롬프트로 시작했다.
- 아래와 같이 디자인을 대체로 잘 유지하며, 화면이 생성되었다.
- 자체 AI 기능이 없기 때문에, API를 연결해야한다. 다만, AI 모델을 쉽게 연결은 해준다(AI 연결 가이드 참고)
- 티키타카 끝에 AI 가이드를 활용한 화면을 완성하였다.
😺 마치며
비개발자도 AI Feature가 동작하는 프로토타입을 뚝딱 만들 수 있다. 조직이나 회사에서 “AI 해커톤”도 마음만 먹으면 비용과 환경 제약없이 해볼 수 있다.
결론적으로 무료로 누구나 일정수준 이용할 수 있는 툴은 Gemini, Claude, Lovable이 있고. 각각 장단점이 있으니 상황에 맞게 사용해보시길!!
- 디자인/코딩 품질을 신경써야하거나 + 빠르게 공유하려고 한다면, Claude Artifacts
- 그런 다음 혹시 문제가 생기면 코드 복사해서 Gemini로 옮기기
- AI Feature 동작에 집중해서 빨리 만들고 싶다면 Gemini Canvas
- Gemini는 AI Feature 활용 시나리오를, 자연스럽게/자동으로/공짜로 해준다
- 향후 서비스를 넓게 완성해 나가야하고 + DB 구축까지 해야한다면 Lovable
Share article
ProAgent팀의 도움이 필요하신가요?
