자주 묻는 질문 (FAQ)

이 프로젝트의 주요 목표는 다음과 같습니다:

• AI 코드 생성 도구(Claude)를 활용한 웹 서비스 개발 능력 향상
• v0 프로토타입 기반으로 개인별 맞춤형 웹사이트 구축
• GitHub 및 GitHub Pages를 이용한 버전 관리 및 웹 호스팅 경험 습득
• 최신 AI 기술의 웹 개발 적용 가능성 탐색

v0 프로토타입은 모든 팀원이 공통된 기반에서 시작할 수 있도록 제공된 기본적인 웹사이트 구조입니다. HTML/CSS 기반으로 심플한 디자인과 레이아웃을 갖추고 있으며, 각 팀원이 이를 기반으로 자신만의 아이디어를 구체화하고 확장할 수 있도록 했습니다.

이 프로젝트는 약 2주간의 워크샵 형태로 진행되었습니다. 초기 1-2일 동안은 Claude와 GitHub 사용법에 대한 교육이 이루어졌으며, 나머지 기간 동안 팀원들은 개인 프로젝트를 진행하고 필요할 때 도움을 요청하는 방식으로 진행되었습니다.

Claude는 다음과 같은 방식으로 코드 생성에 활용되었습니다:

• 기능 구현 코드 생성 (필터링, 동적 콘텐츠 생성, UI 개선 등)
• 코드 리팩토링 및 가독성 개선
• CSS 스타일 및 인터랙티브 JavaScript 효과 생성
• 오류 수정 및 디버깅
• 기능 프로토타이핑

팀원들은 Claude에게 원하는 기능이나 개선사항을 자연어로 설명하고, Claude가 제안한 코드를 자신의 프로젝트에 통합했습니다.

Claude가 생성한 코드는 대부분 잘 작동했지만, 항상 완벽하지는 않았습니다. 때때로 프로젝트 맥락을 완전히 이해하지 못하거나 오류가 있는 코드를 생성할 수 있었습니다. 팀원들은 AI가 생성한 코드를 검토하고 필요에 따라 수정하는 과정이 필요했습니다.

중요한 점은 AI를 코드 작성의 완전한 대체제가 아닌 개발자의 생산성을 높이는 도구로 활용했다는 것입니다. 개발자의 전문성과 AI의 코드 생성 능력을 결합함으로써 최상의 결과를 얻을 수 있었습니다.

프로젝트의 개발 워크플로우는 다음과 같은 단계로 진행되었습니다:

1. 요구사항 정의: 개발하고자 하는 기능이나 개선사항을 명확히 정의
2. Claude 코드 생성: AI에게 요구사항을 설명하고 코드 생성 요청
3. 코드 검토 및 수정: 생성된 코드를 검토하고 필요한 경우 수정
4. Git 버전 관리: 변경사항을 의미 있는 단위로 커밋
5. GitHub Pages 배포: 원격 저장소에 푸시하고 웹사이트 배포

이 과정은 반복적으로 수행되며, 각 단계에서 필요에 따라 이전 단계로 돌아가 수정을 진행했습니다.

GitHub Pages 배포 과정은 다음과 같은 단계로 진행되었습니다:

1. Local Repository 생성: 각자 프로젝트 폴더에서 Git 저장소 초기화 (git init)
2. Remote Repository 연결: GitHub에 새 저장소 생성 및 연결 (git remote add origin [URL])
3. 코드 변경 및 커밋: 의미 있는 단위로 변경사항 커밋 (git add . && git commit -m "메시지")
4. GitHub Push: 로컬 변경사항을 원격 저장소로 푸시 (git push -u origin main)
5. GitHub Pages 설정: 저장소 설정에서 Pages 기능 활성화

GitHub Pages는 특별한 설정 없이도 정적 웹사이트를 손쉽게 배포할 수 있는 장점이 있어, 팀원들이 자신의 웹사이트를 인터넷상에 공개하는 데 큰 도움이 되었습니다.

같은 v0 프로토타입에서 시작했지만, 각 팀원은 자신만의 아이디어와 관심사에 따라 다양한 웹사이트를 개발했습니다:

• yang.me: 용어집 정리 웹사이트로 검색 기능과 카테고리 필터링 기능 구현
• esther.0605: 워크숍 안내 사이트로 인터랙티브 요소와 사용자 친화적 디자인 적용
• stella.ca: 기술 용어 해설 사이트로 카테고리별 분류와 모던한 디자인 적용
• troy.x: 포털 형태의 사이트로 다양한 정보 연결과 맞춤형 링크 제공
• sue.cream: 워크숍 테스트 사이트로 특정 기능 시연과 심플한 구성 적용

각 팀원은 Claude를 활용하여 자신만의 독특한 기능과 디자인 요소를 구현했습니다.

프로젝트에서는 주로 다음과 같은 웹 기술이 사용되었습니다:

• HTML: 웹사이트의 기본 구조 및 콘텐츠 구성
• CSS: 스타일링, 레이아웃, 반응형 디자인 구현
• JavaScript: 동적 콘텐츠 처리, 사용자 상호작용, 필터링 기능 구현
• Tailwind CSS: 일부 프로젝트에서 사용된 유틸리티 기반 CSS 프레임워크
• FontAwesome: 아이콘 라이브러리
• Chart.js: 데이터 시각화 라이브러리 (일부 프로젝트에서 사용)

기본적인 웹 기술을 중심으로 하되, 각 팀원의 필요에 따라 추가 라이브러리나 프레임워크를 활용했습니다.

이 프로젝트의 주요 성과는 다음과 같습니다:

• 모든 팀원이 Claude AI를 활용하여 v0 프로토타입을 확장하는 경험 습득
• GitHub Pages를 통해 각자의 웹사이트를 성공적으로 배포
• 팀원별로 다양한 기능과 디자인을 적용한 창의적인 웹 서비스 구현
• AI 코드 생성 도구를 실제 개발 과정에 통합하는 방법론 개발
• 비개발자도 AI의 도움을 받아 웹 개발에 참여할 수 있는 가능성 확인

특히, AI를 개발 과정에 통합하는 경험을 통해 팀원들은 미래 기술 트렌드에 적응하고 이를 활용하는 능력을 키울 수 있었습니다.