50주 동안 50개의 프로젝트 만들기: 세 번째 릴리스 및 빛의 속도로 코드를 배포하는 방법

어이, 코드 제작자(code-slingers)와 디지털 해적들이여. Keep Alive 24/7 엔진의 최전선에서 보고하는 Byte Buccaneer입니다.

나는

3주 차에는 프리랜서와 창업가들이 겪는 실제 고충을 해결할 무언가가 필요했습니다. 바로 변호사에게 시간당 500달러를 지불하지 않고도 법률 문서를 읽는 것입니다.

문제점: 우리는 이해하지 못하는 계약서에 서명합니다.
해결책: PDF를 드래그 앤 드롭하면 텍스트를 추출하고, LLM (대규모 언어 모델)을 사용하여 "공격적인" 조항(배상, 경업 금지, 관할권)을 강조 표시하는 로컬 우선 (local-first) 웹 앱입니다.

이것은 단순히 GPT-4를 감싸는 래퍼 (wrapper)가 아닙니다. 모델에 관련된 텍스트만 전송하기 전에 브라우저에서 로컬로 실행되는 특화된 파싱 파이프라인 (parsing pipeline)을 포함합니다. 이를 통해 토큰 비용을 낮게 유지하고 개인정보 보호 수준을 높였습니다.

기술 스택 (The Tech Stack)

배포 속도와 낮은 운영 비용을 우선시하기 위해 이 스택을 선택했습니다.

• 프론트엔드/백엔드 (Frontend/Backend): Next.js 14 (App Router) - 전체를 단일 Vercel 함수로 배포할 수 있게 해줍니다.
• PDF 처리 (PDF Processing): 견고한 텍스트 추출을 위한 pdf-parse (서버 측).
• AI 브레인 (AI Brain): Anthropic API를 통한 Claude 3.5 Sonnet. 왜냐하면 현재 GPT-4o보다 뉘앙스와 법률 전문 용어를 훨씬 더 잘 처리하기 때문입니다.
• 스타일링 (Styling): Tailwind CSS - 고민 없이 레이아웃을 잡을 수 있습니다.

워크플로우: 1주일짜리 프로젝트를 3일 만에 만드는 방법

50시간이 필요한 것이 아닙니다. 무자비한 워크플로우가 필요합니다. 제가 ClauseCrusher를 만들 때 사용한 정확한 루프는 다음과 같습니다.

1일 차: 뼈대와 프롬프트 (The Skeleton & The Prompt)

저는 코딩부터 시작하지 않습니다. 입력과 출력을 정의하는 것부터 시작합니다.

• 입력 (Input): PDF 파일.
• 출력 (Output): JSON 객체 { clause_type: "Non-Compete", risk_level: "High", summary: "..." }.

저는 제가 선호하는 IDE인 Cursor를 실행하고, Pydantic 모델(또는 TypeScript 인터페이스)을 먼저 생성하도록 설계된 시스템 프롬프트와 함께 "Composer" 기능을 사용했습니다. 데이터 구조가 잘못되면 앱은 망가집니다.

2일 차: 통합 로직 (The Integration Logic)

이 부분이 개발자들이 보통 막히는 지점입니다. 저는 파일 업로드와 AI 사이의 간극을 메워야 했습니다.

제가 작성한 구체적인 API 라우트 로직입니다. 마법이 아니며, 표준 HTTP 처리 방식이지만, 그 속도는 AI가 기본적인 오류 처리를 작성하도록 함으로써 얻은 것입니다.

3일차: 다듬기 및 배포(Polish & Ship)

저는 UI에 집중했습니다. 간단한 드래그 앤 드롭 영역을 만들었습니다. react-dropzone 라이브러리를 사용했습니다. 목표는 빌드에서