AI 기반 개발 프로세스 구축을 통한 Payload 247배 최적화 달성

I Used AI for 90% of my Portfolio Website — Am I Cheating?

Alex Rebula2026년 4월 19일4분intermediate

AI 요약

Context

AI 도구(Claude, Copilot)를 활용한 포트폴리오 사이트 구축 과정에서 발생하는 코드 품질 저하 및 아키텍처 일관성 결여 문제 발생. AI의 일반적인 제안이 기존 프로젝트의 설계 패턴을 무시하여 불필요한 의존성 증가와 런타임 오류를 유발하는 상황 분석.

AI 생성 코드의 무분별한 수용 방지를 위해 Markdown 기반의 상세 TODO 리스트와 Vitest를 통한 검증 프로세스 도입
Iconify 라이브러리의 대규모 JSON 패키지 임포트 대신 프로젝트 내 정의된 inline SVG strings 패턴을 강제하여 번들 크기 최소화
AI가 간과한 SVG viewBox 메타데이터 누락 문제를 해결하기 위해 렌더링 규격(24x24)을 명시한 register-icons.ts 구조 설계
JSX 속성뿐만 아니라 TypeScript 데이터 객체 내 문자열 리터럴까지 스캔하는 커스텀 감사 로직을 통해 아이콘 누락 제로화 달성
오답 패턴 발견 시 이를 방지하기 위한 Regression Test를 작성하여 설계 일관성 유지 및 재발 방지 체계 구축

실천 포인트

1. AI 제안 솔루션이 프로젝트의 기존 Design Pattern과 일치하는지 우선 검증했는가?

2. 외부 라이브러리 도입 시 실제 사용량 대비 Payload 증가분이 적절한지 정량적으로 분석했는가?

3. AI가 생성한 로직의 Edge case(예: 메타데이터 누락, 데이터 타입 불일치)를 검증할 테스트 코드를 작성했는가?

4. 잘못된 패턴의 재발 방지를 위한 Regression Test가 설계에 포함되었는가?

태그