Agent Bulid Project - 로컬 LLM 모델 재설정하기

Gemini API 키를 사용하면 요금이 부과되는 문제가 있어, 요금이 덜 드는 방향으로 로컬 LLM을 사용해보기로 했다. 로컬 LLM 중 Ollama를 설치했고, 다양하게 추천해준 모델 중 qwen 2.5 3b를 우선 설치해 테스트해보았다.

결과물은 Gemini 모델을 사용했을때보다 불만족스러웠다. 7b로 더 큰 모델을 설치해보았으나 마찬가지로 좋은 결과를 내지는 못했다. Antigravity는 해결책으로 모델을 쓰지 않고 템플릿을 여러 개 만들어 선택할 수 있는 방법이나 Gemini API를 쓰는 방식으로 되돌아가라는 방법을 추천해주었지만, 최대한 로컬 LLM 모델을 활용하면서 최선의 결과물을 내어보고 싶었다.

그래서 코딩에 더 최적화되었다는 Deepseek-coder 모델로 바꾸고 KRDS 내부 파일을 최대한 그대로 가져와 쓸 수 있도록 이리저리 설정을 고쳐보았다. 결국 나쁘지 않은 결과물을 내는 데에는 성공했다.

📄 Attached File

2026-02-07 작업 로그

개요

로컬 LLM (Ollama)을 사용한 KRDS 에이전트 앱의 미리보기 기능 디버깅 및 최적화

해결한 문제들

1. 미리보기가 표시되지 않는 문제

증상: 코드는 생성되지만 미리보기 영역이 빈 화면으로 표시됨

원인:

KRDS CSS 파일이 너무 큼 (~500KB 이상)
iframe의 srcDoc에 대용량 CSS를 inline으로 넣으면 렌더링 실패

해결:

CSS를 200KB로 제한: krdsCSS.substring(0, 200000)
필수 컴포넌트 스타일(버튼, 인풋 등)을 별도로 명시하여 잘림 방지

2. 인풋 스타일 누락 문제

증상: 챗봇 화면 생성 시 텍스트 인풋이 기본 스타일로 표시됨

원인: CSS 잘림으로 .krds-input 스타일이 누락됨

해결:

iframe srcDoc에 필수 컴포넌트 CSS를 직접 하드코딩:

.krds-input { position: relative; display: inline-flex; width: 100%; }
.krds-input input { width: 100%; height: 4.8rem; padding: 0 1.6rem; border: 1px solid #b1b8be; border-radius: 0.6rem; font-size: 1.7rem; background: #fff; }
.krds-input input:focus { border-color: #256ef4; outline: none; }
.krds-btn { display: inline-flex; align-items: center; justify-content: center; ... }

3. LLM 출력 품질 개선

문제: LLM이 KRDS 패턴을 제대로 따르지 않음

해결: Few-shot 예시 추가

로그인 폼
팝업 모달
카드 3개 그리드
챗봇 화면 (새로 추가)

코드 변경 사항

`src/components/KRDSAgent.jsx`

bodyHTML state 추가
iframe srcDoc에 필수 CSS 하드코딩
CSS 크기 제한 150KB → 200KB

`src/api/ollama.js`

챗봇 화면 Few-shot 예시 추가 [예시4]
디버깅용 콘솔 로그 추가

`src/index.css`

KRDS CSS import 시도 (나중에 제거됨)

삭제된 파일

src/api/gemini.js - 사용되지 않는 Gemini API 파일 삭제

Electron 개발 환경 설정

DevTools 자동 열림 설정 추가 (electron/main.js)

win.webContents.openDevTools();

설치 파일 관련 논의

검토된 사항

Ollama + 모델 번들링 시 용량 문제 (~4GB)
라이선스 및 재배포 문제
기술적 복잡성 (시스템 서비스, GPU 드라이버 등)

결론

설치 파일 생성 보류
개발 환경에서 실행하는 방식 유지

현재 실행 방법

# Ollama 실행 필수 ollama serve 모델 다운로드 (최초 1회) ollama pull deepseek-coder:6.7b 앱 실행

npm run app

다음 작업 가능 항목

[ ] Ollama 연결 실패 시 사용자 가이드 표시
[ ] 모델 선택 UI 추가
[ ] 생성된 코드 저장/내보내기 기능
[ ] 더 많은 컴포넌트 패턴 추가

금주 작업 내용을 정리한 문서다. 설치파일로 만들어서 배포해볼까도 싶었지만 로컬 LLM 모델 파일을 포함하면 너무 무거워지고, 모델 파일을 빼면 Ollama를 따로 설치해야하는 번거로움이 있어 설치파일은 따로 만들지 않았다. LLM 모델을 완벽히 사용한 건 아니지만 내부에서 사용할 수 있는 프로그램을 하나 만들어본 것에 의의를 두고 싶다.