무료AI(LLM) API를 통한 자체 멀티모달 AI서비스 구축
바이브 코딩 공부하기에도 실험삼아 구축해서 실사용하기에도 정말로 만족도가 높습니다.
- •Pre-rendering: 서버에서 HTML을 미리 생성하여 전달
- •FCP 속도: 첫 페이지 로딩 시 빈 화면 없이 즉시 노출
- •Hydration: 브라우저에서 JS가 실행되며 화면 렌더링
• 검색 엔진 가독성: SSR은 완성된 HTML을 제공하므로, JS를 실행하지 못하는 검색 로봇도 콘텐츠를 완벽히 수집합니다.
• 메타 태그 동적 생성: 각 페이지별로 고유한 Title, OpenGraph(OG) 태그를 서버에서 주입할 수 있습니다.
• 인덱싱 속도: SSR은 즉시 인덱싱이 가능하여 콘텐츠 색인 시간을 대폭 단축시킵니다.
개발자는 친숙한 AI CLI 에이전트저는 지금 무료로 배포중인 AI서비스 중에
Qwen Code CLI를 적극 활용해서 개발 했어요.
AI에이전트로서도 활용하고, API처럼 활용하여
실제로 웹서비스에 연동하기도 했어요.
앞서 References에서 AI 게이트웨이 몇개를 말씀드렸는데요.
CLI환경 연동이 힘들거나 선뜻 도전할 생각이 안드신다면
Openrouter에서 제공하는 Free tier 모델들을 사용해보셔도 좋아요
(무료티어 친구들이라고 절대로 안좋은게 아닌걸 느끼실 겁니다)
이 포스트를 통해 완성 될 기능들은 아래와 같아요
대화, 이미지 분석, 음성인식 및 분석 3가지가 모두 가능한 멀티모달 AI 제작
멀티모달(multi-modal) 기능1,2 거대지식 챗봇과 이미지 인식 및 분석
당연히 시작은 '예제 만들어줘' 부터 겠죠.
처음 시작하는 분들은 감도 못잡고 어떻게 해야할지모르실 텐데,
하나만 기억하시면되요.
내가 원하는 기능을 상세히 설명, 그리고 지금은 작업 초기임을 명시
해서 프로젝트 프롬프트를 잘 작성하는 것이 무엇보다 중요해요.
프로젝트 자체에 쏟을 시간 중 대부분을 이 프롬프트 제작에
얼마나 많은 기여를 했느냐에 따라 AI가 행동하는 척도가 달라집니다.
누군가는 아래와 같이 말 할 거에요
"ai에게 모든 것을 질문하고 맡기면 해결 못한다.
결국 사람이 세세하게 손 봐줘야 하는게 발생한다."
이 분도 결국에 AI를 써봤다는 뜻이고 크게 의존한다는 뜻입니다.
AI에게 애초에 많은걸 바라지 않았다면 저런 말도 안나오겠죠.
사람도 AI도, 모든 방면의 변동성(코딩의 다양성)을 한번에 대응하지 못해요.
프로젝트 하나를 완성해가면서 디버깅 하고, 코드 안정화를 해 가는
과정은 아직도 사람의 몫이고, 물리적인 서버를 관리하는 것 역시 게시글 작성시점의 '아직은' 사람의 몫이에요.
매우느리거나 매우 보안에 예민한 것을 제외하면,
세상에 뒤떨어지는 개발인 시대입니다.
저는 이번 프로젝트에서 제일 니즈로 느꼇던 것이 하나 있었는데
그것을 핵심 레퍼런스로 삼았어요
바로 클로드 코드 Artifacts의 강력함과 낮은 자유도에 대한 불편
클로드코드 Artifacts예시저는 클로드 코드를 쓰면서 Arifacts의 형태가 보고하거나 안내 할 때
엄청나게 강점이 있음을 느꼈는데 이걸 제가 사진으로 보내는 것도 좋은데
제가 원하는 내용을 원하는 대로 가공, 배포하고싶은 갈망이 매우 컸어요
제가 원하는대로 가공한다는건 텍스트 일부분을 GUI상에서 제가원하는 텍스트로 쉽게 바꾸는 것
그리고 배포역시 제가 수정하면 수정하는대로 상대방은 받는것.
클로드 코드는 현재 만들어진 아티팩트에 대한 html만 제공하고,
다시 컨텍스트(프롬프트)를 소비(금액을 소비)해야만 수정할 수있던데
이미 완성된 Artifacts를 제 입맛대로 커스텀해서 재배포하는것에 너무 갈망이 컸어요
이 포스트를 쓰는 저는 초보자를 기준으로
그리고 개발을 최대한 편하고 에러없게 하고자 하는 가치관으로 작성 했어요.
- 되도록이면 미리 개발된 라이브러리나 패키지가 풍부한 '생태계'를 사용하고자 함.
- 개발시간의 단축, 호환성
- 되도록이면 어떤환경에 배포하더라도 잘 작동하는 형태로 동작했으면 좋겟음.
- 내 개인 컴퓨터의 환경을 해치지 않았으면 좋겠음
- Container 환경(도커)
- 되도록이면 선행 개발사례가 많아서 참고할 자료가 많고 AI가 잘 만드는 프레임워크(환경)
머리아프게 생각하지 말고, 이것역시 AI한테 물어봅시다.
느낌대로. 바이브(Vibe)하게
개인 LLM사이트를 만들건데 기술스택(아키텍처)뭐 써야하는지 추천해줘
1. 되도록이면 미리 개발된 라이브러리나 패키지가 풍부한 '생태계'를 사용하고자 함.
* 개발시간의 단축, 호환성
2. 되도록이면 어떤환경에 배포하더라도 잘 작동하는 형태로 동작했으면 좋겟음.
3. 내 개인 컴퓨터의 환경을 해치지 않았으면 좋겠음
* Container 환경(도커)
4. 되도록이면 선행 개발사례가 많아서 참고할 자료가 많고 AI가 잘 만드는 프레임워크(환경)
둘 모두 너무높은수준의 답변을 주긴 했어요.
물론 이게 나쁜건 아니지만, 초보자로 하여금
진입장벽을 너무 높여서 답변을줬죠?
여기서 필요한 것, "나의 상황을 말하는 것"
이 나의 상황을 말하는 것 자체가 빠지니까 너무 광범위하게 알려주고
너무 전문적인 툴을 알려주는 것 같죠?(물론 다알아야 하긴하는데)
나의 상황을 전달해서 다시 프롬프트를 작성 해 볼까요?
일단은 클로드는 재미나이든 나의 현 상황과 의도를 모르고 있으니까
일단 LLM(AI)모델을 개발 할 것이 아니고,
개인적인 프로젝트고 커다란 프로젝트가 아니며
일반인이 활용하고 응용하기위해 개발하는 것이다 라는 내용을 강조
💡 Thinking
- • AI 모델 자체를 개발하는 것이 아닌, 기존 모델의 활용에 집중합니다.
- • 거대 기업의 시스템이 아닌 개인적인 규모의 프로젝트임을 지향합니다.
- • 전문가가 아닌 일반인이 직접 응용하고 구현할 수 있는 수준을 강조합니다.
🎯 Purpose
- • 하드웨어 제약이 큰 LLM 로컬 구동 관련 답변은 제외합니다.
- • 관리가 어려운 복잡한 인프라 및 시스템 구성은 배제합니다.
- • 이론적인 깊이보다는 즉시 실행 가능한 가이드를 제공합니다.
1. 현실적인 기술 스택
개인이 유지보수 가능한 가벼운 프레임워크와 API 기반의 연동을 우선시합니다.
2. 유연한 응용성
하나의 거대한 서비스보다는 필요에 따라 기능을 붙이고 뗄 수 있는 구조를 지향합니다.
3. 사용자 경험 중심
내부 로직의 복잡함보다는 실제 사용자가 느끼는 편리함과 직관적인 UI/UX에 집중합니다.
그렇게 이제 아까 대화에 이어서 이걸 말 해봅시다.
답변 링크를 클릭 해 보시면 아는데, 아키텍쳐 구성이 매우 간단 해 졌어요 이전 보다.
이게 개인 차원에서 활용할 LLM은 이정도면 차고넘치긴 하거든요.
(게다가 이번 프로젝트는 연습용이니까)
Gemini, Claude 둘 모두 아주 바람직한 대답을 줬는데요 비교 해 보겠습니다.
Gemini의 대답(표)
Claude의 대답(Artifacts)보시기에 어떤가요? 저는 확실히 Key Step에서 말한 것 처럼
직관적이고 시각적인건 Claude의 Artifacts가 매우 강력한 것 같아요. (정리만은)
내용을 두고 조금 전문적으로 비교해볼까요?
공부하다 시간이 다 가겠죠?
일단 부딪혀봅시다 "완벽함이 아니라 실행이 답이니까"
이 스텝 시작에 앞서
먼저 AI agent 사용법을 모르시는 분들은
바로 우측하단 버튼을 통해 AI agent사용법을 숙지 해 오시면 좋습니다.
어렵지 않으니 겁먹지 않고 도전 해 보셔도 좋아요.
작업 영역을 생성하고 AI agent에게 일을 시키면 되는데,
당장 우리는 좀 많은 옵션을 갖고있어서 환경에 대한 이해가 조금 필요해요.
크게 두가지 인데요, Next.js와 Docker에 대한 이해가 많이 필요해요.
Next. js
next.js는 웹개발에서 크게 두가지로 분류 돼요.
- Dev모드(Development mode)
- Production 모드(Production mode)
두가지로 분류되는 이유는 여러가지가 있지만,
직관적으로 이름에서 알 수 있듯,
개발중에 실시간으로 에러를 체크하고 변화를 자동으로 렌더링해 주는 것과
모든 개발이 끝나면 배포에 최적화하여 메모리에 정보를 담는 것이 달라요.
Docker
Docker 는 여러가지 개발 중 개발환경(OS, 설치된 라이브러리(개발 프로그램))
등을 쉽게 배포 하도록 나온 Linux container 기반의 기술이에요.
우리가 이걸 쓰는 이유는
내컴퓨터 환경이 복잡해지지 않는다와 한번만들면 어디든 배포할 수 있다
의 강점 때문이에요
도커는 OS조차도 container로 가상화가 가능하기 때문에
개발환경에 설치될 프로그램 조차도 개발 시점에 빌드를 해 주어야 합니다.
개발 할 각종 서비스와 라이브러리, 패키지들이 설치된
가상의 환경을 세팅한다는 말이에요.
결국, 이렇다는건
Next.js가 개발, 배포될 환경에 대한 고려와
docker가 그에 대응하는 OS를 대응하기 위한
Docker 자체의 개발, 배포에 대한 고려가 필요하단 말이에요.
그렇다면, 저 두개를 알아야 한다고 말한 이유가 뭘까요?
AI에게 줄 프롬프트에게 저 두가지를
명확히 인지 시켜야 하기 때문이에요.
즉, 배포를위한 Next.js와 Docker의 개발, 배포를
2개의 계층 구조로 쌓아서 배포해야 한다는 것. 이것을 개발 용어로
multi-Stage
라고 해요.
해서 우리는, 시작명령 프롬프트를 아래와 같이 고민해요.
직접 해 보시면아는데 이 프롬프트에서 build Layer caching이
정말 핵심이고 까다로워요.
아래는 추가로 AI에게 프로젝트 프롬프트로 제가 주로 주입하는
프롬프트 공유 드려요
AI 주입 프롬프트 1(프로젝트 프롬프트)
Next.js대응
🛡️ Next.js (App Router) 보수적 개발 가이드라인
본 가이드는 개발(Dev)과 프로덕션(Prod) 환경의 불일치를 최소화하고, 런타임 에러를 사전에 방지하기 위한 기술적 원칙을 다룹니다.
💡 설계 의도: Next.js는 서버의 램 점유를 최소화 하고 가장빠른 사용자경험을 위해 개발시점을 build하고, 동적 표현들은 전부 api로 요청해서 그 처리를 매우 빠르게 하는데, 그 과정에서 일반 html, php와 다르게 public(저장소)를 정적으로 인식해서 일반적인 html처럼 경로 코딩하면 작동을 안하기때문에 필요한 조치에요.
SSR(서버 사이드 렌더링)을 막는건 아니니 안심하셔도 됩니다.
AI 주입 프롬프트 2(프로젝트 프롬프트)
다중접속 대응
🏗️ 고가용성 워커(Worker) 및 큐(Queue) 관리 설계 원칙
본 가이드는 대규모 분산 시스템 환경에서 자원 효율을 극대화하고 데이터 무결성을 보장하는 워커 및 큐 관리의 표준 아키텍처를 정의합니다.
💡 설계 의도: 자원 임계치를 넘어서는 과도한 컨텍스트 스위칭(Context Switching) 비용을 줄이고, 메모리 부족(OOM)으로 인한 워커 다운을 막기 위함입니다.
AI Agent용 프로젝트 프롬프트 생성
이제까지 제가보여드렸던 여러가지를 다 종합해서
저는 아래와 같은 최종 프롬프트를 제작했어요.
프로젝트 프롬프트는 프로젝트 폴더의 최상단에
사용프로그램에 따라 파일을 생성하시면 됩니다.
저의 경우엔 여러개 다 써서
GEMINI.md, Qwen.md, .cursorrules파일 다 만들어서
프로젝트의 시스템 프롬프트로 작동하도록 했어요.
프로젝트 폴더내 최상단에 위치 시키기.명령 프롬프트 입력
IDE혹은 CLI에 프롬프트 주고 시작하기
진행상황 신기하게 구경하기
이거 보고있으면 정말 신기함(처응엔)
그러면 정말로 훌륭하게도
보안관련 환경파일, 인코딩 모두를 안시켜도 수행해 내는 것을 볼 수 있어요.
(Qwen CLI)기준, 다른 AI는 다를 수 있습니다.
보안관련 세팅 사항이나, 여러가지 환경변수
그리고 인코딩 문제등 여러가지는 너무 내용이 딥해서
추후에 다룰 수 있으면 다룰까 해요.
훌륭하게 세팅을 해내는 AI agentAI가 세팅을 마치면, QWEN CLI의 경우에는
서버 실행, 빌드에러 체크, 빌드, 실행 까지 다 마친 상태로
이용자에게 어떤걸 해야하는지 알려줘요.
(이미 프로젝트 프롬프트에 적어놓기도 했구요)
해서, 접속하면 ?
아마 높은 확률로 접속이 안되거나
웹을 이상하게 그릴텐데 그때부터 디버깅의 싸움 입니다.
웹이니까, 아래와 같이 확인할 수 있어요.
1. 서버 콘솔 확인요청하기(Ai agnet)에 요청하기.
서버 터미널에서 뜨는 에러들은 API요청이나 내부적인 작동이상을 감지하고
- 브라우저 콘솔(F12)로 콘솔에러 확인하기
브라우저 콘솔에서 뜨는 에러들은 실제 통신에러를 말하는거에요.
(물론 설정에따라 서버에러도 띄울 수 있는데 이건 보안에 취약해요)
둘 모두 해결해야 할 내용들이고 꼭 디버깅해서
문제를 해결해야하죠.
근데 어렵지 않아요
에러 긁어다가 (스크린샷 찍거나, 에러 드래그 복사 해서)
AI채팅창에 붙여넣기 하고 이런 에러가 난다고 고쳐달라고 하면 됩니다.
물론 제가 이렇게 가이드 드린 내용역시
방대하지만 매우 생략된내용이 많은상태에요
NPM이란것도 그렇고 네트워크 라우팅도 그렇고
엔진엑스 아파치를 통한 리버스 프록시 / 일반 프록시
로드밸런서를 통한 분산 서비스 공격방지
게이트웨이 설정을 통한 통신 레이어 분리
포트포워딩 혹은 NAT세팅
웹 배포를 위한 프로토콜 포워딩
오만가지 내용이 많고, 실제로 AI가 자동으로해내지 못하는 것들이 꽤 있습니다.
(물리적인 세팅을 바꾸고, 서버간 세팅을 맞추는 등)
그럼에도 불구하고 매우 편해진건 사실이기에
이렇게 포스트를 써 봤습니다.
거의 풀스택 수준의 개발 환경과 개발을
AI툴 몇개만 가지고 혼자서 해낼 수 있는 시대가 된것이
저는 정말로 감개가 무량한 수준이에요.
기본대화
LLM과의 대화
LLM과의 대화2
LLM과의 대화3지금, Artifacts만큼은 아니지만 표로 flowchart매우 정리 잘하죠?
이것도 AI가 추천해준 mermaid라는 개발된 라이브러리 사용해서
시스템프롬프트에 포함하고 렌더링요소에 포함한 결과에요.
내가 직접구상한 Claude Artifacts의 높은 자유도 구현
제가 제일 공들인 부분인데요 한번 볼까요
아래와 같이 일단 대답을 잘해줘요.
그리고 마우스를 올려서 미리보기 버튼을 누르면
당연히 LLM이기 때문에 대화 맥락 유지도 잘되니까 대화정리를 하겠죠
Html 코드형태로 보고, 팜플렛 형태의 랜딩페이지를 AI가 바로 생성누르면 이렇게 나와요.
실제 인폭래픽 형태의 정리 결과그리고 실제 이 화면에서 텍스트는 모두 수정가능하고 배포도 가능해요.
GUi상으로 텍스트 수정가능
실제 배포에서도 새로고침하면 반영됨여기서 더 특장점은, 이기능을 저는 '스니펫'기능이라고 부르는데
이 스니펫에서 우측하단에 AI에 수정요청하면 그대로 또 이페이지를 수정해요.
스니펫 AI가 수정멀티모달
멀티모달 기능1. 이미지 인식(아주 인식 잘하는 이미지)
멀티모달 기능2. 음석인식 및 보고서 제출(스니펫)
오디오 전사 분석 스니펫
멀티모달 기능3. PDF(문서)분석기능실시간 회의 기록 및 요약
실시간 마이크 입력 및 회의내용 30초마다 자동 정리 및 자동저장사용된 기술스택
dev
language
applications
server
media
Vector
bitmap
백엔드 코딩도 그렇고 홈페이지 만드는게 정말 편해졌어요.
비교도 못할 만큼.
근데 편하기위해 그만큼 배워야 할게 늘었는데
배우고나서 편함이 너무커서 만족도가 엄청나요
안 해보신 분들은 한번 해보세요.
(이 긁을 읽으실분들은 이미 git은 가볍게 다루실거라 생각해서 생략했습니다.)


