AI 어시스턴트로 주말에 원페이지 포트폴리오 사이트 만들기: 개발자 가이드
Claude Code 같은 AI 어시스턴트의 도움을 받아 싱글 페이지 포트폴리오 사이트를 개발하는 건 웹 개발의 신선한 접근법입니다. 이 방법으로 외부 전문가를 고용하지 않고도 짧은 시간에 완전한 기능을 갖춘 프로젝트를 만들 수 있어요. 기본적인 HTML/CSS 지식과 프롬프트 엔지니어링 스킬만 있으면 됩니다.
준비 단계: 콘텐츠와 구조 설계
코드를 작성하기 전에 콘텐츠를 모으고 프로젝트 구조를 설계하세요. AI에게 충분한 맥락(채팅 기록, 발표 자료, 프로젝트 설명)을 주면 텍스트 콘텐츠를 생성해줍니다. 자기소개는 짧은 버전, 중간 버전, 상세 버전 세 가지를 요청해 효율을 높이세요.
첫 프롬프트를 보내기 전에 페이지 구조를 확정하세요. 발표자 포트폴리오 사이트를 위한 추천 레이아웃:
- 고정 300px 사이드바
- 섹션으로 구성된 메인 콘텐츠
- 사진과 핵심 정보가 들어간 히어로 섹션
- 자기소개 블록
- 발표 주제 카드
- 성과 섹션(통계 포함)
- 사진 및 비디오 갤러리
- 연락처 정보
프롬프트 작성: 기본 뼈대에서 세밀한 마무리까지
AI 어시스턴트의 황금률: 단계가 아니라 최종 결과를 설명하세요. 첫 프롬프트는 올바른 구조와 의미를 가진 기본 프레임워크를 생성합니다.
효과적인 시작 프롬프트 예시:
발표자를 위한 원페이지 포트폴리오 사이트를 만들어줘.
스타일: 다크 테마(배경 #0a0a0a), Google Fonts Raleway 폰트, 강조 색상 #3182CE.
레이아웃: 두 열. 왼쪽: 고정 300px 사이드바(둥근 사진, 이름, 직함, 소셜 링크). 오른쪽: 메인 콘텐츠 섹션—자기소개, 발표 주제(카드), 성과(통계), 갤러리(사진 그리드), 연락처.
요구사항: 순수 HTML, CSS, 바닐라 JS만 사용. 프레임워크나 외부 의존성 제외, Google Fonts는 예외.기본 뼈대가 나오면 반복적으로 다듬으세요. 각 라운드마다 하나의 구체적인 작업을 처리:
- 타이포그래피와 색상 스키마
- 반응형 디자인
- 인터랙티브 요소
- 애니메이션과 마이크로 인터랙션
기술 구현 세부 사항
반응형 레이아웃과 크로스 브라우저 호환성
모바일 반응형에 특별히 집중하세요. 데스크톱 조정 후 모바일 수정 요청:
모바일(<768px)에서 레이아웃이 깨짐: 사이드바와 콘텐츠가 나란히 배치되고 콘텐츠가 넘침. 수정: 사이드바를 위에 수평 스택(사진과 연락처 행으로), 메인 콘텐츠는 아래 전체 너비.크로스 브라우저 팁:
- Chrome, Safari, Firefox에서 테스트
- CSS 속성에 벤더 프리픽스 추가
- 태블릿(768-1024px) 확인
성능 최적화
시각 요소 완성 후 최적화하세요. 흔한 문제와 해결책:
- 이미지 최적화:
- PNG를 WebP로 변환
- 필요한 크기로 리사이즈
- 지연 로딩 추가
- 리소스 로딩:
- Google Fonts 비동기 로드
- 핵심 에셋 사전 로드
- iframe 로딩 지연
- 성능 지표:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
최적화 프롬프트 예시:
PageSpeed Insights 점수 38점. 문제: 큰 이미지(12MB 프로필 사진), 렌더 차단 리소스, 비디오 지연 로딩 없음. 최적화: 이미지 WebP 변환, 히어로 이미지 사전 로드, iframe 로딩 지연.배포와 호스팅
호스팅 옵션
- Netlify/GitHub Pages — 무료, 초간단
- 커스텀 VPS — 완전 제어, 설정 필요
VPS 배포 함정
- 대소문자 구분 파일명(Linux 엄격)
- 절대 vs 상대 경로
- 파일 권한과 사용자 격리
- 프로젝트 구조 정리
문제 피하기 팁:
- 소문자 파일명 사용
- 공백이나 특수문자 피함
- 설정 문서화
- Git으로 버전 관리
주요 요약
- 반복 프로세스: 개발을 작은 작업으로 쪼개 각 반복에서 하나의 문제 해결
- 품질 검사: 브라우저 간 테스트, 성능 도구 실행
- 문서화: 변경과 결정 로그로 롤백 용이
- 최적화: 시각 후 별도 단계로 성능 처리
코드 베스트 프랙티스
프로젝트 구조
파일을 논리적으로 정리:
project/
├── index.html
├── styles/
│ ├── main.css
│ ├── mobile.css
│ └── animations.css
├── scripts/
│ └── main.js
├── images/
│ ├── optimized/
│ └── original/
└── assets/
└── fonts/CSS 방법론
의미 있는 BEM 클래스명 사용:
.speaker-card {
/* 카드 스타일 */
}
.speaker-card__image {
/* 카드 내 이미지 스타일 */
}
.speaker-card__image--rounded {
/* 둥근 이미지 수정자 */
}인터랙티비티를 위한 JavaScript
프레임워크 없이 기본 상호작용 추가:
// 스크롤 트리거 애니메이션
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
}
});
}, observerOptions);
// 모든 .animate-on-scroll 요소에 적용
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});흔한 실수와 해결책
- 모호한 프롬프트 — AI가 일반 템플릿 출력
- 제약 없음 — AI가 원치 않는 라이브러리 삽입
- 최적화 생략 — 예쁘지만 느린 사이트
- 모바일 무시 — 절반 사용자 놓침
품질 관리 도구
- PageSpeed Insights — 성능 감사
- Lighthouse — 전체 사이트 검사
- BrowserStack — 크로스 브라우저 테스트
- Git — 버전 관리와 롤백
— Editorial Team
아직 댓글이 없습니다.