AI Studio + Claude code 조합으로 의료 AI 앱 만들어본 후기

배운 점

• AI Studio로 초안 만들고 Claude로 리팩토링하는 방식이 저한테는 잘 맞았습니다.

• 자동화가 잘 안 되면 반자동화로 빠지는 것도 방법인 것 같아요.

• 전처리 여러 개 쌓는 것보다 하나만 쓰는 게 나을 때도 있었습니다.

시행착오

시도

결과

최종

Gemini + OpenCV 자동 영역 인식

인식률 실패

수동 4점 지정

여러 이미지 전처리

더 이상해짐

CLAHE만 사용

QFormer 토큰으로 Heatmap

공간 정보 섞임

ELIXR GradCAM

localhost:8000 직접 호출

모바일에서 실패

Vite Proxy (/api)

앞으로 해보고 싶은 것

• 나이/성별 추정 같은 추가 기능 - 안되더라구요 ㅠㅡㅠ

• PWA로 오프라인 지원

• CT나 MRI로 확장

Vite Proxy로 모바일 접속 문제 해결

Cloudflare Tunnel로 외부 접속은 됐는데, 모바일에서 API 호출이 안 되는 문제가 있었습니다.

원인은 프론트엔드 코드에서 백엔드를 localhost:8000으로 호출하고 있었기 때문이에요. PC에서는 문제없지만, 스마트폰 입장에서 localhost는 스마트폰 자신을 가리키니까 당연히 안 되죠.

[스마트폰] → [Cloudflare Tunnel] → [localhost:3000 Frontend]
                                         ↓
                                   fetch('localhost:8000')  ← 여기서 실패!
                                   (스마트폰의 localhost를 찾음)

해결책은 Vite Proxy입니다. Vite 개발 서버가 중간에서 API 요청을 대신 전달해주는 거예요.

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

이제 프론트엔드에서 localhost:8000/analyze 대신 /api/analyze로 호출하면, Vite 서버가 받아서 백엔드로 전달합니다.

[스마트폰] → [Tunnel] → [Vite:3000] → /api/analyze
                              ↓
                        [Backend:8000] /analyze  ← 성공!

쉽게 말하면, 학생(스마트폰)이 직접 도서관(백엔드)에 갈 수 없을 때, 선생님(Vite)한테 "이 책 가져다주세요"라고 부탁하는 거예요. 선생님은 도서관에 갈 수 있으니까 대신 가져다주는 거죠.