노트

NotebookLM 은 Google 의 자료 우선 (source-grounded) AI 노트북. 사용자가 업로드한 PDF·구글 문서·웹사이트·YouTube·오디오에서만 답변을 합성하므로 hallucination 이 일반 챗봇보다 적음. 04-gemini-api 가 raw API, 08-google-ai-studio 가…

7회 조회

RAG (Retrieval-Augmented Generation) 는 LLM 의 한정된 학습 시점·메모리 한계를 외부 지식으로 보완하려는 방식입니다. 검색·생성을 분리하면 모델을 다시 학습시키지 않고도 새로운 자료를 다룰 수 있습니다.

4회 조회

AI 가 브라우저 안으로 들어오는 흐름이 2023~2025 년에 빠르게 진행됐습니다. 사이드바 보조에서 시작해 페이지 요약·번역·드래프트, 그리고 에이전트가 사용자 대신 페이지를 다루는 자리까지 펼쳐졌습니다.

3회 조회

공공기관·외부 사업자가 제공하는 OpenAPI 를 프론트엔드에서 직접 호출 하면 첫 화면은 빠르게 만들 수 있습니다. 그러나 운영을 며칠 굴려 보면 같은 자리에서 같은 종류의 사고가 반복됩니다 — 키 노출, 응답 코드 해석, 프로토콜 미스매치. 그래서 외부 API 는 우리쪽 BFF 한 겹 을 사이에 두는 게 거의 항상…

2회 조회

관리 콘솔이나 백오피스는 한 프로세스에서 콘텐츠·카탈로그·운영 로그처럼 서로 다른 DB에 접근해야 할 수 있습니다. HTTP 경유 대신 풀 직접 접속을 선택할 때는 연결 수, 권한, 장애 격리를 함께 설계해야 합니다.

2회 조회

브라우저 탭, SEO 검색 결과, OG 공유 카드 — 같은 페이지의 "제목" 이 세 자리에서 다르게 보이는 사고가 자주 일어납니다. 원인은 단순합니다. 제목 템플릿 이 하나의 소스에서만 합성되지 않고, 페이지마다 자기 제목에 사이트명을 박는 패턴을 같이 쓰기 때문.

콘텐츠 (마크다운·JSON·CSV 등) 를 시드 로 DB 에 넣는 프로젝트에서, 그 시드 파일을 어디에 둘 것인가 는 의외로 큰 결정입니다. 직관적으로 "그 콘텐츠를 쓰는 앱 폴더 안 (frontend/myapp/content/)" 에 두기 쉽지만, 장기적으로는 모노레포 루트 에 두는 편이 거의 항상 옳습니다.

대시보드는 서비스가 가진 도메인의 거울 입니다. 도메인이 5 개인데 위젯이 3 개면 사용자는 "나머지 2 개 도메인은 미완성인가" 를 본능적으로 의심합니다. 통일성은 디자인 감수성의 문제가 아니라 기능 인지 의 문제입니다.

인증 게이트가 있는 앱에서 어떤 경로는 비인증 사용자도 봐야 하는가 를 결정하는 자리가 있습니다. 이 자리에 공개 경로 화이트리스트 가 보통 자리잡습니다. 그리고 신규 도메인 도입 시 이 자리를 같이 갱신 하지 않으면 사용자가 정보성 페이지에 진입할 때 로그인 화면으로 튕깁니다.

회원 가입 확인, 비밀번호 재설정, 일회용 인증 코드 — 서비스가 사용자에게 직접 무언가를 보내야 할 때 가장 먼저 닿는 채널이 이메일입니다. 푸시 알림과 달리 별도 권한 동의가 필요 없고, 사실상 모든 사용자가 주소를 하나씩 가지고 있기 때문입니다.

Supabase 노트에서 Storage 는 한 문단으로만 다뤘습니다. 이 노트는 그 자리만 깊게 봅니다 — 버킷 설계 · 업로드/삭제 코드 · 파일 단위 권한(RLS) · S3 호환 API · 서명 URL. 이미지를 어디에 두고, 누구에게 보이게 할지의 실무.

Kafka 를 "쓸지 말지" 는 다른 노트에서 다뤘습니다. 이번 노트는 그 다음 — 토픽을 어떻게 이름 짓고, 파티션·키를 어떻게 잡고, Producer·Consumer 코드를 어떻게 쓰는가입니다. 개념은 한 번 잡으면 끝나지만, 토픽 설계는 한 번 잘못 잡으면 운영 내내 따라옵니다.

NotebookLM 은 Google 의 자료 우선 (source-grounded) AI 노트북. 사용자가 업로드한 PDF·구글 문서·웹사이트·YouTube·오디오에서만 답변을 합성하므로 hallucination 이 일반 챗봇보다 적음. 04-gemini-api 가 raw API, 08-google-ai-studio 가…

Google Stitch 는 Google Labs 의 자연어·이미지 → UI 디자인 + 코드 도구. Figma 의 자동 디자인 측면과 v0.dev 의 컴포넌트 생성 측면이 Google 톤 으로 결합된 자리. 14-ai-web-ides 가 풀스택 앱 빌더라면 Stitch 는 디자인 + 프론트엔드 코드 단계에 특화.

10-ai-coding-ides 가 데스크탑 IDE (Cursor · Windsurf · Kiro · Trae · Antigravity) 의 자리라면, 본 글은 브라우저만으로 AI 가 코드 + DB + 배포까지 만드는 자리 — AI Web IDE 와 AI 앱 빌더 — 를 정리합니다.

Google AI Studio (aistudio.google.com) 는 Gemini 모델을 브라우저에서 직접 다루는 통합 환경입니다. 처음에는 Gemini 프롬프트 플레이그라운드 였지만 2024 년 이후 노트북·앱 빌더·자동 배포가 통합되며 Replit 과 같은 AI Web IDE 카테고리로 자리를 옮겼습니다.

GitHub Pages 는 GitHub 저장소를 그대로 정적 웹사이트로 배포하는 무료 호스팅입니다. HTML/CSS/JS 또는 Jekyll/Hugo/Vite 같은 정적 사이트 생성기 (SSG) 의 빌드 산출물을 그대로 서빙합니다.

Replit 은 IDE · 협업 · 배포 + AI 코드 생성이 한 화면 안에 들어 있는 클라우드 개발 환경입니다. 로컬 셋업 없이 브라우저만으로 자연어 → 코드 → 배포까지 끝낼 수 있어 AI Web IDE 카테고리의 대표 주자입니다.

관리자 기능을 갖춘 백엔드에서 "누가 · 언제 · 무엇을 · 왜" 의 네 축을 기록하는 감사로그 (audit log) 는 단순한 관행 이상입니다. 개인정보보호법 · GDPR 같은 규정 준수, 사고 조사, 권한 오남용 방지의 실질 수단.

관리 콘솔이나 백오피스는 한 프로세스에서 콘텐츠·카탈로그·운영 로그처럼 서로 다른 DB에 접근해야 할 수 있습니다. HTTP 경유 대신 풀 직접 접속을 선택할 때는 연결 수, 권한, 장애 격리를 함께 설계해야 합니다.

사내 관리자 페이지는 숫자로 보면 목록 페이지 수십 개의 합입니다. 유저 목록 · 게시글 목록 · 포인트 거래 목록 · 신고 목록 등. 이들이 각자 다른 모양으로 만들어지면 운영자가 페이지마다 UI 를 다시 배우고, 개발자는 같은 boilerplate 를 매번 복붙합니다. 한 컴포넌트에 모아두면 이런 두 비용이 동시에…

페이지 수십 · API 수백 개를 가진 관리자 앱의 E2E 테스트에서 가장 자주 하는 실수는 "스펙 파일에 새 라우트 추가를 잊는 것". 사람이 수작업으로 유지하지 않고, 파일 시스템에서 라우트 목록을 자동 생성해 하나의 spec 이 모든 라우트를 돌게 만드는 패턴이 이 비용을 크게 줄입니다.

문의하기 · 댓글 · 건의함처럼 로그인 없이 공개된 폼은 가장 자주 남용당하는 표적입니다. CAPTCHA 를 안 쓰면 안 된다는 결론으로 건너뛰기 전에, 더 적은 비용으로 상당한 방어가 가능한 수단들이 있습니다.

AI 가 브라우저 안으로 들어오는 흐름이 2023~2025 년에 빠르게 진행됐습니다. 사이드바 보조에서 시작해 페이지 요약·번역·드래프트, 그리고 에이전트가 사용자 대신 페이지를 다루는 자리까지 펼쳐졌습니다.

LLM 을 단발 호출로 쓰는 자리를 넘어, 여러 단계의 자동화·통합 흐름으로 묶는 도구가 늘었습니다. 코드 작성 없이 노드를 잇거나 (GUI), 자체 호스팅으로 운영 통제권을 두는 가닥이 다양합니다.