한줄 요약
코딩 경험 없이 Claude Code로 역량 진단 웹페이지를 처음부터 끝까지 완성했습니다. Word 파일 하나 던져줬더니 진짜 작동하는 웹앱이 나왔어요.
이런 분들께 도움돼요
개발자 없이 간단한 웹 도구를 만들고 싶은 분
Claude Code가 뭔지 모르지만 궁금한 분
설문/진단 도구를 구글폼 말고 다른 방식으로 만들어보고 싶은 분
소개: 시도하고자 했던 것과 그 이유
문제 상황 (Before)
회사에서 역량 진단 설문지를 온라인으로 만들고 싶었어요.
구글폼: 무료지만 결과 시각화가 안 됨
외부 서비스: 비용 발생 + 커스터마이징 한계
외주 개발: 비용 + 커뮤니케이션 시간
특히 아쉬웠던 건 결과를 차트로 보여주고 싶은데 구글폼으로는 불가능했다는 거예요. 응답자가 자기 결과를 한눈에 보고 저장할 수 있으면 좋겠다고 늘 생각했어요.
시작하게 된 계기
gpters 스터디에서 Claude Code를 배우고 있다고 하니까
동료가 이게 가능한지 물어봐서 "한번 해볼까?"하고 시작하게 되었어요.
진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용한 도구
도구명: Claude Code
특이사항: 코딩 경험 전무, 첫 프로젝트
AI와 협업한 과정
진단지 생성
먼저 내부에 가지고 있던 진단 도구들을 챗GPT와 함께 문항을 다듬는 작업을 진행했어요. 그래서 최종 진단 항목을 word로 정리했어요.
일단 시켜보자
정리된 word 파일을 넣고, Plan mode로 무작정 진단 웹앱을 구현해 달라고 클코에 요청했어요. 클코가 알아서 어떤 항목들이 필요한지, 결과를 jpg로 다운받게 하면 좋을지 등을 물어봐주었어요.
그리고 수정수정
클코의 가이드대로 진행하다보니 어느새 웹앱이 나왔더라구요. 단순히 진단 항목만 주었는데 UX디자인까지 모두 해 주는 것을 보고 놀랐습니다.
하지만, 역시나 자동으로 구현해 준 디자인이 마음에 들지 않아 하나하나 수정을 요청하다보니 어느새 토큰을 다 써버렸어요....ㅜ
다름에는 전체적인 그림을 내가 그려놓고, 실행을 진행해야겠다는 생각을 했습니다.
인상적이었던 순간
"오!" 했던 순간: 제가 올린 Word 문서를 Claude가 읽고 "이 구조면 5개 영역으로 나눠서 레이더 차트로 보여주면 좋겠네요"라고 먼저 제안했을 때요. 제가 원하던 걸 먼저 말해줬어요.
막혔던 순간과 해결
문제: 차트가 화면에 안 나왔어요. 코드를 봐도 뭐가 문제인지 전혀 모르겠더라고요.
해결: 그냥 "차트가 안 나와"라고 했더니 Claude가 스스로 코드를 점검하고 고쳤어요. 알고 보니 차트 라이브러리 로딩 순서 문제였대요. 저는 그게 뭔지도 몰랐지만 해결됐어요.
💡 Tip: 문제가 생기면 전문 용어 몰라도 "이게 안 돼"라고만 해도 됩니다. Claude가 알아서 원인을 찾아요.
결과와 배운 점
Before vs After
항목
Before
After
결과 시각화
불가능 (구글폼)
레이더 차트로 한눈에
결과 저장
없음
JPG 이미지 다운로드
개발 방식
외주 or 포기
직접 만들고 바로 수정
필요 지식
코딩 필수
대화만으로 가능
결과물
역량 진단 웹페이지 완성
개인/조직 진단 선택 가능
15개 질문 → 5개 영역 점수 분석
레이더 차트 시각화
결과 이미지(JPG) 다운로드 기능
배운 점과 나만의 꿀팁
효과적이었던 것
기존 자료 활용하기 - Word, 엑셀 등 있는 자료 그대로 주면 이해가 빨라요
막연하게 시작해도 OK - Claude가 질문하면서 구체화해줌
문제는 그냥 말하기 - "안 돼"라고만 해도 원인 찾아서 고쳐줌
이렇게 하면 안 돼요 (주의사항)
한 번에 너무 많이 요청하기 - 하나씩 단계별로 진행하는 게 좋아요
계획없이 그냥 무작정 진행하기 - 어느정도 내가 그림을 그려두고, 자료를 주면서 단계별로 진행해야 토큰을 아낄 수 있어요.
과정 중 시행착오
처음에 "웹페이지 만들어줘"라고만 했을 때는 너무 막연해 서 Claude도 뭘 만들어야 할지 모르는 것 같았어요.
참고할 수 있는 자료를 주어야 훨씬 완성도 있는 결과가 나왔습니다.
앞으로의 계획
다음 단계
회사 홈페이지에 연동해보기
휴대폰에서도 잘 작동하는지 테스트하기
도움이 필요한 부분
Wix 홈페이지에 웹페이지 임베딩하는 방법
모바일 최적화 (반응형 디자인)
