클로드랑 바이브 코딩해서 PWA 웹앱하나 뚝딱하기
✨ PWA로 만들어서 desktop & phone 에 저장도 가능합니다!
주말에 뭘 하면 좋을까 고민하다가 요즘 1인 코딩 시대인데, 언제까지고 남의 것만 해줄 순 없잖아? 나만의 아이디어로 뚝딱 서비스 하나 만들어보고 싶어서 클로드랑 바이브 코딩을 시도해봤다.
2시간 안에 진짜 그럴 듯한 결과물을 내주었고, 나는 빠르게 넷플리파이로 배포를 했다. 친구들은 코드 한 줄 안 쓰고 이런 결과를 냈다고 하니 다들 무섭고 놀랐다는 반응. 🫢
하루 휴가를 내서 그 다음날에 한 시간 정도 좀 더 디벨롭을 해서 이같은 결과물을 완성했다.
서비스 설명을 하자면 간단하게 1,2,3 단계로 가나다라, 단어, 문장 맞추기 게임을 할 수 있고 외국인을 위한 한국어 공부 게임이다.
좀 더 디벨롭을 하면 정답 타이머(시간제한), 발음 음성을 추가해서 발음을 듣고 퀴즈를 맞힐 수 있도록 할 수 있을 것 같다.
css도 기본 css에 아직 전체적인 상태 관리 등 약간 미흡한 점은 있지만, 이건 프롬프트를 잘 쓰고 claude code로 디렉토리에서 같이 코딩하면 좀 더 잘 풀 수 있을 것 같은 문제이고, 진짜 놀란 점은 정말 생각보다 괜찮은 코드를 짠다는 거다.
반응형은 시키지 않아도 잘하고 서비스 워커 파일도 잘 만들어주고 매니페스트 파일도 뚝딱이다. 아이콘 이미지는 gpt에게 부탁해서 추가해두었다.
당장에 프로덕션에 바로 태우기에는 부족한 코드이지만, 조금만 리터칭 해주면 사이드 프로젝트는 이제 굳이 내가 코드를 짜고 할 필요 없이 좀 더 이 사이드가 비즈니스적으로 사업성이 있는지, 어떻게 이 사이드로 수익을 낼 수 있을지 등 만든이에게 좀 더 다른 부분을 고민해 볼 수 있는 시간을 벌어주는 것 같다.
물론 내가 코드를 더 잘 짜고 싶고 코드 & 기술 공부를 위해서 한 거라면 이 정도로 만족하면 안 되고 이 AI 친구가 짜준 코드를 보고 리팩토링 하고 더 검증하는 절차를 거쳐야겠지만, 내 관심사는 그것보다는 이 프로젝트를 계속해서 디벨롭 해도 될만큼 괜찮은 아이디어인지 아닌지 검증하고 싶기 때문에 일종의 poc 개념으로는 정말 ai가 많은 걸 해줄 수 있는 것 같다.
이렇게 되면 개발자가 뭐하는 사람인가요? 할 수도 있을 것 같은데, 결국 개발자는 전체적인 서비스 설계를 더 잘 하고 AI가 만든 코드를 더 나은 서비스를 만드는 데 적재 적소에 가져다 쓰는 구상을 하는 사람으로 거듭나야 할 것 같다.
주변의 외국인 친구들에게 이 게임 많이 홍보해주세요. 피드백은 댓글로 주시면 반영해보겠습니다!
감사합니다.
fin.