1️⃣ 소개
지난 14기 스터디 사례로 반려동물과 집사가 함께 건강해지는 서비스를 기획하고 클로드 아티팩트 (Claude Artifacts) 로 웹페이지로 만들어보는 시도를 했었습니다.
https://www.gpters.org/health/post/service-dogs-deacons-become-VSuhtlllGMCfC4w
API 연동도 필요하다 했는데 모르겠고, 3단계로 구성된 페이지에서 잦은 오류가 나고 여러가지로 아쉬운 부분이 많았어서 살짝 포기하고 있었는데요. 1주차 스터디에서 Google AI Studio 와 lovable 활용법을 공부한 뒤, 다시 한번 도전해 보았습니다.
2️⃣ 어떤 도구를 사용했고, 어떻게 활용하셨나요?
기획 Google AI Studio 활용 : 반려동물과 집사가 함께 산책하는 서비스 PRD 를 작성하기
1차로 정리해준 내용에서 추가로 넣고 싶은 기능들을 정리하고 다시 PRD를 제작해 달라고 했습니다.
개발 자동화 툴 lovable 활용 :
🤗 2-1. 최종 정리된 RPD를 lovable 에 붙여넣기 했습니다.
신나게 코딩을 하더니 에러가 발생했습니다. 놀라지 않고, 에러 확인해서 수정해줘 라고 요청했습니다. 이 프롬프트는 클로드 아티팩트 (Claude Artifacts) 로 코딩할 때도 자주 사용했는데, 클로드에서는 전혀 새로운 것을 코딩하는 등, "저 이 업무 처음하는데요?" 라고 하는 모르쇠 동료 마냥 코딩을 했는데, 그런 부분이 적어서 정말 마음에 들었습니다.
첫번째 시도의 결과 입니다.
일단 구성과 내용 다 좋지만, 지나치게 WEB 느낌이 나는 게 아쉬웠고, 어디서 봤음직한 느낌의 레이아웃이 마음에 들지 않았습니다.
그래도 산책코스를 기록하는 UI는 좋네요~
🤗 2-2. 수정 사항을 정리해서 다시 lovable 에 프롬프트를 입력하고 수정을 했습니다.
링크로 공유할까 하다가 카테고리별 페이지 정리가 깔끔하지 못해서 스크린샷으로 대체 합니다.
프로필 페이지 구성과 산책코스 고도 등을 확인할 수 있는 점이 무척 마음에 들었습니다. 🤗
3️⃣ 결과와 배운 점
1) 배운 점
사실, 이 서비스는 제대로 잘 만들고 싶어서 Figma로 더듬더듬 기획을 시도했었습니다. 그런데 UIUX 디자이너라는 직무가 왜 따로 있는 지를 너무 절실하게 배우면서, 더 이상의 개선을 포기하고 있었는데요. lovable 서비스로 디자인 단계를 확 줄일 수 있어서 진심으로 놀라고 기뻤습니다. 더 다양한 툴을 써 보고 제가 필요로 하는 화면을 더 잘 만들어줄 AI 툴을 더 찾아 봐야겠다고 생각했습니다. 🤗
2) 과정 중에 어떤 시행착오를 겪었나요?
: lovable 로 개발하면서 처음에 web으로 요청했다가 다시 app으로 변경을 요청했는데, 마음 같이 크게 개선되지 않아서 (관성이라도 있는 것 처럼!) 답답했습니다. 그리고 빨리 결과 보고 싶은 마음에 결국 유료 결제를 하면서 까지 수정을 했는데도, 아쉬움이 남았습니다. 초기 RPD 정리를 정교하게 하면 이런 이슈는 없을 것 같고, 개선하는 것 보다 새로 만드는 게 더 빠를 수도 있겠다는 생각도 했습니다.✨ 역시 초기 기획이 제일 중요합니다 ✨
3) 앞으로의 계획이 있다면 들려주세요.
클로드로 개발하면서 아쉬웠던 포인트들이 해결되니까 더 욕심이 생겨서, 지도 API 연결 등 더 자세한 작업을 해봐야겠다고 생각했습니다. 좀 더 전문적으로 개발 공부를 하거나, 더 다양한 툴에 도전해보겠습니다.
📌 도움 받은 글 (옵션)
https://www.gpters.org/health/post/create-recommended-service-dog-O81E0qFkzvCm58r