바이브 코딩으로 구글 확장 프로그램을 만들어봤다.

2025. 6. 11. 16:12·기타

바이브 코딩이 뭔데?

웹서핑을 하다가 바이브 코딩에 대한 얘기를 자주 접하면서 궁금해졌고, 바이브 코딩이 대체 뭔지 찾아봤다.

 

 

안드레 카파시가 생성형 AI를 사용해 코딩을 하는 것을 바이브 코딩. 즉 느낌에 따라 코딩하는 방식을 X에 소개하면서 화제가 되었다.

 

개발자가 아예 코드를 들여다보지도 않고 전적으로 생성형 AI에 맡기는 것 만으로도 프로그램 개발이 가능하다는 글이었다.

 

처음 느껴졌던 인상은 "이거 너무 과장된 것 아닌가?"하는 느낌이었다. 왜냐하면 평소에 chatgpt를 많이 사용하면서 사실이 아닌 내용을 사실처럼 얘기하는 AI 환각(AI hallucination)을 많이 겪었기 때문이었다. 물론 이전에 비하면 훨씬 나아졌지만 지금도 간간히 겪고 있는 현상이었고 컴퓨터 코딩은 오류 하나만 있어도 제 동작을 하지 못 하기 때문에 AI로 코딩을 한다는 건 말이 안 되는 것처럼 느껴졌다.

 

그리고 쓰레드에 특히 "바이브 코딩으로 한달에 몇천만원 벌었어요." 같은 내용의 글이 많았는데, 이런 글 때문에 더욱 불신이 생겼다. 저런 글로 사람들을 현혹해서 강의를 판매하는 사람들을 많이 봤기 때문이다. 

 

위와 같은 이유들로 바이브 코딩에 대해 더 알아보지 않았고, 메타버스처럼 한 번 확 뜨고 다시 가라앉을 거품이라고 생각하고 있었다. 

 

그런데 친구가 아는 신뢰할 수 있는 개발자분이 직접 바이브 코딩을 사용하고 후기를 남긴 글을 나에게 소개해줬고, 읽어보니 바이브 코딩이 내가 생각한 것 처럼 뜬구름 잡는 소리가 아니었던 것 같았다. 그래서 유튜브에서 정보를 더 찾아보다가 아래 동영상을 보게 되었다.

 

 

커리어해커 알렉스 라는 유튜버가 replit이라는 바이브 코딩 플랫폼에 대해 소개하는 영상이었다.

 

영상에서 chatgpt를 사용하는 것 처럼 프롬프트만 잘 입력하면 웹사이트가 만들어지는 것을 보니, 나도 할 수 있겠다는 생각이 들었다.

 

처음 가입하면 무료로 10번 사용이 가능하다는 내용에 한 번 시도해 보기로 했다.

 

개발 과정

프로그램 목적 정하기

어떤 프로그램을 만들 지 정하는 건 어렵지 않았다. 최근에 개인적으로 큰 효과를 본 셀프 피드백 기록법이 있었는데, 이걸 프로그램으로 만들기로 했다.

 

나는 원래 하루에 유튜브를 8시간 이상 보는 심각한 유튜브 중독이었는데, 유튜브가 보고 싶을 때 마다 그 때의 기분, 보고 싶은 이유를 적고 어떤 선택을 했는지 적어보는 간단한 기록을 해 보기로 했다.

 

결과는 며칠만에 나타났는데, 하루에 유튜브 보는 시간을 많아봤자 2시간 정도로 확 줄일 수 있었다.

 

원래는 주소창에 무의식적으로 y를 입력해서 유튜브를 들어가고, 그대로 2시간이고 3시간이고 유튜브를 보는 경우가 많았는데, 무의식적으로 보는 게 아닌 의식적으로 보고 싶은 이유를 생각할 수 있게 되면서 좀 더 좋은 선택을 할 수 있게 되었다.

 

또한, 이렇게 기록을 하다 보니 무의식적인 충동이 생기는 빈도 자체도 많이 줄어드는 것을 느꼈다.

유튜브 기록 예시

 

이런 일련의 과정을 프로그램에 어떻게 구현해야 할 지 간단하게 적어보았다.

 

프로그램 초안

 

이렇게 간단하게 적은 내용을 바탕으로 chatgpt와 대화하면서 아이디어를 좀 더 구체화했다.

 

프로그램의 핵심인 셀프 피드백을 위한 감정 기록 -> 행동 동기 -> 선택 -> 피드백 과정을 구현했고, 추가로 개인화된 조언, 긍정적인 글귀들을 추가해 사용자가 좀 더 좋은 선택을 할 수 있게 유도했다. 

더보기

## 1. 프로젝트 개요

- **프로젝트명**: 나쁜 습관 차단 크롬 확장 프로그램
    
- **목적**:  
    사용자가 무의식적으로 반복하는 나쁜 습관(예: 유튜브 과몰입, SNS 중독, 특정 사이트 무한 서핑)을 멈출 기회를 제공하고, 감정·동기·행동을 점검하며 이성적 선택을 돕는 심리적 코칭 툴.  
    강제 차단보다는 자율적 동기와 긍정 피드백을 중심으로 지속 가능한 행동 변화를 유도한다.
    

---

## 2. 핵심 아이디어

- 어떤 행동을 하고 싶을 때, 잠시 멈추고 스스로 질문하는 과정만으로도 무의식적인 충동 행동을 막을 수 있다.
    
- 행동 전후의 감정, 이유, 선택을 점검하고 기록하면, 감정-행동 연결 패턴을 이해하게 되고, 점진적으로 충동 대신 이성에 기반한 선택을 할 수 있게 된다.
    
- 올바른 선택을 하면 즉각적 보상과 긍정 피드백을 제공해, 뇌의 보상 회로를 활성화하고 긍정 행동을 학습하도록 돕는다.
    

---

## 3. 주요 질문 프레임 (사용자 질문)

- 지금 내 기분은 어떠한가?
    
- 이 행동이 하고 싶은 이유는 무엇인가?
    
- 어떤 말로 합리화를 하고 있는가?
    
- 내 결정은 무엇인가?
    
- 그 결정을 하고 나서 내 기분은 어떠한가?
    

이 질문을 통해 사용자는 즉각적 충동에서 한 발 물러나, 자기 감정과 동기를 관찰하고 성찰할 기회를 갖게 된다.

## 4. 핵심 기능 (상세 설명)

---

### 1. 행동 감지 및 개입

- 사용자가 사전에 설정한 사이트(예: 유튜브, 인스타그램, 게임 사이트)에 접속하거나 특정 행동(예: 브라우저 탭 열기, 특정 키워드 검색)을 할 때 프로그램이 이를 감지한다.
    
- 감지 즉시 팝업 알림창이 뜨며, 사용자는 즉시 사이트 접근을 멈추게 된다.
    
- 알림창에는 30초 대기 카운트다운이 표시되고, 이 대기 시간 동안 사용자는 스스로 행동을 점검할 기회를 갖게 된다.
    
- 사용자가 원하면 차단 강도(예: 리마인더만, 강제 대기, 아예 차단)와 감지 범위를 직접 설정할 수 있다.
    

---

### 2. 대기 및 질문 유도

- 대기 중에는 단순히 기다리는 것이 아니라, 프로그램이 아래와 같은 질문을 던진다:
    
    - 지금 내 기분은 어떤가요?
        
    - 이 행동이 하고 싶은 이유는 무엇인가요?
        
    - 나는 어떤 말로 스스로를 설득하고 있나요?
        
    - 내가 지금 선택할 결정은 무엇인가요?
        
- 사용자는 이를 짧게라도 기록하거나, 감정 단어(예: 스트레스, 지루함, 기대, 화남 등)를 선택할 수 있다.
    
- 기록과 선택은 필수는 아니며, 사용자가 심리적 부담 없이 참여할 수 있도록 직관적 버튼과 간단한 입력 방식으로 제공된다.
    

---

### 3. 선택지 제공: 안 보기 vs 보기

- 대기 시간이 끝나면 두 가지 선택지가 제공된다:
    
    1. **안 보기**: 사이트를 닫고, 긍정적 피드백을 받음.
        
    2. **보기**: 사이트 사용을 허용, 프로그램은 단순 기록만 수행.
        
- 사용자가 ‘안 보기’를 선택할 경우:
    
    - 즉각적으로 칭찬 메시지, 작은 애니메이션 효과, streak(연속 성공 기록)가 추가된다.
        
    - 보상 방식(예: 스티커, 칭호, 캐릭터 반응 등)은 사용자 설정에 따라 달라질 수 있다.
        
- 사용자가 ‘보기’를 선택할 경우:
    
    - 프로그램은 판단을 존중하고, 이후 행동 및 감정을 기록해 통계에 반영한다.
        
    - 강제 차단보다는 사용자의 선택을 존중하는 방향으로 설계된다.
        

---

### 4. 즉각적 보상 시스템

- 올바른 선택(‘안 보기’)을 했을 때 즉각적으로 뇌의 보상 회로를 자극하는 작은 긍정 효과 제공.
    
- 예:
    
    - 화면에 축하 이펙트 (별, 폭죽, 하트 등)
        
    - 캐릭터가 웃거나 춤추는 애니메이션
        
    - “잘했어요! 당신은 성장 중이에요” 같은 맞춤형 칭찬 메시지
        
- 사용자는 보상 방식을 직접 선택할 수 있으며, 단순한 메시지에서부터 시각·청각적 효과까지 다양하게 제공된다.
    

---

### 5. 맞춤형 설정 기능

- 사용자는 자신의 취향과 필요에 맞게 프로그램을 설정할 수 있다:
    
    - 대기 시간 (10초, 30초, 1분, 3분)
        
    - 차단 강도 (리마인더, 강제 대기, 완전 차단)
        
    - 보상 방식 (스티커 모으기, 캐릭터 성장, 칭호 부여 등)
        
    - 프로그램 테마 (색상, 캐릭터, UI 스타일)
        
- 사용자가 스스로 설정에 참여함으로써 자율성과 몰입감을 높인다.
    

---

### 6. 성장 피드백 시스템

- 프로그램은 사용자의 모든 선택(성공, 실패, 이유, 감정 등)을 기록해 개인화된 성장 피드백을 제공한다.
    
- 예:
    
    - “이번 주 당신의 성공률은 65%, 지난주보다 15% 상승했습니다.”
        
    - “가장 흔들린 시간대는 오후 10시, 이때 주의해보세요.”
        
- 실패했을 때도 비난이나 부정적 메시지 대신, “실수했지만 괜찮아요. 내일 다시 도전해볼까요?” 같은 따뜻한 피드백을 준다.
    

---

### 7. 감정별 맞춤 코칭

- 사용자가 기록한 감정에 따라 상황 맞춤형 대안이나 조언을 제공한다.
    
- 예:
    
    - 스트레스 → “잠시 눈을 감고 심호흡 5번 해보세요.”
        
    - 지루함 → “책상 주변 정리나 짧은 산책 어때요?”
        
    - 화남 → “감정을 적어보거나 차분히 물 한잔 마셔보세요.”
        
- 반복된 사용 데이터를 기반으로, 사용자가 과거에 성공했던 대안을 우선적으로 추천한다.
    

---

### 8. 미래 자기 연결 미션

- 일정 streak나 milestone 달성 시, 프로그램이 다음과 같은 미션을 준다:
    
    - “미래의 나에게 편지 쓰기: 다음 주의 내가 지금의 나에게 하고 싶은 말은?”
        
    - “과거의 나에게 한마디: 일주일 전의 너에게 해주고 싶은 말은?”
        
- 이 기능은 장기적인 자기 관리 동기를 부여하며, 감정적으로 자신과 연결되게 돕는다.
    

---

### 9. 통계 및 시각화 대시보드

- 프로그램은 행동 기록, 감정 기록, 성공·실패 기록을 종합해 시각화된 대시보드로 제공한다.
    
- 주요 통계:
    
    - 하루/주/월 차단 시도 횟수
        
    - 감정별 통계 (예: 스트레스 상태에서 가장 많이 열어본 사이트)
        
    - 시간대별 패턴 (예: 오후 10시 ~ 11시 유혹 강도)
        
    - 성장 그래프 (streak 변화, 성공률 변화, 감정 변화)
        
- 사용자는 이를 통해 자신의 습관과 행동 패턴을 구체적으로 파악할 수 있다.
    

---

### 10. 인지 부하 최소화 UX

- 프로그램의 모든 인터페이스는 직관적이고 단순하게 설계된다.
    
- 복잡한 질문, 긴 입력 대신:
    
    - 감정 선택은 아이콘이나 키워드 버튼 클릭
        
    - 이유 기록은 한두 단어 선택 또는 짧은 입력
        
    - 피드백 화면은 시각 중심(숫자, 그래프, 캐릭터 반응)으로 제공
        
- 사용자의 참여 피로감을 최소화해 꾸준한 사용을 유도한다.
    

---

---

## 최종 비전

이 프로그램은 단순히 습관을 강제로 막는 도구가 아니라,  
사용자가 자신의 감정·행동·동기를 이해하고, 더 나은 선택을 반복하며,  
실패 속에서도 성장과 긍정적 변화를 체감할 수 있도록 돕는 **따뜻한 자기 코칭 플랫폼**이다.  
장기적으로는 게임화, 미래 자기 연결, 감정 분석 및 추천 고도화를 통해  
심리적·뇌과학적으로 지속 가능한 습관 개선 여정을 지원한다.

 

위 내용을 바탕으로 replit에 입력했고, 5분 정도 후에 첫 프로그램이 완성되었다.

 

이 때 까지만 해도 조금 의심을 가지고 있었는데 스스로 프로그램 구조를 만들고, 실제로 실행하니까 내가 원하는 기능들이 어느 정도 구현이 된 것을 보고 바이브 코딩이 정말 사용할 수 있는 기술이라는 것을 처음으로 체감할 수 있었다.

 

물론 처음에는 겉모습만 구현한 프로그램에 불과했기 때문에 기능 추가/개선이 많이 필요했고, 10번의 무료 사용 횟수는 금방 다 사용하게 되었다.

 

한 달에 $25의 가격이었는데, 나중에 알고 보니 한 달의 기간동안 100번의 사용이 가능한 요금제였다. 처음에는 100번 정도면 프로그램 2~3개도 만들 수 있겠다고 생각했는데, 프로그램이 점점 완성되어가면서 replit 자체의 hallucination 현상이 잦아져서 결국에는 100회를 꽉꽉 채운 후에야 첫 프로그램을 완성할 수 있었다.

요금제 페이지

 

Replit의 장점과 문제점

장점

가장 큰 장점은 정말 개발에 문외한인 사람도 혼자서 프로그램을 개발할 수 있다는 사실 자체인 것 같다. 나는 python은 조금 알지만, 프로그램 구조, html, css, js 등에 대한 지식은 전혀 없음에도 프로그램을 제작할 수 있었다.

 

그리고 chatgpt처럼 대화형으로 프로그램을 제작할 수 있다는 것도 개발자가 아닌 사람들의 접근성을 높이는 장점인 것 같다.

 

또한, 개인적으로 느끼기에 디자인도 나쁘지 않았다고 생각한다. 프롬프트에 세련되게, 최근 트렌드에 맞춰서 디자인을 해 달라고 입력하니까 나쁘지 않은 디자인과 반응형 UI, 애니메이션 같은 기능도 구현할 수 있었다.

모달 상자 디자인

문제점

위에서 말 했듯이 프로그램이 점점 완성되고 복잡해지면서 AI 환각(AI hallucination) 현상이 발생했고, 한 가지 문제를 해결하면 다른 문제가 발생한다던가, 똑같은 문제를 10~20번의 대화 후에도 해결하지 못하는 등의 문제가 발생했다. 처음에는 계속 오류 해결을 요청하면 결국에는 고칠 것이라는 생각에 몇시간이고 계속 시도했지만, 스스로 절대 못 고치는 문제가 발생했다.

 

한 가지 예로, 변수명을 ABC로 정해놓고 다른 곳에서는 abc로 참조하면서 기록이 제대로 저장되지 않는 문제를 10시간 넘게 해결하지 못 하고 있었는데, 결국 개발자 친구의 도움을 받아 해결할 수 있었다.

 

또한, 이렇게 문제 해결을 위해 코드를 직접 읽어보는 과정에서 코드가 굉장이 지저분하다는 느낌을 받았다. 예를 들어서 내가 A라는 기능을 조금 고쳐서 a, b는 추가하고 원래 있던 c 기능은 지워달라고 요청하면 replit에서는 이 A라는 기능 함수나 파일을 직접 수정하는 것이 아니라 working_A, new_A 같이 새로운 파일, 함수를 만드는 식으로 기능을 수정하고 있었다.

 

이 때문에 지금 실제로 사용되는 파일, 함수가 무엇인지 알기가 어려웠고 버그 수정도 더 어려웠다.

 

후기

가장 크게 느낀점은 재밌다는 감정이다. 개발자가 아닌 사람 입장에서 내 아이디어가 직접 프로그램으로 제작되서 실행되는 모습을 보는것이 굉장히 즐거웠다. 그래서 실제로 프로그램을 개발하는 3일동안 하루에 8~12시간씩 몰입해서 작업할 수 있었다.

 

그리고 조금이라도 프로그램 개발에 대한 지식이 있다면 바이브 코딩을 훨씬 더 잘 활용할 수 있겠다는 생각이 들었다. 바이브 코딩은 아직 완벽하지 않고, 필연적으로 버그가 발생하게 되는데 나는 개발 지식이 전무했기 때문에 버그 해결 과정에서 큰 어려움을 겪었다.

 

한 문제는 하루 종일 해결하지 못 하다가 결국 개발자 친구에게 도움을 받았는데, 코드를 조금 읽을 줄 알면 해결할 수 있는 정말 사소한 문제였어서 허탈한 감정이 느껴졌다.

 

Chatgpt같은 AI가 처음 등장했을 때 많은 직업들이 사라질 것이라는 공포가 만연했지만 결국에는 이런 AI툴을 잘 활용하는 사람들의 생산성이 크게 높아졌다.

 

바이브 코딩도 마찬가지로 개발자들의 일자리를 빼앗기 보다는 개발자들의 생산성을 크게 키울 수 있는 하나의 도구가 등장한 것 같다.

 

다음에는 또 다른 AI 개발 도구인 Cursor도 사용해보려고 한다.

 

 

PauseMate - Self-Coaching Tool - Chrome 웹 스토어

Break unconscious bad habits with psychological coaching and positive reinforcement

chromewebstore.google.com

'기타' 카테고리의 다른 글

PauseMate Privacy Policy  (0) 2025.05.27
'기타' 카테고리의 다른 글
  • PauseMate Privacy Policy
doriden314
doriden314
woojab 님의 블로그 입니다.
  • doriden314
    잡다로그
    doriden314
  • 전체
    오늘
    어제
    • 분류 전체보기 (16)
      • 일상 기록 (2)
      • OPC 프로그램 개발 (0)
      • 기술 정리 (0)
      • AI (6)
        • 네이버 부스트캠프 (6)
        • Pytorch (0)
        • AI 기초 (0)
      • 알고리즘 (1)
      • 수학 (3)
        • 확률론 (1)
        • 선형대수학 (2)
      • 글쓰기 (2)
      • 기타 (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    알고리즘
    선형대수학
    자료구조
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
doriden314
바이브 코딩으로 구글 확장 프로그램을 만들어봤다.
상단으로

티스토리툴바