목차

목차를 생성하는 중...

2.1. 바이브코딩의 시작: 데이터 분석과 웹 시각화

카카오는 유해 콘텐츠가 카카오 서비스에 유입되는 것을 방지하고 안전한 환경을 유지하고자 노력하고 있습니다. 이를 위해 단순한 유해 콘텐츠 분류를 넘어, 콘텐츠 모니터링 도구 개발 및 운영부터, 여기에 사용되는 AI/ML 모델의 기획, 개발, 운영까지 모든 단계를 직접 관리하고 있습니다.

이 과정에서 가장 중요하고 늘 공을 들이는 부분이 바로 AI/ML 모델 학습에 필요한 데이터 라벨링입니다. 모델 성능이 결국 라벨링된 데이터 품질에 좌우되기 때문에, 도메인 지식(경험 기반)과 다양한 지표를 활용해 평가셋을 최대한 정교하게 구축하려 노력합니다.

하지만 방대한 데이터 속에서는 아무리 노력해도 놓치는 부분들이 생겨납니다. 데이터를 숫자 위주로 확인하거나 주피터 노트북으로 차트를 그려보는 게 일반적이었습니다.

물론 파이썬으로 공들여 작업하면 얼마든지 멋진 시각화와 보고서를 만들 수 있지만, 문제는 시각적으로 아름답고, 누구나 쉽게 이해할 수 있는 보고서 형식으로 데이터를 정리하고 공유하는 데 엄청난 시간이 소요된다는 점이었습니다. 이런 비효율 때문에 때로는 깊이 있는 분석 결과의 공유가 늦어지기도 했습니다.

평소 데이터 분석 업무를 하면서 늘 고민이었던 부분이 있었습니다. 분석 자체는 어렵지 않지만, 그 결과를 ‘보기 좋게, 이해하기 쉽게, 공유하기 편하게’ 만드는 일이 생각보다 많은 시간을 요구한다는 점이었죠. 특히 스팸 메시지 같은 텍스트 데이터는 다양한 각도에서 분석해야 의미 있는 인사이트를 도출할 수 있는데, 그런 종합적인 분석 대시보드를 만들려면 상당한 개발 시간이 필요했습니다.

그런데 Claude Code와 함께한 이번 ‘바이브코딩’ 경험은 놀라웠습니다. 이러한 놀라운 변화의 중심에는 클로드 코드(Claude Code)라는 AI 코딩 도구가 있었습니다.

클로드 코드는 앤트로픽에서 개발한 AI 기반의 코딩 에이전트로, 개발자의 터미널 환경에 직접 통합되어 자연어 명령만으로도 복잡한 코딩 작업을 수행할 수 있도록 돕는 도구였죠. 기존의 코드 어시스턴트들이 단순히 코드 스니펫을 제안하는 수준이었다면, 클로드 코드는 전체 코드베이스를 깊이 이해하고, 파일을 직접 수정하며, 필요한 명령어를 실행하는 등 실제 개발 워크플로우에 적극적으로 개입하는 방식이었습니다.

저희가 수많은 AI 코딩 도구 중 클로드 코드를 선택했던 이유는 명확했습니다. 보통 ChatGPT나 Google Gemini와 같은 채팅 형태의 AI는 특정 함수나 코드 줄을 작성하거나, 에러가 발생했을 때 도움을 받는 데 아주 유용했죠. 이런 채팅형 AI는 아이디어를 빠르게 주고받으며 정리하는 데 장점이 있었습니다. 하지만 이들은 전체 프로젝트 구조나 데이터 분석 방법의 구체적인 계획까지는 사용자가 직접 고민하고 설계해야 한다는 한계가 늘 있었습니다.

반면, 클로드 코드는 “스팸 메시지 데이터를 시각화하고 싶다”는 간단한 아이디어만으로도 프로젝트의 전체적인 구조, 데이터 분석 방법, 심지어 어떤 차트를 사용할지까지 제안해 주더군요. 덕분에 분석가가 고민하는 시간을 획기적으로 단축할 수 있었습니다. 때로는 ChatGPT, Google Gemini, 또는 일반 Claude 웹 버전과 채팅으로 아이디어를 먼저 정리한 후 클로드 코드에 요청하여 시간을 더욱 단축하는 방식을 활용하기도 했습니다.

단순히 “스팸 메시지 데이터를 시각화하고 싶다”는 아이디어에서 시작해서, 하루 만에 15가지 차트가 포함된 22개 페이지의 완전한 웹 대시보드를 구축할 수 있었습니다. 과거라면 최소 1-2주는 걸렸을 작업량입니다.

Claude Code, 개발자의 상상을 현실로 만들다

이런 상황에서 최근 LLM의 코딩 능력이 발전하는 것을 보며 문득 “이 정도 기술력이면, 평소 상상만 했던 기능들을 누구나 쉽고 직관적으로 이해할 수 있는 형태로 만들거나, 팀원들과 빠르게 공유하기 좋은 시각적인 보고서를 구현할 수 있지 않을까?”라는 생각이 스쳤습니다. 이전에는 단순히 아이디어 차원에 머물렀던 것들이 Claude Code 덕분에 현실화될 수 있겠다는 기대감이 생긴 거죠.

특히, 어떤 데이터 유형에 어떤 통계 지표를 추출하고, 어떤 차트가 의미 전달에 가장 효과적일지 고민하는 과정은 데이터 분석에서 중요한 부분입니다. 과거에는 이 과정에 상당한 시간을 할애해야 했지만, Claude Code 덕분에 고민하는 시간을 크게 단축할 수 있었습니다.

물론 특정 데이터 형태에 어떤 차트나 통계 기법이 가장 적합한지는 개발자의 도메인 지식과 데이터 이해력이 필요합니다. 하지만 Claude Code는 자신의 지식을 기반으로 최적의 분석 방법을 추천해주거나, 복잡한 통계적 고민을 획기적으로 줄여주는 역할을 톡톡히 해냈습니다. 아직 완벽하진 않지만, 분석에 필요한 고민의 시간을 압도적으로 단축시켜 주었습니다.

‘바이브코딩’, 개발 방식을 바꾸다

이처럼 이미 충분한 지식과 경험을 가지고 있었음에도 불구하고, 그 지식을 실제 결과물로 만드는 데 많은 시간이 들었던 비효율적인 부분들을 ‘바이브코딩’이라는 새로운 AI 활용 방식이 해결해주었습니다.

과거에는 데이터를 ‘보고서 형식으로 이쁘게’ 정리하는 것이 또 하나의 큰 업무처럼 느껴졌다면, 이제는 아이디어가 떠오르면 주저하지 않고 ‘짠!’하고 바로 구현해낼 수 있는 자신감을 얻게 되었습니다. 시각화는 물론, 동료들이 직관적으로 이해하고 소통할 수 있는 형태로 빠르게 만들어낼 수 있다는 점은 놀라운 변화입니다.

‘바이브코딩’은 단순한 코드 개발 협업을 넘어섰습니다. Claude Code는 시각화 자료나 웹 페이지 제작 능력도 뛰어나, 디자인적 감각과 데이터 분석 지식을 결합한 결과물을 함께 만들어낼 수 있었습니다. 이 부분은 특히 데이터의 복잡한 패턴을 직관적인 UI로 구현하여 팀 내 공유를 용이하게 하는 데 결정적인 역할을 했습니다.

또한, ‘바이브코딩’은 단순히 1회성 데이터 분석에 그치지 않습니다. 데이터가 변경되거나 모델 학습을 새로 할 때마다 자동으로 최신 리포트를 생성할 수 있게 되었습니다. 시각적으로 자동화된 리포팅은 업무 편의성을 극대화시켰습니다.

이렇게 만들어진 결과물은 직접적인 메인 프로젝트의 일부는 아니지만, 메인 프로젝트의 효율성을 높이는 사이드 프로젝트로 활발히 활용되고 있습니다. 이는 아이디어를 실제 적용 가능한 형태로 빠르게 검증하고 발전시키는 데 핵심적인 역할을 합니다.

다음은 Claude Code를 활용한 데이터 분석 ‘바이브코딩’ 과정에서 AI와 어떻게 상호작용했는지 보여주는 구체적인 예시입니다. 마치 대화하듯이 아이디어를 구체화하고 결과물을 만들어 나갔습니다.

  • 요구사항 지시: 프로젝트의 전반적인 목표와 데이터의 특성을 설명하며 초기 방향성을 제시했습니다.
  • 작업 스타일 지시: “인터랙티브한 2D 그래프로 해줘”, “그룹별로 색깔 다르게 보여줘”와 같이 원하는 결과물의 스타일을 구체적으로 요청했습니다.
  • 데이터 분석 요청: Claude Code에 학습 데이터를 보여주며 분석을 요청했습니다.
  • 유사도 모델 추천 및 검토: “유사도 모델을 추천해달라”, “내 데이터에 어울리는 모델을 추천해달라”고 요청했고, Claude Code가 제안한 모델들을 검토하여 최적의 선택을 했습니다.
  • 시각화 방법론 질문 및 제안: “데이터 시각화에 필요한 방법론은 무엇인가요?”라고 질문하자, Claude Code는 다양한 시각화 구성 방안을 제안했고, 이어서 시각화 이미지들을 생성해주었습니다.
  • 추가 요구사항 및 구현 논의: “이 시각화에 이런 요소를 추가하고 싶다”고 요청하자, Claude Code는 바로 추가 요구사항 구현 제안을 해주었습니다.
  • HTML 형식 시각화 제안 및 피드백: “HTML 형식으로 시각화를 제안해달라”고 요청하여 중간 HTML 파일을 확인하고, 피드백을 주며 수정 과정을 거쳤습니다. (예: UMAP 에러 수정 요청과 같은 오류 해결 티키타카)
  • 최종 수정 확인 및 모바일 최적화: 수정된 HTML 파일을 확인하고, “모바일 메뉴바를 추가해달라”는 요청으로 모바일 환경에서도 잘 작동하도록 개선했습니다.
  • 배포 및 결과 확인: 최종 결과물을 GitHub Pages에 연결하고 배포하여 실제 웹 환경에서 작동하는지 확인하는 것으로 프로젝트를 마무리했습니다.

유용했던 프롬프트 패턴 6가지

성공적인 바이브코딩을 위해 효과를 본 프롬프트 템플릿들을 공유합니다.

  1. 작업파일과 결과물 폴더 구분
    • 활용 예시: “작업할 때 결과물은 따로 폴더에 정리하고, 작업 중에 만든 코드도 별도 폴더에 잘 보관하면서 진행해줘.”
  2. 데이터 분석 요청 패턴
    • 활용 예시: “[데이터 파일명]을 분석해서 데이터의 특성을 파악하고, 이 데이터에 가장 적합한 시각화 방법 3-5가지를 추천해줘. 각 방법의 장단점도 설명해줘.”
  3. 인터랙티브 기능 추가 패턴
    • 활용 예시: “이 [차트명] 차트에 인터랙티브 기능을 추가해줘. 사용자가 데이터 포인트를 클릭하면 상세 정보를 볼 수 있고, 호버하면 툴팁이 나타나도록 해줘.”
  4. 반응형 디자인 패턴
    • 활용 예시: “현재 웹 페이지를 모바일에서도 잘 보이도록 반응형으로 만들어줘. 특히 내비게이션 메뉴는 모바일에서 햄버거 메뉴로 표시되게 해줘.”
  5. 코드 최적화 패턴
    • 활용 예시: “현재 코드에서 중복되는 부분이 있는지 검토하고, 재사용 가능한 함수나 모듈로 분리해서 최적화해줘.”
  6. 문제 해결 패턴
    • 활용 예시: “[구체적인 에러 메시지]가 발생했어. 원인을 찾아서 수정해줘. 그리고 앞으로 같은 문제가 발생하지 않도록 예방 방법도 알려줘.”

작업파일과 결과물 폴더 구분

데이터 분석 요청 패턴

반응형 디자인 패턴-pc

반응형 디자인 패턴-mobile

효과적인 소통과 개선을 위한 팁

AI는 ‘시각화 차트를 알아서 예쁘게 만들어줘’와 같은 추상적인 요청에도 꽤 훌륭한 결과물을 내놓을 때가 있습니다. 예를 들어 “더 보고서처럼 만들기 위해 어떻게 하면 좋을지 알려줘”라고 아이디어를 제안하면 AI는 단계별 계획을 제안하기도 합니다. 디테일한 요구사항은 상세히 지시해야 할 때가 있지만 특별히 정해진 규칙이 없다면 처음부터 AI를 신뢰하고 좋은 계획을 제안하고 구현하라고 지시해도 효과적입니다.

하지만 때로는 오류가 발생하거나 기대했던 방향과 다르게 결과물이 나올 수 있죠. 이럴 때는 마치 다른 팀원에게 설명하듯이 구체적으로 어떤 부분이 문제인지 명확히 전달해야 합니다. 그래야 AI가 잘못된 방향으로 진행하는, 이른바 ‘할루시네이션’ 현상을 최소화하고 원하는 결과에 더 빠르게 도달할 수 있습니다.

‘바이브코딩’의 현재와 미래

하지만 여기서 중요한 점은 ‘바이브코딩’이 모든 문제의 정답은 아니라는 것입니다. Claude Code가 생성하는 결과물에는 여전히 할루시네이션이나 최적화되지 않은 답변이 있을 수 있기 때문에, 확실히 어느 정도의 통계적, 코드적 지식이 있는 것이 유리합니다. 그래야 AI가 추천하는 방식이나 생성한 코드에서 오류나 비효율적인 부분을 캐치하고 개선할 수 있습니다.

Claude Code의 개선이 필요한 점들도 있습니다. 예를 들어, 한국어는 잘 처리하지만 특정 라이브러리 설치 등 한글 환경 설정을 별도로 해줘야 하는 부분이 아직 존재합니다. 또한, 스케일이 커질 프로젝트라면 처음부터 Claude Code에게 폴더 구성이나 프로젝트 구조를 설계하고 시작하라고 지시하는 것이 효율적입니다.

AI도 사람과 같습니다. 최대한 목적과 하고자 하는 바를 명확하게 알려주는 것이 중요합니다. 예를 들어, “버튼을 추가해주세요”라고 했을 때, 사람 동료라면 앞선 대화를 통해 ‘어떤’ 버튼인지 파악할 수 있지만 AI는 사용자가 생각하는 것과 다른 버튼으로 이해할 수 있습니다.

물론 요즘 LLM은 문맥 파악 능력이 뛰어나 어느 정도 사용자의 의도를 포함하지만 한 번 잘못 파악할 경우 계속 이상한 방향으로 진행하는 경향이 있습니다. 따라서 처음부터 “홈으로 가는 버튼을 우측 상단에 추가해주세요”처럼 명확하게 지시해야 수정 작업이 최소한으로 줄어듭니다. 특히 ‘바이브코딩’을 처음 시작할 때는 더욱 정확하고 명확하게 지시하며 진행하는 것이 좋습니다. 흥미로운 점은 디자인적인 부분에서는 오히려 AI가 더 나은 감각을 보여주기도 한다는 겁니다.

물론 이런 부분은 AI 기술 발전과 함께 점차 개선될 것으로 보입니다. 현재의 바이브코딩은 아직 100% 신뢰할 수는 없지만, 메인 프로젝트를 위한 사이드 프로젝트를 아이디어 수준이 아닌 실제 적용 가능한 형태로 구현하는 데는 매우 큰 영향력을 가지고 있습니다. 지금은 “어느 정도 되는구나” 수준이지만, 점차 Claude Code를 활용해 할 수 있는 범위를 확대해 나갈 예정입니다.

완벽하진 않지만 적어도 ‘동료와 함께 의견을 나누며 아이디어를 구체화하고 즉석에서 프로토타입 코딩을 진행하는’ 정도의 효율성과 상호작용을 제공해줄 것입니다.

바이브코딩으로 만든 시각화 예시 개선한 버전