콘텐츠
포트폴리오 사이트를 AI 코딩 에이전트로 제작하기
AI 코딩 에이전트로 HTML, CSS, JS 기반 포트폴리오 사이트를 제작하는 과정을 소개해요.
Claude Code
사용법
- 사이트에 필요한 기능과 디자인 요소를 정리해요.
- HTML, CSS, JavaScript로 기본 구조와 스타일을 설계해요.
- AI 코딩 에이전트(Claude Code)에 규칙 파일과 의사결정 로그를 제공해 단계별로 코드 리뷰와 커밋을 진행해요.
- 폰트와 SVG 그래픽 등 필요한 리소스를 직접 호스팅해요.
- 접근성, 성능, SEO 기준을 Lighthouse와 WCAG 도구로 점검해요.
- Vercel에 사이트를 배포하고, 링크가 올바르게 작동하도록 설정 파일(vercel.json)을 추가해요.
결과
AI 코딩 에이전트의 도움으로 HTML, CSS, JS만으로 동작하는 포트폴리오 사이트를 완성했다고 해요. 외부 프레임워크나 빌드 도구 없이도, 코드 리뷰와 커밋 과정을 거치며 원하는 기능과 디자인을 구현할 수 있었대요. 접근성, 성능, SEO 점수도 높은 수준으로 나왔대요.
참고사항
작성자는 Claude Code를 코딩 에이전트로 사용했다고 밝혔지만, 실제 코드 생성·수정 과정의 세부 예시는 공개하지 않았어요. 클라이언트 이름 등 민감 정보는 모두 제거했다고 해요. n8n 워크플로우 등 자동화 사례는 별도 폴더에 정리되어 있지만, 이 글에서는 사이트 제작에 초점을 맞췄어요.
출처
직접 해보기 · Claude Code
목표: AI 코딩 에이전트를 활용해 HTML, CSS, JavaScript만으로 동작하는 포트폴리오 사이트를 제작하고, 접근성·성능·SEO 기준을 충족하는 결과물을 완성해 주세요. 입력 및 환경: - 사이트에 포함할 주요 기능, 디자인 요소, 페이지 구조(예: 홈, 작업 사례 등) - 직접 호스팅할 폰트, SVG 그래픽 등 리소스 파일 - 코드 리뷰와 커밋 과정을 기록할 규칙 파일 및 의사결정 로그 - 배포 환경: Vercel 또는 기타 정적 파일 서버 구현 및 설정 순서: 1. 사이트에 필요한 기능과 디자인 요소를 정리해 주세요. 2. HTML, CSS, JavaScript로 기본 구조와 스타일을 설계해 주세요. 3. Claude Code 등 AI 코딩 에이전트에게 규칙 파일과 의사결정 로그를 제공하고, 각 단계별로 코드 리뷰와 커밋을 진행해 주세요. 4. 폰트와 SVG 그래픽 등 필요한 리소스를 직접 호스팅해 주세요. 외부 요청이나 추적 스크립트는 사용하지 마세요. 5. 접근성(예: WCAG AA 대비, 키보드 내비게이션, 스킵 링크), 성능, SEO 기준을 Lighthouse와 WCAG 도구로 점검해 주세요. 6. Vercel에 사이트를 배포하고, 링크가 올바르게 작동하도록 설정 파일(vercel.json)을 추가해 주세요. 결과물: - HTML, CSS, JS 파일과 리소스가 포함된 완성된 포트폴리오 사이트 - 코드 리뷰 및 커밋 로그, 규칙 파일 - Lighthouse 및 WCAG 점검 결과 검증 조건: - 외부 프레임워크나 빌드 도구 없이 동작할 것 - 접근성, 성능, SEO 점수가 90점 이상일 것 - 모든 텍스트 색상 쌍이 WCAG AA 대비 기준을 충족할 것 - 키보드로 스크린샷 뷰어 등 주요 기능을 사용할 수 있을 것