<div id="readability-page-1" class="page"><div>
 <div id="SE-e0a458a2-ce92-4823-812d-a54ad98bb2db">
 안녕하세요 멍개입니다.​이번 시간은 요즘 매우 핫한 주제인 바이브 코딩의 실체를 파악해보려고 합니다.​오픈코드 실험을 좀 해보고 싶어서 두 가지를 만들어봤습니다.​<ol><li>채팅</li><li>거래소</li></ol>​저는 주로 인공지능의 성능을 보기 위해 앞의 2가지를 만들라고 시킵니다. 일반적으로 채팅까지는 잘 만들지만 거래소까지는 잘 못만듭니다. 하지만 오픈코드(opencode)를 사용했고 이때 claude opus 4.5와 gemini pro를 이용했습니다. 결과론적으론 나름 만족스러운 수준의 결과물을 얻었습니다.​특히 거래소의 경우 채결 부분을 api, 카프카, 채결 엔진, 웹 소켓 등 꽤나 규모가 있는 사이즈로 구현 요청을 하였고 결과론적으로 정상적으로 동작하는 시스템이 완성되었습니다. 거래소는 전체 기능 구현은 아니고 주문 위주로 구현 요청을 하였습니다.
 </div> <div id="SE-c20b8893-dd8d-4b84-8923-59898442996f">
 ┌─────────────────────────────────────────────────────────────────┐
│ Web Frontend │
│ (Next.js 14 + React) │
└────────────────────────────┬────────────────────────────────────┘
 │
 ┌──────────────────┼──────────────────┐
 │ REST API │ │ WebSocket
 ▼ │ ▼
 ┌─────────────┐ │ ┌─────────────┐
 │ API Gateway │ │ │ WS Gateway │
 │ (Node.js) │ │ │ (Node.js) │
 └──────┬──────┘ │ └──────┬──────┘
 │ │ │
 └─────────┬────────┘ │
 ▼ │
┌──────────────────────────────────────┐ │
│ KAFKA CLUSTER │ │
│ orders │ trades │ orderbook-updates │ │
└──────────────────────────────────────┘ │
 │ │
 ▼ │
┌──────────────────────────────────────┐ │
│ MATCHING ENGINE (Go) │ │
│ - Red-Black Tree Orderbook │ │
│ - Price-Time Priority │ │
│ - Single-Threaded (Deterministic) │ │
└──────────────────────────────────────┘ │
 │ │
 ▼ │
┌──────────────────────────────────────┐ │
│ TRADE PROCESSOR (Node.js) │◄───────┘
│ - Balance Settlement │
│ - Order Status Updates │
│ - Redis Pub/Sub Publishing │
└──────────────────────────────────────┘
 │ │
 ▼ ▼
 ┌─────────────┐ ┌─────────────┐
 │ PostgreSQL │ │ Redis │
 └─────────────┘ └─────────────┘
 </div> <div id="SE-ab73b6e0-63a1-49d5-b112-19fe99ad8d55">
 그렇다면 프롬프트는 어떻게 구성했을까요? 개발자라고 프롬프트가 딱히 대단하지 않습니다.​그냥 채팅 어플리케이션 만들어줘거래소 만들어줘라고 요청했습니다.​물론 저렇게 요청하면 llm은 구체적인 스펙을 물어봅니다.
 </div> <div id="SE-7199912c-cf00-4d4b-9689-c1753eff5650">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-7199912c-cf00-4d4b-9689-c1753eff5650&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMzgg/MDAxNzY3NzcyMTI1MTMw.rvPFJzZyQMKZDikqKxjXJAyLCQmcY2hfM7DCSpPy0MUg.5FfrzpApae-ybRHx6TeEB-BClXl5wUb7noiQ05awBcMg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.00.14.png&quot;, &quot;originalWidth&quot; : &quot;2884&quot;, &quot;originalHeight&quot; : &quot;1594&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;4093841&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMzgg/MDAxNzY3NzcyMTI1MTMw.rvPFJzZyQMKZDikqKxjXJAyLCQmcY2hfM7DCSpPy0MUg.5FfrzpApae-ybRHx6TeEB-BClXl5wUb7noiQ05awBcMg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.00.14.png?type=w800" data-width="693" data-height="383" alt="">
 </a>
 
 </div>
 <div id="SE-51c14a46-f329-4563-b4dc-e08a613ce521">
 이런점을 알고 있기 때문에 구체적인 요청을 굳이 하지 않았습니다. 이렇게 요청을 하면 바로 작업에 들어가지 않고 구체적인 계획을 세웁니다. 여기서 신기한점은 오픈코드에서 계획을 세우는 과정에서 작업의 범주가 클때 서브 에이전트를 이용합니다.
 </div> <div id="SE-a2cdfb47-7707-4e24-9675-ed21fdb2b9bc">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-a2cdfb47-7707-4e24-9675-ed21fdb2b9bc&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjQg/MDAxNzY3NzcyMTM5MjUy.zRPZEyoK0sBNryj0O8Ew9UnJwG7dfOPkR4zkWW2aApkg.yeUGtILI2Ne1YOK4ljAr1-an7pI959OjlgJbcdYbOpUg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.05.44.png&quot;, &quot;originalWidth&quot; : &quot;3300&quot;, &quot;originalHeight&quot; : &quot;1990&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;5583814&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjQg/MDAxNzY3NzcyMTM5MjUy.zRPZEyoK0sBNryj0O8Ew9UnJwG7dfOPkR4zkWW2aApkg.yeUGtILI2Ne1YOK4ljAr1-an7pI959OjlgJbcdYbOpUg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.05.44.png?type=w800" data-width="693" data-height="417" alt="">
 </a>
 
 </div>
 <div id="SE-b4f2ee11-4305-4da6-8e8e-46e52db349b1">
 계획단계에서의 핵심은 시스템 구성과 핵심 기능 추출입니다.
 </div> <div id="SE-8b07431c-ba0b-4792-bf3e-29fb86fe7d8a">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b07431c-ba0b-4792-bf3e-29fb86fe7d8a&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjAz/MDAxNzY3NzcyMTY2ODM5.DiZAn7mWEn8qKegCuCxa8ckfaXclhdvs-Sy6ftNBXjwg.ri8s7ftslXnGOmaiv03pe04dvAppIwxM8sU6NDdaH_4g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.12.33.png&quot;, &quot;originalWidth&quot; : &quot;3284&quot;, &quot;originalHeight&quot; : &quot;2016&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;5397855&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjAz/MDAxNzY3NzcyMTY2ODM5.DiZAn7mWEn8qKegCuCxa8ckfaXclhdvs-Sy6ftNBXjwg.ri8s7ftslXnGOmaiv03pe04dvAppIwxM8sU6NDdaH_4g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.12.33.png?type=w800" data-width="693" data-height="425" alt="">
 </a>
 
 </div>
 <div id="SE-72b8ae39-8062-4a42-aa83-382c7847a23a">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-72b8ae39-8062-4a42-aa83-382c7847a23a&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjk1/MDAxNzY3NzcyMTY4Njgx.pk41AQV0UN09xkBaiPwdMP2d1J0OA7-uF14gMJDYjWIg._-kpSO8IPnH3_tqBuI1urGLdicgCEDIpbsn2UCO_QlIg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.13.28.png&quot;, &quot;originalWidth&quot; : &quot;1198&quot;, &quot;originalHeight&quot; : &quot;226&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;325660&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjk1/MDAxNzY3NzcyMTY4Njgx.pk41AQV0UN09xkBaiPwdMP2d1J0OA7-uF14gMJDYjWIg._-kpSO8IPnH3_tqBuI1urGLdicgCEDIpbsn2UCO_QlIg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.13.28.png?type=w800" data-width="693" data-height="130" alt="">
 </a>
 
 </div>
 <div id="SE-934d8182-e34e-41b7-af16-8ab3b15bbe41">
 설계와 핵심 기능 추출이 완료되면 다음과같이 할일을 만듭니다. 여기서 한가지 놀라웠던점은 페이즈(phase) 단위로 작업 구분을 한다는 점 입니다.
 </div> <div id="SE-5b60f398-40c2-4783-b470-d08247bfd842">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-5b60f398-40c2-4783-b470-d08247bfd842&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjY1/MDAxNzY3NzcyMTkwMzQ2.yRcEANOWGtxK9k-sGxVbCWDI2TYmnzzDngpwX6JOOjwg.46SYy6zqXXgFGPGs55ZeKNDrz_ewRp1EVLPminyQz0sg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.15.30.png&quot;, &quot;originalWidth&quot; : &quot;648&quot;, &quot;originalHeight&quot; : &quot;1226&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;952349&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMjY1/MDAxNzY3NzcyMTkwMzQ2.yRcEANOWGtxK9k-sGxVbCWDI2TYmnzzDngpwX6JOOjwg.46SYy6zqXXgFGPGs55ZeKNDrz_ewRp1EVLPminyQz0sg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.15.30.png?type=w800" data-width="648" data-height="1226" alt="">
 </a>
 
 </div>
 <div id="SE-bf630863-54c4-4b24-9499-9b1bf469eed5">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-bf630863-54c4-4b24-9499-9b1bf469eed5&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMTYg/MDAxNzY3NzcyMjQ5NDM4.73m_4MD1Wdx757V7zCOJeA9tpSjeZoqmgxnmXeHzHvQg.i8jcAug_XY8KcFtFLRHgncEwxwOQnunDU0mHrSBK8KEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.36.04.png&quot;, &quot;originalWidth&quot; : &quot;3284&quot;, &quot;originalHeight&quot; : &quot;2016&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;, &quot;fileSize&quot;: &quot;5650899&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNjAxMDdfMTYg/MDAxNzY3NzcyMjQ5NDM4.73m_4MD1Wdx757V7zCOJeA9tpSjeZoqmgxnmXeHzHvQg.i8jcAug_XY8KcFtFLRHgncEwxwOQnunDU0mHrSBK8KEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2026-01-07_15.36.04.png?type=w800" data-width="693" data-height="425" alt="">
 </a>
 
 </div>
 <div id="SE-60cce0cd-f5ae-4180-8864-1c2f0f9df0e1">
 그렇다면 깔끔하게 실행이 되었을까요?​몇가지 이슈가 있었습니다.​<ol><li>라이브러리 import시 잘못된 요소 참조</li><li>빌드에러(모노 레포라 약간 잘못된 설정)</li><li>프론트에서 백엔드 통신하지 않음</li><li>일부 로직 미구현</li></ol>​이 과정에서 1, 2는 명확하게 되지 않는 이유가 보이기 때문에 인공지능한테 에러 문구를 던져주면 해결 가능3번과 4번은 디버깅 과정이 필요합니다. 통신하지 않는지 / 내부적으로 에러가 난것인지 파악 필요​여기서는 3, 4번은 실제 코드가 존재하지 않아 미구현되었었습니다. 따라서 추가적인 기능 구현 요청을 하였습니다.​채팅같은 경우는 미구현 된 것 없이 모든 기능이 한번에 만들어 졌습니다. 대략 2~30분 정도? 소요되었고 거래소는 1시간 정도 소요되었습니다. 초기 작업 계획을 세우는 과정에서 많은 시간이 소요되었습니다.​아래에는 실제 결과물 입니다.​생각보다 복잡한 구조에서도 잘 이해하고 구현된 모습을 볼 수 있습니다.
 </div> 
 
 </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 이번 시간은 요즘 매우 핫한 주제인 바이브 코딩의 실체를 파악해보려고 합니다. 오픈코드 실험을 좀 해보고 싶어서 두 가지를 만들어봤습니다. 채팅 거래소 저는 주로 인공지능의 성능을 보기 위해 앞의 2가지를 만들라고 시킵니다. 일반적으로 채팅까지는 잘 만들지만 거래소까지는 잘 못만듭니다. 하지만 오픈코드(opencode)를 사용했고 이때 claude opus 4.5와 gemini pro를 이용했습니다. 결과론적으론 나름 만족스러운 수준의 결과물을 얻었습니다. 특히 거래소의 경우 채결 부분을 api, 카프카, 채결 엔진, 웹 소켓 등 꽤나 규모가 있는 사이즈로 구현 요청을 하였고 결과론적으로 정상적으로 동작하는 시스템이 완.......

[opencode] AI는 어느정도 복잡도 있는 작업까지 가능할까?

댓글