선택 안됨 혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch4-(1)

이게 되네? AI로 자동 분류되는 할 일! 🤯 카테고리 자동 분류 기능 추가

클로드가 알려준 사용자 경험 개선 팁! 💡 할 일 앱 디테일 살리기

PRD 작성부터 기능 구현, UX 개선, 그리고 복잡한 로직(자동 분류)까지 클로드 코드는 정말 전천후 만능 도우미입니다. 먼저 PRD를 생성하고 개발을 시키면 바로 뚝딱뚝딱 동작하는 웹페이지를 만들어줍니다. 물론 클로드가 완벽한 코드를 한 번에 짜주지는 않았어요. 제가 원하는 방향과 다를 때도 있었고, 몇 번의 수정이 필요한 부분도 있었습니다. 하지만 오히려 그런 과정을 통해 '어떻게 프롬프트를 개선해야 할까?', '어떤 점을 더 구체적으로 지시해야 할까?'를 배우면서 AI와의 협업 스킬이 향상됩니다.

할 일 관리 웹페이지를 1차로 만들고 책에서 나온 것처럼 카테고리를 자동으로 적용하는 방법을 요청했습니다. 그리고 클로드가 뚝딱 만들어준 기능은... 생각보다 쓸만합니다.

• 동작 방식:
  1. 할 일 입력창에 텍스트를 입력하면, 클로드가 미리 학습한 키워드를 감지해요.
  2. 예를 들어 "회의 준비"라고 입력하면 자동으로 '업무' 카테고리로 바뀌는 식이죠! "집 청소하기"를 입력했더니 "개인"으로 딱 바뀌는 거 있죠? (사진 참고!)
  3. 자동 분류가 되면 옆에 "자동 분류"라는 힌트가 살짝 나타나서 알려줘요.
• 똑똑한 규칙:
  • 타이핑하는 중에는 키워드를 감지해서 자동으로 카테고리를 바꿔줘요.
  • 근데 만약 제가 수동으로 카테고리를 다시 선택하면, 제 선택을 존중해서 고정시켜주고요. (오, 똑똑해!)
  • 할 일을 추가하고 나면 다음 입력을 위해 분류 상태는 초기화되는 센스까지!

설명을 참고해보니 이 기능을 구현하기 위해 script.js에 CATEGORY_KEYWORDS라는 키워드 사전과 detectCategory 함수를 추가했고요, index.html과 styles.css도 자동 분류 힌트와 디자인이 수정되었습니다.

'혼자서 공부하는 바이브코딩' 책과 클로드 코드를 활용해서 할 일 관리 앱을 기획부터 개발, 그리고 자동 분류 기능까지 추가해보니 단순히 AI를 활용하는 스킬만 늘어난 게 아니라, AI를 활용한 개발 프로세스 전반에 대한 이해도가 훨씬 높아진 것 같아요. 바이브코딩 학습을 통해 AI와 함께라면 혼자서도 꽤 괜찮은 결과물을 만들어낼 수 있다는 자신감을 얻게 됩니다. 바이브코딩 하이팅!