소개
오늘도 AI의 위대함을 전파하고 있었습니다.
노 코드 앱에 대해서 이야기하고 있는데
한 친구가 가벼운 도전장을 내밉니다.
어느 시절 이야기를 하고 있는지 모르겠지만
친절하게 ChatGTP에서 10초 내로 결과물을 보여줍니다.
그러고 나서 cursor 해당 기능을 지원하는 앱을 만들어볼까 합니다.
말만 하면 1분 내로 딱 나올 것 같았거든요.
저는 사실 프로그래머지만,
일반인 코스프레를 하기 위해서
코딩을 하지 않고 앱 만들어보기 시도 해 봅니다.
진행 방법
#1. 최초 프롬포트
스터디에서 했던 내용대로 기초 페이지를 만들고
Open with Live Server를 해보았습니다.
하지만, 브라우저에는 빈 하얀 화면 밖에 안 뜨더군요.
#2. 화면 오류 디버깅
친구 놈이 원하는 바에서는 조금 멀어졌지만,
프로그래머가 아니어도 디버깅 정도는 할 수 있으니까 (?)
디버깅 콘솔을 열고 에러코드를 그대로 복붙 합니다.
Uncaught SyntaxError: Cannot use import statement outside a module (at app.js:1:1)
그래도 여전히 창이 뜨지 않습니다.
콘솔 에러를 보니 '<'를 해석하지 못하고 있군요.
악간의(?) 지식을 활용해서 jsx를 해석 할 수 있게 해 달라는 힌트를 줍니다.
아직 코드를 수정하지는 않았습니다.
페이지가 뜨는데 submit 버튼이 없습니다.
submit이 뭔지는 프로그래머가 아니어도 알 수 있습니다. (?)
화면 구성까지 성공했습니다.
#3. API 동작 디버깅
이제 실제로 잘 동작하는지 테스트를 시도합 니다.
이제 파일을 넣고 보내니 또 정체불명의 에러가 뜹니다.
프로그래머도 영어로 나는 에러는 읽기 무서우니 '있는 그대로' 입력해보겠습니다.
내용을 자세히 읽지는 않았지만 무언가 수정되었다고 하는군요
다시 시도해 보았습니다.
이번에도 문장이 짧아서 읽어보았는데, 뭔가 만료된 모델을 지정하는 코드를 썼나 보군요. 에러를 넣으니까 무언가 해결해준 것 같습니다.
다시 시도해 보았습니다.
안 읽고 복사 붙여넣기로는 해결되지 않는 시점이 되었습니다..
pdf 파일이 67 KB 밖에 안되지만 뭔가 토큰 제한을 넘어버렸군요.
web API로 보내면서 file을 통채로 string 에 붙여서 보내고 있는 걸 확인했습니다.
일단 프로그래머가 아닌 척(?) 기술 용어는 제외하고 추가 질문을 했습니다.
해당 내용을 물어보니 해결책이 제시 되고 코드가 개선되었습니다.
하지만 저는 LLM이 pdf 파일을 읽도록 하고 싶었으니, pdf-lib이 해결해주는 것은 제가 원하는 동작이 아니군요. 물론, 사용자가 원하는 기능 동작을 위해서는 아주 효과적이고 훌륭한 솔루션이라고 판단됩니다.
결과와 배운 점
최종적으로 코드를 한 줄도 수정하지 않고 cursor 와 대화하고 accept를 누르는 것만으로 원하는 기능을 만들 수는 있었습니다.
최초에 친구가 요구한 대로 인간이 '까딱' 거리면 완성 된다 라는 관점에서
A. '이 정도면 충분히 이루어 진 것 아닌가' 하는 감동이 있을 수도
B. '프로그래머 눈에나 쉬운 거지, 기반 상식이 없으면 어떻게 저렇게 해' 하는 막막함을 느낄 수도
있을 것 같습니다.
기능 구현은 성공했지만, AI가 더더욱 발전해서 '까딱', '딸깍' 하면 '짜잔'하는 세상이 오기를 기대하며 제 마음에는 실패한 사례로 공유합니다.