클로드 코드에 한 줄만 던져서 자전거 여행 사이트를 만들었습니다. 빈 폴더에서 주소가 나오기까지 1시간 26분이 걸렸고 그 사이 일곱 번 막혔습니다. 일곱 중 둘은 도구가 그 사이에 바뀐 것이었고(지도 바탕이 키를 받기 시작했고, 불러오기 방식이 달라졌습니다), 하나는 오류가 한 줄도 안 뜨는 고장이었으며(지도 일꾼이 죽어 화면이 까맣게 비었습니다), 하나는 윈도우에서만 나는 것이었습니다(바로가기를 못 만들어 배포가 죽었습니다). 한 번 고친 오류가 35분쯤 뒤에 다른 얼굴로 또 왔고 그때는 빌드가 통째로 죽었습니다. 사람이 손대야 했던 것은 올리는 곳 로그인 하나뿐이었습니다.
클로드 코드에 한 줄만 던져서 자전거 여행 사이트를 만들었습니다. 빈 폴더에서 시작해 1시간 26분 만에 주소가 나왔어요.
그 사이에 일곱 번 막혔습니다. 이 글은 그 일곱 번이 각각 어떤 화면으로 나타났고 무엇으로 고쳤는지를 적은 것입니다. 오류 글자를 그대로 실었으니 같은 것을 만나면 복사해서 찾아보실 수 있습니다.
지난 편에서는 다 만든 뒤 폰으로 열어 보니 다섯 군데가 깨져 있던 이야기를 했습니다. 이번은 그 앞 이야기예요.
시작은 한 줄 — 되묻지 않기로 한 판단
처음 준 말은 이것뿐이었습니다.
전국 자전거 여행 웹페이지 만들고 싶어. 세련된 스크롤 디자인과 전국 지도도 활용해서 자전거를 사랑하는 사람들이 오고가는 사이트를 만들어줘.
몇 개 노선인지, 자료는 어디서 가져올지, 어디에 올릴지 — 물어볼 것이 열 개는 됐습니다. 그런데 안 물었습니다. 물어서 다듬으면 그건 설계지 한 줄로 만드는 게 아니니까요.
결과는 이렇게 나왔습니다. 전국 지도에 국토종주 자전거길 13노선이 물빛 선으로 그려지고, 화면을 내리면 노선이 하나씩 켜집니다.
도구가 스스로 깨진 것 둘 — 긴 명령과 그림 만들기
막힘 1 (20:35) — 한 번에 너무 긴 명령
파일 다섯 개를 명령 하나로 한꺼번에 쓰려다 이렇게 죽었습니다.
/usr/bin/bash: -c: line 219: unexpected EOF while looking for matching `''한 줄도 실행이 안 됐습니다. 문법이 틀린 게 아니라 명령이 너무 길어서였어요. 한글이 많이 섞인 10킬로바이트짜리였습니다.
고친 방법은 간단합니다. 파일은 파일 쓰는 도구로, 명령줄은 짧은 것만. 5분 잃었습니다.
📌 이 글을 쓰는 지금도 같은 일이 한 번 더 났습니다. 스크립트 안에 역따옴표를 넣었더니 명령줄이 그걸 명령으로 읽어서 실행해 버렸어요. 같은 뿌리입니다 — 명령줄에 긴 글을 넣지 마세요.
막힘 2 — 공유 그림이 500으로 떨어짐
카카오톡이나 페이스북에 주소를 넣으면 뜨는 미리보기 그림을 만드는 자리에서 오류가 났습니다. ⛔ 아래에서 200은 잘 됐다는 뜻, 500은 서버에서 죽었다는 뜻입니다.
Expected <div> to have explicit "display: flex", "display: contents", or "display: none" if it has more than one child node.글자를 두 줄로 만들려고 줄바꿈 표시를 쓴 것이 원인이었습니다. 이 그림을 만드는 도구는 자식이 둘 이상이면 배치 방식을 적어 달라고 합니다.
줄마다 상자를 따로 만들고 부모에 세로 배치를 적으니 200으로 바뀌었습니다.
옛 기억으로 쓴 코드가 걸린 것 둘
막힘 3 (21:10) — 지도마다 API KEY REQUIRED
노선 페이지를 열었더니 노선 선과 인증센터 점은 잘 찍히는데 바탕 지도마다 「API KEY REQUIRED」가 대각선으로 박혀 있었습니다.
쓰던 지도 바탕이 키 없이는 못 쓰게 바뀐 것이었어요. ⛔ 문제는 23분 전에 「키 필요 없음」이라고 적어 둔 것이 저였다는 점입니다. 확인 없이 옛 기억으로 적었습니다.
막힘 4 (21:16) — 바뀐 불러오기 방식
새 지도 도구로 갈아타고 불러왔더니 빌드가 죽었습니다. ⛔ 빌드는 써 놓은 코드를 실제 웹사이트 모양으로 만드는 과정입니다. 여기서 죽으면 올릴 것 자체가 안 만들어져요.
Error: Export default doesn't exist in target module
The export default was not found in module
[project]/node_modules/maplibre-gl/dist/maplibre-gl.mjs
Did you mean to import EdgeInsets?그 도구가 새 판에서 기본 내보내기를 없앴습니다. 불러오는 줄을 한 글자 고치니 됐어요.
// 전
import maplibregl from "maplibre-gl";
// 후
import * as maplibregl from "maplibre-gl";⛔ 이것도 옛 예제 기억으로 쓴 것입니다. 한 시간 안에 같은 까닭으로 두 번 걸렸어요.
AI가 쓴 코드가 안 돌 때, 문법이 틀린 것보다 도구가 그 사이에 바뀐 것이 더 많습니다. 오류 글자를 그대로 복사해 찾아보면 대개 「몇 판부터 이렇게 바뀌었다」가 나옵니다.
가장 오래 걸린 것 — 까맣게 빈 지도
노선 지도 칸이 새까맣고 확대 단추만 보였습니다. ⛔ 그런데 오류가 한 줄도 안 떴습니다. 이게 제일 어려운 꼴이에요.
하나씩 좁혀 갔습니다.
- 그림 그리는 기능은 있나 → 있음. 지도 설정 파일도 200, 그림 조각도 200
- 그런데 지도 조각을 한 번도 안 불러왔다 → 요청 0건
- 뒤에서 일하는 일꾼은 만들어져 있나 → 있음. 그런데 받아 둔 것이 하나도 없음
- 지도 도구 파일을 직접 열어 봤다
거기 이런 줄이 있었습니다.
function Gi(){let e=import.meta.url;if(!/^https?:/.test(e))return``; … return new URL(`./maplibre-gl-worker.mjs`,e).href}⛔ 읽기 어려운 한 줄이지만 도구 파일에 있는 그대로입니다. 이 글자로 찾아보시라고 손대지 않았어요.
일꾼 파일이 어디 있는지 알아내는 자리인데, 묶음 도구 안에서는 그 값이 빈 글자로 돌아옵니다. 빈 글자로 일꾼을 만들면 지금 보고 있는 페이지 자체를 코드로 읽다가 죽어요. 그리고 그 죽음은 페이지 오류 목록에 안 잡힙니다. 그래서 아무 흔적이 없었습니다.
고친 방법은 일꾼 파일 자리를 손으로 알려 주는 것이었습니다. 파일을 공개 폴더에 복사해 두고 그 주소를 지정했어요. 복사는 빌드 전에 저절로 돌게 걸어 뒀습니다.
오류가 안 뜨는 고장이 제일 오래 걸립니다. ⛔ 그럴 때는 「무엇이 안 된다」가 아니라 「어디까지 됐나」를 하나씩 확인합니다. 이 경우 「지도 조각 요청이 0건」이 결정적이었습니다.
윈도우라서 막힌 것 — 바로가기 만들기
로그인 없이 올려 보려고 했습니다. 빌드는 됐는데 마지막에 이렇게 죽었어요.
Error: EPERM: operation not permitted, symlink
'routes\[slug].func' -> 'C:\Users\...\.vercel\output\functions\_global-error.rsc.func' 로그인 없이 올리는 방식은 내 컴퓨터에서 빌드한 결과를 올립니다. 그 과정에서 파일 바로가기를 만드는데, 윈도우는 개발자 모드나 관리자 권한 없이는 그걸 못 만듭니다.
⛔ 맥이나 리눅스에서는 안 나는 오류예요. 윈도우를 쓰시면 이 자리에서 걸립니다.
고치는 길은 둘입니다.
- 윈도우 개발자 모드를 켠다 — 설정을 바꾸는 일이라 저는 안 했습니다
- 로그인하고 올린다 — 그러면 내 컴퓨터가 아니라 저쪽 리눅스에서 빌드하니 이 문제가 없습니다
같은 오류가 두 번 — 빌드가 죽은 자리
막힘 2에서 고쳤던 그 오류가 35분쯤 뒤에 똑같이 다시 났습니다. 이번에는 노선별 그림을 만드는 자리였어요.
Error occurred prerendering page
"/routes/donghaean-gyeongbuk/opengraph-image"
Error: Expected <div> to have explicit "display: flex", "display: contents",
or "display: none" if it has more than one child node.앞에서는 줄바꿈 표시가 원인이었고, 이번에는 {출발} → {도착} 처럼 글자 조각이 셋으로 끊긴 것이 원인이었습니다. 겉보기는 달라도 뿌리는 같아요.
⛔ 이번엔 빌드가 통째로 죽었습니다. 앞에서는 화면 하나가 500이었는데 이번엔 아예 안 만들어졌어요. 글자를 하나로 합쳐서 고쳤습니다.
한 번 고친 오류는 다른 얼굴로 다시 옵니다. 고칠 때 그 자리만 고치지 말고 같은 꼴이 또 있나를 한 번 찾아보는 편이 낫습니다. 저는 안 찾아서 그날 빌드를 한 번 죽였습니다.
사람이 해야 했던 것 하나 — 로그인
「한 줄만 시켜서」라고 했지만 사람이 손을 대야 하는 자리가 하나 있었습니다. 올리는 곳에 로그인하는 일이에요.
앞에서 본 것처럼 로그인 없이 올리는 길은 윈도우에서 막혔습니다. 그래서 이 한 줄을 제가 직접 쳤습니다.
npx vercel login브라우저가 열리고 기기 코드가 나옵니다. 그걸 넣고 승인하면 끝이에요. 한 번만 하면 그다음부터는 안 물어봅니다.
📌 AI에게 다 맡겨도 계정 로그인은 사람 몫입니다. 비밀번호나 열쇠를 대신 넣게 하면 안 되고, 그럴 필요도 없어요. 요즘 도구는 대부분 이렇게 브라우저에서 한 번 승인하는 방식을 씁니다.
1시간 26분 뒤에 나온 것
20시 29분에 빈 폴더였던 것이 21시 55분에 주소를 가졌습니다.
npx vercel deploy --prod --yes
Production https://bikeweb-lebvtwcpe-...vercel.app
Aliased https://bikeweb-liart.vercel.app
"readyState": "READY"그 안에 들어간 것은 이렇습니다.
- 전국 지도에 13노선이 차례로 그려지는 첫 화면
- 노선별 페이지 13장 — 실제 노선 좌표로 그린 지도, 인증센터 순서와 주소
- 검색에 필요한 것들 — 제목, 설명, 공유 그림, 사이트 지도
- 밝은 모드와 어두운 모드, 좁은 화면 확인
⛔ 자료는 지어내지 않았습니다. 국토종주 자전거길 좌표는 공공데이터포털의 「행정안전부 자전거길 DB」에 있고 이용허락 범위에 제한이 없습니다. 5만 3천 점이 들어 있어요. 인증센터 좌표 92곳도 같은 자료에 있습니다.
📌 자료에는 92곳인데 사이트에는 86곳으로 나옵니다. 같은 곳이 두 번 들어간 것을 걸렀기 때문이에요. 직접 헤아려 보시면 86이 나옵니다.
📌 키가 필요 없었습니다. 공공데이터 인증키를 미리 받아 뒀는데 노선 좌표가 이미 손에 들어와서 첫 판에는 안 썼어요.
일곱 번에서 남은 것 셋
하나. 막힌 일곱 번 중 둘은 도구가 그 사이에 바뀐 것이었습니다. 지도 바탕이 키를 받기 시작했고, 불러오기 방식이 달라졌어요. AI가 쓴 코드가 안 돌면 문법보다 판이 바뀌었나를 먼저 보세요.
둘. 오류가 안 뜨는 고장이 제일 오래 걸립니다. 까맣게 빈 지도가 그랬어요. 「무엇이 안 되나」가 아니라 「어디까지 됐나」를 하나씩 확인해야 바닥이 나옵니다.
셋. 한 번 고친 오류가 35분쯤 뒤에 다른 얼굴로 또 왔습니다. 고칠 때 같은 꼴이 또 있나 한 번 찾아보면 그 한 번을 아낍니다.
그리고 윈도우를 쓰시면 바로가기 만들기에서 한 번 걸립니다. 로그인하고 올리면 넘어가요.
여기까지가 윈도우 11 과 Node 24, 클로드 코드 환경에서 직접 확인한 것입니다. 만든 사이트는 bikeweb-liart.vercel.app 에서 돌고 있습니다.
다음 편에서는 다 만든 사이트를 검색에 맞게 손보는 이야기를 하겠습니다. 노선을 13개에서 42개로 늘리면서 생긴 일도 함께요.
자주 묻는 질문
AI가 만든 코드가 오류를 내면 먼저 무엇을 봐야 하나요?
문법이 아니라 도구의 판이 바뀌었는지를 먼저 보세요. 제 경우 일곱 번 막힌 것 중 둘이 그랬습니다. 지도 바탕이 키를 받기 시작했고, 지도 도구가 새 판에서 기본 내보내기를 없앴습니다. AI는 학습한 시점의 예제를 기억하고 있어서 그 사이 바뀐 것을 모릅니다. 오류 글자를 그대로 복사해 찾아보면 대개 몇 판부터 이렇게 바뀌었다는 안내가 나옵니다.
오류가 하나도 안 뜨는데 화면이 안 나오면 어떻게 찾나요?
무엇이 안 되는지가 아니라 어디까지 됐는지를 하나씩 확인합니다. 제 경우 지도가 까맣게 비었는데 오류가 한 줄도 없었습니다. 그림 그리는 기능은 있는지, 설정 파일은 받아왔는지, 지도 조각을 요청하기는 했는지를 차례로 봤더니 요청이 0건이라는 데서 바닥이 나왔습니다. 뒤에서 일하는 일꾼이 죽었을 때는 그 죽음이 페이지 오류 목록에 안 잡힙니다.
윈도우에서 배포가 EPERM symlink 오류로 죽습니다
로그인 없이 올리는 방식은 내 컴퓨터에서 빌드한 결과를 올리는데, 그 과정에서 파일 바로가기를 만듭니다. 윈도우는 개발자 모드나 관리자 권한 없이는 바로가기를 못 만들어서 거기서 죽습니다. 맥이나 리눅스에서는 안 나는 오류입니다. 개발자 모드를 켜는 방법도 있지만, 로그인하고 올리면 저쪽 리눅스에서 빌드하니 이 문제가 아예 없습니다.
한 줄만 시켜서 만들면 사람은 아무것도 안 해도 되나요?
하나는 해야 합니다. 올리는 곳에 로그인하는 일입니다. 명령 한 줄을 치면 브라우저가 열리고 기기 코드가 나오니 그걸 넣고 승인하면 됩니다. 한 번만 하면 됩니다. 비밀번호나 열쇠를 AI에게 대신 넣게 하지 마세요. 그럴 필요도 없습니다.
자전거길 좌표 같은 자료는 어디서 구하나요?
공공데이터포털의 행정안전부 자전거길 DB에 국토종주 자전거길 좌표가 5만 3천 점 들어 있고 이용허락 범위에 제한이 없습니다. 인증센터 92곳 좌표와 화장실, 급수대, 공기주입기 위치도 같은 자료에 있습니다. 저는 인증키를 미리 받아 뒀는데 이 자료는 키 없이도 받을 수 있어서 첫 판에는 키를 안 썼습니다.
