바이브코딩 101

10분 만에 만드는 캠핑 용품 검색

전체 프롬프트 보기

내 컴퓨터에서 캠핑 용품 검색 실습을 처음부터 끝까지 진행해줘. 필요한 터미널 명령은 모두 네가 실행하고, 나는 완료 결과와 검색 화면 주소만 확인할 수 있게 해줘. 실습 파일은 UQA 사이트에서 직접 다운로드해 사용해. - 실행 파일: https://uqa-landing.vercel.app/tutorials/camping-search/camping-search.mjs - 상품 CSV: https://uqa-landing.vercel.app/data/camping-products.csv - 상품 임베딩: https://uqa-landing.vercel.app/playground-embeddings.ko.bin - 임베딩 정보: https://uqa-landing.vercel.app/playground-embeddings.ko.meta.json - 다른 출처의 데이터로 대체하거나 새로운 샘플 데이터를 생성하지 않기 1. 환경 확인 - `uqa --version`, `uqa --help`, `uqa local --help`, `uqa local db --help` 실행 - 운영체제가 macOS Apple Silicon 또는 Linux arm64·x86-64인지 확인 - Node.js 20 이상인지 확인 - 지원 조건이 다르면 파일을 변경하기 전에 중단하고 필요한 조치 알려주기 2. UQA와 스킬 준비 - UQA가 없으면 `curl -fsSL https://releases.uqa-cloud.cognica.io/install.sh | sh`로 설치 - `uqa llm install skills --agent all --scope user --output json` 실행 - 새 터미널 환경에서 `uqa --version`이 정상 출력되는지 확인 3. 실습 폴더와 실행 파일 준비 - 현재 작업 폴더에 `camping-search` 폴더 준비 - 기존 폴더나 파일이 있으면 내용을 먼저 확인하고 임의로 덮어쓰지 않기 - `package.json`이 없을 때만 `npm init -y` 실행 - `npm install @huggingface/transformers@3.8.1` 실행 - 실행 파일 URL에서 `camping-search.mjs`를 직접 다운로드하고, 같은 이름의 파일 내용이 다르면 덮어쓰기 전에 알려주기 4. 로컬 프로젝트 준비 - `shop-search` 프로젝트가 없으면 `uqa local db create shop-search --output json` 실행 - 프로젝트가 있으면 삭제하거나 다시 생성하지 말고 상태 확인 후 필요한 경우 시작 - `uqa local db status shop-search --output json`과 `uqa local db doctor shop-search --output json`으로 ready와 healthy 확인 5. 임베딩 모델 준비 - `node camping-search.mjs model` 실행 - Xenova/bge-m3 q8 모델 약 600MB를 다운로드하고 `모델 준비 완료: 1024차원` 출력 확인 6. 캠핑 용품 데이터 적재 - 적재 전에 `shop-search`의 `camping_products` 테이블과 기존 상품 확인 - 기존 상품이 있으면 삭제하지 말고 이 실습 데이터인지 확인하고, 구분할 수 없으면 적재 전에 알려주기 - `node camping-search.mjs load` 실행 - 실행 파일이 위 UQA 사이트의 상품 CSV, 상품 임베딩, 임베딩 정보를 직접 다운로드하는지 확인하고 다른 파일로 대체하지 않기 - 파일 해시 검증 후 `상품 적재 2000/2000`과 `적재 완료: 2000개` 출력 확인 7. 검색 확인 - `node camping-search.mjs search "겨울에도 따뜻한 침낭"` 실행 - `node camping-search.mjs search "추운 텐트에서 자는 동안 체온을 지켜주는 장비"` 실행 - 첫 검색에서 `동계용 사각 침낭`이 먼저 표시되는지 확인 - 두 번째 검색에서 상위 다섯 상품이 모두 침낭류인지 확인 8. 재시작 확인 - `uqa local db restart shop-search --output json`으로 `shop-search`를 재시작한 뒤 첫 검색 다시 실행 - 상품과 검색 색인이 유지되는지 확인 9. 검색 화면 실행 - `node camping-search.mjs serve`를 지속 세션에서 실행하고 서버를 종료하지 않기 - `http://127.0.0.1:4173` 접속 가능 여부 확인 - 포트가 이미 사용 중이면 사용 가능한 로컬 포트로 실행하고 주소 알려주기 - 가능하면 브라우저에서 검색 화면 열기 안전 조건 - UQA Cloud를 사용하지 말고 로컬 프로젝트로만 진행 - 기존 프로젝트, 테이블, 상품 데이터, 작업 파일 삭제 금지 - 기존 파일을 덮어쓰거나 기존 데이터의 용도를 확인할 수 없으면 먼저 알려주기 - 접속 토큰, 환경 변수, 인증 정보는 출력하거나 소스 코드, 브라우저 저장소, `.env` 파일에 기록하지 않기 - 상품 원문 전체나 대량의 임베딩 데이터는 화면에 출력하지 않기 - 오류가 발생하면 명령만 안내하고 끝내지 말고 기존 데이터를 유지하는 범위에서 원인을 확인하고 재시도하기 - 삭제나 덮어쓰기가 필요하면 실행하지 말고 내 확인 기다리기 작업을 마치면 운영체제와 Node.js 확인 결과, UQA 버전, 프로젝트 상태, 모델 차원, 적재 건수, 검색어별 상위 결과, 재시작 확인 결과, 검색 화면 주소를 짧게 정리해줘.

실습 전 준비

캠핑 용품 2,000개를 로컬 UQA에 저장하고 검색 화면까지 실행합니다. 임베딩 모델 약 600MB를 처음 내려받는 과정도 포함해요.

확인 항목실습 기준
운영체제macOS Apple Silicon 또는 Linux arm64·x86-64
Node.js20 이상
임베딩 모델최초 준비 시 약 600MB 다운로드 · 다음 실행부터 재사용
UQA로컬 프로젝트 사용 · Cloud 계정 불필요

이 컴퓨터에서 캠핑 용품 검색 실습을 진행할 수 있는지 확인해줘 - 운영체제가 macOS Apple Silicon 또는 Linux arm64·x86-64인지 확인 - Node.js가 20 이상인지 확인 - UQA 설치 여부와 버전 확인 - 지원 조건이 다르면 파일을 변경하기 전에 알려줘

1 · UQA 설치 확인

UQA와 UQA 사용법 스킬을 설치합니다. 이미 설치했다면 버전 확인만 실행하면 돼요.

UQA 설치하고 클로드와 코덱스에 UQA 스킬도 설치해줘 - 설치 명령: curl -fsSL https://releases.uqa-cloud.cognica.io/install.sh | sh - 스킬 명령: uqa llm install skills --agent all --scope user --output json - 끝나면 `uqa --version` 결과를 보여줘

클로드·코덱스가 실행할 설치 명령 보기
curl -fsSL https://releases.uqa-cloud.cognica.io/install.sh | sh
uqa llm install skills --agent all --scope user --output json
uqa --version

--version은 설치한 버전을 물어보는 옵션입니다. 터미널은 uqa 0.1.52처럼 프로그램 이름과 버전 숫자를 표시해요. 버전 숫자는 설치한 시점에 따라 달라집니다. command not found: uqa가 나오면 설치할 때 안내한 실행 경로가 아직 이 터미널에 적용되지 않은 상태예요. 터미널을 새로 실행하고 같은 명령을 다시 실행하면 됩니다.

2 · 로컬 프로젝트 생성

shop-search라는 로컬 프로젝트를 생성합니다. 로컬 프로젝트는 이 컴퓨터에서만 연결되며 계정 등록이나 별도 서버가 필요하지 않아요.

`shop-search`라는 UQA 로컬 프로젝트를 생성해줘 - `uqa local db create shop-search --output json` 실행 - 생성 후 `uqa local db status shop-search --output json`과 `uqa local db doctor shop-search --output json` 확인 - 프로젝트가 이미 있으면 삭제하지 말고 `uqa local db start shop-search --output json` 실행 - ready와 healthy인지 알려줘

클로드·코덱스가 실행할 프로젝트 명령 보기
uqa local db create shop-search --output json
uqa local db status shop-search --output json
uqa local db doctor shop-search --output json

상태 출력에서 stateready, healthhealthy면 다음 단계로 넘어갑니다. 둘 중 하나라도 다르면 프로젝트가 아직 실행되지 않은 상태예요. 클로드나 코덱스에게 프로젝트를 다시 실행해 달라고 요청하고, statehealth가 각각 readyhealthy로 바뀌는지 확인하세요.

3단계에서 준비하는 실행 파일(camping-search.mjs)은 UQA CLI에서 연결 주소와 토큰을 메모리로만 읽습니다. 접속 토큰을 소스 코드, 브라우저 저장소, .env 파일에 기록하지 않습니다.

3 · 실습 파일과 모델 준비

실습에 사용하는 실행 파일은 camping-search.mjs 하나입니다. Node.js로 실행하는 스크립트 파일이고, 이 파일로 실습 데이터 다운로드부터 검증, 데이터 분할 적재, 검색, 검색 화면 실행까지 전 과정을 처리합니다. 캠핑 용품 2,000개의 임베딩이 미리 포함되어 있어, 상품 설명을 임베딩으로 변환하는 과정을 건너뜁니다.

임베딩은 상품 설명을 의미 검색이 비교할 수 있는 숫자 목록으로 바꿔 둔 데이터입니다. 상품 2,000개를 직접 변환하려면 모델이 설명을 2,000번 읽어야 해서 시간이 오래 걸려요. 이 실습에서 확인할 것은 변환 과정이 아니라 검색 결과라서, 상품 임베딩은 미리 변환해 제공합니다. 다만 검색어는 입력할 때마다 새로 변환해야 하므로 모델 다운로드는 그대로 필요합니다.

캠핑 검색 실행 파일 확인하기캠핑 용품 2,000개 CSV 확인하기

클로드나 코덱스가 실습 폴더, 실행 파일, 임베딩 패키지를 준비합니다. 모델 다운로드와 1,024차원 확인까지 한 요청으로 진행해요.

캠핑 용품 검색 실습에 필요한 파일과 임베딩 모델을 준비해줘 - 현재 작업 폴더에 `camping-search` 폴더 준비 - 기존 폴더나 파일이 있으면 내용을 확인하고 덮어쓰기 전에 알려주기 - Node.js 프로젝트가 없을 때만 초기화 - `@huggingface/transformers` 3.8.1 설치 - `https://uqa-landing.vercel.app/tutorials/camping-search/camping-search.mjs` 실행 파일 직접 다운로드 - 실행 파일로 `Xenova/bge-m3` q8 모델 준비 - CLS pooling, 정규화, 검색어 임베딩 1,024차원 확인 - 끝나면 준비한 파일과 확인 결과 알려주기

클로드·코덱스가 실행할 준비 명령 보기
mkdir camping-search
cd camping-search
npm init -y
npm install @huggingface/transformers@3.8.1
curl -fsSLO https://uqa-landing.vercel.app/tutorials/camping-search/camping-search.mjs
node camping-search.mjs model
  • Xenova/bge-m3 q8 약 600MB 최초 다운로드

  • CLS pooling과 정규화 적용

  • 검색어 임베딩 1,024차원 확인

마지막에 모델 준비 완료: 1024차원이 출력되면 준비가 끝납니다. 모델 파일은 ~/.cache/transformersjs에 저장되며 다음 실행부터 재사용해요. 다운로드가 중단됐다면 같은 명령을 다시 실행하면 됩니다.

4 · 캠핑 용품 2,000개 적재

적재 명령은 CSV, 상품 임베딩, 메타데이터를 내려받고 파일 해시를 검증합니다. CSV의 BOM과 따옴표를 처리한 뒤 상품을 12개씩 전송하므로 한 요청의 크기가 커져 실패하는 일을 방지해요.

캠핑 용품 2,000개를 `shop-search`에 적재해줘 - 적재 전에 기존 `camping_products` 테이블과 상품 확인 - 기존 상품이 있으면 삭제하지 말고 이 실습 데이터인지 확인 - 실행 파일의 load 작업으로 UQA 사이트의 CSV와 임베딩 파일 직접 다운로드 및 해시 검증 - 기존 `camping_products` 데이터는 내 확인 없이 삭제하지 않기 - 적재 뒤 UQA의 상품 수와 CSV 행 수 비교 - 2,000개가 일치하면 완료 결과를 알려주고, 다르면 기존 데이터를 유지한 채 원인 확인

클로드·코덱스가 실행할 적재 명령 보기
node camping-search.mjs load

실행 파일은 같은 ID의 상품을 갱신하는 방식으로 적재합니다. 명령을 다시 실행해도 상품 2,000개가 중복으로 증가하지 않아요.

products.csv 한 줄

1, 머미형 구스다운 슬리핑백,

영하 15도 혹한기 야영용

테이블 한 행

id · name · description

search_text · embedding

한 행에 본문과 벡터를 함께 저장해요

색인 두 개

gin(search_text)

글자가 일치하는 문서

hnsw(embedding)

뜻이 가까운 문서

CSV 한 행의 상품명과 설명을 검색 텍스트로 합치고, 같은 상품의 임베딩을 한 행에 저장합니다. 단어 검색용 GIN 색인과 의미 검색용 HNSW 색인을 각각 구성해요.

실행 파일이 구성하는 테이블과 색인
CREATE TABLE IF NOT EXISTS camping_products (
  id          INTEGER PRIMARY KEY,
  name        TEXT NOT NULL,
  description TEXT NOT NULL,
  search_text TEXT NOT NULL,
  embedding   VECTOR(1024) NOT NULL
);

CREATE INDEX IF NOT EXISTS camping_products_search_gin
ON camping_products USING gin (search_text)
WITH (analyzer = 'standard_cjk');

CREATE INDEX IF NOT EXISTS camping_products_embedding_hnsw
ON camping_products USING hnsw (embedding);

진행 숫자가 상품 적재 2000/2000에 도달하고 적재 완료: 2000개가 출력돼야 합니다. 실행 파일은 적재 직후 UQA에서 상품 수를 다시 조회해 CSV 행 수와 비교해요.

6 · 검색 화면 실행

제공한 실행 파일에는 검색창과 결과 목록이 포함돼 있습니다. 로컬 웹 서버는 127.0.0.1에서만 연결을 허용하고, UQA 접속 토큰과 임베딩 모델은 서버 프로세스 안에서 관리해요. 포트는 기본 4173을 사용하고, 이미 사용 중이면 빈 포트를 찾아 실행한 주소를 알려줍니다.

구간역할
브라우저검색어 전송 · 상품명과 설명 표시
로컬 Node.js 서버검색어 임베딩 생성 · UQA 질의 실행
로컬 UQA상품 저장 · 단어 검색과 의미 검색 · 최종 정렬

캠핑 용품 검색 화면을 실행해줘 - 실행 파일의 검색 화면 서버 실행 - 작업을 계속할 수 있도록 서버 프로세스 유지 - 실행 파일이 알려주는 주소로 접속되는지 확인 - 가능하면 브라우저에서 검색 화면 열기 - `겨울에도 따뜻한 침낭`을 검색해 상품 다섯 개가 표시되는지 확인 - 사용할 준비가 끝나면 검색 화면 주소와 확인 결과 알려주기

클로드·코덱스가 실행할 화면 명령 보기
node camping-search.mjs serve

클로드나 코덱스가 검색 화면 주소를 알려주면 브라우저에서 상품명, 설명, 검색 점수 다섯 개를 확인합니다.

`camping-search.mjs`에서 검증한 검색을 지금 개발 중인 앱의 검색 화면에 연결해줘 - 검색어 임베딩은 앱 서버에서 생성 - UQA 연결 정보와 토큰은 브라우저에 전달하지 않기 - 단어 검색과 의미 검색이 모두 실패하면 오류 원인 표시 - 결과에는 상품명, 설명, 검색 점수 표시

7 · 완성 확인

다음 네 항목을 확인하면 10분 실습 구간이 끝납니다.

  1. camping_products에 상품 2,000개 저장

  2. 겨울에도 따뜻한 침낭 검색에서 동계용 침낭 우선 표시

  3. 상품명과 표현이 다른 질의에서도 침낭류 다섯 개 표시

  4. UQA 재시작 후 같은 검색 결과 반환

캠핑 용품 검색 실습이 재시작 뒤에도 동작하는지 확인해줘 - `uqa local db restart shop-search --output json`으로 `shop-search` 재시작 - 상품 2,000개가 유지되는지 확인 - `겨울에도 따뜻한 침낭` 검색 다시 실행 - 재시작 전과 같은 상품이 먼저 표시되는지 비교 - 상품 데이터와 색인은 삭제하거나 다시 적재하지 않기 - 확인 결과를 항목별로 알려줘

클로드·코덱스가 실행할 검증 명령 보기
uqa local db restart shop-search --output json
node camping-search.mjs search "겨울에도 따뜻한 침낭"

UQA를 재시작한 뒤에도 같은 상품을 검색할 수 있으면 데이터와 색인이 로컬 프로젝트에 유지된 것입니다.

체험하기에서 검색 화면 살펴보기

내 상품 데이터로 교체

실제 상품 CSV를 적용할 때는 상품 ID, 상품명, 설명을 먼저 정리합니다. 상품 설명과 검색어에 같은 임베딩 모델, pooling, 정규화, 1,024차원 설정을 적용해야 해요.

`camping-search.mjs`를 내 상품 CSV에 맞게 수정해줘 - CSV 컬럼을 먼저 확인하고 id, 상품명, 설명 컬럼을 연결 - BOM과 따옴표가 있는 CSV 처리 - 상품명과 설명을 합쳐 Xenova/bge-m3 q8, CLS pooling, normalize로 임베딩 생성 - 튜토리얼과 같은 모델 revision 고정 - VECTOR(1024)와 차원 확인 - 한 요청에 모든 행을 보내지 말고 작은 묶음으로 적재 - 저장 건수와 원본 행 수 비교 - 기존 `camping_products` 데이터는 내 확인 없이 삭제하지 않기

실제 상품의 임베딩 생성 시간은 상품 수와 컴퓨터 성능에 따라 달라집니다. 먼저 상품 20개로 적재와 검색을 확인한 뒤 같은 코드를 전체 파일에 적용해요.

문제 해결

화면에 표시된 내용클로드·코덱스에 요청하기
UQA 명령을 찾지 못함UQA 명령을 찾지 못한다고 나와. UQA 설치 상태와 터미널 경로를 확인하고 사용할 수 있게 해결해줘
shop-search가 준비되지 않음shop-search가 준비되지 않았다고 나와. 프로젝트 상태와 진단 결과를 확인하고 다시 실행해줘. 기존 프로젝트와 상품 데이터는 삭제하지 마
임베딩 패키지가 없음임베딩 패키지가 없다고 나와. @huggingface/transformers 3.8.1을 설치하고 모델 준비까지 확인해줘
모델 다운로드 중단임베딩 모델 다운로드가 중단됐어. 기존 다운로드 상태를 확인하고 다시 진행한 뒤 1,024차원인지 확인해줘
적재 건수가 2,000개와 다름상품 적재 건수가 2,000개와 달라. 기존 상품을 삭제하지 말고 CSV 행 수와 UQA 저장 건수를 비교해 원인을 해결한 뒤 다시 확인해줘

UQA 질의 오류에는 오류 코드와 요청 ID가 표시됩니다. 오류 코드와 요청 ID를 클로드나 코덱스에 전달하면 로컬 프로젝트 상태와 최근 로그를 함께 확인할 수 있어요.

캠핑 검색 실습이 중단됐어. 원인을 확인하고 중단된 작업부터 다시 진행해줘 - 화면에 표시된 오류 코드와 요청 ID 확인 - `uqa local db status shop-search`로 상태 확인 및 `uqa local db doctor shop-search`로 진단 결과 확인 - `uqa local db logs shop-search`의 최근 로그에서 같은 요청 ID 확인 - 접속 토큰과 상품 데이터는 출력하지 않기 - 기존 프로젝트와 상품 데이터는 삭제하지 않기 - 해결에 필요한 작업을 진행하고 실습이 다시 동작하는지 확인 - 끝나면 원인, 변경한 내용, 최종 확인 결과를 알려줘

GitHub에서 오류 제보하기