[코딩자율학습] 커서(Cursor) x AI로 완성하는 나만의 웹서비스 – 3주차 학습 후기
벌써 커서(Cursor)와 함께 웹서비스를 만든 지 3주차가 되었습니다. 2주차에는 눈에 보이는 화면(UI)을 예쁘게 꾸미는 재미가 있었다면, 이번 3주차는 서비스가 실제로 작동하게 만드는 ‘알맹이’를 채우는 시간이었습니다.
데이터베이스를 연결하고, 로그인 기능을 넣고, AI가 내 말을 알아듣게 만드는 과정까지! 초보자의 눈높이에서 정리해 보겠습니다.
1. 내 데이터를 저장할 공간 만들기 (Supabase)
지난주까지는 새로고침을 하면 데이터가 사라졌지만, 이제는 저장할 공간이 생겼습니다. 바로 Supabase라는 도구를 사용했는데요.
- 프로젝트 시작하기: 클릭 몇 번으로 나만의 데이터베이스 서버를 뚝딱 만들었습니다.
- 환경 변수 설정: API 키 같은 중요한 비밀번호를 안전하게 숨기는 방법도 배웠어요. 처음엔 좀 헷갈렸지만 Cursor가 어디에 입력해야 하는지 친절하게 알려줘서 금방 끝냈습니다.
- SQL 만들기: “할 일 목록을 저장할 표를 만들어줘”라고 Cursor에게 시키니까 복잡한 코드(SQL)를 알아서 짜주더라고요. 정말 세상 좋아졌다는 걸 다시 한번 느꼈습니다.
2. 회원가입과 로그인 기능 넣기
이제 내 웹사이트에도 ‘내 계정’이 생겼습니다!
- 로그인/로그아웃: 친구나 다른 사람이 들어와도 각자의 할 일을 관리할 수 있게 회원가입 기능을 넣었습니다.
- 기능 확인하기: 실제로 가입하고 로그인했을 때 내 이름이 뜨는 걸 보니, 이제 진짜 제대로 된 서비스를 만들고 있다는 실감이 났습니다.
3. AI랑 대화하며 할 일 만들기 (자연어 처리)
이번 주차의 가장 신기했던 부분입니다. 단순히 글자를 치는 게 아니라, AI가 내 말을 분석해서 알아서 정리해 주는 기능을 넣었어요.
- 말귀 알아듣게 하기: “오늘 오후 3시에 회의 있어”라고 입력하면, AI가 알아서 ‘회의’라는 제목과 ‘오후 3시’라는 시간을 뽑아내서 저장해 줍니다.
- 프롬프트 다듬기: AI가 엉뚱한 소리를 하지 않고 똑똑하게 대답하도록 “너는 할 일을 정리해 주는 도우미야”라고 역할을 정해주는 과정이 참 재미있었습니다.
3주차 학습을 마치며
이번 주에는 눈에 보이지 않는 뒷부분(백엔드)을 다루다 보니 조금 어렵게 느껴지는 부분도 있었어요. 하지만 Cursor와 함께하니 막히는 구간도 금방 지나갈 수 있었습니다.
단순히 화면만 있는 가짜 사이트가 아니라, 실제로 데이터가 저장되고 AI가 작동하는 ‘진짜 서비스’의 형태를 갖추게 되어 정말 뿌듯합니다!
One thought on “[코딩자율학습] 커서(Cursor) x AI로 완성하는 나만의 웹서비스 – 3주차 학습 후기”