클로드 코드로 비개발자가 공모전 웹사이트 제작 도전(1단계)

소개

이번 스터디를 통해서 개발 경험 없이 Claude Code만으로 공모전 프로젝트를 처음부터 셋업해봤습니다.

목표는 단순했어요. "일단 오늘 안에 프로젝트를 만들고 화면에 뭔가 띄워보자." 코드를 몰라도 AI 도구로 어디까지 할 수 있는지 직접 확인해보고 싶었습니다.

사용 도구: Claude Code (VS Code 확장)

Step 1. 공모전 자료 파악

공고문, OT 자료, FAQ, 패들릿까지 Claude Code에 전달해서 핵심 내용을 정리했습니다.

사용한 프롬프트:

공모전 공고문이랑 OT 자료를 읽고,
심사 기준, 필수 조건, 절대 하면 안 되는 것들을 표로 정리해줘.
공모전에서 탈락할 수 있는 요소는 특히 강조해줘.

→ 공모전 OT에서 강조한 유의사항에 대한 핵심 규칙을 한눈에 정리했어요.

Step 2. 폴더 구조 정리

바탕화면과 OneDrive에 흩어진 파일들을 Claude Code가 직접 정리해줬습니다.

사용한 프롬프트:

OneDrive 공모전 폴더가 너무 지저분해.
공모전 기본정보, 제안서, 데이터활용방안, 이슈사항, 참고자료, 업무분장
이렇게 6개 카테고리로 정리해줘.

→ 6개 카테고리로 깔끔하게 정리 완료. 앞으로 파일 찾는 시간이 줄었어요.

Step 3. Next.js 프로젝트 생성 & 랜딩 페이지

사용한 프롬프트:

Next.js + TypeScript + Tailwind CSS로 iroute 프로젝트 만들어줘.
메인 랜딩 페이지에는 서비스 슬로건, 핵심기능 3개, 시작하기 버튼을 넣어줘.

→ 명령어 한 줄 입력 없이 프로젝트 생성 + 랜딩 페이지까지 완성.

✅ 완료한 것

💡 배운 점

Claude Code는 코딩 도구인 줄만 알았는데, 프로젝트 관리 도구로도 쓸 수 있다는 게 가장 큰 발견이었어요.

⚠️ 시행착오

Padlet 내용을 Claude Code로 바로 못 읽는 문제가 있었어요. JavaScript로 동적 렌더링되는 페이지라 내용을 못 가져왔고, PDF로 내보내기 한 다음 파일로 전달하는 방식으로 해결했습니다.

🔜 앞으로의 계획