ai-process-engineer 님의 블로그

비전공자의 바이브 코딩 · 웹 툴 개발 HTML DOM Editor— 생성형 AI가 만든 HTML, 이제 직접 수정하자 2026.06 · Next.js · html2canvas · Vercel 회사에서 팀장·본부장 등 상사분들이 생성형 AI로 HTML 문서를 작성하기 시작하면서, 간간이 그 HTML 수정을 맡게 됐다. 매번 AI와 대화하며 수정 요청을 주고받는 게 번거로웠고, 마침 네이버 카페에서도 "AI가 만든 HTML을 수정하고 싶은데 방법을 모르겠다"는 글을 봤다. 그 순간 결심했다. 직접 만들면 된다. 아래에 기획 배경, 핵심 기능 구현 방식, 그리고 Vercel 배포까지의 과정을 정리했다. 01 왜 만들었나 생성형 AI가 HTML을..

Claude Code · 바이브코딩 · Ollama · 완전 무료 유튜브 AI 요약기를 1시간 만에 만들었다— 편향 감지 + 카테고리 분류 + 히스토리, API 비용 0원 2026.06 · Claude Code + Ollama(gemma3:4b) 바이브코딩 실전 유튜브 영상 하나를 제대로 보려면 최소 10~30분이다. 내용이 괜찮은지 확인하려고 영상을 전부 보고 나서야 "시간 낭비였다"고 깨닫는 경험, 누구나 있을 것이다. URL 하나 붙여넣으면 3줄로 요약해주고, 카테고리를 자동 분류하고, 편향된 영상은 경고까지 띄워주는 도구가 있으면 어떨까. 그걸 Claude Code로 1시간 만에 만들었다. 기술 스택: Next.js 14 + TypeScript (Frontend) / Pyth..

Claude Code · 바이브코딩 · 자동화 Claude Code로 1시간 만에최저가 추적기 만들기— 코드보다 PRD가 핵심이다 2026.06 · 12년차 제조업 엔지니어가 바이브코딩으로 만든 실전 프로젝트 쇼핑할 때마다 "언제 가격 내려가지?" 하고 기다린 적 있을 것이다. 특정 상품의 최저가를 주기적으로 추적하고, 목표 가격 이하로 떨어지면 브라우저 팝업으로 알려주는 앱이 있으면 어떨까. 그걸 Claude Code로 1시간 만에 만들었다. 코드를 공유하는 게 목적이 아니다. PRD(기획서)를 공유한다. 이 글에 있는 PRD를 그대로 Claude Code에 붙여넣으면, 개발 경험이 없어도 동일한 서비스를 직접 만들 수 있다. 이 프로젝트의 전체 기술 스택: Next.js 14..

AI Engineering · Agent Architecture Claude Code에서 AI Agent로— Anthropic "Building Effective Agents" 공부 노트 2025.05 · Anthropic 공식 포스팅 요약 / Summary까지 올해 초 Claude Code를 알게 된 이후, 웹·모바일·데스크톱 앱을 포함해 10개가 넘는 프로그램을 만들었다. 일반적인 소프트웨어는 Claude Code의 강력한 기능 덕분에 큰 어려움 없이 제작해 왔는데, 최근 Ollama 기반 로컬 LLM을 도입한 제조라인 불량 분석 AI Agent를 개발하면서 소프트웨어 아키텍처의 효율적 구성에 대해 깊이 고민하게 되었다. 아래에 그 배경과 학습 시작점으로 삼은 Anthropic 공..

코인 자동매매 개발기 · 4편 총평 및 향후 계획— 2개월 실전 데이터와 바이브코딩 경험 2026.05 · 실전 성과 분석 · 예산 배분 시뮬레이션 · 바이브코딩 총평 시스템을 만들고 약 2개월간 실제 돈을 투입해 운용했다. 지금이 중간 점검을 할 시점이다. 전략별로 얼마를 벌었고 얼마를 잃었는지, 예산 배분을 어떻게 하는 것이 최적인지, 그리고 바이브코딩으로 이 시스템을 만들면서 무엇을 배웠는지를 정리했다. 01 실전 성과: 전략별 2개월 결과 2026년 3월~5월 2개월간 실제 데이터로 전략별 성과를 비교했다. 변동성 돌파 (VB) 284건 거래 · 승률 50.0%결과: -143,413원 손실BTC -90K, ETH -44K..

코인 자동매매 개발기 · 1편계획 수립과 PRD 작성하기— 아이디어에서 MVP 설계까지2026.05 · Next.js · FastAPI · Korbit API · 바이브코딩코인 직접 투자를 하다 보면 누구나 한 번쯤 겪는다. 오를 것 같아 못 팔고, 내릴 것 같아 못 사는 그 심리적 함정을. 이성이 아니라 감정이 매매를 결정하는 순간들이 반복되면서, 규칙 기반의 자동매매 시스템이 필요하다는 결론에 이르렀다. 아래에 거래소 선택부터 기술 스택 확정, 첫 번째 PRD 작성까지의 과정을 정리했다.01 왜 자동매매인가코인 시장은 24시간 열려 있다. 사람이 직접 보기엔 너무 긴 시간이고, 보고 있어도 감정이 개입하면 의미가 없다. 손실이 나면 본전 심리에 물타기를 하고, 수익이 나면 욕심에 매도 타이밍을 놓..

Claude Code · 주식 서비스 개발 시리즈클로드코드(Claude Code)로주식 분석 웹 서비스 만들기— #5. 카카오톡 연동하기2026.05 · 카카오 OAuth · 나에게 보내기 · 친구에게 보내기 · 트러블슈팅이전 글▶ #4. 주식 분석 기능 만들기분석 기능까지 완성됐으니 이제 매수 신호가 발생했을 때 카카오톡으로 알림을 받는 기능을 붙일 차례다. 카카오 비즈니스 채널 없이 무료로 구현할 수 있고, 본인뿐 아니라 친구에게도 알림을 보낼 수 있다. 설정 과정에서 마주친 에러들과 해결 방법도 함께 정리했다.01 사용한 프롬프트 모음아래 프롬프트를 순서대로 입력하면 이 글의 카카오톡 연동 기능 전체를 재현할 수 있다.Prompt 01 — 카카오 OAuth 토큰 발급 백엔드# FastAPI로 카..

Claude Code · 주식 서비스 개발 시리즈 클로드코드(Claude Code)로주식 분석 웹 서비스 만들기— #4. 주식 분석 기능 만들기 2026.05 · 기술적 분석 · 멀티 타임프레임 · 매수 추천 알고리즘 이전 글 ▶ #3. 웹 페이지 만들기 웹 페이지가 완성됐으니 이제 핵심인 분석 기능을 붙일 차례다. RSI, MACD, 볼린저밴드, SuperTrend, ADX 등 8개 지표를 조합한 4가지 전략을 4개 시간봉에 걸쳐 독립 실행하고, 2개 이상 전략에서 동시에 매수 신호가 나온 종목만 추천하는 구조를 Claude Code로 구현했다. 아래에 실제 사용한 프롬프트와 구현 내용을 정리했다. 01 사용한 프롬프트 모음 Claude C..

Claude Code 활용 프로젝트 · #3Claude Code로 주식 분석 웹 서비스 만들기— 개발 착수, 서버 실행까지2026.05 · 비전공자 공정 엔지니어의 Claude Code 실전 연습PRD와 개발계획서를 완성했으니 이제 실제로 코드를 만들 차례다. Claude Code에 문서 경로 하나 던져주는 것만으로 프로젝트 전체가 뚝딱 생성되는 경험은, 처음 해보면 꽤 당황스럽다. 이번 글에서는 폴더 트리 생성부터 프론트·백엔드 서버를 한 번에 켜고 끌 수 있는 실행 파일 제작, 그리고 실제 데이터가 화면에 뜨는 순간까지의 과정을 정리했다.이전 글 → 클로드코드(Claude Code)로 주식 분석 웹 서비스 만들기 : #2. PRD, 개발계획서 작성하기01 개발 착수 — PRD 경로 하나로 시작한다..

Claude Code 활용 프로젝트 #2 · PRD 가이드 코딩 에이전트에게 개발을 맡기는가장 쉬운 방법 — PRD 2026.04 · 비전공자 공정 엔지니어의 Claude Code 실전 연습 지난 글에서 주식 분석 앱을 만들겠다는 계획을 세웠다. 이제 Claude Code에게 실제로 만들어 달라고 해야 하는데, 막상 뭐라고 지시해야 할지 막막하다. 그냥 "주식 분석 앱 만들어줘"라고 하면 될까? 결론부터 말하면 — 된다. 하지만 훨씬 더 잘 되게 하는 방법이 있다. 바로 PRD다. 아래에 PRD가 무엇인지, 어떻게 만드는지, 개발계획서까지 연결하는 전체 흐름을 정리했다. 01 PRD란 무엇인가 PRD는 Product Requirements Document의 약자다. 우리말로 ..