소개
바이브 코딩 1도 모르던 자레드 입니다.
우여곡절 끝에 결과물이 만들어 내고, 이렇게 글을 쓰게 되었네요.
해외 출장을 종종 다니는 저는 로컬 식당에서 메뉴판을 보며 식사를 주문할 때
어려움이 직면 하는 경우가 종종 있습니다.
바이어를 동반할 경우 하나하나 음식을 설명해야 하는데, 시간도 많이 걸리고, 몇 가지 설명을 하면 앞에 설명한 음식을 다시 설명 해야 되는 경우도 생기고 말이죠.
구글 번역을 활용해 보지만, 추상적인 음식 이름 같은 경우 저도 이해가 안되는 경우가 종종 있곤 했습니다.
그래서 이를 보완할 전용 앱이 있으면 어떨까 하는 생각에서 시작하게 되었습니다.
진행 방법
vs code, claude code(유료), chatGPT 등 사용했습니다.
제가 만들고자 하는 앱에 대하여 챗gpt와 대화를 통해 목표와 기능 등을 설명하여 프롬프트를 만들었습니다.
vs code에서 git clone https://github.com/openai/openai-apps-sdk-examples.git 을 실행 후
기존에 설정되어 있던 폴더명과 파일명을 클로드 코드를 활용하여 모두 변경 하도록 했습니다.
챗gpt를 통해 만들어 놓은 프롬프트를 클로드 코드에게 넣고, 이를 반영하여 코드를 만들어 달라고 했습니다.
검정색 배경의 컴퓨터 화면 스크린샷
설정을 모두 마친 후에 클로드 코드에게 잘 실행이 되는지 테스트를 요청 하여 작동을 확인 했습니다.
구동이 되는지 실제 실행을 하는 과정에서 서버가 이미 구동 중이라는 오류와 주소를 찾을 수 없다는 오류 등 여러 오류가 발생을 했습니다.
오류 사례
한국어 문자 메시지 스크린샷
한국어로 된 메시지 스크린샷
발생하는 문제를 모두 클로드 코드 보내어 해결해 달라고 했습니다.
반복적인 문제점을 모두 수정 후 최종적으로 ngrok http 8000 을 실행
챗gpt 개발자 모드로 접속 후
연동 앱 및 커넥터를 새로 만들어서 다음 같은 방식으로 구동이 되는 것을 확인했습니다.
실제로 활용이 되는지 확인을 위해서는 휴대폰 앱으로 테스트를 해봐야 할 것 같은데, 휴대폰 앱에는 개발자 모드를 찾을 수 없어서 이에 대한 보완점을 다음 스터디까지 알아볼 예정입니다.
이상 입니다.
감사합니다.
결과와 배운 점
오프라인 모각에서 모르는 점도 여쭤보면서 하다보니 이렇게 결과물을 만들게 되었습니다. 도움 주신 혜미 스터디장님 포함 모각에 나오신 분들께 감사하고요.
바이브 코딩을 할 줄 몰라도 vs code와 클로드 코드만 있으면 코딩이 되었고요.
바이브 코딩 중독이라고 말을 들었을 때는 이해가 안갔는데,
이번을 계기로 어렴풋이 이해가 되었습니다 ㅎ
필요한 도움으로는 실제 휴대폰에서 실행 가능한 앱을 만들어야 할 것 같은데, 어디서 부터 시작을 해야할지 모르겠다는 생각이 들었습니다.
