김미진
김미진
🧙 AI 위자드
📹 SNS 찐친

AI 북 큐레이션 서비스 만들기(2)

소개

시도하고자 했던 것과 그 이유를 알려주세요.

AI 강사로 활동하면서 수강생들 결과물을 큐레이션 하는 서비스를 만들고 있습니다. 지난주 만들었던 기획이 없는 초기버전을 모두 폐기하고, 조금 더 기획된 버전으로 다시 구성하고 있습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

개발환경은 Antigravity, 배포는 vercel, 데이터베이스는 supabase

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)

이 서비스를 기획하는 목적과 서비스 개요를 제미나이에게 알려줍니다. 어떤 도구를 사용할 것인지도 알려줘요. 하나씩 개선할 거고 서비스 기획자로 대화하라고 지시합니다.

한국어로 된 메시지 스크린샷

필요한 질문이 있다면 하나씩 질문하라고 하니 지난번처럼 차근차근 진행합니다.

한국어 텍스트가 있는 검은 화면

최소 결과물 배포를 먼저 목표로 하니 답변은 간단한 것으로 답합니다.

한국어 텍스트가 있는 검은 화면

그리고 추후 기능을 하나씩 개선할 예정임을 강조해 확장 가능하도록 설계할 것을 요청하니, 알아서 컴포넌트로 구성하고 DB 도 그렇게 설계합니다.

Antigravity 에 전달하기 위한 prd를 작성하라고 요청합니다. 사실 제미나이가 알아서 해줄줄 알았는데 안해줘서 prd 문서 작성을 요청했어요.

검정색 배경의 한국 웹사이트 스크린샷

그리고 이제 제법 긴 Antigravity 에서의 싸움이 시작되었습니다. 터미널을 잘 모르기때문에 하나씩 물어가면서 실행방법, 수정사항 확인하는 방법, DB 수정방법 등을 물어가면서 진행했습니다.

그리고 vercel 배포도 알아서 해달라고 하는데요, 몇가지 제가 해줘야 하는 작업들은 있었어요. 뭔가 잘 안되면 계속 물어가면서 했습니다. vercel 배포시 경로 설정에 문제가 있어서 잘 안되었는데요, ai가 알아서 수정했다는데 안돼서 물어가며 직접 수정했어요.

한국어 텍스트가 있는 검은 화면

이제 supabase 연동을 해달라고 요청해요. '해줘' 하면 다해준다더니 정말 다해줍니다. 잘 안되는건 어떻게 해야 하는지 자세하게 ai가 설명해줍니다. supabase API 키도 찾아서 넣어달라면서 어디에 있는지 설명도 해주고요.

한국어 웹사이트 스크린샷

이렇게 나온 첫번째 페이지입니다.

한국 비디오 웹사이트의 스크린샷

대략의 결과물 사이트를 보고, 추가로 작업해보고 싶은게 있어서 하나만 더 확인하고 이후 진행합니다. 링크를 주고 원하는 내용을 가져와서 보여지는지 확인해봅니다.

메시지가 있는 검은 화면

잘 보여지므로, 전체 데이터를 패들렛에서 가져와서 보여지도록 했어요.

한국어 텍스트가 있는 검은 화면

오늘까지 작업한 버전입니다.

https://devmusicvideo.vercel.app/

캔바의 미리보기 링크는 id 패턴이 랜덤이어서 직접 입력했고, 이후 화면 네비게이션, 책의 썸네일과 책 제목과 저자 등을 교보 사이트에서 가져오도록 수정했습니다. 네이게이션 정도는 알잘딱깔센으로 해줄거라 생각했는데 아니어서 살짝 아쉬웠어요.

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

스터디장님이 vercel 배포시 github을 사용하지 않아도 된다고 하셨는데 지난주에는 antigravity가 github 을 사용하라고 해서 했거든요. 그런데 이번에는 안써도 된다고 해서 물어봤어요. 역시 물어보니 자세히 설명해줍니다.

과정 중에 어떤 시행착오를 겪었나요?

  • DB 수정사항이 배포버전에 적용이 안되었는데요, DB 데이터 수정은 배포버전에 바로 반영되지만 DB table 수정으로 코드가 수정되었다면 vercel 배포를 다시 하고 확인해야 합니다.

  • 캔바 공개보기 링크를 share 링크의 id만 있으면 가져올 수 있을거라 생각했는데 아니었어요. 결과물 하나하나 캔바 공개보기 링크를 supabase 에 직접 입력해야 했습니다.

  • 역시 교보문고 사이트에서 책 제목도 크롤링이 안되어서 직접 입력했습니다.

같은 내용으로 블로그에도 발행되었습니다.

AI 바이브코딩으로 AI 동화책 사례 큐레이션하기(2)

도움이 필요한 부분이 있나요?

앞으로의 계획이 있다면 들려주세요.

(내용 입력)

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요