[AI 코딩 강의 #13] 사진을 읽는 AI! GPT-4 Vision으로 사물 인식 및 분석기 만들기

👀 AI에게 "이게 뭐야?"라고 물어보세요

지금까지의 AI는 텍스트나 음성 위주였다면, 이제는 이미지를 이해하는 단계로 넘어갑니다. GPT-4 Vision 모델을 사용하면 사진 속에 무엇이 있는지, 글자는 뭐라고 써 있는지, 심지어 사진의 분위기까지 AI가 상세히 설명해 줄 수 있습니다.

오늘의 목표는 사용자가 사진을 업로드하고 질문을 던지면(예: "이 음식의 칼로리는 얼마야?", "이 코드를 설명해줘"), AI가 사진을 분석해 답변해주는 지능형 시각 분석기를 만드는 것입니다.

---

🛠 Step-by-Step: AI 이미지 분석기 구현하기

1단계: 이미지 분석용 UI 설계하기

사진을 올리고 AI의 분석 결과를 보여줄 화면이 필요합니다.

1. Cursor에서 vision-tool.html 파일을 만듭니다.
2. Ctrl + L을 눌러 아래와 같이 요청하세요.
3. "사용자가 이미지를 업로드하고 질문을 입력할 수 있는 화면을 만들어줘. 업로드한 이미지는 화면에 미리보기로 나타나야 하고, 그 옆에 AI의 분석 결과를 보여줄 텍스트 영역을 배치해줘. 전문적인 분석 툴 느낌의 깔끔한 디자인으로 부탁해."

2단계: [핵심] GPT-4 Vision API 연결하기

이미지 데이터를 AI에게 전송하고 답변을 받는 코드를 작성합니다.

1. 자바스크립트 영역에서 Ctrl + K를 누르고 아래와 같이 입력하세요.
2. "OpenAI의 gpt-4o 모델을 사용하여 이미지를 분석하는 analyzeImage 함수를 작성해줘. 이미지는 Base64 형식으로 변환해서 API에 전송해야 해. 분석 중에는 '이미지를 분석 중입니다...'라는 메시지를 띄워줘."

• AI의 능력: 이미지를 AI가 이해할 수 있는 디지털 데이터(Base64)로 변환하는 복잡한 과정과, 이미지와 텍스트를 동시에 전송하는 멀티모달(Multimodal) 형식을 Cursor AI가 완벽하게 처리해 줍니다.

728x90

728x90

3단계: 특정 분야 특화 분석 기능 추가

단순한 설명 대신, 특정 목적에 맞는 답변을 하도록 유도해 봅시다.

1. 채팅창(Ctrl + L)에 요청하세요.
2. "사용자가 '칼로리 계산', '코드 해석', '일반 설명' 중 하나를 선택할 수 있는 메뉴를 추가해줘. 선택한 모드에 따라 AI에게 내리는 프롬프트(지시문)가 달라지도록 코드를 짜줘."

---

⚠️ 여기서 다들 막힙니다! (인터넷 검색량 상위 시행착오)

지뢰 1: "이미지 용량이 너무 커서 전송이 안 돼요!"

• 원인: 고화질 사진을 그대로 전송하면 API 전송 용량 제한에 걸리거나 시간이 너무 오래 걸립니다.
• 해결책: AI에게 "이미지를 전송하기 전에 캔버스(Canvas)를 이용해 가로 길이를 최대 800픽셀 정도로 압축해서 전송하는 기능을 추가해줘"라고 요청하세요. 비용도 아끼고 속도도 빨라집니다.

지뢰 2: "분석 결과가 너무 짧거나 엉뚱해요."

• 원인: AI에게 충분한 문맥을 주지 않았기 때문입니다.
• 꿀팁: 프롬프트에 "너는 전문 영양사야" 혹은 "너는 10년 차 개발자야" 같은 페르소나를 부여하고, "이미지를 아주 상세하게 묘사해줘"라는 문구를 추가하면 결과물의 퀄리티가 확 올라갑니다.

---

🎬 오늘 우리는 무엇을 배웠나요?

이제 우리 앱은 시각 정보를 데이터로 변환해 사고하는 수준에 도달했습니다.

• Multimodal AI: 텍스트와 이미지를 동시에 처리하는 기술 이해
• Image Encoding: 파일을 전송 가능한 Base64 데이터로 변환하는 법
• Context Prompting: 목적에 따른 AI 답변 정교화

다음 시간(14강)에는 이 모든 기능들을 엮어서 '업무 자동화'의 끝판왕을 경험해 보겠습니다. "AI가 자동으로 뉴스를 요약해서 이메일로 보내주는 서비스"를 만들어 볼까요? 진정한 수익형 서비스의 뼈대가 될 것입니다!