ep.01 ) 4시간만에 안티그래비티로 노션의 한계를 뛰어넘어보기 ... (제미나이를 곁들인)

안녕하세요, 저는 타타라고 합니다!
노션 페이지 제작을 원하는 기업이나 팀의 의뢰를 받아, 기획(컨설팅)부터 제작까지 진행하는 일을 하고 있습니다.
지금 진행 중인 프로젝트에서 노션만으로는 아쉬운 부분이 있어서, 바이브 코딩으로 기능 구현을 해보려고 합니다.

제작하고 싶은 것
바이브코딩으로 제작한 페이지와 노션 DB를 연동하여, 사용자가 로그인하듯 정보를 입력하면 본인의 데이터만 조회할 수 있는 기능을 구현하고 싶습니다.
기존의 노션 필터링 기능만으로는 완벽한 보안 유지가 어렵고, 내 정보만 안전하게 검색해서 보는 것에 한계가 있다고 느꼈거든요. 이 부분을 해소하기 위해 생각해 낸 방법인데, 과연 가능할지 한번 도전해 보겠습니다…! (사실 해내야만 합니다)

진행 방법

1️⃣ 제미나이로 페르소나 에이전트 만들어주기

페이지 제작에는 기획이 무조건 탄탄해야하는것같습니다...
그 기획을 탄탄하게 하기 위해 탄탄한 페르소나를 부여했는데요
~~(탄탄함 이라고 하기엔 너무나 민망한 초딩수준의 언어이지만 그래도 솔직하게..초보 맞으니깐...)~~

노션에 있는 특정 DB를 바이브 코딩으로 만든 페이지를 연결하고 싶어
바이브 코딩은 안티 그래비티로 제작할 거고 그 외에 프롬프트는 여기 제미나이로 활용해서 왔다 갔다 하려고 해 이 페르소나는 안티 그래비티 바이브 코딩 전문가와 노션 api 연결도 전문적으로 잘했으면 좋겠어 나는 바이브 코딩 초보여서 너무 한 번에 설명하거나 어렵게 설명하지 않고 순서대로 설명해줘

2️⃣ 생성된 나만의 에이전트와 기획 짜고 md 파일로 만들어달라고 하기

저번 모각에 닿 님에게 배운건데 내가 하고싶은 내용을 ai와 기획하고 해당 내용을 바이브코딩툴에 넣기 좋게 md파일 (Markdown)으로 보내줘 라고 해봅니다 ! 그럼 우리가 나눈 내용들을 한 코드에 정리해서 보내줍니다.
이것을 이제 새로 만든 안티그래비티에 넣어요 !

# 프로젝트 페르소나 및 요구사항: 노션 API 기반 문의 내역 조회 페이지

## 1. 페르소나 및 역할
- 당신은 '안티그래비티 바이브코딩' 시니어 엔지니어입니다.
- 제공된 HTML/CSS/JS 코드를 기반으로 노션 데이터베이스와 연동되는 조회 페이지를 생성하세요.

## 2. 디자인 컨셉: Notion 스타일
- **컬러:** #fbfbfa(배경), #2383e2(포인트 블루), #37352f(텍스트)
- **스타일:** 파스텔 톤, 둥근 모서리(12px), 깔끔한 여백, 소프트한 그림자.
- **레이아웃:** 중앙 정렬된 카드 형태의 입력 폼과 그 하단에 나타나는 결과 창.

## 3. 기능 요구사항
- **입력 필드:** 이름(input-name), 연락처/이메일(input-contact), 비밀번호(input-pw) 3개 필드 필수.
- **조회 로직:** 3개 필드가 모두 입력되어야 버튼이 활성화되거나 조회가 시작됨.
- **결과 표시:** 조회가 성공하면 '내 문의 내용'과 '관리자 답변'이 담긴 결과 박스(result-box)를 출력함.

## 4. 구현 코드 (HTML/CSS/JS)

### [HTML]
<div class="notion-container">
  <div class="notion-card">
    <h2 class="title">📋 내 문의 내역 조회</h2>
    <p class="subtitle">성함과 연락처, 설정하신 비밀번호를 입력해주세요.</p>
    
    <div class="input-group">
      <label>이름</label>
      <input type="text" id="input-name" placeholder="성함을 입력하세요">
    </div>
.... 등등

이렇게 코드를 짜줘서 그대로 복사한 후 안티그래비티에 넣어보니

너무너무 간단하지만 그래도 뿌듯한 초안이 만들어졌습니다

3️⃣ 이제부터 안티그래비티랑 뚝딱거리다가 모르거나 헷갈리면 캡쳐해서 제미나이한테 부탁하기

🔴 제일 중요한 작업의 시작

<디자인에 관한 작업>
안티그래비티 자체에 이미지를 캡쳐해서 이런 색감으로 만들어줘 ~ 여기 수정해줘 등등 말해봅니다
그럼 똑똑하게 알아서 수정해주는데 너무너무 신기해요..!!!
아주 맘에 드는 것은 아니지만... 기존 초안에 비해 나름 색감을 알아서 설정했죠?

<데이터 연결 작업>
사실 이번 작업에서 디자인보다 중요한것은...
여기에 노션 데이터를 가져와서 실제로 로그인 정보에 따라 해당 데이터를 알맞게 가져오는가?
그것이 가장 관건인데요
제가 안티그래비티에게 이제 사이트 준비는 대략 되었으니 실제 api를 연결해서 로그인이 제대로 되는지 하자고 했더니 아래 정보를 달라고 하네요
그래서 이것을 캡쳐해서 아까 만든 나만의 제미나이에게 순서대로 알려달라고 했더니 친절하게 안내를 해줍니다 ~~(초보인 나를 위해 로봇 직원 만들기 이러면서 귀여운 비유까지 해줌 짜식..)~~
시키는 대로 연결 한 후 제가 깔아둔 더미데이터의 정보 중 하나를
이렇게 로그인 창에 입력해보는데요
일부러 틀려봤더니 이렇게 접속되지않게 작업이 되구요
올바르게 접속이 된다면...? (감동주의)
성공 ....!!!!!!!!!!!!!!!!
와....

4️⃣ 간단한 검증하기

이제 내가 새로운 데이터가 추가되었을때 내가 연결한 사이트에 바로 적용되는지 한번 가볍게라도 테스트 해보고싶었는데요... ~~(아마도 추후에 실 접속자가 많아지면 어떤 오류가 있을지 모르겠지만 일단은 .. )~~

⬆️ 키르아라는 더미데이터를 오전 2시 5분에 생성하였고

⬆️ 2시 7분에 바로 로그인해보았는데요

⬆️ 됩니다....예... ㅠ_ㅠ....... 이게 됐어요...!!!!!!

5️⃣ vercel(?)로 배포하고 도메인 연결해주기

이제 이 사이트를 세상에 배포해야하는데 이 부분은 기획자민지님이 조금 더 확인 후 알려주신다고 해서
기다렸다가 알려주시면 맞춰서 배포하고 미리 만들어 둔 의뢰자분의 사이트에 맞게 집어넣어보면 끝날것같습니다... 이것은 아직 진행중이니 완료되면 여기에 업데이트하겠습니다..!

결과와 배운 점

진짜 이제는 아이디어만 있으면 ai라는 동료와 함께 기획부터 사이트 배포까지 완료할수있는 세상이 되었다...
모르는게 있다면 부담없이 ai와 논의해서 해결하자 ....
그래도 안되면 우리에겐 지피터스 스터디장과 동료들이 있으니까!!!

정말 재밌네요.. 정말 적성에 맞아요...
앞으로 의뢰 받을때 폭이 더 넓어지겠어요 ...
긴 글 읽어주셔서 감사합니다

22기 바이브코딩 스터디 대기자 등록이 시작됐어요 💫