AI가 코드를 망쳤을 때 (59초 해결법) #기획자 #pm #마케터
AI가 코드를 망쳤을 때 (59초 해결법) #기획자 #pm #마케터
#AI #AI코딩 #개발 #코딩 #바이브코딩 AI 코딩하다 크레딧 다 썼을 때 대처법 AI한테 "넷플릭스처럼"이라고 시켰더니 (2편) 레플릿 크레딧 다 써서, 커서로 넷플릭스 클론코딩 2편 (AI의 현실적인 문제들)
AI 코딩, 현실에선 이렇게 합니다 (에러, 크레딧 부족, 디자인 수정)
AI에게 "넷플릭스처럼"이라고 시키면 벌어지는 일 (이미지 첨부 필수)
지난 시간, AI에게 "넷플릭스 만들어줘"라고 시켜 5분 만에 앱을 만들었지만... 현실은 동화가 아니었습니다. 무료 크레딧은 순식간에 동났고, AI가 만든 코드는 에러 투성이였습니다. 그래서 플랜 B를 가동했습니다. 레플릿Replit에서 커서Cursor로 갈아타, 좌충우돌 넷플릭스 클론 코딩을 이어갑니다. AI 코딩의 현실적인 문제들(크레딧 관리, 디버깅, 디자인 수정)과, 그것을 해결하는 왕초보의 눈높이에 맞춘 실전 노하우를 전부 공개합니다.
#클론코딩 #AI코딩 #커서 #레플릿 #넷플릭스 #코딩초보 #바이브코딩 #AI개발
AI한테 "넷플릭스 만들어줘"라고 시켰다가 레플릿 무료 크레딧 다 썼습니다... 그래서 커서로 갈아탔는데, 이번엔 에러가 터지고 디자인이 산으로 가네요. AI 코딩의 현실적인 문제들, 이렇게 해결했습니다.
#AI #AI코딩 #개발 #코딩 #에러
안녕하세요, AI 네이티브를 위한 날것의 생산성, 콜잇AI입니다.
지난 시간, 우리는 AI 코딩 툴 레플릿에게 "넷플릭스를 만들어줘" 라고 시켜서 5분 만에 그럴듯한 앱 UI를 만드는 충격적인 과정을 함께했습니다. 많은 분들이 "진짜 되네요?" 라며 놀라워하셨는데요.
하지만 현실은 동화가 아니었습니다. 제가 그 앱을 좀 더 다듬어보려고 몇 가지 추가 요청을 하는 순간, 재앙이 닥쳤습니다.
네, 무료 플랜의 크레딧을 전부 소진해버린 겁니다. 레플릿이 강력한 만큼, AI가 일하는 비용도 만만치 않았던 거죠.
그래서 오늘, 저는 플랜 B를 가동하기로 했습니다. 바로 우리 채널의 또 다른 주인공, 커서(Cursor)로 갈아타서 넷플릭스 클론 코딩을 완성하는 겁니다. 이 과정에서 여러분은 AI와 협업할 때 부딪히는 진짜 문제들과, 그걸 해결하는 현실적인 노하우를 배우게 될 겁니다. 그럼, 좌충우돌 클론 코딩 2편, 지금 바로 시작하겠습니다.
1단계: 이사, 그리고 비용 절감 세팅 (모델 선택)
먼저, 레플릿에서 만들었던 코드를 전부 복사해서, 커서의 새 프로젝트에 붙여넣었습니다. 이사는 간단하게 끝났죠.
여기서 초보자분들을 위한 첫 번째 꿀팁입니다. 커서에서 AI 모델을 선택할 때, 무조건 GPT-5나 클로드 오푸스를 쓸 필요가 없습니다. 오른쪽 상단의 모델 설정을 누르고, Auto로 설정해주세요.
Auto 모드는, 제가 던지는 질문의 난이도를 AI가 스스로 판단해서, 간단한 질문에는 빠르고 저렴한 모델을, 복잡한 질문에는 똑똑하고 비싼 모델을 알아서 골라 쓰는 가성비 모드입니다. 이렇게만 설정해도 우리의 소중한 크레딧을 엄청나게 아낄 수 있습니다.
2단계: 첫 번째 오류와의 만남 (디버깅) 자, 이제 커서에서 코드를 실행해 봤습니다. 그런데...
화면이 하얗게 변하면서 수많은 에러 메시지가 뜹니다. 레플릿 환경에서는 잘 돌아가던 코드가, 커서로 이사 오면서 뭔가 꼬인 거죠. 초보자라면 여기서 멘붕이 옵니다.
하지만 당황할 필요 없습니다. 우리에겐 AI 조수가 있으니까요. 저는 이 에러 메시지를 그대로 복사해서, Cmd+L로 채팅창을 열고 AI에게 보여줬습니다. "커서로 프로젝트를 옮겼더니 이런 에러가 발생했어. 원인이 뭐야? 그리고 이 문제를 해결하기 위한 전체 코드를 다시 짜줘."
AI가 코드를 분석하더니, "아, 일부 라이브러리의 버전이 맞지 않아서 충돌이 났네요. 제가 호환되는 버전으로 수정하고, 코드 구조도 최신 표준에 맞게 다시 정리해 드릴게요." 라며 해결책과 함께 수정된 코드를 내놓습니다. 이걸 적용했더니... 드디어 화면이 정상적으로 뜹니다!
3단계: 의도치 않은 결과물 (반응형 웹 요청) 오류는 잡았지만, 뭔가 이상합니다. 화면이 너무 커서 스크롤을 한참 내려야 합니다. PC 화면에서는 그럭저럭 볼만한데, 이걸 스마트폰에서 본다고 상상하니 끔찍하네요.
이유를 물어봤더니, AI는 제가 '모바일 앱'을 만들어달라고 해서, 딱 아이폰 크기에만 맞춰서 UI를 만들었다는 겁니다. 이런...
그래서 다시 요청했습니다. "이 앱을 스마트폰, 태블릿, 데스크탑 어디에서 봐도 화면 크기에 맞게 자동으로 레이아웃이 바뀌는 '반응형 웹'으로 만들어줘."
AI가 잠시 고민하더니, 화면 크기에 따라 레이아웃을 다르게 보여주는 미디어 쿼리(Media Query) 코드를 추가해서 전체 코드를 다시 짜주었습니다. 이제 브라우저 크기를 줄였다 늘렸다 해보면, 콘텐츠들이 알아서 재배치되는 것을 볼 수 있습니다.
4단계: 진짜처럼 만들어줘! (이미지 레퍼런스 첨부) 이제 기능은 그럭저럭 돌아가는데, 디자인이 영 넷플릭스 같지가 않습니다. 너무 밋밋해요. 말로만 "넷플릭스처럼"이라고 하니, AI가 그 느낌을 정확히 이해하지 못한 겁니다.
이럴 때 필요한 것이 바로 시각적 레퍼런스입니다. 저는 실제 넷플릭스 앱 화면을 캡처해서, 커서 채팅창에 이미지로 첨부했습니다. 그리고 이렇게 마지막 명령을 내렸죠. "지금 우리 앱의 디자인이 너무 구려. 내가 첨부한 이 넷플릭스 스크린샷 이미지랑 똑같이 만들어줘. 특히 콘텐츠 목록이 가로로 스크롤되는 캐러셀 UI, 그리고 마우스를 올렸을 때 미리보기 영상이 나오는 효과를 그대로 구현해줘."
이 요청은 굉장히 복잡하기 때문에, AI가 한참 동안 코드를 작성합니다. 우리의 소중한 크레딧과 토큰이 열심히 타고 있죠.
자, 결과가 나왔습니다! 음... 솔직히 말해서, 넷플릭스랑 완전히 똑같지는 않습니다. 여전히 어딘가 어설프고, 미리보기 기능도 완벽하지 않네요. 아마 몇 번 더 질문을 주고받으며 다듬어야 할 것 같습니다.
하지만 영상 길이가 너무 길어지면 안 되니... (그리고 제 크레딧도 아껴야 하니...) 오늘의 클론 코딩은 일단 여기까지 하겠습니다!
결론: AI는 완벽한 개발자가 아닌, 신입사원이다
어떤가요? 오늘 우리는 AI와 협업하는 과정의 현실을 적나라하게 봤습니다. AI는 한 번에 완벽한 결과물을 가져다주는 마법 지팡이가 아닙니다. 가끔은 오류를 내고, 내 의도를 잘못 이해하기도 하는, 똑똑하지만 아직 경험이 부족한 신입사원과 같습니다.
우리의 역할은, 명확하게 지시하고, 잘못된 결과물을 가져왔을 때 정확한 피드백을 주며, AI가 올바른 방향으로 성장하도록 이끄는 사수 또는 PM이 되는 것입니다.
레플릿에서 커서로. 오류 수정에서 반응형 웹 적용, 그리고 이미지 레퍼런스를 통한 디자인 개선까지. 이 좌충우돌의 과정이, AI 시대를 살아가는 우리 모두에게 필요한 진짜 실무 능력이라고 저는 생각합니다.
다음엔 또 어떤 서비스를 클론 코딩 해볼까요? 여러분이 보고 싶은 서비스가 있다면, 댓글로 자유롭게 남겨주세요. 오늘 내용이 도움이 되셨다면, 구독과 좋아요 잊지 마시고요. 감사합니다.
Watch the Video
This post is based on our YouTube video. Watch it for more details!
Originally published on YouTube: 10/21/2025