6개월 전만 해도 이 기능을 구현하려면 백엔드 개발자와 DevOps 엔지니어가 필요했고, 2주가 걸렸습니다. 오늘날에는 한 문장의 프롬프트와 Claude만 있으면 됩니다. 다음은 전체 아키텍처입니다. 그리고 대부분의 개발자가 아직 이 사실을 깨닫지 못하는 이유도 있습니다.
대부분의 사람들이 AI에 대해 가지고 있는 사고 방식은 틀렸습니다.
그들은 이렇게 생각합니다: AI 어시스턴트 → 질문을 한다 → 답변을 한다.
2026년의 현실: AI 에이전트 → 시스템을 설명한다 → 그 시스템을 구축, 배포, 그리고 사용자 환경에 연결한다. 프로토타입이 아닙니다. 코드 조각이 아닙니다. 실행 중인 애플리케이션입니다.
이러한 변화에는 이름이 있습니다: 생성형 앱 아키텍처(Generative App Architecture). 그리고 이것을 실용적으로 만드는 스택(Claude + Obsidian + MCP)은 지금 누구나 사용할 수 있습니다.
1. 생성형 앱 아키텍처가 실제로 의미하는 것
전통적인 소프트웨어 개발:
1아이디어 → 명세 → 설계 → 프론트엔드 개발 → 백엔드 개발2→ 데이터베이스 설정 → API 통합 → 테스트 → 배포3기간: 몇 주. 비용: 수천 달러.
생성형 앱 아키텍처:
1아이디어 → 프롬프트 → 실행 시스템2기간: 몇 분. 비용: API 토큰.
AI 에이전트는 단순히 코드를 작성하는 것 이상을 수행합니다. 내부적으로 완전한 에이전트 루프(Agentic Loop)를 실행합니다.
1단계 - 분해 (Decomposition)
추상적인 요청("세차장용 CRM을 만들어 줘")은 수십 개의 원자적 하위 작업으로 분해됩니다: 데이터베이스 스키마, UI 컴포넌트, 알림 로직, 인증 흐름, API 엔드포인트.
2단계 - MCP를 통한 환경 매핑
모델 컨텍스트 프로토콜(Model Context Protocol)을 통해 에이전트는 자신이 사용할 수 있는 도구(파일 시스템, 설치된 패키지, 실행 중인 서비스, 사용 가능한 API)를 즉시 이해합니다.
3단계 - 반복적 빌드 및 테스트
에이전트는 코드를 작성하고, 실행하고, 컴파일 오류를 포착하고, 수정하고, 다시 테스트합니다. 이 모든 과정을 시스템이 올바르게 실행될 때까지 자율적으로 수행합니다.
4단계 - 상황별 배포
출력물은 코드가 담긴 텍스트 파일이 아닙니다. 라이브 로컬 환경 또는 배포 가능한 웹 애플리케이션입니다.
이것이 개발자를 보조하는 도구와 빌드 파이프라인 자체를 대체하는 시스템의 차이점입니다.
2. 엔진으로서의 Claude - 세 가지 배포 모드
모드 1 - Claude Artifacts
프롬프트에서 실행 중인 애플리케이션으로 가는 가장 빠른 경로입니다. Claude에게 무언가를 만들어 달라고 요청하면, 대화형 Artifact 창이 열리고 지켜보는 동안 실시간으로 완전한 웹 애플리케이션(React, HTML, JavaScript)을 조립, 컴파일 및 실행합니다.
Artifact 내에서 실행 중인 앱과 상호 작용하고, 자연어로 반복 개선하며, 완전한 아카이브를 내보낼 수 있습니다.
프로덕션 준비가 된 재무 추적기를 생성하는 프롬프트:
1개인 재무 추적 애플리케이션을 구축해 주세요:23기능:4- 거래 내역 (카테고리별 추가/수정/삭제)5- 진행률 표시줄이 있는 월별 예산 보기6- CoinGecko API에서 실시간 가격을 가져오는 암호화폐 포트폴리오 트래커7- 실시간으로 업데이트되는 순자산 계산8- 다크 모드 전환910기술 요구 사항:11- 단일 파일 React 애플리케이션12- useState + useEffect만 사용 (외부 상태 관리 라이브러리 사용 금지)13- 스타일링은 Tailwind CSS 사용14- 공개 API에서 가져오기 (인증 불필요)15- 모바일 반응형1617데이터:18- 세션 간 데이터 유지를 위해 localStorage 사용19- CSV로 거래 내역 내보내기2021출력: 배포 준비가 완료된 완전한 독립형 애플리케이션
Claude Artifacts가 반환하는 것 - 완전한 React 애플리케이션:
1import { useState, useEffect } from "react";23const CATEGORIES = ["Housing","Food","Transport","Entertainment","Health","Savings","Income","Crypto","Other"];4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };56export default function FinanceTracker() {7 const [transactions, setTransactions] = useState(() =>8 JSON.parse(localStorage.getItem("transactions") || "[]")9 );10 const [cryptoPrices, setCryptoPrices] = useState({});11 const [form, setForm] = useState({ description:"", amount:"", category:"Other", type:"expense", date:"" });12 const [darkMode, setDarkMode] = useState(false);1314 useEffect(() => {15 const ids = Object.values(CRYPTO_IDS).join(",");16 fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)17 .then(r => r.json())18 .then(data => {19 const prices = {};20 Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });21 setCryptoPrices(prices);22 });23 }, []);2425 useEffect(() => {26 localStorage.setItem("transactions", JSON.stringify(transactions));27 }, [transactions]);2829 const addTransaction = () => {30 if (!form.description || !form.amount) return;31 setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),32 date: form.date || new Date().toISOString().split("T")[0] }]);33 setForm({ description:"", amount:"", category:"Other", type:"expense", date:"" });34 };3536 const totalIncome = transactions.filter(t => t.type === "income").reduce((s,t) => s + t.amount, 0);37 const totalExpenses = transactions.filter(t => t.type === "expense").reduce((s,t) => s + t.amount, 0);38 const netWorth = totalIncome - totalExpenses;3940 const bg = darkMode ? "#0D0D0D" : "#F9F7F4";41 const card = darkMode ? "#1A1A1A" : "#FFF";42 const text = darkMode ? "#F0F0F0" : "#1A1A1A";43 const border = darkMode ? "#2A2A2A" : "#E8E8E8";4445 return (46 <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>47 <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>4849 <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>50 <div>51 <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Finance Tracker</h1>52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>53 순자산: ${netWorth.toFixed(2)}54 </p>55 </div>56 <button onClick={() => setDarkMode(!darkMode)}57 style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,58 background:card, color:text, cursor:"pointer" }}>59 {darkMode ? "라이트" : "다크"}60 </button>61 </div>6263 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>64 {[["수입","#22C55E",totalIncome],["지출","#EF4444",totalExpenses]].map(([label,color,val]) => (65 <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>66 <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>67 <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>68 </div>69 ))}70 </div>7172 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>73 <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>74 <input placeholder="설명" value={form.description}75 onChange={e => setForm(p => ({ ...p, description: e.target.value }))}76 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />77 <input type="number" placeholder="금액" value={form.amount}78 onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}79 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />80 <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}81 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>82 <option value="expense">지출</option>83 <option value="income">수입</option>84 </select>85 </div>86 <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>87 <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}88 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>89 {CATEGORIES.map(c => <option key={c}>{c}</option>)}90 </select>91 <button onClick={addTransaction}92 style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",93 color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>94 추가95 </button>96 </div>97 </div>9899 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>100 <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>101 거래 내역 ({transactions.length}건)102 </p>103 {transactions.slice().reverse().map(t => (104 <div key={t.id} style={{ display:"flex", justifyContent:"space-between",105 alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>106 <div>107 <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>108 <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>109 </div>110 <span style={{ fontSize:14, fontWeight:600, color: t.type==="income" ? "#22C55E" : "#EF4444" }}>111 {t.type==="income" ? "+" : "-"}${t.amount.toFixed(2)}112 </span>113 </div>114 ))}115 </div>116 </div>117 </div>118 );119}
이것이 완전한 애플리케이션입니다. 프롬프트 하나로 Claude Artifacts 내에서 즉시 실행됩니다.
모드 2 - Claude + MCP (로컬 배포)
MCP(모델 컨텍스트 프로토콜)는 Claude에게 로컬 환경에 대한 직접적인 접근 권한을 부여합니다. 하나의 프롬프트는 코드를 생성하는 것을 넘어, 하드 드라이브에 폴더를 만들고, 터미널을 통해 패키지를 설치하고, 설정 파일을 작성하고, 로컬 서버를 시작합니다.
Claude를 파일 시스템에 연결하는 MCP 설정:
1{2 "mcpServers": {3 "filesystem": {4 "command": "npx",5 "args": [6 "-y",7 "@modelcontextprotocol/server-filesystem",8 "/Users/yourname/Projects"9 ]10 },11 "terminal": {12 "command": "npx",13 "args": ["-y", "@modelcontextprotocol/server-terminal"]14 },15 "sqlite": {16 "command": "npx",17 "args": [18 "-y",19 "@modelcontextprotocol/server-sqlite",20 "--db-path",21 "/Users/yourname/Projects/app.db"22 ]23 }24 }25}
이 설정이 활성화된 상태에서, 하나의 프롬프트로:
1세차장 비즈니스를 위한 로컬 CRM 시스템을 구축하고 배포해 주세요.23~/Projects/carwash-crm/ 에 프로젝트를 생성하세요.4의존성을 자동으로 설치하세요.5다음 테이블을 가진 SQLite 데이터베이스를 설정하세요:6- customers (name, phone, email, vehicle, notes)7- visits (customer_id, date, service, price, status)8- staff (name, role, schedule)910다음 기능을 가진 웹 인터페이스를 구축하세요:11- 고객 검색 및 프로필12- 고객별 방문 기록13- 월별 수익 대시보드14- SMS 알림 시스템 (Twilio 통합, 설정만)1516완료되면 개발 서버를 시작하세요.17준비가 되면 localhost URL을 알려주세요.
Claude는 MCP를 통해 이 과정을 처음부터 끝까지 실행합니다. 디렉토리 구조를 만들고, Node 패키지를 설치하고, 데이터베이스 스키마를 작성하고, UI를 구축하고, 서버를 시작합니다. 그러면 localhost URL을 받게 됩니다.
모드 3 - 회사 표준을 적용한 Claude Projects
UI 키트, 디자인 토큰, API 문서, 보안 요구 사항을 Claude Project에 한 번 업로드하세요. 그 후 Claude가 생성하는 모든 시스템은 자동으로 내부 스택을 따릅니다.
1[Claude Project 컨텍스트에 포함:]2- design-system.md (색상, 타이포그래피, 간격)3- api-standards.md (인증 패턴, 오류 코드)4- security-policy.md (입력 유효성 검사 규칙, CORS 설정)5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)67프롬프트:8"이메일 인증이 포함된 고객 온보딩 양식과9제출 시 자동 Notion 데이터베이스 입력 기능을 구축해 주세요."1011출력: 스택에 정확히 일치하는 프로덕션 준비 코드 -12추가 정리 작업이 필요 없습니다.
3. AI 명령 센터로서의 Obsidian
2026년의 Obsidian은 메모 작성 앱이 아닙니다. 축적된 지식 베이스가 구축하는 모든 시스템의 컨텍스트 레이어가 되는 개인 AI 명령 센터입니다.
아키텍처의 변화: 볼트는 더 이상 저장소가 아닙니다. RAG(검색 증강 생성)입니다. AI 에이전트가 작업을 실행하기 전에 질의하는 살아있는 지식 베이스입니다.
이를 가능하게 하는 플러그인 스택:
Smart Connections - 볼트 전체를 인덱싱하고 모든 AI 호출 시 관련 노트를 컨텍스트로 전송합니다.
Obsidian Copilot - 볼트를 Claude API에 직접 연결합니다. 한 번만 설정하면 됩니다:
12 "provider": "anthropic",3 "model": "claude-opus-4-8",4 "apiKey": "YOUR_ANTHROPIC_KEY",5 "systemPrompt": "당신은 시스템 아키텍트입니다. 사용자의 완전한 지식 볼트를 컨텍스트로 사용할 수 있습니다. 시스템을 구축할 때는 기존 노트, 과거 결정, 확립된 패턴을 참조하세요. 출력: 작동하는 코드 + Obsidian 파일 구조.",6 "contextWindow": {7 "includeActiveFile": true,8 "includeLinkedFiles": true,9 "includeRecentFiles": 10,10 "includeFolders": ["Projects", "Systems", "Decisions"]11 }12}
시스템 설계 인터페이스로서의 캔버스
하나의 프롬프트로 Claude가 연결된 블록으로 전체 시스템 아키텍처를 배치하는 대화형 Obsidian Canvas를 생성합니다.
1Obsidian Canvas의 프롬프트:2"내 Twitter 계정을 위한 콘텐츠 제작 파이프라인을 설계해 주세요.3저는 주당 3개의 기사를 게시하고 5개의 스폰서 딜을 관리합니다.4기존 콘텐츠 캘린더 노트를 참조하세요."56출력: 연결된 블록이 있는 캔버스:7→ 콘텐츠 아이디어 발굴 (관심 노트에서 가져옴)8→ 초안 → 검토 → 게시 워크플로우9→ 마감일 알림이 포함된 스폰서 추적10→ 분석 대시보드11→ 자동 크로스 포스팅 로직12→ 각 블록은 관련 Obsidian 파일에 연결됨
Claude가 구조화된 파일로 생성하는 캔버스 출력:
1{2 "nodes": [3 {4 "id": "ideation",5 "type": "file",6 "file": "Systems/ContentPipeline/Ideation.md",7 "x": 0, "y": 0, "width": 300, "height": 200,8 "color": "1"9 },10 {11 "id": "draft",12 "type": "file",13 "file": "Systems/ContentPipeline/Draft.md",14 "x": 400, "y": 0, "width": 300, "height": 200,15 "color": "3"16 },17 {18 "id": "sponsors",19 "type": "file",20 "file": "Systems/ContentPipeline/SponsorTracker.md",21 "x": 0, "y": 300, "width": 300, "height": 200,22 "color": "5"23 },24 {25 "id": "analytics",26 "type": "file",27 "file": "Systems/ContentPipeline/Analytics.md",28 "x": 400, "y": 300, "width": 300, "height": 200,29 "color": "6"30 }31 ],32 "edges": [33 {34 "id": "e1",35 "fromNode": "ideation", "fromSide": "right",36 "toNode": "draft", "toSide": "left",37 "label": "승인된 개념"38 },39 {40 "id": "e2",41 "fromNode": "sponsors", "fromSide": "right",42 "toNode": "draft", "toSide": "bottom",43 "label": "브리핑 통합"44 }45 ]46}
4. 완전한 프라이버시를 위한 로컬 LLM
민감한 데이터(고객 시스템, 금융 도구, 내부 툴링)의 경우 클라우드 API 대신 로컬 모델을 통해 라우팅합니다. 데이터가 사용자 머신을 떠나지 않습니다.
1# Ollama 설치2curl -fsSL https://ollama.com/install.sh | sh34# 코딩 가능한 모델 가져오기5ollama pull llama3.2:latest6# 또는 더 강력한 코드 생성을 위해:7ollama pull qwen2.5-coder:32b89# 로컬 서버 시작10ollama serve11# localhost:11434 에서 실행됨
로컬 엔드포인트를 사용하도록 Obsidian Copilot 구성:
1{2 "provider": "ollama",3 "model": "qwen2.5-coder:32b",4 "baseUrl": "http://localhost:11434",5 "systemPrompt": "당신은 MCP를 통해 사용자의 파일 시스템에 접근할 수 있는 로컬 시스템 빌더입니다. 완전히 작동하는 시스템을 구축하세요. 명시적인 지시 없이 외부 API로 데이터를 보내지 마세요."6}
로컬 모델 + MCP 브리지:
1import requests2import json3from pathlib import Path4from watchdog.observers import Observer5from watchdog.events import FileSystemEventHandler67OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"8PROJECTS_DIR = Path.home() / "Projects"9OLLAMA_URL = "http://localhost:11434/api/generate"1011class InboxWatcher(FileSystemEventHandler):12 """13 Obsidian AI-Inbox 폴더를 감시합니다.14 새로운 .md 파일이 나타나면 이를 빌드 프롬프트로 처리합니다.15 로컬 LLM에 전달 -> MCP를 통해 실행 -> 결과 보고16 """1718 def on_created(self, event):19 if not event.src_path.endswith(".md"):20 return2122 prompt_file = Path(event.src_path)23 prompt = prompt_file.read_text()2425 print(f"[받은 편지함] 새 프롬프트: {prompt_file.name}")26 self.execute_prompt(prompt, prompt_file.stem)2728 def execute_prompt(self, prompt: str, project_name: str):29 response = requests.post(OLLAMA_URL, json={30 "model": "qwen2.5-coder:32b",31 "prompt": f"""당신은 시스템 빌더입니다.32 다음 시스템을 구축하세요: {prompt}3334 다음을 포함하는 JSON 계획을 출력하세요:35 {{36 "project_dir": "상대 경로",37 "files": [38 {{"path": "상대 경로", "content": "파일 내용"}}39 ],40 "commands": ["npm install", "기타"],41 "summary": "구축된 내용 요약"42 }}""",43 "stream": False44 })4546 plan = json.loads(response.json()["response"])47 project_dir = PROJECTS_DIR / plan["project_dir"]48 project_dir.mkdir(parents=True, exist_ok=True)4950 for file_spec in plan["files"]:51 file_path = project_dir / file_spec["path"]52 file_path.parent.mkdir(parents=True, exist_ok=True)53 file_path.write_text(file_spec["content"])54 print(f"[빌드] 생성됨: {file_path}")5556 result_file = OBSIDIAN_INBOX / f"{project_name}-result.md"57 result_file.write_text(58 f"# 빌드 완료: {project_name}\n\n"59 f"**위치:** {project_dir}\n\n"60 f"**요약:** {plan['summary']}\n\n"61 f"**생성된 파일:** {len(plan['files'])}개\n"62 )63 print(f"[완료] 결과가 Obsidian에 기록됨")6465if __name__ == "__main__":66 OBSIDIAN_INBOX.mkdir(exist_ok=True)67 observer = Observer()68 observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)69 observer.start()70 print(f"[감시 중] {OBSIDIAN_INBOX}")7172 try:73 while True:74 import time; time.sleep(1)75 except KeyboardInterrupt:76 observer.stop()77 observer.join()
빌드 프롬프트와 함께 .md 파일을 Obsidian AI-Inbox에 드롭하세요. 브리지가 이를 가져와 로컬 모델을 통해 라우팅하고, Projects 폴더에 시스템을 구축한 후 완료 노트를 Obsidian에 다시 작성합니다.
5. 전체 워크플로우 - 아이디어에서 배포된 시스템까지
11단계 - 입력2Obsidian의 AI 패널에 다음과 같이 작성하세요:3"암호화폐 통합 및 월별 예산 추적 기능이 있는4개인 재무 시스템을 만들어 줘."5생성 버튼을 누르세요.672단계 - 컨텍스트 수집8Smart Connections 플러그인이 볼트를 스캔합니다.9지난 3개월간의 재무 관련 노트를 찾습니다.10이를 컨텍스트로 Claude API에 전송합니다.11123단계 - 아키텍처 설계13Claude (Opus 4.8)가 시스템을 설계합니다:14- 데이터베이스 스키마15- UI 컴포넌트16- API 통합17- 파일 구조18194단계 - 빌드20Claude (Sonnet 5)가 MCP를 통해 구현합니다:21- ~/Projects/finance-tracker/ 생성22- 의존성 설치23- 모든 파일 작성24- localhost:3000 에서 개발 서버 시작25265단계 - 결과27Obsidian이 다음 폴더를 생성합니다: Finance System/28내부: 연결된 대시보드, 설정 노트,29실행 중인 애플리케이션으로의 직접 링크
1단계부터 실행 중인 애플리케이션까지 총 소요 시간: 4-12분.
이것이 의미하는 변화
이것은 더 빠른 코드 작성 방법이 아닙니다.
아이디어와 실행 사이의 다른 관계입니다.
구축할 수 있는 것의 제약은 기술과 시간이었습니다. 비개발자는 CRM을 구축할 수 없었습니다. 솔로 개발자는 다섯 개의 시스템을 동시에 구축할 수 없었습니다. 팀은 몇 주가 아닌 몇 시간 만에 제품을 출시할 수 없었습니다.
이 세 가지 제약은 모두 사라졌습니다.
새로운 제약은 생각의 명확성입니다. 즉, 필요한 것이 무엇인지 정확히 설명하고, 좋은 출력이 무엇인지 이해하며, 이를 반복적으로 개선하는 능력입니다. 이것은 기술적 기술이 아닌 사고 기술입니다.
생성형 앱 아키텍처는 개발자를 쓸모없게 만들지 않습니다. 그것은 시스템적으로 생각하는 능력, 즉 구축하기 전에 필요한 것이 무엇인지 추론하는 능력을, 그것을 구현하는 코드를 작성하는 능력보다 훨씬 더 가치 있게 만듭니다.
스택은 여기 있습니다. 모델은 충분히 강력합니다. 남은 유일한 변수는 당신이 이 스택을 사용하여 구축하고 있는지, 아니면 구축하는 사람들에 대해 읽고 있는지입니다.
이 글은 2026년 7월 기준 Claude, Obsidian 및 MCP에서 사용 가능한 기능을 설명합니다. 특정 플러그인 버전 및 API 구성은 변경될 수 있습니다. 구현 전에 항상 최신 문서를 확인하세요.
읽어주셔서 감사합니다.
