ai-process-engineer 님의 블로그

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

Chapter 1에서는 공정 엔지니어가 코딩 에이전트를 배워야 하는 이유를, Chapter 2에서는 우리가 현장에서 다루는 데이터로 무엇을 만들 수 있는지를 이야기했습니다. 이번 Chapter 3부터는 직접 손을 움직입니다. 첫 결과물은 생산 라인의 불량 데이터를 시각화하는 대시보드입니다.이 대시보드는 이전에 정리했던 IT 외주 없이 직접 만든 제조 품질 분석 시스템의 풀스택 흐름을 따릅니다. FastAPI로 집계하고, Next.js와 Recharts로 그리는 구조입니다.한 가지만 미리 밝혀두겠습니다. 이번 프로젝트에서는 DB를 쓰지 않습니다. 설비에서 떨어진 불량 이력 CSV 한 장을 백엔드가 직접 읽어 메모리에 올려두고, 필터 조건에 맞춰 pandas로 집계해 REST API로 내려줄 뿐입니다. 다만..

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..

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

Claude Code 활용 프로젝트 #1만년 마이너스 주식러의AI 주식 분석기 도전기비전공자 공정 엔지니어의 Claude Code 실전 연습Claude Code 활용 연습을 위해 실생활에서 진짜 쓸 수 있는 무언가를 만들어보자고 결심했다.고민 끝에 내린 첫 번째 과제는 바로 — 주식 분석 웹 서비스 만들기!주식 투자 경력 10년의 만년 마이너스 손을, 과연 프로그램으로 황금손으로 탈바꿈할 수 있을까? 🤔🏗️ 1단계 — 구조부터 잡고 가자나는 비전공자 공정 엔지니어다. 코딩에 앞서 만들고자 하는 프로그램의 구성부터 짚고 넘어가기로 했다.📌 주식 분석기 아키텍처 이미지FRONTENDNext.js + TailwindCSS기존에 알던 JS+HTML 대신, 요즘 핫하다는 이걸로. 딱히 특별한 이유는 없다. ..