🟢 소개
제가 시도한 것은 회원가입/로그인 기능을 갖춘 웹사이트를 만드는 것이었습니다.
처음에는 웹페이지 제작과 사용자 정보 데이터베이스를 어떤 서비스를 써야 할지, 또 웹페이지와 DB를 어떻게 연동해야 할지 막막했는데요.
이번 주 스터디 시간에 에듀테크 도로시J님 소개로 AI 에이전트인 Skywork.ai를 활용해 보니, 이러한 과정이 한 번에 연결되어 훨씬 편리했습니다. 웹페이지 뼈대 제작부터 사용자 정보 DB 연동까지 AI가 설계와 코드를 제공해주어, 별도의 복잡한 설정 없이 빠르고 효율적으로 회원가입/로그인 시스템을 구현할 수 있었습니다.
또한 단순한 이메일 회원가입뿐 아니라 구글 아이디(OAuth) 로그인 기능까지 쉽게 추가할 수 있어 실제 서비스 수준의 사용자 인증 시스템을 경험할 수 있었습니다.
🟢 사용한 도구
Skywork.ai 에이전트
사이트의 뼈대(프론트엔드 코드)와 Supabase와 연결하는 방법을 설계해주었습니다.
Google Cloud
Google Cloud에서 프로젝트를 만들고 배포 환경을 세팅했습니다.
Supabase
회원가입/로그인 기능을 처리하고, 사용자 정보를 안전하게 보관하는 데이터베이스 역할을 맡겼습니다.
🟢 진행방법
사용 프롬프트 : "회원가입과 로그인이 가능한 웹사이트를 만들어줘."라는 아주 간단한 프롬프트를 입력하니 회원가입 필수 정보부터 필요 기능, 페이지 디자인 등 선택할 사항들을 보여주면서 코드를 짜더니 바로 Supabase 와 연결할 수 있도록 버튼도 생성해 주는 등...
소스코드와 배포 과정을 안내해줍니다.사용자가 이메일로 회원가입을 요청하면 입력한 이메일에서 인증까지 해야 가입이 완료됩니다.
사용자 가입 정보가 담기는 DB인 Supabase를 편리하게 연결할 수 있도록 버튼도 있어요.
회원가입 할 때 아이디/비번 말고 구글 아이디로 회원가입 기능도 이번에 알게 되었어요.
구글 로그인(OAuth) 과정
Google Cloud에서 OAuth 동의 화면과 사용자 인증 정보를 설정 → Supabase에 클라이언트 ID/비밀키 전달
Supabase는 이 권한을 바탕으로 실제 구글 인증을 대행
사용자가 “구글로 로그인” 버튼을 클릭하면 → 구글 로그인 → Supabase가 사용자 정보 확인 → 웹사이트에 로그인 완료
사이트는 UI를 좀 더 보완하고 싶었는데 skywork은 정말 크레딧이 훅훅 닳아서;;;
🟢 결과와 배운 점
이메일 회원가입/로그인 + 구글 아이디 로그인 기능 구현 성공
배운점
Google Cloud를 이번 기회에 좀더 잘 살펴볼 수 있는 계기가 되었어요.
Skywork과 Google Cloud, Supabase 간의 연동을 익힐 수 있어서 다른 툴을 사용할 때도 도움이 될 거 같아요.
시행착오
Supabase와 Google Cloud 간 권한 연결이 쉽지 않았는데 화면 자체를 캡처해서 Gemini한테 주고 이 다음에 어느 메뉴 선택해야해? 하는 식으로 하나씩 물어보니 정말 잘 알려주더라고요.
현재 가장 큰 문제점은 Skywork 이 작업을 계속 하다보면 어느틈엔가 더이상 프롬프트를 받지를 않더라고요. 제가 잘 몰라 그러는건지;;; 더 쭉 이어서 로그인 후 대시보드도 수정해야하고 할 것이 많은데 더이상 작업이 이어지질 않아 당황스럽습니다.
🟢 앞으로의 계획
Skywork이 되었든 다른 도구가 되었든 로그인을 거쳐 결제 기능까지 연결해보고자 합니다.
🟢 도움 받은 글 (옵션)
18기 에듀테크 스터디에서 도로시J 스터디장님 공유 내용
