컨텍스트 전환 중단: VS Code 내부에서 엘리트 AI 프롬프트를 생성하는 도구를 만든 방법

Source: Dev.to

문제: 컨텍스트 스위칭

우리는 모두 그 고통을 알고 있습니다. 복잡한 Python 함수를 작성하거나 PHP 스크립트를 디버깅하며 플로우 상태에 깊이 빠져 있을 때, 갑자기 AI 도움이 필요하다는 벽에 부딪히게 됩니다.

구식 워크플로우

1. Alt + Tab을 눌러 Chrome으로 전환.
2. ChatGPT 또는 Claude를 엽니다.
3. “코드 고쳐줘”처럼 게으른 프롬프트를 입력합니다(피곤해서).
4. 그저 그저한 답변을 받습니다.
5. 컨텍스트를 맞추기 위해 AI와 논쟁합니다.
6. Alt + Tab을 눌러 VS Code로 돌아갑니다.

끊임없는 전환은 집중력을 방해하고 생산성을 저하시킵니다.

---

소개합니다 fnPrompt

fnPrompt는 엘리트 프롬프트 엔지니어링을 IDE와 터미널에 직접 가져다 주는 생태계입니다. 단순한 프롬프트 라이브러리를 넘어 “AI 아키텍트” 엔진이라 할 수 있습니다.

작동 방식

원시적이고 막연한 아이디어(예: “이 정규식을 설명해줘” 혹은 “이 로그인 함수에 대한 단위 테스트 작성”)를 입력하면, OpenAI API를 활용해 해당 아이디어를 완벽하게 구조화된 시스템 프롬프트로 변환합니다. 프롬프트는 다음 요소를 포함합니다:

• 페르소나 – 예: 시니어 QA 엔지니어
• 목표 – 구체적인 목표
• 컨텍스트 – 배경 정보
• 제약 조건 – 해야 할 일과 하지 말아야 할 일
• 출력 형식 – 코드만, JSON, Markdown 등

엔진은 네 가지 플랫폼에서 사용할 수 있습니다: Web, Chrome, CLI, VS Code.

VS Code 확장 프로그램

이 확장 프로그램을 통해 에디터를 떠나지 않고 작업할 수 있습니다:

1. 코드 스니펫이나 주석을 강조 표시합니다.
2. 우클릭 → fnPrompt: Refactor.
3. 몇 초 안에 전문적인 프롬프트가 생성되어 사이드 패널에 열리며, 복사하거나 다듬을 준비가 됩니다.

그런 다음 구조화된 프롬프트를 Copilot, ChatGPT, Gemini 또는 다른 모델에 전달할 수 있습니다—이제 게으른 프롬프트는 없고, 컨텍스트 부족으로 인한 환각도 없습니다.

VS Code 마켓플레이스에서 확인하기 →

CLI 도구

터미널을 선호한다면 fnPrompt는 CLI도 제공합니다:

fnprompt gen "Create a docker-compose for LAMP stack"

명령어는 바로 사용할 수 있는 프롬프트를 반환하며, 이를 좋아하는 모델에 파이프할 수 있습니다.

기술 스택

• 백엔드: PHP (vanilla) + MySQL
• 프론트엔드: Tailwind CSS + vanilla JavaScript
• VS Code 확장: TypeScript
• AI 엔진: OpenAI API (GPT‑4o)를 이용한 프롬프트 생성
• 인증: Google OAuth (Web) 및 토큰 기반 (CLI/VS Code)

무료로 사용해 보기

특히 VS Code 확장 프로그램에 대한 여러분의 피드백을 듣고 싶습니다. 여러분의 워크플로에 맞나요? 어떤 기능이 부족한가요?

• Web: https://fnprompt.com
• VS Code: 마켓플레이스에서 확장 프로그램 다운로드
• Chrome: 웹 스토어 (곧 출시)