소개
지난주엔 AI의 도움을 받아서 만들 것들을 기획하는 일을 했었다면, 이번주부터는 본격적으로 AI를 활용한 구현을 하게 시작했습니다.
기획 내용을 다시 간단히 소개하면 영어글을 읽다가 모르는 단어가 나왔을 때 사전을 찾아보면 읽기 흐름이 끊기니, 이 때 간단히 저장만 해두면 AI가 알아서 문맥에서 적절한 의미를 찾아서 저장해두었다가 나중에 다시 효과적으로 복습할 수 있도록 해주는 기능을 크롬 익스텐션으로 구현하려고 하는 것입니다.
https://www.gpters.org/research/post/english-reading-extract-context-HGXsieGRZGFvEde
크게 구현하려는 기능은 1. 브라우저에서 모르는 단어 단축키로 저장, 2. 문맥에서의 적절한 의미를 AI가 파악, 3. 단어 의미 뿐만 아니라 복습하는데 필요한 문맥, 학습 이력 등의 데이터 DB에 저장, 4. 복습 리마인드 기능 등으로 나누어볼 수 있습니다.
이번주에는 가장 기초적인 기능을 구현하는것을 목표로 하여, 1번, 3번 기능을 크롬 익스텐션으로 구현하는데 일 단 목표를 두었습니다. 다음주부터는 2번, 4번 기능과 디테일을 높이는데 집중하기로 계획을 세워보았습니다.
진행 방법
애초에 PRD를 작성할 때, Supabase, n8n, 구글 익스텐션 등 구현에 사용할 도구를 어느정도 알려주었더니, 아래와 같이 바로 구현에 써먹을 수 있는 DB 구조, 구글 익스텐션 코드 초안 등을 작성해주었습니다. 그래서 먼저 이것들을 하나씩 실행에 옮기기 시작했습니다.
1. 크롬 익스텐션 껍데기 구현
우선 크롬 익스텐션 껍데기부터 만들기 시작했습니다. Cursor로 아래와 같이 GPT가 알려준 폴더 구조에 파일을 하나씩 만들기 시작했습니다. 사실 여기까지는 GPT가 만들어준 코드를 복붙만 하면되어서 꼭 Cursor의 프롬프트를 사용할 필요는 없었습니다.
2. Supabase로 DB 준비
다음으론 크롬 익스텐션과 붙을 DB를 준비했습니다. DB로 Supabase를 사용한 이유는 아래 글 덕분인데요, 사실 익스텐션만 만들면 끝이 아니라 저장한 단어를 다시 확인하기 위한 웹페이지가 필요하고, 또 저 혼자 쓸게 아니라 저희 아이도 학습에 쓸 수 있도록 하려는게 목적이라서 사용자 계정 생성과 로그인이 필요했습니다. 결국 이를 저장할 DB가 필요하고요. 이 글 을 보니 Lovable과 Supabase 조합을 쓰면 이를 쉽게 구현할 수 있을 것 같더군요.
https://www.gpters.org/nocode/post/supabase-lovable-paste-google-WugxPWXWJKeIKTh
PRD에서 GPT가 아래와 같이 우선 DB 구조를 알려줄 뿐만 아니라,
Supabase에 바로 이런 DB를 생성할 수 있는 SQL 코드도 알려줬습니다. 아래의 코드를 Supabase의 SQL Editor붙여놓고 Run 버튼을 눌러주면 끝입니다.
사실 GPT가 알려준 코드가 한번에 되진 않았는데, Supabase에도 AI가 붙어있어서 '이러이런 문제가 있으니 이렇게 수정을 하면 될거야'하고 다 알려주는대로 하니 아래와 같은 DB가 뚝딱 만들어졌습니다.
3. Lovable로 랜딩페이지, 가입 및 로그인, 대시보드 사이트 만들기
DB를 준비해뒀으니, 사용자가 익스텐션에 대한 소개를 보고 로그인을 해서 저장해둔 단어를 확인하는 웹사이트를 만들 차례입니다. 일단 길게 고민하지 않고 Lovable에 아래와 같이 PRD를 그냥 때려넣고 만들어줘! 했습니다.
그런데 위에 요청을 보시면 알겠지만, 랜딩페이지만 만들어달라고 한 건 아니고 '크롬 익스텐션'을 만들어달라고 요청했습니다. 익스텐션도 사용자 인터페이스가 필요하고, 기본적으로 웹사이트를 만드는 것과 유사한 방식으로 만들어지기 때문에 Lovable이 만들어줄 수 있을까 해서 요청해봤는데 아래 이미지 처럼 크롬 익스텐션 기본 파일에 넣을 코드까지 생성해주더군요. 이거를 사용하면 되겠다 싶었습니다.
다음으로 위 캡쳐화면 아래에 보면 보이는 'Supabase 연결' 버튼을 눌러서 아까 만들어둔 Supabase와 연동을 요청했습니다. 그렇게 따라가다 보니 다 완료가 되었고 아래 화면과 로그인 기능을 구현하고 싶으면 인증(Authentication)을 먼저 세팅하라고 하라는 메세지가 나왔습니다.
Supabase는 기본적인 이메일 뿐만 아니라 다양한 방식으로 가입과 로그인을 위한 사용자 인증 방식을 지원하는데요, 저는 이메일과 Google 계정을 활용하는 방식을 사용하려고 했습니다.
그런데 결론부터 말하면 구현하는 과정에서 익스텐션에서 구글 계정의 로그인 상태를 유지하고 관리하는데에서 계속 문제가 발생했습니다. 어떻게든 해보려고 Cursor에서 유료 결제까지 하면서 계속 디버깅을 시도했는데요, 어느 시점부터는 계속 다람쥐 쳇바퀴 돌듯 더 나아가지 못하길래 '다른 방식으로 할 필요는 없는지 확인'해달라고 했더니..... 구글 로그인을 쓰지 말고 간단한 '이메일/패스워드' 로그인 방식을 쓰자고 제안하더군요.
뭔가 농락당한 느낌이지만, 더이상 로그인 기능으로 씨름하고 싶지 않아서 단순하게 일단 구현하기로 했습니다.
이 외에도 Cursor를 병행해서 사용할 필요가 있었던 건, Lovable로 한 큐에 모든 것이 딱 구현되면 좋겠지만 파일 하나하나 수정하고 고쳐야할 일들이 많았기 때문입니다. 최종적으론 랜딩페이지와 대시보드 페이지는 Lovable로 구현을 계속하고, 익스텐션은 Cursor를 사용해서 구현을 계속했습니다.
그리고 Lovable과 Supabase 을 함께 사용한다면 아까 제가한것 처럼 미리 Supabase에 DB를 만드는 과정을 굳이 할 필요가 없다는 것을 알았습니다. 아래 화면과 같이 Lovable에서 Supabase에 DB를 만드는 것까지 알아서 되더군요. 저의 경우는 이미 존재하는 것이 있어서 괜히 좀 더 복잡하게 진행이 되었었습니다. 다음에 다시한다면, 초기 준비믄 Lovable로 다 끝내고 그 다음에 디테일한 부분은 개별 도구를 사용해서 다듬어야겠다고 생각했습니다.
몇 번의 씨름을 한 후, 아래와 같이 DB까지 연결되어 가입과 로그인까지 가능한 그럴듯한 웹사이트가 만들어졌습니다.
그 다음부터는 끊임없는 디버깅의 연속이었는데요, 브라우저와 터미널, 크롬 개발자 도구 콘솔, 크롬 익스텐션 관리 페이지의 화면 등에 나오는 에러 화면과 문구를 그냥 화면 캡쳐해서 넣으면서 계속 '해결해줘' 라고 요구 했습니다.
그 끝에 드디어...
브라우저와 익스텐션에서 로그인이 정상적으로 잘 되는 것을 확인 후,
저장하고 싶은 단어나 문구를 마우스로 드래그 한 후, 'Alt/Opt + F' 키를 누르면,
이렇게 대시보드에서 저장한 단어/표현이 나타나는것까지 구현하였습니다! 🎉
이제 다음주부터는, n8n에서 AI노드로 외부 사전 API를 사용해서 문맥 내에서 사용된 의미를 파악하고, 그 의미까지 함께 저장해주는 기능과, 이메일이나 텔레그램으로 복습 알림을 제공해주는 기능, 그 밖에 디테일들을 개선하는 작업을 진행해보려고 합니다.
결과와 배운 점
PRD에 충분히 상세한 내용이 담겨 있다면 Lovable로 웹사이트 뿐만 아니라, 익스텐션 코드, DB 연결까지 대부분의 작업이 가능합니다. 그 다음에 Cursor로 디테일을 잡아나가는 식으로 작업을 하면 더 효율적이겠다는 생각을 했습니다.
익스텐션에서 구글 로그인 연동은 불가능한건 아닐텐데, 구현 하는 과정에서 Lovable, Cursor, ChatGPT 여러가지를 사용해서 진행을 하다보니 뭔가 꼬였던 것 같습니다. 최대한 AI가 컨텍스트를 이해할 수 있게 하나로 끝내는 게 문제가 발생할 가능성이 적을 것 같습니다.
본 글의 내용은 Cursor의 유료 플랜에서 지원하는 상위 모델을 사용하지 않고, 무료 플랜의 Auto 모델로도 충분히 구현이 가능했습니다.
도움 받은 글
https://www.youtube.com/watch?v=YlzXeTHp7pk
https://www.gpters.org/nocode/post/supabase-lovable-paste-google-WugxPWXWJKeIKTh
