바이브 코딩 도전기 4탄 - 쇼핑몰 API 연동 OMS 개발기 🛒

바이브 코딩 도전기 4탄 - 쇼핑몰 API 연동 OMS 개발기 🛒

안녕하세요! 오늘은 제 바이브 코딩 도전기의 네 번째 이야기를 들려드리려고 합니다. 이번 프로젝트는 정말... 한마디로 표현하자면 '롤러코스터' 그 자체였어요. 하지만 그만큼 많은 것을 배우고 느낄 수 있었던 소중한 경험이었습니다.

왜 쇼핑몰 API 연동에 도전했을까?

지금까지 저는 단계적으로 난이도를 높여가며 프로젝트를 진행해왔어요. 정적 홈페이지부터 시작해서, Supabase 데이터베이스 연동, 노션을 데이터베이스로 활용하는 홈페이지, 그리고 구글 API를 연동한 이미지 생성 서비스까지 만들어봤죠.

이번에는 한 발 더 나아가기로 결심했습니다. 바로 쇼핑몰 API를 연동하는 OMS(주문관리 시스템) 개발이었어요.

사실 이 프로젝트를 선택한 데는 두 가지 이유가 있었습니다.
첫째, 자연스럽게 난이도를 높여온 흐름 속에서 다음 단계로 도전해보고 싶었어요.
둘째, 제 현업과도 연관이 있고, 실제로 이런 시스템 구축을 고민하는 분들이 많다는 걸 알고 있었거든요.

쇼핑몰이나 쇼핑 플랫폼을 연동해서 한 곳에서 상품을 등록하고 관리하거나 주문을 수집하는 등의 단순 반복 작업을 자동화하는 시스템, 이게 바로 OMS예요.
이런 서비스를 제공하는 회사들이 꽤 많을 정도로 수요가 있는 분야입니다.

개발 프로세스와 첫 번째 실패

이제 저는 나름의 개발 루틴이 생겼어요.
먼저 개발 문서를 만드는 것부터 시작하는데요(이 과정도 AI를 활용합니다), PRD, TRD, DS, DD 등 총 6개의 개발 문서를 작성하고, 이를 프로젝트 폴더에 저장한 뒤 AI에게 학습시킵니다.
그런 다음 단계별로 프롬프팅하면서 개발을 진행하죠.

이번에도 그렇게 시작했는데... 뭔가 잘못됐나 봐요.
개발 문서대로 만들어진 결과물이 정말 목업 수준에 불과했고, 쇼핑몰 연동이라는 가장 핵심적인 기능조차 제대로 구현되지 않았습니다.

실망이 컸지만, 여기서 포기할 수는 없었죠. 이래저래 수정하고 삽질하다가 결국 깨달았습니다.
"이대로는 안 되겠다. 차라리 새롭게 시작하자!"

예상치 못한 복병 - 프로젝트 폴더 미스터리

기존 폴더에서 불필요한 자료는 삭제하고 개발 문서 등 주요 내용만 남긴 뒤, 다시 개발을 시작했어요.
한창 AI와 대화하면서 개발을 진행하고 있었는데... 이상한 일이 벌어졌습니다.

좌측 폴더를 보니 초기 파일들 외에 추가된 파일이 하나도 안 보이는 거예요!
분명 AI는 새롭게 파일을 만들었다고 답변하고 있는데 말이죠.

한참을 들여다보다가 발견한 충격적인 사실...
파일들이 제가 작업하고 있던 프로젝트 폴더가 아니라, 새롭게 생성된 다른 프로젝트 폴더에 만들어지고 있었습니다!

지금도 정확한 이유는 모르겠지만, Cursor 창을 2개 열어놓고 당황해서 어쩔 줄 모르던 그 순간이 생생하게 기억나네요. ㅎㅎ

다시 한 프로젝트로 내용을 합치고 작업을 재개했습니다.
이번에는 쇼핑몰 연동 기능에 중심을 두고 개발하도록 AI에게 강조하면서 진행했어요.

드디어 연동 성공! 그런데...

드디어 중요한 순간이 왔습니다.
쇼핑몰 연동 정보를 설정하고 실제 연동을 확인하는 단계였어요.
그런데 연동 테스트를 하기 전에, 연동 정보를 입력해서 저장하는 기능이 제대로 구현되지 않아서 이 부분만 하루 이상 걸렸습니다.

이 과정에서도 하나의 툴만 쓴 게 아니라 Codex, Claude, Cursor 등을 돌아가면서 사용했어요.
정보 입력 저장 기능이 정상적으로 작동한 후, 드디어 실제 쇼핑몰과의 연동을 확인하는 순간이 왔습니다.

주문 조회 버튼을 누르고 기다렸어요.
처음 몇 번은 에러가 났지만, AI의 요청대로 환경 변수나 토큰 값 등을 잘 설정하고 나니 큰 문제없이 연동 성공 메시지를 받을 수 있었습니다!

생각보다 이 부분은 쉽게 해결됐는데요, 그 순간의 기쁨은 정말 대박이었어요!

날벼락 같은 "500 에러" 사건

하지만 진짜 문제는 지금부터였습니다.
다 완성되었다고 생각하고 마무리하려던 차에, 정보 설정 입력창에서 이상한 문제가 발생했어요.
데이터를 입력하면 계속 예시 데이터만 보이고 실제 입력이 안 되는 거예요.
당연히 연동 정보가 저장되지 않아 연동 기능도 제대로 작동하지 않았습니다.

다른 AI 코딩 툴로 옮겨서 오류를 수정하라고 했는데...
이게 무슨 날벼락인가요! 😱

잘 나오던 페이지가 모두 날아가 버렸어요.
하나도 안 보이고 "500" 에러만 표시되는 겁니다.

원인을 찾아보니, AI가 특정 환경 변수를 변경하라고 해서 그중 하나를 새로 발급받아 변경했는데, 그게 문제였어요.
그 환경 변수는 절대 변경하면 안 되는 값이었는데, AI의 안내만 믿고 따라 했다가 완전히 망친 겁니다.

속으로 "이거 완전히 날아가서 살릴 수 없는 거 아닌가?" 싶었습니다.
다행히 파일은 남아 있었고(물론 코드는 엉망이었지만), 어떻게든 살려보겠다는 사투가 시작됐습니다.

24시간의 사투

지금으로부터 24시간 전, 본격적인 복구 작업이 시작됐어요.
AI 툴 3~4개를 돌아가면서 계속 질문하고 고치고...
어찌어찌 화면은 살릴 수 있었지만, 다시 입력창 데이터 입력 문제가 재발했습니다.

미치겠더라고요.
한 가지를 고치니 다른 게 문제가 되고, 이런 과정이 계속 반복됐어요.
두 가지 오류가 순서대로 반복되고, AI의 답변도 동일하게 반복되고, 수정 내용도 똑같이 반복되니 오류가 계속될 수밖에 없었습니다.

포기하려는 순간, 마지막으로 한 번 더 시도해보기로 했어요.
AI 코딩 툴을 바꾸고, 모델도 Sonnet 3.5로 변경한 뒤 마지막 질문을 다시 날렸습니다.

그런데... 드디어 해결됐습니다! 만세! 🎉

비개발자로서의 한계와 교훈

하지만 솔직히 말씀드리면, 앞으로 동일한 문제가 발생하면 또 똑같이 헤맬 것 같아요.
왜냐하면 개발자가 아니기 때문에 AI가 제시하는 해결 방안을 대부분 이해하지 못한다는 게 가장 큰 단점이거든요.

만약 해결 방안을 제대로 이해했다면, 차후에 동일한 문제가 발생했을 때 그 방법을 AI에게 제시해서 수정하라고 할 수 있을 텐데 말이죠.
이것이 바로 비개발자의 가장 큰 약점입니다.

이번 프로젝트에서 배운 핵심 교훈

1. 함부로 삭제하거나 수정하지 말 것

특히 환경 변수 같은 중요한 값들은 절대 함부로 건드리면 안 됩니다.
AI의 조언도 맹신하지 말고, 정말 중요한 설정은 백업을 해두는 게 좋아요.

2. 꼬인 프로젝트는 과감히 새로 시작하자

이미 코드가 뒤죽박죽 꼬였다면, 그걸 붙잡고 해결하려는 것보다 처음부터 다시 시작하는 게 훨씬 낫습니다.
시간도, 정신 건강도, 토큰도 아낄 수 있어요. ㅎㅎ

3. 전문가의 도움을 구하거나, AI와의 대화를 체계적으로 관리하자

주변에 도와줄 전문가가 있다면 물어보는 게 가장 좋아요.
만약 없다면, AI가 설명해주는 해결 방안을 잘 정리해서 다시 제시하고,
"이런 방법으로 수정했지만 안 됐으니 다른 방법을 고민해달라"고 차분히 설명하세요.
저는 마지막에 이렇게 해서 해결했습니다!

4. 여러 AI 툴을 활용하자

한 가지 툴에서 계속 같은 답변만 반복된다면, 과감히 다른 툴이나 다른 모델로 바꿔보세요.
같은 문제라도 다른 AI는 다른 접근법을 제시할 수 있습니다.

보너스: 개발 용어 하나 배웠어요!

입력창에 관련된 문제를 AI에게 설명할 때, 전문 용어를 사용하면 훨씬 정확하게 이해한다는 걸 배웠어요.
나중에 여러분도 유용하게 쓸 수 있을 것 같아서 공유합니다:

onFocus

• 입력 요소에 포커스가 갔을 때(클릭하거나 커서를 옮겼을 때) 발생하는 이벤트
• 예: 사용자가 입력란을 클릭하면 안내 메시지를 표시할 때 사용

onChange

• 요소의 값이 변경된 뒤, 포커스가 다른 곳으로 이동할 때 발생하는 이벤트
• 실시간이 아니라 입력이 끝나고 값을 확정지을 때 실행
• 예: 입력 후 자동으로 소문자로 변환하거나 유효성 체크

onBlur

• 해당 요소에서 포커스를 잃었을 때(커서가 빠져나갈 때) 발생하는 이벤트
• 예: 아이디 입력란에서 나갈 때 "사용 가능한 아이디입니다" 메시지 출력

이런 이벤트들은 웹 표준뿐 아니라 React 등의 프레임워크에서도 자주 사용되며,
주로 폼 validation, 사용자 안내, UX 개선 목적으로 활용됩니다.

AI에게 "입력창에 입력하면 텍스트가 안 보여요"라고 말하는 것보다,
"onFocus 이벤트에서 placeholder가 사라지지 않는 문제가 있어요"라고 전문 용어로 설명하면 훨씬 정확한 답변을 받을 수 있답니다!

마치며 - 여러분께 꼭 하고 싶은 말

이번 프로젝트는 정말 힘들었지만, 그만큼 많은 걸 배웠어요.
24시간 동안 포기하지 않고 붙잡고 있었던 제 자신이 대견하기도 하고요. ㅎㅎ

비개발자가 AI 코딩에 도전하는 것은 분명 쉽지 않은 길입니다.
하지만 불가능한 것도 아니에요. 중요한 것은:

• 포기하지 않는 끈기
• 체계적인 접근 방식 (개발 문서 작성, 단계별 진행)
• 실패를 통한 학습 (같은 실수를 반복하지 않도록 기록하기)
• 다양한 도구 활용 (한 가지 툴에 의존하지 말기)

여러분도 AI 코딩에 도전하고 계신다면, 실패를 두려워하지 마세요.
오히려 실패에서 배우는 게 더 많습니다.
저처럼 환경 변수 하나 잘못 건드려서 모든 게 날아가는 경험도 해보면서(하지 마세요 ㅎㅎ),
점점 더 성장할 수 있을 거예요.

다음 도전기에서는 더 발전된 모습으로 찾아뵙겠습니다.
긴 글 읽어주셔서 감사하고, 여러분의 코딩 여정에도 행운이 함께하길 바랍니다! 💪

---

P.S. 혹시 비슷한 경험이 있으시거나, 궁금한 점이 있다면 댓글로 공유해주세요. 함께 성장해나가요!