노코드 앱에 OCR 붙이기: 인테그레이션 한 번, 백엔드 코드 0줄

이번 주 해커뉴스에 "OCR It"이라는 짧은 글이 올라왔습니다. PDF나 스캔본에서 텍스트를 뽑아 LLM이 읽을 수 있게 만드는 도구입니다. 단순한 아이디어지만 수요는 큽니다. 세상에 쓸모 있는 데이터의 절반은 여전히 PDF, 스캔 이미지, 스크린샷 안에 갇혀 있고 Cmd+C가 되지 않기 때문입니다.

비즈니스 앱을 만들다 보면 이 문제와 반드시 마주칩니다. 사용자가 영수증을 올립니다. 세금 서류를 올립니다. 2004년 복사기로 스캔된 오래된 인보이스가 들어옵니다. 이걸 앱이 읽어주거나, 아니면 사용자가 다시 타이핑해야 합니다.

DontCode에서 OCR을 붙이는 방법입니다. 백엔드 코드는 쓰지 않습니다.

1단계: 인테그레이션 추가

프로젝트에서 Integrations로 들어갑니다. New Integration을 누르고 OCR 프로바이더를 고릅니다. Google Cloud Vision, AWS Textract, Mindee 모두 HTTP API가 간단하고 가입 즉시 키가 나옵니다.

DontCode는 세 가지만 물어봅니다. 이름 (예: "OCR"), 베이스 URL (프로바이더 API 루트), 그리고 자격 증명입니다. API 키를 자격 증명 칸에 붙여 넣으면 pgcrypto로 암호화되어 저장되고, UI에서는 다시 열어볼 수 없습니다. 배포 시점에 INTEGRATION_OCR_API_KEY라는 환경 변수로 앱에 주입됩니다.

2단계: 코드 대신 의도를 씁니다

인테그레이션에 아웃바운드 함수를 하나 추가합니다. 코드를 쓰는 대신 의도(intent)를 문장으로 적습니다. 예를 들면 이렇습니다.

{ fileUrl }로 호출되면 파일을 내려받아 프로바이더의 OCR 엔드포인트로 POST하고 { text, confidence }를 반환합니다.

DontCode 빌드 에이전트가 이 문장을 실제 함수 파일로 만들어 줍니다. 나중에 의도를 바꾸면 코드도 다시 생성됩니다. Stack Overflow에서 복붙할 일도, 의존성 버전 문제도, CORS 삽질도 없습니다.

3단계: 페이지에 연결

App 채팅을 열고 이렇게 입력합니다. "영수증을 업로드하는 페이지를 만들어 주세요. 업로드가 끝나면 OCR 함수를 호출해서 텍스트를 표시하고, 그 옆에 receipts 테이블에 저장하는 Save 버튼을 두세요."

이게 프롬프트 전부입니다. DontCode가 스토리지(프라이빗 버킷, 서명 URL)를 쓰고, 방금 만든 OCR 함수를 호출하고, 결과를 DB에 연결하고, 빌드가 끝나면 Todo List에 페이지를 얹어 줍니다. 리뷰하고, 마음에 드는 부분은 두고, 별로면 롤백하면 됩니다.

이 패턴은 그대로 확장됩니다

대부분의 인테그레이션이 같은 세 단계입니다. 자격 증명, 의도 하나, 페이지 하나. 카카오페이, 슬랙, 배송 API, 신원 확인 서비스처럼 REST 엔드포인트가 있는 건 다 이 흐름을 따릅니다. OCR을 붙일 줄 알면 나머지도 붙일 줄 아는 것입니다.

AI 앱에서 재미있는 부분은 LLM 호출이 아니라 그 주변 배선입니다. DontCode는 그 배선을 사람 대신 정리해 주는 도구입니다. 설정은 줄이고, 출시는 빠르게.

dontcode.co에서 써보세요. 더 많은 튜토리얼은 블로그에서 볼 수 있습니다.