AI 건축 기획설계 서비스 개발 스킬

프로젝트 개요

• 벤치마킹: Flexity (https://flexity.app/)
• 차별점: 무료 + 광고수익 + 사용자 AI API 키
• 배포: Vercel
• 프록시: AWS Lambda (서울 리전)

기술 스택

• Next.js 14+ (App Router)
• TypeScript, Tailwind CSS
• Three.js / React-Three-Fiber (3D)
• Google Gemini API (사용자 키)
• VWorld, 공공데이터포털 API

⚠️ API 호출 필수 규칙

규칙 1: URL 끝 슬래시(/) 필수

// ❌ 404 에러
const URL = 'https://xxx.execute-api.amazonaws.com/prod';

// ✅ 정상
const URL = 'https://xxx.execute-api.amazonaws.com/prod/';

규칙 2: 한글 파라미터는 POST + JSON

// ❌ GET - 인코딩 깨짐
fetch(`${URL}?address=${encodeURIComponent('제주시')}`);

// ✅ POST - 안전
fetch(URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ address: '제주시 도남동 50-11' })
});

규칙 3: Lambda GET/POST 모두 처리

let params = event.queryStringParameters || {};
if (event.body) {
  params = { ...params, ...JSON.parse(event.body) };
}

규칙 4: CORS 헤더 필수

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Content-Type',
  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS'
};

규칙 5: 타임아웃 설정

fetch(url, { signal: AbortSignal.timeout(15000) });

규칙 6: 응답 검증 후 JSON 파싱

if (!res.ok) throw new Error(`API Error: ${res.status}`);
const data = await res.json();

참조 문서

상세 정보는 references 폴더 참조:

• API 상세 규칙: references/api-rules.md
• 건축 기준: references/building-standards.md
• AI 프롬프트: references/ai-prompts.md

프로젝트 구조

/app
  /page.tsx                # 메인 페이지
  /layout.tsx              # 레이아웃 (AdSense)
  /api/analyze/route.ts    # 토지분석 API
/lib
  /constants.ts            # 건폐율/용적률
  /prompts.ts              # AI 프롬프트
/components
  /AddressInput.tsx
  /MassStudyResult.tsx
  /Building3DView.tsx

Git 배포

git add -A && git commit -m "feat: 설명" && git push

디버깅

# Lambda POST 테스트
curl -X POST "https://xxx.amazonaws.com/prod/" \
  -H "Content-Type: application/json" \
  -d '{"type":"geocode","address":"제주시 도남동"}'