인프런 [6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 4주차 후기입니다.
이번 4주차에는 [혼자 공부하는 바이브 코딩 with 클로드 코드] Ch 04와 Ch 05를 공부했습니다. 기본 미션은 할 일 관리 앱 만들기, 추가 미션은 상식 퀴즈 게임 만들기와 AI 개발 시 주의할 점 정리였습니다.
올해 초 1기에 한 번 참여했었기 때문에 만들어본 적이 있습니다. 당시 바쁜 직장일 때문에 급히 진행을 하기도 했지만 그래도 두 번째 만들어보는 것이기 때문에 기존 앱을 고도화할지, 최근 모델로 처음부터 다시 만들지 고민했습니다. 이번에는 모델 업데이트도 꽤나 되었기 때문에 새로 만들어 보기로 했습니다. 결과가 어떻게 달라질지, 그리고 조금 더 잘 만들어보자 하는 마음도 있었기 때문에 결과가 얼마나 달라지는지 궁금했습니다.
- 기본 미션
PROJECT 5. 할 일 관리 앱
PRD를 단계별 프롬프트로 바꾼 뒤, 하위 할 일과 태그, 우선순위, 뽀모도로 타이머, 데이터 내보내기 기능을 추가했습니다.
- 추가 미션
PROJECT 7. 상식 퀴즈 게임
4개 분야의 객관식 퀴즈와 즉시 해설, 결과, 랭킹 화면을 만들고 할루시네이션 방지 규칙을 살펴봤습니다.
Ch 04. PRD를 작성해서 구현
4장에서는 클로드 웹에서 PRD를 만들고, 이를 클로드 코드에서 사용할 단계별 프롬프트로 바꾼 뒤 순서대로 실행했습니다. 한 번에 완성품을 요구하는 대신 기본 구조, 핵심 기능, UI, 부가 기능, 최종 점검처럼 작업을 나누는 방식입니다.
이전 세션을 다시 불러오는 --resume, 최근 대화를 잇는 --continue, 컨텍스트를 확인하고 정리하는 명령어가 있습니다. @로 파일이나 폴더를 직접 불러와 분석하게 하는 방법도 있습니다. 프로젝트가 커질수록 대화에서 파일 내용을 다시 설명하는 것보다, AI가 실제 파일을 읽도록 하는 편이 빠르고 정확합니다.
다시 한번 만들어보기
저번 기수에서는 책의 예제와 프롬프트를 그대로 따라간 부분이 많았습니다. 처음 배우는 것이기도 하고, 다르게 하다가 강의와 많이 틀어질 수도 있기 때문입니다. 이번에는 모델이 업데이트되면서 똑같이 진행되기도 어렵다고 생각했고, 단위당 퀄리티가 더 좋아졌을 거라고 생각했습니다. 그리고 좀 더 디테일하게 "내가 직접 이걸 쓴다면?"이라는 생각으로 만들어보게 되었습니다. 평소 투두리스트를 활발하게 쓰는 편은 아니지만, 작업을 시작할 때 할 일과 집중 시간을 함께 관리할 수 있으면 좋겠다고 생각하는 것은 제가 못하는 것이지만 하고 싶은, 일종의 워너비입니다.
클로드 웹에서 만든 PRD와 단계별 프롬프트는 대화창에 전부 복사하지 않고 문서로 내려받아 프로젝트에 넣었습니다. 긴 프롬프트를 대화에 붙여 넣으면 작업이 이어지는 동안 처음 내용이 희석될 수 있다고 생각했습니다. 파일로 남겨두면 AI가 필요할 때 다시 읽기 쉽고, 내용이 변하지 않기 때문에 좀 더 확실하다고 생각했습니다.
처음 만들어진 결과는 디자인을 빼고 기능에 집중된 프로토타입으로 만들어졌는데, 오히려 이런 느낌이 마음에 들었습니다. 예제에서는 깔끔한 카드형 레이아웃 내용도 있었는데 일부러 이 내용은 제외하고 프롬프트했습니다. 내 할 일에 집중하기 위해서 디자인을 최대한 심플하게 가는 게 좋을 것 같다고 생각했습니다.
예전 학습 때는 없었는데, 클로드가 직접 브라우저 테스트를 할 때 옆에 모바일 크기를 함께 확인하는 것을 볼 수 있었습니다. 확실히 모델 지능이나 편의성이 많이 개선되어 좋았습니다. 그리고 저번에는 맥북에서 한글 마지막 글자가 반복되고 엔터가 반복되어 할 일이 하나 더 생기거나 자음과 모음이 중복 입력되는 오류가 있었습니다. 당시에는 문제를 따로 설명하고 수정했지만, 이번에는 별도로 언급하지 않아도 같은 오류가 나타나지 않았습니다.
내가 사용하고 싶게 만들자
To do list 프로그램을 만들면서 내가 쓰면서 필요할 기능을 만들어보자에 집중했습니다. 할 일을 적는 데서 끝나지 않고, 큰 작업을 하위 할 일로 추가할 수 있도록 하고, 집중 시간을 관리할 수 있도록 뽀모도로 타이머 기능을 추가하였습니다.
라이트 모드와 다크 모드를 추가했고, 할 일에는 하위 작업과 태그를 추가할 수 있으며 우선순위와 정렬 방식을 바꿀 수 있습니다.
뽀모도로 타이머는 숫자만 표시하는 기본적인 형태로 사용할 수 있지만, 펼치면 시간이 줄어드는 모습을 볼 수 있는 원형 타이머로도 사용할 수 있습니다. 기본 집중 시간과 휴식 시간, 반복 횟수를 바꿀 수 있습니다.
로컬 저장이냐? 로그인이냐?
가장 고민한 부분은 데이터 저장 방식이었습니다. 처음 앱은 브라우저에 데이터를 저장하는 방식입니다. 회원가입 없이 바로 쓸 수 있다는 장점은 있지만, 다른 기기에서 이어서 사용할 수는 없습니다.
기본적으로 데이터 내보내기와 가져오기 기능이 작업되기는 했었습니다만, 파일로 옮길 수는 있지만 그 과정이 너무 번거롭습니다. 결국 실제로 편하게 쓰려면 데이터베이스와 로그인을 추가해야겠다는 생각은 들었습니다.
오라클 cloud 무료 티어를 사용 중인데, 여기에 일단 연결을 해보면 될까 생각 중이라 좀 더 작업을 하면 로그인 기능과 클라우드 데이터 저장까지는 될 것 같습니다. 한 가지 팁이라면 찾아보니까 오라클 클라우드 무료 티어가 가성비는 괜찮다는 말이 있어서 이걸로 시작해봤는데, 무료로 연습해보고 만들어보기에는 좋은 것 같습니다.
다만 모든 사용자가 로그인해서 사용하고 싶지는 않을 거라고 생각했습니다. Todo list 심플하게 쓰고, 뽀모도로 타이머 쓰는데 로그인까지 해야 할까? 라고 할 수도 있겠다 생각했습니다.
비로그인 상태에서는 지금처럼 브라우저에만 저장하고, 내보내기/가져오기로 로그인 없이 동기화하는 방법도 있고, .md 파일로 저장하여 옵시디언에서 확인할 수 있는 옵션, JSON 파일 형태로 로컬 폴더에 자동 저장하여 연동되는 방법으로 활용할 수 있도록 한 번 작업해보고 있습니다.
- 브라우저에 데이터 저장하여 사용
- 로컬 폴더에 JSON 파일로 저장하여 연동
.md파일로 내보내기 하여 옵시디언에서 확인
이 정도로 비로그인 활용을 생각해봤습니다.
도움말에는 할 일 관리와 뽀모도로 사용법을 한 화면에 정리했습니다.
Ch 05. 퀴즈 게임과 할루시네이션
5장에서는 상식 퀴즈 게임을 만들며 할루시네이션을 줄이는 방법과 반복 작업 자동화를 배우는 챕터입니다. 퀴즈의 "가장 크다", "최초다", "가장 길다" 같은 표현은 기준과 시점에 따라 답이 달라질 수 있습니다.
책에서는 다음 규칙을 CLAUDE.md에 기록해 프로젝트 전체에서 계속 참고하도록 했습니다.
- 정답이 하나로 명확한지 확인
- 최상급 표현에 측정 기준 명시
- 바뀔 수 있는 정보에 시점과 범위 명시
- 의심스러운 정보는 2개 이상의 출처로 교차 검증
교차 검증 규칙을 추가하고 확인해보니, AI가 먼저 작성한 CLAUDE.md에도 비슷한 내용이 일부 있었습니다. 모델이 달라지면서 기본적으로 챙기는 디테일이 더 좋아진 것 같았고, 새 규칙을 그대로 덧붙이기보다 기존 내용과 합치면서 정리하는 과정이 필요했습니다.
이전에도 결과물은 좋았지만, 전에는 목표 지향적이면서 디테일한 것들은 좀 빼먹지만 다양한 기능들로 화려하게 잘 만드는 느낌이었다면, 지금의 모델은 목표 지향적이면서 안전하고 문제가 안 생기도록 디테일을 챙기려는 듯한 모습을 많이 보였습니다. 결과물도 이전보다 심플하고 깔끔하게 나오는 편이었습니다.
반복 작업을 커스텀 명령어로 만들기
문제 추가, 형식 확인, 난이도 조정, 중복 검사, 정답 검증을 매번 긴 프롬프트로 입력하면 내용이 조금씩 달라질 수 있습니다. 5장에서는 이를 마크다운 파일로 정의해 커스텀 명령어로 만들었습니다.
카테고리나 난이도, 문제 번호 범위를 인수로 전달하고 여러 명령어를 연결하면 문제 생성부터 검증과 통계 확인까지 순서대로 진행할 수 있습니다. 앞 명령이 실패하면 뒤 작업을 중단하도록 구성할 수도 있습니다.
자동화한다고 검증이 사라지는 것은 아니기 때문에, 검증 절차를 빠뜨리지 않고 절차적으로 안전하게 진행하기 위한 기능에 가깝다고 생각했습니다.
퀴즈 게임 만들기
완성한 퀴즈 앱은 한국사, 과학, 지리, 일반상식 네 분야에서 문제를 풀 수 있습니다. 문제를 고르면 정답과 해설이 바로 나오고, 마지막에는 결과와 랭킹을 확인할 수 있습니다.
할 일 관리 프로그램에서 좀 오래 붙잡아서 그런지, 여기서는 기본 형태에서 이번 주차 마무리를 하기로 했습니다.
퀴즈 게임에서 더 해보고 싶었던 것
만들고 나니 이미 비슷한 퀴즈 서비스가 많아서 차별점이 부족하다고 느꼈습니다. 어떻게 만들어야 할까 생각을 하다가 떠오른 것은 운전면허나 정보처리기사처럼 분야를 좁힌 자격증 문제은행이었습니다.
조금 더 재미있는 방향으로는 예전에 했던 퀴즈퀴즈 게임이 생각났습니다. 완전 온라인이 아니더라도 버튼으로 답을 고르는 대신 캐릭터를 1번부터 4번 발판으로 움직여 정답을 선택하는 방식으로 게임 형태를 줄 수 있다고 생각했습니다.
게임 형태를 띠더라도 결국 같이 게임하는 사람이 있어야 더 재미있기 때문에 네트워크 기능이 필요했고, 실시간이 안 되더라도 다른 사람의 최근 플레이를 고스트처럼 보여주면 같은 시간에 접속한 사람이 없어도 함께 문제를 푸는 느낌을 줄 수 있을 것 같았습니다. 화면 속 다른 사람의 캐릭터가 먼저 플레이했던 사람의 움직임인 셈입니다.
친구를 초대하는 방, 공개와 비공개, 실시간과 비동기 플레이까지 생각하니 프로젝트 사이즈가 너무 커질 것 같아서 이번 주차에는 네트워크 기능까지 구현하지 않았습니다. 대신 캐릭터를 움직여 정답을 고르는 간단한 게임 모드부터 추가해봤습니다. 전체 아이디어도 한 번 실제로 만들어볼까 생각도 듭니다.
게임 모드로 정답 고르기
네트워크 기능은 아니지만, 간단하게나마 게임 형태로 이동해서 정답을 고르는 기능을 추가했습니다.
상단의 게임 모드가 켜져 있으면 이 기능을 이용할 수 있습니다. 작은 캐릭터를 이동해서 1번부터 4번 발판 중 하나에 올라가면 해당 번호의 정답이 선택됩니다.
캐릭터를 정답 발판으로 이동한 뒤 엔터나 스페이스 키로 정답을 확정할 수 있습니다. 제한 시간이 끝날 때까지 기다리지 않고 바로 다음 문제로 넘어갈 수 있도록 했습니다.
책의 예제와는 다른 결과물
올해 초에는 책이나 강의의 명령어를 그대로 가져와 사용했지만, 이번에는 기본 PRD 작성 방식만 따라가고, 현재 모델이 만든 단계별 프롬프트로 진행했습니다. 그 결과 책의 예제와 제 작업물이 많이 달라졌습니다.
책에서 설명하는 기능을 제 프로젝트에 적용하기 위해 책의 예제와 현재 구조를 모두 이해해야 했습니다. 예제 프롬프트를 그대로 복사하면 파일이나 기능 이름이 맞지 않을 수 있어서, 방향성을 조정하기 위해 제가 이해한 내용을 바탕으로 추가 프롬프트를 작성하고 조금씩 맞춰야 했습니다.
예전에는 예제와 비슷하게 만드는 것에 집중했다면, 이번에는 제가 쓰려면 무엇이 필요한지, 어디까지 만들어야 할지 더 생각할 수 있었습니다.
AI를 활용해 개발할 때 주의할 점
이번 추가 미션에서 정리한 내용은 네 가지입니다.
보안과 개인정보
API 키, 비밀번호, 개인정보를 프롬프트나 코드에 그대로 넣지 않고 생성된 코드의 저장 방식도 확인해야 합니다.
코드 품질과 신뢰성
코드가 실행된다는 것과 목적에 맞게 동작한다는 것은 다릅니다. 기능 테스트와 예외 상황 확인이 필요합니다.
할루시네이션
사실을 다루는 콘텐츠는 정답의 기준과 시점을 적고, 논란이 있는 정보는 여러 출처로 검증해야 합니다.
AI 의존과 검증 생략
결과를 이해하지 않고 반영하면 문제가 생겼을 때 고치기 어렵기 때문에, 자동화한 작업도 중간 결과를 확인해야 합니다.
4주차를 마치며
이번 주에는 기능을 많이 만드는 것보다 무엇을 문서로 남기고, 어디까지 자동화하며, 어느 지점에서 직접 확인할지를 더 생각하게 하는 파트였습니다.
PRD를 만들어 진행하니 요구사항을 더 명확히 정의할 수 있었고 더 정확한 의도대로 만들어갈 수 있었습니다. 할 일 관리 앱에서는 로컬 저장과 클라우드 데이터 저장이 참 고민스러웠고, 퀴즈 게임에서는 만들고 싶은 아이디어와 어느 정도가 만들 수 있는 사이즈인지 고민스러웠습니다.
AI의 개발 과정을 내 의도대로 만들어내기 위해 코드를 이해하고 지금 AI의 의도를 파악하면서 일방적인 명령이 아닌 의사소통을 하는 것 같다고 생각이 들었던 것 같기도 하구요.
모델이 좋아질수록 사용자의 많은 개입 없이도 잘 만들어주는 것 같지만, 실제로는 무엇을 만들고 어디까지 만들지 판단하는 일은 사람의 몫인 것 같습니다.
Comments
댓글
익명으로 바로 남길 수 있습니다. IP는 일부만 표시됩니다.
댓글을 불러오는 중입니다.