FIELD GUIDE
세 프로젝트 기록을 수업에 적용하기
프로젝트 분석의 기본 자료는 2026-10-31 조사 기록이다. Git 심화는 2026-11-09 Thomas dot의 「Git 브랜치 생성 정리」 대화와 uc-anchor 로컬 Git PR #720·#722 기록을 추가했다. 대화의 배포 상태는 당시 관찰 기록이며 이번 자료 제작에서 실서비스를 다시 시험하지 않았다.
목차와 처음으로 ↑VIBE CODING / FIELD HANDBOOK
프로젝트 구축 과정·기술 역할·설계 판단
Codex에서 시작해 GitHub에 기록하고, Supabase·Vercel·Resend와 SNS 인증을 연결하는 실습 중심 강의.
05일차
20교시·시간
40핵심 프롬프트
51심화 참고
TECHNOLOGY
프런트엔드·백엔드·DB의 실제 역할
| 기술 | 종류 | 역할 |
|---|---|---|
| HTML·CSS | 마크업·스타일 언어 | 화면 구조와 표현 |
| JavaScript·TypeScript | 프로그래밍 언어 | 화면·서버의 동작 |
| React·Next.js | UI 라이브러리·웹 프레임워크 | 컴포넌트·페이지·서버 경로 |
| Node.js | 서버 실행 환경 | TypeScript/JavaScript 서버 실행 |
| PostgreSQL·SQL | 관계형 DB·질의 언어 | 저장·조회·무결성 |
| Supabase | 백엔드 플랫폼 | DB·Auth·Storage·API |
| Docker·Vercel | 컨테이너 도구·배포 플랫폼 | 로컬 스택·공개 앱 |
세 프로젝트의 주 DB는 Supabase PostgreSQL이다. MySQL·SQLite는 관계형 DB, MongoDB는 문서형 DB의 비교 예시다. uc-anchor의 선택형 Python PDF 서비스는 Next.js·Vercel 기본 배포와 분리해 설명한다. 현재 운영 전체 기능을 재검증한 표는 아니다.
목차와 처음으로 ↑PROJECT CASE
uc-anchor · 구축 과정 분석
프로그램과 예산을 보여주는 화면에 데이터 저장, 문서 내보내기, Wiki와 업무 규칙이 더해졌다. 이 사례는 프런트엔드의 TypeScript·React·Next.js, 서버의 Node.js·TypeScript API, Supabase의 PostgreSQL과 SQL·RLS가 각각 맡는 역할을 중심으로 분석한다.
프런트엔드·백엔드·DB의 기술과 역할
- 화면: HTML·CSS·TypeScript와 React·Next.js
- 서버: Node.js·TypeScript API와 Supabase Edge Functions
- DB: PostgreSQL·SQL·RLS, Auth와 Storage는 별도 서비스
- 비교 예시: Python 별도 PDF 서비스는 선택형이며 Vercel 기본 배포와 분리
| 기록 시점 | 구축 내용 | 근거 | 설명 |
|---|---|---|---|
| 2026-06-29 | 초기 화면과 Supabase 연결 | 7fc877ab / a17d51d4 | 프로젝트 초기화, 배포 준비와 예산 화면의 데이터 연결 이력이 남아 있다. |
| 2026-06-30 | 실제 업무 데이터와 Excel 흐름 | 298e5fa0 / 55b44986 | 내보내기와 업로드 피드백, 데이터 변경에 따른 화면 상태 동기화를 개선했다. |
| 2026-07-01 | 앵커 Wiki와 RAG 확장 | df36221c / d514048f | 사업 자료를 참고하는 지식 기능과 백엔드 구조를 추가했다. |
| 현재 소스 | 프런트엔드와 서버의 역할 분리 | anchor-dashboard/AGENTS.md | React·TypeScript 화면과 Next.js의 서버 Route Handler가 다른 실행 위치와 권한을 가진다. 언어·라이브러리·프레임워크·런타임을 구분한다. |
| 현재 소스 | PostgreSQL과 인증 및 파일 저장 | anchor-dashboard/README.md | Supabase 플랫폼 안의 PostgreSQL DB, Auth, Storage를 구분한다. SQL과 RLS는 데이터 접근 규칙을 담당한다. |
설계 판단과 수업 적용
| 관점 | 프로젝트 기록 | 수업 적용 |
|---|---|---|
| 화면과 업무 규칙의 결합 | 예산과 성과 화면을 업무 흐름에 맞춰 확장했다. | 먼저 목록 한 화면을 완성하고, 저장 규칙과 권한을 붙이는 순서로 실습한다. |
| 같은 언어와 다른 실행 위치 | 프런트엔드와 서버 모두 TypeScript를 사용하지만 실행 위치와 접근 가능한 정보가 다르다. | 화면 이벤트는 브라우저에서, 비밀키와 권한 검증은 서버에서 처리한다. |
| DB와 플랫폼의 구분 | PostgreSQL은 관계형 DB이고 Supabase는 DB·인증·파일 저장을 제공하는 플랫폼이다. | SQL은 조회 언어, RLS는 행 접근 정책, Vercel은 배포 역할로 구분한다. |
해석할 때의 주의
초기 Git 이력에는 로컬 캐시 우회와 과거 인증 방식도 나온다. 이력은 시행착오 분석 자료이며, 실습은 현행 Supabase Auth·서버 권한 검증·RLS를 기준으로 한다.
TypeScript와 Next.js, Node.js, Supabase와 PostgreSQL은 같은 종류의 기술인가?
TypeScript는 언어, React는 UI 라이브러리, Next.js는 웹 프레임워크, Node.js는 서버 실행 환경이다. Supabase는 플랫폼이고 PostgreSQL은 그 안의 관계형 DB다.
기존 조사 기준 checkout: codex/meeting-result-backfill-20261017 · HEAD f03ab5c5
근거와 참고 자료
- /Users/thomas/Documents/uc-anchor/anchor-dashboard/README.md
- /Users/thomas/Documents/uc-anchor/docs/04-report/features/nextjs-migration.report.md
- /Users/thomas/Documents/uc-anchor/docs/04-report/features/nextjs-production-rollout.report.md
- /Users/thomas/Documents/uc-anchor/docs/03-analysis/supabase-seoul-region-migration.analysis.md
일차별 실습에 적용하기
- D1-2 · 사이트 밖의 생성: 파일·문서 업무 자동화 · 발표로 돌아가기
- D1-4 · 구축 지도를 그리기: 언어·서버·DB · 발표로 돌아가기
- D2-1 · Codex 수정도 작은 Git 기록부터 · 발표로 돌아가기
- D2-2 · 검색 개선과 회귀 검사·복구의 기준 · 발표로 돌아가기
- D3-4 · GitHub에서 Vercel·Supabase로 이어지는 설정 · 발표로 돌아가기
- D5-3 · staging→main: Git 기록과 운영 설정 연결 · 발표로 돌아가기
PROJECT CASE
kysong · 구축 과정 분석
교수 연구 포털을 만들고 GitHub와 Vercel을 연결한 뒤, 자료 관리·설문·Excel·HWPX·AI 분석 기능을 추가했다. 기능 확장 후에는 임시저장 복구와 원본 보존, 검증 일관성이 중요한 과제로 나타났다.
프런트엔드·백엔드·DB의 기술과 역할
- 화면: TypeScript·React·Next.js의 홈페이지와 Studio
- 서버: Node.js·TypeScript API에서 권한·파일·AI 처리
- DB: Supabase PostgreSQL과 RLS, 로그인은 Supabase Auth
- 결과물: Excel·HWPX와 AI 분석을 업무 흐름에 연결
| 기록 시점 | 구축 내용 | 근거 | 설명 |
|---|---|---|---|
| 2026-07-25 | 연구 포털과 첫 배포 연결 | ee2ecd1b / cc6c7a1d | Next.js 포털을 구성하고 Supabase 인증 설정과 GitHub에서 Vercel로 이어지는 배포를 확인했다. |
| 2026-07-25 | 자료 추적과 Excel 내보내기 | b09abcba | 개인 소개를 넘어 자료를 정리하고 업무 파일을 만드는 도구로 확장했다. |
| 2026-07-29 | 예산·성과·우수사례 설문 | 92ee2733 / 3c242022 | 여러 종류의 업무 입력과 지역별 규칙을 설문 화면으로 구성했다. |
| 2026-08-07 | 분산 임시저장의 병합 | survey-draft-version-union.report.md | 최신 한 건만 선택하는 방식 대신 문항별 유효 답변을 합치고 원본 draft를 보존했다. |
| 2026-08-29 ~ 09-05 | 편집 가능한 문서와 데이터 복구 | 10318944 / survey-draft-rich-recovery.report.md | HWPX 출력과 설문 복구를 보완했다. 진행 표시와 최종 제출 검증을 구분하고 원본 대조 근거를 남겼다. |
| 2026-10-06 | 분석용 Excel과 편집 가능한 차트 | d20c41f4 / 43a68a10 | 수집 결과를 분석·보고에 다시 사용할 수 있도록 내보내기를 확장했다. |
설계 판단과 수업 적용
| 관점 | 프로젝트 기록 | 수업 적용 |
|---|---|---|
| 재사용할 업무 결과물 | 화면의 데이터를 Excel과 HWPX로 내보낸다. | 단순 다운로드를 넘어 파일을 다시 열고 수정 가능한지 확인한다. |
| 분산 저장의 복구 | 여러 임시저장을 문항 단위로 병합하고 원본을 남긴다. | 빈 최신값과 유효한 이전값을 구분하는 작은 예제로 검증한다. |
| 저장과 완료의 구분 | 화면 진행 표시, DB 저장, 최종 제출 판정의 일관성을 보완했다. | 저장 성공 표시만 보지 말고 다시 읽은 데이터와 비교한다. |
해석할 때의 주의
새 기능이 늘수록 상태 복원과 데이터 정합성 문제가 커진다. 데이터가 없는 자리를 AI가 임의로 채우거나, 서로 다른 사용자의 기록을 섞어 복구하지 않는다.
최신 임시저장에 빈 답이 있다면 이전의 답을 지워야 하는가?
단순 최신 시각만으로 결정할 수 없다. 삭제 의도와 누락을 구분하고 문항별 충돌 규칙, 사용자 범위, 원본 보존을 설계해야 한다.
기존 조사 기준 checkout: codex/anchor-xlsx-web-chart-style · HEAD cc3b2191
근거와 참고 자료
- /Users/thomas/Documents/kysong/README.md
- /Users/thomas/Documents/kysong/docs/04-report/features/survey-draft-version-union.report.md
- /Users/thomas/Documents/kysong/docs/04-report/features/survey-draft-rich-recovery.report.md
- /Users/thomas/Documents/kysong/src/lib/survey-response-export.ts
- /Users/thomas/Documents/kysong/src/lib/survey-best-practice-hwpx.ts
일차별 실습에 적용하기
- D1-1 · 생성도구: 빠른 시작과 첫 공개 링크 · 발표로 돌아가기
- D1-3 · 생성한 보고서는 원본 CSV와 맞는가? · 발표로 돌아가기
- D2-3 · origin/main·PR·병합을 눈으로 확인 · 발표로 돌아가기
- D3-3 · 저장 성공 표시보다 재조회·계정 분리 · 발표로 돌아가기
- D5-1 · 내보내기는 다운로드 뒤에도 검증한다 · 발표로 돌아가기
- D5-2 · 권한·비밀·실패를 증거로 검증 · 발표로 돌아가기
PROJECT CASE
u-livet · 구축 과정 분석
데이터 구조와 교육 운영 화면을 만든 뒤 로컬 Supabase로 인증·업무 기능을 검증했다. 관리형 Supabase 운영 구성을 선택하고 카카오·구글·네이버와 MFA를 순차 보완했다. 최초 가입과 재로그인, 역할과 인증의 구분이 중요한 개선 지점이었다.
프런트엔드·백엔드·DB의 기술과 역할
- 화면: TypeScript·React·Next.js의 교육 운영 포털
- 서버: Server Action·Route Handler에서 가입 상태와 권한 확인
- DB: Supabase PostgreSQL·SQL·RLS와 native Auth·TOTP
- 실행: Docker 로컬 검증과 Vercel·Supabase Cloud 배포 구분
| 기록 시점 | 구축 내용 | 근거 | 설명 |
|---|---|---|---|
| 2026-09-18 | 데이터 구조와 교육 운영 화면 | cdd4265 / d88b3af / 6dadc45 | 초기 마이그레이션과 수강신청·LMS·출결·증명 흐름을 구축했다. 초기 Next.js 버전과 현재 버전은 다르다. |
| 2026-09-19 | 관리형 인증과 배포 구성 | 1688558 | 별도 인증 서버 검토 이후 Supabase Cloud를 쓰는 방향으로 결정이 바뀌었다. Docker 로컬 검증과 운영 구성을 구분했다. |
| 2026-09-19 | 카카오 가입과 MFA 복귀 개선 | 3c127c0 / c16612a | 카카오 가입 흐름과 인증 완료 후 원래 업무 화면 복귀를 보완했다. |
| 2026-09-20 | 구글 요청 정보 최소화 | 0ece30c | 로그인에 필요한 식별·이메일 범위로 조정하고 개인정보 안내와 함께 검증했다. |
| 2026-09-22 | 네이버 연동과 이메일 확인 보완 | 5cbf9d0 / a614871 | custom:naver와 사용자 정보 변환을 연결했다. 최초 가입에서 실제 이메일 확인과 재로그인 연결을 추가 보완했다. |
| 2026-09-23 | 업무 처리와 매뉴얼 확장 | b46ae84 / 8df71c2 / fa8e387 | 서류 승인과 업무 요청함 등 운영 기능, 사용자 매뉴얼을 확장했다. |
설계 판단과 수업 적용
| 관점 | 프로젝트 기록 | 수업 적용 |
|---|---|---|
| 로컬과 운영의 역할 분리 | Docker로 로컬 Supabase를 실행하고 운영에는 관리형 Supabase와 Vercel을 사용했다. | 운영 데이터를 건드리지 않는 계정·RLS 실험 환경을 먼저 준비한다. |
| 인증과 업무 자격 분리 | SNS 인증 성공 뒤에도 등록된 역할과 가입 완료 상태를 확인한다. | 로그인 성공과 관리자 권한 부여를 별개의 검사로 만든다. |
| 제공자별 차이 처리 | 네이버 사용자 정보 형식을 변환하고 이메일 확인을 별도로 수행한다. | 로그인 버튼 세 개를 붙인 뒤 각 최초 가입·취소·재로그인을 시험한다. |
해석할 때의 주의
네이버 최초 가입 기록에는 실제 메일 발송과 계정 연결이 불완전했던 문제와 후속 수정이 함께 남아 있다. 화면 안내, 공급자 인증, 앱의 가입 완료를 각각 확인해야 한다.
네이버 로그인에 성공한 사용자를 바로 관리자나 강사로 등록해도 되는가?
인증은 계정의 신원을 확인하는 과정이다. 강사·관리자 자격은 서버에 등록된 역할과 승인 상태로 별도 판단한다.
기존 조사 기준 checkout: main · HEAD fa8e387
근거와 참고 자료
- /Users/thomas/Documents/u-livet/README.md
- /Users/thomas/Documents/u-livet/docs/operations/managed-cloud-release.md
- /Users/thomas/Documents/u-livet/docs/operations/social-login-setup.md
- /Users/thomas/Documents/u-livet/docs/operations/naver-login-rollout.md
- /Users/thomas/Documents/u-livet/docs/03-analysis/anchor-mfa-navigation.analysis.md
- /Users/thomas/Documents/u-livet/src/app/auth/social-actions.ts
- /Users/thomas/Documents/u-livet/src/app/api/auth/naver/userinfo/route.ts
일차별 실습에 적용하기
- D2-4 · 분리한 작업 폴더와 Docker 개발 환경 · 발표로 돌아가기
- D3-1 · AI Studio 비교에서 회원별 DB 설계로 · 발표로 돌아가기
- D3-2 · 가입·로그인과 실제 인증 메일의 연결 · 발표로 돌아가기
- D4-1 · Google Cloud와 두 종류의 복귀 주소 · 발표로 돌아가기
- D4-2 · Kakao 동의와 기존 계정의 소유권 · 발표로 돌아가기
- D4-3 · Naver: 검증한 id와 가입 완료 상태 · 발표로 돌아가기
- D4-4 · MFA 등록만으로 과제가 보호되는가? · 발표로 돌아가기
- D5-4 · 만든 과정과 다음 운영을 인수인계 · 발표로 돌아가기