[바이브코딩] 공부가 너무 하기 싫어서 앱을 만들어버렸다 🃏

2025년의 어느 날, 정보처리기사 자격증 책을 펼쳐놓고 멍하니 앉아 있었다.

외워야 할 용어는 산더미인데 머릿속엔 하나도 들어오지 않았다.

그러다 문득 떠올랐다. '낱말카드로 외우면 좀 낫지 않을까?'

 

공부하던 당시 마인드맵으로 단어 정리 중이던 때... 적어도 적어도 끝이 없었다.

 

불편함이 쌓이면 결국 만들게 된다

낱말카드 앱을 찾아봤는데, 막상 써보려니 하나같이 걸리는 게 있었다.

회원가입은 기본이고, 내가 원하는 용어를 직접 올리는 방식도 제각각이라 번거로웠다.

모바일에서 깔끔하게 보이는 것도 찾기 어려웠다. 딱 내가 원하는 게 없었다.

 

그냥 내가 원하는 것만 있는, 단순하고 빠른 도구.

그게 갖고 싶었다.

"그러면 내가 만들면 되지 않나?"

 

Claude AI랑 바이브코딩을 해봤다

사실 Claude AI와 함께 바이브코딩을 해본 건 이번이 처음은 아니었다. 거창한 게 아니라, 머릿속에 있는 아이디어를 말로 풀어내면 코드가 나오는 방식이었다. 기획자처럼 "이런 기능이 있었으면 좋겠어" 를 던지면, 같이 구조를 잡고 구현해나가는 느낌. 혼자 처음부터 만들었다면 아마 시작도 못 했을 거다.

이번엔 저장소의 필요성도 느꼈다. PC로도, 핸드폰으로도 공부하고 싶었기 때문에 기기에 상관없이 데이터가 유지돼야 했다. 혼자 쓰는 도구인 만큼 유지 비용이 거의 없어야 한다는 조건도 있었다. 그러다 보니 자연스럽게 Firebase Firestore가 DB로 낙점됐고, 프레임워크 없이 HTML5 / CSS3 / JavaScript 만으로 구축하게 됐다.

 

3일 동안 만든 것들

기술 스택은 최대한 단순하게 가져갔다.

• HTML5 / CSS3 / JavaScript — 프레임워크 없이 순수하게
• Firebase Firestore — 클라우드 기반 저장으로 어떤 기기에서 접속해도 데이터 유지
• GitHub Pages — 따로 서버 비용 없이 무료 배포

기능적으로는 이런 것들을 구현했다.

카드 추가/삭제는 기본이고, 가장 공들인 건 엑셀 업로드 기능이었다. 자격증 용어가 수백 개인데 하나하나 입력하면 공부보다 입력에 더 지칠 것 같았다. 엑셀에 카테고리, 단어, 뜻을 정리해두면 한 번에 쭉 불러올 수 있게 만들었다. 업로드 할 때는 중복 단어는 업로드되지 않도록 하는 섬세한 기능까지 들어가있다.

그리고 카드 뒤집기 애니메이션. 사실 없어도 되는 기능인데, 이게 있고 없고의 차이가 생각보다 컸다. 앞면에 단어, 뒤집으면 뜻. 이 단순한 인터랙션 하나가 공부할 맛을 살려주더라.

Firestore는 처음 써보는 거라 초반 셋팅에서 좀 헤맸지만, Claude AI와 함께하니 수월하게 진행할 수 있었다.

 

만들기 잘했다

완성된 앱을 처음 열어봤을 때, 기능이 많은 것도 아니고 디자인이 화려한 것도 아니지만 괜히 뿌듯했다. 특히 모바일 WEB 화면에서 카드 출력부를 고정하고 손가락 스와이프로 카드를 넘겨볼 수 있는 기능을 구축하기 위해서 1~2일이 더 소모 되었었는데 그 부분이 잘 구현된거같다. 내가 불편했던 것을 내가 직접 해결했다는 느낌. 그게 토이 프로젝트의 묘미인 것 같다.

 

솔직히 말하면, 만들어놓고 공부에 여력을 쏟기 힘든 시기를 겪었던 터라 정작 열심히 활용할 순 없었다.

그래도 아예 의미 없진 않았다. 만들면서 용어를 한 번 훑었고, 테스트하면서 또 한 번 봤으니까. 억지로 외우려 했을 때보다 오히려 자연스럽게 눈에 익은 것 같기도 하다.

 

그리고 처음부터 정보처리기사 전용이 아니라, 카테고리 구조로 만들어둔 덕분에 다른 용도로도 쓸 수 있다.

다음엔 CS 지식 외우는 용으로 써봐야겠다. 이번엔 진짜로. 😄

 

🔗 낱말카드 학습 앱 구경하기