Pseudo-Compiler: 의사 코드를 실행 가능한 스크립트로 변환하는 AI
요약
본 글은 의사 코드를 Python 또는 JavaScript와 같은 실행 가능한 스크립트로 자동 변환하는 AI 기반 'Pseudo-Compiler' 구축 과정을 다룹니다. 이 시스템은 단순한 LLM API 호출을 넘어, Sanity Workflows를 활용하여 데이터 파이프라인 전체(작성→컴파일→검토→실행)를 관리하는 것이 핵심입니다. 개발자는 Cursor와 Next.js, Sanity를 조합하여 AI 에이전트가 백그라운드에서 코드를 생성하고 상태 전환을 통해 워크플로우를 완성했습니다.
핵심 포인트
- 의사 코드 → 실행 스크립트 변환 엔진 구축
- Sanity Workflows를 활용한 데이터 기반 컴파일 파이프라인 구현
- AI 에이전트를 백엔드 웹훅으로 분리하여 상태 관리 및 검토 워크플로우 완성
- Cursor와 Next.js, Sanity 조합을 통한 AI 네이티브 개발 경험 공유
내가 만든 것
저는 Pseudo-Compiler라는 AI 기반 번역 엔진을 만들었습니다. 이 엔진은 의사 코드를 위한 실시간 컴파일러 역할을 합니다. 사용자는 일반적이고 구조화된 영어(또는 임의의 느슨한 의사 코드 형식)로 로직을 작성하면, 앱이 이를 작동하는 Python 또는 JavaScript로 자동으로 컴파일해 줍니다.
단순히 LLM API를 감싸는 것 이상으로, 이 앱은 상태 관리 및 실행 워크플로우의 핵심 엔진으로 Sanity를 사용합니다. 컴파일 과정을 데이터 파이프라인으로 간주하여, 스크립트의 수명 주기(Drafting: 의사 코드 작성)부터 (Compiling: 에이전틱 코드 생성), (Review: 인간 개입 검증), 그리고 최종적으로 실행 승인(Approved for Execution)까지 Sanity Workflows를 활용합니다.
이 앱은 구문 복잡성에 얽매이지 않고 알고리즘 로직을 배우는 초보자, 그리고 보일러플레이트 코드를 작성하기 전에 비즈니스 로직을 빠르게 프로토타입하고 싶은 개발자에게 설계되었습니다.
나의 구축 과정
저는 AI 네이티브 IDE인 Cursor를 사용했고, Next.js (App Router) 프론트엔드와 Sanity 백엔드를 함께 사용했습니다. 제 목표는 Sanity의 최신 기능을 사용하여 UI 생성뿐만 아니라 복잡한 데이터 상태 전환까지 '바이브 코딩(vibe-coding)'으로 얼마나 멀리 밀어붙일 수 있는지 확인하는 것이었습니다.
프롬프트 여정:
저는 광범위한 구조적 프롬프트로 시작했습니다.
"분할 패널 코드 에디터가 있는 Next.js 앱을 구축해 줘. 왼쪽은 일반 텍스트 의사 코드를 받고, 오른쪽은 읽기 전용 코드를 표시해야 해. 이 내용을 Sanity 백엔드에 연결해서 모든 새 스니펫이 초안 상태의 문서로 저장되게 해줘."
Cursor는 Tailwind와 Monaco Editor를 사용하여 몇 분 만에 UI를 완성했지만, 데이터 모델링에는 더 명시적인 지침이 필요했습니다.
모델이 막힌 부분:
처음에는 AI가 전체 LLM "컴파일" 호출을 프론트엔드 React 컴포넌트 안에 넣으려고 했고, Sanity를 완전히 우회하려 했습니다. 그저 클라이언트 측에서 OpenAI API를 가져오기만 하려고 했던 것입니다.
수정 및 보너스 목표 달성:
저는 IDE 사용을 멈추고, Sanity Workflows와 백그라운드 에이전트를 명시적으로 프롬프트하여 방향을 수정했습니다.
이것을 리팩토링하세요. 프론트엔드에서 LLM을 호출하지 마세요. 대신 사용자가 'Compile'을 클릭하면 의사 코드를 Sanity에 저장하고 문서의 상태를 'Pending Compilation'으로 업데이트하세요. 이 상태를 수신하는 Sanity 웹훅 핸들러를 작성하여 AI 에이전트가 코드를 작성하도록 트리거하고, 컴파일된 코드를 문서에 다시 저장하며, 워크플로우 상태를 'Needs Human Review'로 전환하세요.
이것은 훌륭하게 작동했습니다. 컴파일 과정을 콘텐츠 옆의 데이터로 모델링함으로써, 저는 '워크플로우(Workflows)' 보너스 목표를 달성할 수 있었습니다. 이제 Sanity Studio가 중앙 제어실 역할을 합니다:
에이전트 핸드오프: 외부 API(Next.js 라우트)가 자율 에이전트 역할을 하며, Sanity 웹훅을 수신하고, 코드를 컴파일하며, 이를 다시 푸시합니다.
사용자 승인: 커스텀 App SDK 대시보드에서 어떤 코드든 실행되기 전에, 사용자는 Sanity Studio를 열어 에이전트의 코드를 검토하고 'Approve'를 클릭해야 합니다.
또한 저는 App SDK를 활용하여 콘텐츠 위에 커스텀 실시간 대시보드를 구축했습니다. 읽기 전용 블로그 프론트엔드 대신, 프론트엔드는 실행 환경 역할을 하며 Sanity 데이터셋에서 승인된 스크립트를 직접 가져와 사용자가 샌드박스 브라우저 환경에서 실행할 수 있게 하고, 콘솔 출력을 Sanity 문서의 RunHistory 배열에 기록합니다.
스키마 하이라이트: 주요 문서 유형은 pseudoScript이며, rawPseudocode, targetLanguage, compiledCode, executionLogs 필드를 특징으로 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기