1. AI 시대의 개발자 패러다임과 핵심 기술 스택

1. AI 시대의 변화와 관점의 전환

• 과거: 특정 세부 트랙을 선택하여 개발자로 일하는 방식.
• 현재 (AI 시대): 세세하고 딥(Deep)한 작업은 AI에게 맡기고, 전체적인 흐름(Flow)을 파악하는 것이 중요함.
• 지향점: PM(프로젝트 매니저)처럼 '거인의 어깨' 위에서 전체를 조망하는 관점.
• 효율성: 바이블 코딩 1주일의 가치가 개발자 팀 6개월의 리소스와 맞먹음.

2. 필수 역량 및 학습 방향

• 문제 진단 능력: 스스로 문제를 진단할 수 있는 능력이 필수적임.
• 본질적인 공부: 제대로 된 결과물을 만들기 위해 '무엇이 옳은지'에 대한 공부가 필요함.
  • $\because$ 근거 없는 "해줘"식의 반복(loop)은 결국 에러의 늪에 빠지게 함.

3. 기술 스택 (Tech Stack)

• 프론트엔드: Next.js (React 기반).
• 백엔드: Spring Boot.
• 언어: JavaScript (J.S).
• 데이터베이스: RDBMS (Oracle).
• 기본기: 위 스택들의 근간은 결국 HTML / CSS / JS임에 유의.

---

핵심 메시지

"Coder(단순 코더)가 아닌, Architect(아키텍처)가 되자."

---

2. 웹 기술의 본질과 효율적인 AI 협업 기초

1. LLM 활용 및 프롬프트 전략

• 도구별 특성: 각 AI 모델(Bible code 등)마다 코드 생성 능력과 강점(색감, 양식 등)이 다르므로 이를 인지하고 활용해야 함.
• 프롬프트 작성: 항상 LLM에게 프롬프트를 뽑아달라고 요청하여 사용하는 것이 효율적임.
• 정보 전달: 내 머릿속의 정보를 최대한 상세하게(디테일하게) LLM에게 전달하는 것이 핵심임.

2. DOM(Document Object Model)의 이해

• 정의: HTML이 '레시피'라면, 이를 브라우저가 컴파일하여 실제 컴퓨터가 구현한 '결과지'를 DOM이라고 함.
• 동적 페이지: 이벤트 발생 시 DOM 구조가 변경되면서 동적인 페이지가 구현됨.
• 제어 도구: 과거에는 JavaScript(JS)로 이를 조절했으나, 이제는 직접 접근하지 않고 React를 통해 DOM을 컨트롤함.
• 프레임워크의 필요성: 모든 이벤트마다 개별 함수를 만들기 어렵기 때문에, 이를 쉽게 관리하기 위해 React와 같은 프레임워크가 등장함.

3. JavaScript(JS)의 위상과 학습 방향

• 범용성: React, React Native, Node.js, Next.js 등 JS 기반 기술의 압도적인 범용성으로 인해 현재 JS의 영향력은 절대적임.
• 결론: JavaScript를 심도 있게 공부해야 함.

4. 설계 및 웹 애플리케이션 과정

• 설계의 중요성: 단순 코딩보다 서비스의 흐름을 짜는 '설계' 단계가 매우 중요함.
• 최적화: 웹 애플리케이션의 동작 과정을 이해하면 개발 효과를 극대화할 수 있음.
• 문서화: 구상을 텍스트화하고 코딩의 기본기를 다지는 과정이 필요함.

5. React와 Next.js

• React: 자체 태그(대문자로 시작하는 태그)를 활용해 라이브러리처럼 편리하게 사용 가능.
• Next.js (React의 업그레이드 버전): * 서버 단까지 제어 가능한 프레임워크로, 서버 구동에 필요한 패키지들이 묶여 있는 '종합 선물세트'와 같음.
  • 가장 큰 특징은 App Routing 시스템임.
• 핵심 학습 대상: React와 Next.js를 반드시 알아야 함.

6. 나만의 웹을 위한 준비 (PRD 작성)

• PRD(제품 요구사항 문서) 작성:
  • 서비스 이름 및 컨셉 정의
  • 핵심 기능 3가지 (MVP - 최소 기능 제품)
  • 서비스가 기억해야 할 데이터 (DB 구조의 기초)
• 결과물: v0 결과물 URL 또는 스크린샷 준비.

---

핵심 메시지

"설계는 핵심 중의 핵심이며, 기술적으로는 React와 Next.js를 통해 서버와 클라이언트를 통제하는 능력이 필요함."

3. 개발 방법론의 이해와 서비스 구현 전략

1. 웹 앱(Web App)과 모바일의 구현 방식

• 웹 앱: 브라우저 환경(모바일, 노트북 등)이 달라져도 반응형으로 대응하여 서비스를 제공.
• 구현의 차이: 모바일 웹인지, 설치형 앱(Native)인지에 따라 사용할 수 있는 패키지가 다르며 구현 방식이 완전히 다름.
  • 따라서 시작점부터 다르게 설정해야 하며, 아예 다시 시작해야 하는 경우도 있음.
• 현업의 전략: 실제 현업에서는 웹과 앱을 적절히 섞어서 배포함.
  • 웹은 업데이트 및 반응이 빠르지만, 앱(네이티브)은 상대적으로 빌드와 배포 과정이 느릴 수 있음.

---

2. Web Application 개발 방법론

1) Waterfall (폭포수 모델)

• 특징: 큰 규모에 적합, 거스르기 힘든 구조, 고중량 저반복.
• 단계별 AI 및 도구 활용:
  1. Requirement gathering (요구사항 수집): 처음에 공들여서 문서(LLM 활용)를 잘 만드는 것이 가장 중요함. ★★★
  2. Analysis (분석): PRD(제품 요구사항 문서) 작성.
  3. Design (설계): 프로젝트 시각화 (Figma, v0, Lovable 등 AI Web Builder 활용).
  4. Coding (코딩): 개발자적 요청서 작성 (Cursor, Claude 활용).
  5. Testing (테스트): 기능 검증.
  6. Operations (운영): 배포 및 유지보수 (Vercel, Supabase 활용).
• 주의사항: 기능과 권한이 많아지면 설계가 복잡해져 길을 잃기 쉬움. 설계는 심플해야 하며, 1~2단계(요구사항 및 분석)에 최대한 많은 시간을 투자해야 함.

2) AGILE (애자일)

• 특징: 끊임없는 업데이트로 여러 번 반복, 저중량 고반복.

---

3. 직무 및 산업의 특성 (SI vs SM)

• SI (System Integration): 프로젝트에 투입되어 개발을 완료하고 나오는 역할 (개발자 중심).
• SM (System Management): 운영자 역할. 사용자가 사용하기 시작할 때 투입되어 어떻게 운영하고 에러를 처리할지 고민함.
  • 핵심은 유지(기존 시스템을 죽이지 않는 것).
• 연봉 순서: 프로세스 앞 단계(기획/설계)에 있을수록 높은 경향이 있음.

---

4. 핵심 조언 및 특이점

• AI의 특징: AI는 생각보다 대충대충(대충한) 면이 있으므로 세밀한 검토가 필요함.
• 성장 방향: * 항상 큰 그림(Big Picture)을 만드는 경험이 필요함.
  • 계속해서 무언가를 만들면서 스스로를 업그레이드 시켜야 함.

---

4. 성공적인 서비스를 위한 정밀 기획과 설계 프로세스

1. PRD 작성의 핵심 원칙

• 페르소나 정의: 반드시 타겟 페르소나를 명확히 설정하고 기획에 들어가야 함.
• 예외 처리(Error Handling): 발생 가능한 오류를 어떻게 처리할지 사전에 공통적으로 정의해 두어야 함.
• '이유(Why)'의 명시: 기능을 만들어야 하는 이유를 기록하는 것이 매우 중요함.
  • 개발자(또는 AI인 Cursor)가 이유를 알면 구현 로직 자체가 더 적절하게 달라질 수 있음.
• Simple is Best: 복잡한 기능보다 심플한 하나의 코어(Core) 기능이 사용자에게 더 큰 편의를 제공함.

2. AI를 활용한 UI/UX 빌드업 프로세스

• v0 단계 (초기 UI 생성):
  • 최대한 초기 UI를 v0로 정밀하게 만들어 놓는 것이 중요함.
  • 거의 모든 기능이 다 들어가도록 최선을 다해 UI를 구성할 것.
• Cursor 단계 (고도화 및 구현):
  • v0에서 생성한 파일을 Cursor로 가져와서 추가 기능 구현 및 고도화 작업을 진행.

3. 기획에서 구현까지의 상세 워크플로우

성공적인 개발을 위해 PRD에 정성을 많이 쏟는 것이 핵심입니다.

1. 기획서 작성: PRD 생성을 위한 프롬프트 준비.
2. v0 활용: 전용 프롬프트를 통해 UI를 최대한 생성.
3. 다이어그램 생성 (Mermaid 활용):
   • Sequence Diagram: 객체 간의 상호작용 흐름 정의.
   • Flowchart: 서비스 로직의 흐름도.
   • ERD (Entity Relationship Diagram): 데이터베이스 구조 정의.
4. 최종 구현: (1) v0 파일, (2) PRD, (3) 다이어그램들을 모두 활용하여 Cursor(Node.js 환경)에서 개발 도입.

---

핵심 메시지

"기획(PRD)에 정성을 쏟고, Mermaid 다이어그램으로 구조를 명확히 한 뒤, v0와 Cursor를 연계하여 개발 효율을 극대화하라."

---

5. Cursor AI를 활용한 실무 프로젝트 세팅 및 관리

1. 초기 설정 및 보일러플레이트 생성

• 환경 점검: 프로젝트 시작 전 npm 및 pnpm 설치 여부 확인.
• Next.js 보일러플레이트 생성: * Next.js 전용 폴더 자동 생성 및 기본 환경 설정.
  • Tailwind CSS 기본값 설치 포함.
• 문서 초기화: 프로젝트 루트(Root) 폴더에 PRD.md 및 FLOW.md 파일 생성 및 배치.
• 버전 관리: git commit을 통한 소스 관리 시작 및 Git에 Cursor 권한(Permission) 부여.

2. Cursor AI 최적화 및 구조 설계

• Cursor Rules 설정: 커서가 프로젝트 내에서 작동할 규칙 제공.
  • 경로: .cursor/rules/*.mdc
• 구조 설계: PRD와 Flow 문서를 기반으로 Cursor를 활용해 프로젝트 구조 설계.
  • docs 폴더를 생성하여 관련 문서 체계적 관리.

---

3. v0 결과물 병합 및 프롬프트 전략

• tmp-v0 병합: v0에서 생성한 임시 결과물을 Next.js 보일러플레이트에 통합.
• 병합 프롬프트 활용: PRD, Flow chart, tmp-v0 코드를 모두 넣고 Cursor에게 다음과 같이 요청.

  "내 Next.js 보일러플레이트에 이 내용들을 넣고 싶은데, 병합을 위한 프롬프트를 짜줘. (Step별 진행 필수)"

---

4. 로컬 서버 구동 및 에러 처리

실제 코드 실행을 위한 단계별 커맨드와 주의사항입니다.

단계	명령어	설명 및 비고
의존성 설치	pnpm install	실제 코드 실행에 필요한 라이브러리 패키지 설치 (node_modules 생성)
빌드	pnpm build	소스코드를 실제 실행 가능한 형태로 변환. ※ 처음 객체화 시 오류가 많이 발생하므로 주의 깊게 확인 필요.
실행	pnpm run dev	로컬 개발 서버 구동 및 객체 실행.

• 교정 작업: v0 디자인과 로컬 서버 결과물 사이의 디자인 불일치 교정 및 최종 병합.

---

5. 히스토리 관리 전략: ADR

• ADR (Architecture Decision Record): 프로젝트의 아키텍처 결정 사항을 기록하고 관리.
• 실행 방법: 1. 별도의 history 폴더 생성.
  2. 결정된 사항들을 히스토리에 저장.
  3. 해당 내용을 Cursor rules에 추가하여 AI가 프로젝트의 결정 맥락을 이해하도록 함.

---

핵심 메시지

"소스 코드는 Git으로, 아키텍처 결정은 ADR로! AI가 문맥을 잃지 않도록 규칙(.mdc)을 세팅하는 것이 핵심입니다."

6. 데이터베이스 설계 원칙과 Supabase 운영 전략

1. Supabase를 활용한 데이터 저장

• 기본 개념: UI 기능을 병합한 후, 실제 데이터를 저장하기 위해 Supabase를 사용함.
• DB 서버의 위치: 데이터를 어디에 두느냐에 따라 로컬(Local) 또는 클라우드(Cloud) 환경으로 나뉨.
• PostgreSQL 기반: Supabase는 관계형 데이터베이스인 PostgreSQL을 사용하여 안정적인 데이터 관리를 지원함.

2. 효율적인 데이터베이스(DB) 설계 전략

• DB 설계의 어려움: 세부적인 설계 지식이 부족하면 직접 모델링하는 것이 어려울 수 있음. $\rightarrow$ 지속적인 공부(공백 채우기)가 필요.
• AI(Cursor) 활용법:
  • PRD와 Flowchart를 기반으로 Cursor에게 DB 모델링을 위한 정교한 프롬프트를 제공.
  • 큰 흐름과 순서(PRD & Flowchart)를 명확히 알면, 세부적인 구현은 AI의 도움을 받을 수 있음.

3. DBA 관점과 AI 활용 습관

• DBA(Database Administrator) 페르소나: 단순히 기능을 구현하는 수준을 넘어, 확장성을 고려하여 설계하는 전문가적 관점이 필요함.
• AI 사용 시 주의사항: AI는 완전하지 않으므로 다음 두 가지 습관을 가져야 함.
  1. 프롬프트 검토: 요청 내용이 정확한지 다시 확인.
  2. 실행 전 확인: 코드를 실행하기 전에 실행될 내용을 미리 검토하는 습관.

4. 데이터베이스 관리 정책 (Modeling 이후)

• 운영 시스템으로서의 DB: DB는 단순한 데이터 저장소가 아님.
• 3대 필수 요소: 규칙(Rule), 이력(History), 복구(Recovery)가 보장되는 체계적인 운영 시스템이 되어야 함.

5. SQL과 Supabase 실전 적용

• SQL (Structured Query Language):
  • DB를 제어하는 프로그래밍 언어.
  • 표준 SQL을 바탕으로 각 회사(MySQL, Oracle 등)가 고유의 함수나 특징을 더해 배포함.
• 쿼리 스크립트 작성:
  • .sql 파일을 직접 작성하여 관리.
  • Supabase에서 이 .sql 파일을 활용해 실제 DB 구조를 생성.
• Supabase 프로젝트 시작:
  • Supabase 사이트에서 공간(Space)을 만들고 프로젝트 시작.
  • 연동을 위해 "DATA API" 키를 발급받아 활용.

---

핵심 메시지

"DB는 단순한 저장소가 아닌 규칙과 복구가 보장되는 운영 시스템이다. PRD를 기반으로 구조를 잡고, AI를 활용하되 반드시 실행 전 검토하는 습관을 가져야 한다."

---

7. 체계적인 프로젝트 마스터 플랜과 실행 프로세스

1. 데이터베이스(DB) 핵심 구성 요소

• Schema (스키마): DB 내의 객체들을 정의하는 틀.
• Tables (테이블): 데이터가 거주하는 집(House).
• Functions (함수): DB 내부에서 동작하는 로직.
• 설계 철학: 데이터 간의 관계성(Relationship) 없이 무분별하게 생성된 DB는 가치가 없음.
• 실행 팁: 에러 발생 케이스를 사전에 제거하기 위해 Seed Data를 미리 입력해 두는 것이 필수적임. ($\because$ 테스트 환경 안정화)

---

2. 설계 시각화 및 마스터 플랜 수립

• ERD (Entity Relationship Diagram): Supabase 등을 활용한 Schema Visualizer로 구조를 시각화함.
• 기능 구현의 전제: 단순 코딩에 앞서 반드시 Master Plan 수립이 선행되어야 함.
• 필수 문서 체계:
  • roadmap.md: 프로젝트의 전체적인 여정과 마일스톤.
  • Functional_flow.md: 상세 기능 흐름 리스트.

---

3. 프로젝트 설계 및 실행 프로세스 (Action Plan)

성공적인 프로젝트 완수를 위한 단계별 접근법입니다.

1. 요구사항 분석: 사용자가 진정으로 원하는 것이 무엇인지 파악.
2. 설계 문서화: PRD(제품 요구사항 정의서) 작성 및 이를 기반으로 한 Sequence Diagram 등 상세 설계 자료 준비.
3. 구현 리스트업: 개발 착수 전 구현해야 할 항목들을 체계적으로 목록화.
4. 자원 및 일정 관리: 인력 분배 및 WBS(Work Breakdown Structure) 작성. (달력 형태의 기간별 기능 정리)
5. Baseline 구축 (공통 작업): * 개별 기능 개발에 들어가기 전, 1~2달간 공통 작업을 진행하여 완전한 베이스라인을 구축함.
   • $\oplus$ 공통 오류 정책 수립: 오류 처리에 대한 공통 정책을 미리 세우는 것이 핵심.
   • 효과: 정책이 미리 수립되어 있으면, AI Agent가 개발 중 오류를 만났을 때 혼란 없이 일괄 처리가 가능함.

---

핵심 메시지

"탄탄한 Baseline과 공통 에러 정책은 AI 개발 시대에 Agent가 길을 잃지 않게 만드는 최고의 내비게이션입니다."

---

8. 사용자 인증 환경 구축과 데이터 확장성 및 형상 관리

1. OAuth 및 Supabase 연동 설정

사용자 인증(Google Login 등)을 위한 초기 세팅 과정입니다.

• Google Cloud Console: 프로젝트 생성 및 OAuth 클라이언트 ID 생성.
• Supabase 설정: * Authentication > Providers 메뉴에서 Google을 'Enabled' 상태로 변경.
  • 구글 클라우드에서 발급받은 Client ID 및 Secret 입력.
• 리디렉션(Redirection) 설정: Supabase와 OAuth 사이의 리디렉션 경로를 상호 등록하여 인증 흐름 연결.
• 환경 변수: 모든 인증 정보는 .env 파일에 안전하게 추가하여 관리.

2. 본격적인 구현 시작

기획 단계에서 정의한 Functional Flow를 기반으로 개발에 착수합니다.

• 구현 전 필수 체크: 현재 작성된 체크리스트의 볼륨(작업량)을 미리 확인하여 일정에 차질이 없는지 점검.
• AI 협업: 설계된 흐름도에 따라 AI와 함께 기능을 하나씩 완성해 나감.

3. DB 설계 시 주의점 (확장성)

서비스가 실제 상품화되었을 때를 대비한 성능 최적화 전략입니다.

• 안티 패턴 주의: JSONB나 배열(Array) 컬럼에 서비스의 핵심 데이터를 집어넣는 구조는 피해야 함.
• 이유: * 개발 초기에는 구조가 유연해 속도가 빠를 수 있음.
  • 하지만 데이터가 쌓인 후 통계, 검색, 리포트 생성, 필터링 기능이 추가되면 관리가 매우 어려워지고 성능이 저하됨.
• 결론: 데이터 모델링 단계에서 JSONB 사용 여부를 반드시 신중하게 체크할 것.

---

4. 깃(Git) 운용 및 배포 전략

개발 환경에서 운영 환경까지 소스가 흘러가는 워크플로우입니다.

형상 관리 흐름

1. Local: 개발자 개인이 코드를 작성하고 테스트하는 로컬 환경.
2. Dev (Development): 개발 서버. 개발자들이 Commit한 소스를 모아 Step by Step으로 기능을 검증.
3. Prod (Production): 실제 운영 서버. 사용자가 보는 화면이므로 가장 완벽한 상태일 때만 배포함.

브랜치(Branch) 관리

• Dev Branch: 기능 개발 및 초기 통합.
• QA Branch: 품질 검증 및 버그 수정 단계.
• Master/Main Branch: 최종 배포 브랜치.

  참고: Vercel과 같은 플랫폼을 연동하면, Master 브랜치에 코드가 병합될 때마다 자동으로 업데이트 배포가 진행됨.

---

핵심 메시지

"핵심 데이터는 JSONB 대신 정규화된 테이블에 저장하고, Master 브랜치는 반드시 완벽한 상태에서만 배포하여 사용자 경험을 보호해야 합니다."

9. 협업을 위한 브랜치 전략과 Vercel 배포 시스템

1. Git 브랜치(Branch) 전략 및 커리어

• 브랜치 운용: 기능별로 브랜치를 많이 만들수록 관리가 용이함.
  • 이후 사용이 끝난 브랜치는 삭제하거나 Pull Request(PR)를 통해 병합(Merge) 진행.
  • GitHub의 코드 비교(Comparing code) 및 PR/Merge 기능을 적극 활용할 것.
• 성장 방향: 프로젝트를 진행하며 다양한 역할(Role)을 경험해보고, 자신에게 가장 잘 맞는 직무를 찾아가는 과정이 중요함.

2. 라이브러리 사용 및 라이선스 주의사항

• 우선순위: 직접 구현하기보다 검증된 라이브러리를 먼저 찾아 활용하는 것이 효율적임.
• 법적 리스크: 반드시 라이선스(License)를 확인해야 함. (확인하지 않을 경우 법적 문제가 발생할 수 있음)
  • MIT License: 가장 대중적이고 제약이 적은 오픈 라이선스.

3. Vercel 배포 및 환경 설정 (CI/CD)

• 연결 구조: Local 환경이 AI, Auth, Supabase와 연결되듯, Vercel은 Git과 연결되어 외부 서버들과 소통함.
• 환경 변수(.env): Vercel 환경 설정에서 외부 서버(Supabase 등)와 통신하기 위한 API 키값들을 넘겨주는 작업이 필수적임.

  "Vercel에게 서버를 알려주고, 각 서버에도 Vercel의 존재를 알려주는 상호 등록 작업이 필요함."

• 배포 조건: pnpm build가 성공해야 하며, 최상위 브랜치인 master(main) 브랜치가 최신화되어 있어야 함.
• 모니터링: Vercel 대시보드에서 런타임 로그(Runtime Log)를 통해 실시간 상태 확인 가능.
• v0 연동: v0와 Vercel이 연결되어 있다면, v0의 Publish 버튼 클릭만으로 즉시 배포가 가능함.

---

4. 개발 마인드셋 및 전략

• 전략: '웹 앱'을 먼저 만들고 이를 '모바일 앱'으로 확장하는 전략은 매우 유효함.
• 실행력: 이제 기술적/언어적 장벽은 사라졌음. "Just Do It"의 정신으로 계속 만들어 나가는 것이 핵심.
• 도구 활용: 배포까지의 전체 경로를 항상 머릿속에 그리며 LLM(AI)의 도움을 받을 것.
• Cursor 활용: Cursor를 통해 해상도 기반의 반응형 웹을 구현하면, 모바일 환경까지 동시에 대응 가능함.

---

핵심 메시지

"내가 만들고 싶은 것들을 계속해서 만들어 나갑시다! 배포까지 완료하는 경험을 반복하고, 도움이 필요하면 언제든 물어보세요. 배포까지 완료해보는 전체 경로를 항상 머릿속에 그리세요. LLM(AI)의 도움을 받되, 내가 만들고 싶은 것을 끝까지 완성해 보는 경험이 가장 큰 자산입니다."