掘金2026년 9월 18일 15:37중국어 → 한국어

LangGraph와 Vue3로 만든 로컬 프롬프트 생성기 PromptOps

LangGraph와 Vue3를 이용해 프롬프트 작성을 돕는 로컬 프롬프트 생성기 PromptOps를 직접 만들었다는 사례가 공유됐다.

중국어 원문을 AI로 번역했습니다. 고유명사와 수치는 원문 표기를 우선하며, 중요한 판단에는 아래 출처 원문을 함께 확인하세요.

다섯 개 필드를 채우면 프레임워크를 자동으로 선택하고, 되물어 명확히 하고, 스트리밍으로 초안을 뽑아낸다——흩어진 요구사항을 Cursor / ChatGPT에 바로 던져넣을 수 있는 구조화된 프롬프트로 바꾼다.

서문: 왜 이걸 만들었나?

프롬프트를 쓰는 일에서 나는 너무 많은 함정을 밟아왔다:

- 머릿속에는 생각이 있는데, 막상 쓰면 「당신은 전문적인 XXX입니다, 저를 위해……」

- APE, CRISPE, LangGPT 같은 프레임워크를 알지만, 매번 수동으로 틀에 끼워 넣어야 한다

- 요구사항을 너무 간략하게 쓰면 모델 출력이 엉뚱하게 흘러가고, 너무 세세하게 쓰면 「프롬프트를 쓰기 위한 프롬프트」가 되어버린다

그래서 PromptOps를 만들었다——로컬에서 실행되는 AI 프롬프트 생성 도구:

- 프런트엔드에서 구조화된 폼을 채운다(시나리오, 과업, 어조, 복잡도……)

- 백엔드는 LangGraph로 하나의 생성 파이프라인을 돌린다: 완전성 검사 → 과업 분석 → 프레임워크 매칭 → 조립 → 스트리밍 생성

- 정보가 부족하면 먼저 되물어 명확히 하고, 충분하면 바로 중국어 Markdown 성과물을 낸다

- 17가지 프롬프트 프레임워크(APE, BROKE, CRISPE, LangGPT……)를 내장하고, 시나리오를 자동 매칭한다

전 과정 로컬 2프로세스이며, 모델은 OpenAI 호환 API(바이리엔 / OpenAI / DeepSeek 모두 가능)를 사용하고, 키는 프런트엔드에 들어가지 않는다.

먼저 효과부터

생성 페이지

예시 라이브러리

전형적인 흐름:

- 「사용 시나리오 + 구체적 과업 + 추가 설명 + 어조 스타일 + 복잡도」를 채운다

- 생성을 클릭하면 오른쪽에 실시간 스트리밍 출력

- 과업이 너무 모호하면(예: 「좀 도와줘」) 명확화 패널이 뜬다

- 성과물을 원클릭 복사해서 Cursor Rules, Agent System Prompt에 바로 붙여넣는다

기술 스택 한눈에 보기

핵심 설계: LangGraph 6단계 파이프라인

전체 생성 과정은 「프롬프트 하나로 LLM을 한 번 호출」하는 것이 아니라, 분기가 있는 상태 그래프다:

graph TD START --> check_completeness{완전성 검사} check_completeness -->|정보 부족| prepare_clarification[명확화 질문 생성] check_completeness -->|처리 불가| mark_blocked[차단 표시] check_completeness -->|통과| analyze_task{과업 분석} analyze_task -->|핵심 모호성 있음| prepare_clarification analyze_task -->|명확| select_framework[프롬프트 프레임워크 선택] select_framework --> assemble_prompt_plan[렌더링 계획 조립] assemble_prompt_plan --> generate[스트리밍 성과물 생성] generate --> mark_ready[완료] prepare_clarification --> END mark_blocked --> END mark_ready --> END

코드에서의 대응 토폴로지(간소화 버전):

graph.add_edge(START, "check_completeness") graph.add_conditional_edges( "check_completeness", after_completeness, { "clarify": "prepare_clarification", "route": "analyze_task", "blocked": "mark_blocked", }, graph.add_conditional_edges( "analyze_task", after_analysis, { "clarify": "prepare_clarification", "select": "select_framework", }, graph.add_edge("select_framework", "assemble_prompt_plan") graph.add_edge("assemble_prompt_plan", "generate") graph.add_edge("generate", "mark_ready")

내가 따로 짚고 싶은 세 가지

1. 완전성 검사: 「글자 수가 부족하면 되묻기」가 아니다

초기 버전은 한 가지 실수를 하기 쉬웠다: 과업 설명이 짧으면 강제로 명확화하게 했다. 하지만 「주간 보고서 작성」이라는 세 글자는 사실 자리표시자 변수를 포함한 프롬프트를 충분히 생성할 수 있다.

지금의 규칙은:

- missing_task → 차단

- 「좀 도와줘」「아무거나 좀 써줘」등 의미가 모호한 표현에 해당 → 명확화

- 나머지 짧은 과업 → 바로 READY

길이는 더 이상 단독으로 명확화를 결정하지 않음: 예를 들어 "주간 보고서 작성"은 변수를 포함한 프롬프트를 바로 생성 가능 _VAGUE_TASKS = frozenset({"帮我弄一下", "弄一下", "写一下", "随便写点", ...})

2. 프레임워크 자동 매칭: 17가지 템플릿 레지스트리

프레임워크는 Prompt에 하드코딩된 것이 아니라 JSON 레지스트리 + 선택 신호다:

- APE: 행동 / 목적 / 기대, 과업이 명확하고 산출물을 중시하는 경우에 적합

- BROKE: 배경 / 역할 / 목표 / 핵심 결과, OKR 스타일에 적합

- LangGPT: 구조화된 역할 + 워크플로, 복잡한 Agent에 적합

- CRISPE, COAST, TRACE…… 총 17가지

LLM이 selection_signals / avoid_signals에 따라 프레임워크를 결정하고, 이어서 FrameworkRenderPlanBuilder가 요소를 렌더링 계획에 채워 넣고, 마지막으로 통합 스트리밍 생성한다.

새 프레임워크 확장 = JSON만 수정, 핵심 오케스트레이션은 건드릴 필요 없음.

3. SSE 이벤트 스트림: 프런트엔드는 5가지 공개 이벤트만 신경 쓴다

백엔드 GenerationService가 LangGraph의 astream을 SSE로 매핑:

프런트엔드 useGenerationStream은 AbortController로 구독 수명 주기를 관리하고, 페이지를 전환하면 자동으로 abort하여 유령 요청을 방지한다.

프로젝트 구조(Fork하고 싶은 분들을 위해)

백엔드

app/ agents/ # LangGraph 그래프, 노드, 조건부 엣지 frameworks/ # 프레임워크 레지스트리 + 렌더링 계획 services/ # 생성, 명확화, 완전성, 모델 설정 api/v1/ # REST + SSE 진입점 core/llm/ # OpenAI 호환 클라이언트 팩토리

프런트엔드

src/ pages/ # / 생성 /examples 예시 components/ # 폼, 명확화 패널, 진행 표시줄, 에디터 composables/ # SSE 스트리밍 로직 api/ # HTTP + stream 래퍼

5분 만에 실행하기

1. 백엔드(Python 3.12 + uv)

cd backend cp .env.example .env # 선택: 모델 설정 미리 채우기 # AI_API_KEY=xxx # AI_BASE_URL=https://dashscope.aliyuncs.com/compatible-mode/v1 # AI_MODEL=qwen-plus uv sync uv run uvicorn app.main:create_app --factory --reload --host 127.0.0.1 --port 8000

Swagger: http://127.0.0.1:8000/docs

2. 프런트엔드(Node 20+)

cd frontend cp .env.example .env npm install npm run dev

http://127.0.0.1:5173 을 열고, 상단 바의 「모델 설정」에 API Key를 입력하면 바로 실행된다.

키는 백엔드 프로세스로만 들어가며, 어떤 VITE_* 변수에도 기록되지 않는다.

실제 사용 사례 하나

입력

- 시나리오: 글쓰기

- 과업: 신제품 출시 문안 생성

- 추가 설명: 자동 분류 기능 부각

- 어조: 자연스럽고 간결하게

- 복잡도: standard

뒤에서 벌어지는 일

- 완전성 검사 → READY(과업 명확)

- 과업 분석 → 「마케팅 문안 + 기능 셀링 포인트」로 식별

- 프레임워크 매칭 → 분석 결과에 따라 CRISPE 또는 APE 선택 가능

- 렌더링 계획 조립 → 구조화된 중국어 Markdown 프롬프트를 스트리밍 출력

출력(예시)

역할 당신은 B2B SaaS 신제품 출시에 능숙한 시니어 문안 기획자입니다……

과업 「자동 분류」기능을 갖춘 신제품을 위한 출시 문안을 작성하세요……

제약 - 어조는 자연스럽고 간결하게 - 자동 분류가 가져오는 효율 향상을 부각 ……

복사 → ChatGPT / Cursor에 붙여넣기 → 바로 쓰기 시작.

함정 기록

문제 | 해결책 CORS 오류 | 백엔드 ALLOWED_ORIGINS에 http://127.0.0.1:5173이 반드시 포함되어야 함 재시작 후 모델 설정 소실 | 현재 설계는 프로세스 내 메모리 설정이라 재시작하면 .env로 되돌아감. 프로덕션에서는 영속화 연동 가능 LangGraph 상태가 키 유출 | GenerationGraphState는 키 필드의 State 진입을 명시적으로 금지 명확화 라운드 무한 루프 | 프런트엔드가 clarification_round를 증가시키고, 백엔드가 이에 따라 전략을 조정

정리

PromptOps가 해결하는 것은 「AI가 한 문장 써주게 하기」가 아니라:

프롬프트 작성을 수작업 craft에서 재사용 가능한 파이프라인으로 바꾸는 것.

LangGraph는 오케스트레이션과 분기를, 프레임워크 레지스트리는 지식 축적을, SSE는 경험을 담당한다——셋을 분리하면 각자 진화한다.

Agent / Copilot에 System Prompt를 자주 쓰는 분이라면, 로컬에서 한 세트 돌려보는 것도 좋다. 적어도 백지 문서에서 첫 문장 「당신은……」을 억지로 짜내지 않아도 되니까.