Quartz 5

20260804_바이브코딩2일차 개발과기록(커리어핏 프로젝트)

Properties1
tags바이브코딩, mcp, 커리어핏, 커리어핏프로젝트

9 min read

[데일리스크럼] 실제사례 : 오늘 뭘 할 지를 공유 MCP:AI가 외부 도구-노션, 브라우저, 데이터베이스를 직접 쓸 수 있게 해 주는 표준연결규격 MCP에 어떤 도구든 꽂으면 AI가 그 도구를 다룰 수 있게 됨. 노션에 있는 정보를 가져와서 연결한다면 MCP 통해 바로 사용가능 마치 멀티탭과 같은 역할을 하는 MCP(Ai의 멀티탭)

mcp를 연결하면 노션의 현황 페이지를 읽고 씀

cf. mcp로 연결하면 그 페이지를 타고 외부에서 들어올 우려는 없는지 : 개인의 토큰 키 관리만 잘 하면 보안우려 없음 =>토큰 키 관리에 대한 보안이슈

->오른쪽에 ai와 소통하는 쪽에 토큰키를 안 적으면 됨!!!

  • 데일리 스크럼 작성해서 공유하기
  • MCP로 연결하기(노션)

[기획자가 만들면 좋을 skill 5]

📌 핵심 주제: 기획자가 만들면 좋은 Skill 5가지

“매번 똑같이 설명하고 있는 것”이 있다면, 그게 바로 Skill로 만들 후보입니다.

AI에게 반복적으로 프롬프트를 설명할 필요 없이, Skill로 만들어두면 효율성을 극대화할 수 있는 5가지 유형을 소개합니다.

1. 기획 | 우리 팀 PRD 양식

  • 목적: 목차, 필수 항목, 문체를 고정하여 프롬프트 한마디에 늘 일관된 양식의 기획서를 출력.

  • Skill이 없을 때: 매번 목차를 다시 불러주어야 하고, 실행할 때마다 다른 결과물이 나와 재작업 발생.

2. 회의 | 회의록 → 액션 아이템

  • 목적: 녹음/메모를 입력하면 담당자와 기한이 명시된 할 일 표로 변환 (결정사항/보류사항 자동 분리).

  • Skill이 없을 때: 단순 요약만 생성되고, ‘누가 언제까지 무엇을 할지’에 대한 실행 정보가 누락됨.

3. 시니어 PM의 기능 리뷰

  • 목적: 특정 화면이나 기능을 지목하면 10년 차 PM 관점에서 사용자 흐름, 예외 케이스(빠진 상태), 우선순위를 즉시 검토.

  • Skill이 없을 때: 매번 “너는 시니어 PM이고, 이런 관점으로 봐줘”라는 길고 복잡한 페르소나 설정을 반복해야 함.

4. 브랜드 | 톤앤매너 · 카피 규칙

  • 목적: 존댓말 수준, 금지어, 버튼 문구 길이, 오류 메시지 말투 등을 지정해 서비스 내 모든 문구를 통일된 목소리로 생성.

5. 공유 | 릴리즈 노트 쓰기

  • 목적: 단순 “버그 수정” 같은 개발 변경 내역을 사용자가 이해하기 쉬운 언어로 번역하는 규칙 작성 (“무엇이 어떻게 좋아졌는지” 위주).

💡 만드는 법

  • 직접 코딩하거나 파일을 복잡하게 작성할 필요 없이, 안티그래비티AI에게 “이 내용으로 Skill 만들어줘”라고 요청하면 간단하게 제작 가능합니다.

[aistudio와 안티그래비티] aistudio는 구글상으로 하는 거지만, 해당 코드를 안티그래비티에서 하면 로컬에서 처리하는 거라 내 컴퓨터에서 고도화하는 것이 훨씬 더 좋다.

포트폴리오를 만드는 데 있어서 막막함을 개선하는 부분은 ->경험을 링크드인이나 다른 부분으로 정리해 두시고 그것을 피그마로 제작하는 방식으로 포트폴리오를 만드신다고 함

피벗해서 “이력서학습없는 커리어핏”으로 전환 핵심 기능 : AI 학습 ZERO & 서버 저장 ZERO

  • 이력서와 포트폴리오 데이터를 서버 DB로 전송하지 않고 브라우저(Local)에서 일회성으로 안전하게 연산합니다.

보조 기능 : JD를 영구저장함

보조 기능 : 지원 현황 5단계 칸반 보드 (Kanban Board) · 관심 ➡️ 서류 작성 ➡️ 지원 완료 ➡️ 면접 ➡️ 최종 합격 상태를 Drag & Drop으로 간편 관리

🌙 [Daily Scrum] 2026-08-05 (오후)

IMPORTANT

오늘의 진행률: 🟢 90% 완료 핵심 성과: 채용 공고 파이프라인(칸반/타임라인/아카이브) 구축 및 AI 기반 채용 공고 스크래퍼·매칭 분석 모달 개발 완료 프로젝트: 커리어핏 프로젝트 (CareerFit)

✅ 오늘 완료한 일 (Completed Today)

  • 🚀 채용 공고 관리 파이프라인(아카이브 & 칸반 & 타임라인) 구축:
    • JobKanbanBoard.tsx, JobArchiveView.tsx, JobTimelineView.tsx 컴포넌트를 구현하여 지원 진행 상황 및 전형 일정을 시각적으로 추적할 수 있도록 완성.
  • 🎯 AI 채용 공고 스크래퍼 & 매칭 분석 모달 구현:
    • JobScraperModal.tsx, JobMatchAnalysisModal.tsx 연동을 통해 채용 공고 분석과 사용자 이력서 간의 역량 매칭도/격차 리포트 기능 추가.
  • 🔒 비공개 이력서 관리 & 증빙 가이드 배너 추가:
    • PrivateResumeModal.tsx 및 EvidenceGuideBanner.tsx를 구현해 데이터 보안 강화 및 경험 증빙 자료 안내 UI 반영.
  • 🔄 채용 전용 데이터 스토리지 레이어 분리:
    • jobStorage.ts 및 types/job.ts를 신규 작성하여 공고 관리 데이터 CRUD 및 독립적인 상태 저장 지원.

📁 오늘 변경 및 추가된 주요 파일

구분파일 경로작업 내용
NEWsrc/components/JobKanbanBoard.tsx지원 단계별 공고 관리를 위한 드래그&드롭 칸반 보드
NEWsrc/components/JobArchiveView.tsx지원 내역 필터링 및 공고 검색/아카이브 뷰
NEWsrc/components/JobMatchAnalysisModal.tsxAI 기반 공고-내 역량 매칭 진단 모달
NEWsrc/components/JobScraperModal.tsx외부 공고 링크 자동 수집 및 파싱 모달
NEWsrc/components/JobTimelineView.tsx전형 일정 및 마감일 시각화 타임라인 뷰
NEWsrc/components/PrivateResumeModal.tsx보안 적용된 비공개 이력서 상세 뷰어 모달
NEWsrc/components/EvidenceGuideBanner.tsx경험 및 실적 증빙 문서 첨부 안내 배너
NEWsrc/lib/jobStorage.ts / src/types/job.ts채용 공고 데이터 타입 정의 및 LocalStorage CRUD 헬퍼
MODIFYsrc/App.tsx채용 관리 뷰/모달 라우팅 및 통합 상태 연동

🔄 내일 이어서 할 일 (Next Steps)

  • [채용 공고 맞춤 포트폴리오 추출]: 선택한 공고의 필수 역량에 맞춰 블록 보관함(BlockVault) 자동 추천 로직 연결
  • [성능 최적화 & UX 보완]: 대용량 채용 카드 드래그 및 타임라인 렌더링 리렌더링 최적화
  • [Notion / MCP 데이터 연동 테스트]: 노션 동기화 모달 및 MCP 서버 간 실시간 데이터 전달 안정성 검증

💡 오늘의 회고 & 트러블슈팅 (Retrospective)

TIP

발생한 문제 및 해결 방안:

  • 문제: 기존 포트폴리오 블록 데이터 구조와 채용 공고 데이터 구조 간 차이로 인해 로컬 스토리지 조작 시 상태 엉킴 현상 발생.
  • 해결: types/job.ts 및 jobStorage.ts로 독립적인 채용 전용 타입과 스토리지 레이어를 신규 구축하여 관심사를 완전히 분리함.

Graph View