레퍼런스 AI웹서비스 제작노트 -6 | 당근처럼 사진 검수 후 AI가 채우기

5편에서 예고한 직접 올리기
 
자동 수집으로 안 잡히는 섹션이 꼭 있다.
로그인해야 보이는 화면, 팝업, 캡처가 막힌 사이트 같은 것들.
그래서 내가 직접 올리는 기능을 만들었다.

 
처음 버전은 이랬다.
캡처 올리고 → 카테고리 고르고 → 메모 쓰고 → 태그 달고.
하나 올리는 데 1분.
열 개 올리니까 벌써 지겹다 😅😅😅😅😅
이러면 결국 안 올리지..
그때 생각난 게 당근이었다.
당근은 사진만 올리면 카테고리랑 제목을
알아서 추천해준다.
나는 확인만 하고 고칠 것만 고치면 된다.
사람이 쓰고 AI가 돕는 게 아니라
AI가 쓰고  사람이 확인하는 ㅎㅎ

1. 3단계

• 캡처를 끌어다 놓거나 Ctrl+V
• 이미지가 들어가는 순간 AI(Haiku)가 보고 카테고리·메모·태그를 채움
• 나는 사이트 주소만 넣고, 틀린 데만 고쳐서 저장

입력칸이 비어 있다가 스르륵 채워지는 게 은근 짜릿하다 ㅋㅋ
하나 올리는 데 1분 → 10초.
 

2. 붙여넣기는 생각보다 간단

window.addEventListener('paste', (e) => {
  const file = [...e.clipboardData.items]
    .find((item) => item.type.startsWith('image/'))
    ?.getAsFile();

  if (file) handleUpload(file);
});

 
캡처 도구로 찍고 → 관리자 화면에서 Ctrl+V.
파일로 저장할 필요도 없다.
 

3. 핵심은 프롬프트

AI한테  이건 무슨 섹션이야? 하고 열어두면
내 카테고리에 없는 이름을 지어서 온다.
'히어로 배너', '메인 슬라이드', '키 비주얼'... 다 같은 건데 이름만 제각각.
그래서 카테고리 목록을 통째로 주고 그 안에서만 고르게 했다.
답은 무조건 JSON으로.

이 이미지는 국내 웹사이트의 한 섹션 캡처야. 아래 카테고리 중 하나만 골라.

[카테고리 목록]
header, main-visual, service-intro, product-list, review, footer ...

JSON으로만 답해: {
  "category": "목록 중 하나",
  "memo": "디자이너가 참고할 포인트 한 줄",
  "tags": ["태그1", "태그2", "태그3"]
}

 

메모는 "무슨 섹션인지"가 아니라
”디자이너가 뭘 참고하면 좋은지"로 쓰라고 했다.
그래야 나중에 레퍼런스로 볼 때 쓸모가 있다.
 

4. 이미지 보내는 코드

이미지를 base64로 바꿔서 텍스트랑 같이 보내면 끝.

const res = await anthropic.messages.create({
  model: 'claude-haiku-...',
  max_tokens: 300,
  messages: [{
    role: 'user',
    content: [
      { type: 'image', source: { type: 'base64', media_type: 'image/webp', data: base64 } },
      { type: 'text', text: prompt },
    ],
  }],
});

const result = JSON.parse(res.content[0].text);
form.category = result.category;
form.memo = result.memo;
form.tags = result.tags;

 
API 키는 브라우저에 두면 안 되니까 이 부분은 꼭 서버(API 라우트)에서 돌렸다.

 

5. Haiku

빠르고 싸다.
이미지 넣고 기다리는 시간이 길면 자동완성의 맛이 없다. 섹션 분류 정도는 Haiku로 충분했다.
 

6. 안전장치 두 개

• AI가 채운 건 제안일 뿐, 저장은 내가 누른다. 틀리면 그 자리에서 고치기
• 직접 올린 건 재수집을 돌려도 안 지워진다. 4편의 '직접 고친 건 안 덮어쓴다'랑 같은 원칙.
  사람 손이 한 번 간 데이터는 자동화가 건드리면 안 된다.

 

7. 어디에나 쓸 수 있음

 
만들고 나서 알았는데 ㅎㅎ
이건 레퍼런스 사이트만의 기능이 아닌거 같다

• 쇼핑몰 관리자: 상품 사진 넣으면 카테고리·설명 초안
• 포트폴리오: 작업 이미지 넣으면 태그·한 줄 설명
• 수업 자료: 과제 캡처 넣으면 피드백 포인트 초안

입력이 귀찮아서 안 쓰게 되는 관리자 화면이 있다면
사진 하나로 나머지를 채우게 바꿔보는걸 추천해봅니다
바이브코딩으로 만든 기능 중에 체감 효과는 이게 제일 큰 듯
 
 
지금은 15페이지까지 수집 범위를 늘리는 중이다.
다음 편은 수집량을 확 늘렸을 때 생긴 일들.
(이미 하나 터졌다 😅)
직접 올리기로 넣은 섹션들도 베타에서 볼 수 있음!
도메인변경 
https://ref.jjinmango.kr/