내 컴퓨터와 실서버 차이

"제 컴퓨터에선 됩니다"를 들을 때의 이야기예요. 만드는 사람 자리에서는 멀쩡하고 손님 자리에서만 안 되는 사고가 있어요. 코드가 아니라 자리가 원인인 경우를 먼저 갈라내면 고치는 시간이 크게 줄어요.

쉽게 말하면

집 부엌에서 만들어 본 메뉴와 가게 주방에서 파는 메뉴의 차이예요. 집에서는 잘 됐어요. 재료도 딱 한 인분만 꺼내 썼고, 불도 익숙하고, 먹는 사람은 나 혼자였어요. 같은 조리법으로 가게에서 하면 다른 일이 생겨요. 재고에 있는 재료가 집 것과 다르고, 주방 불세기가 다르고, 손님 스무 명이 동시에 시켜요. 조리법이 틀린 게 아니라 자리가 다른 것이에요. 내 컴퓨터와 실서버 사이도 정확히 이래요.

만드는 사람의 컴퓨터 안에서만 도는 사본을 로컬이라고 불러요. 주소창에 localhost 라고 뜨고, 그 컴퓨터를 켠 사람만 볼 수 있어요. 손님은 이 화면을 평생 볼 일이 없어요.

만드는 자리에서만 확인
내 컴퓨터 화면 · 연습용 기록 몇 줄 · 내 노트북, 내 브라우저 · 회선은 사실상 없음

여기서 잘 되는 건 당연해요. 확인한 것은 "내 자리에서 안 깨진다" 하나뿐이에요. 손님이 겪는 조건은 아직 한 번도 안 지나갔어요.

손님 자리에서 확인
손님이 여는 주소 · 실제로 쌓인 기록 · 남의 폰, 남의 브라우저 · 밖에서 들어오는 회선

같은 화면을 폰으로 한 번 더 열어 보는 데 1분이 걸려요. 이 1분이 "올렸는데 손님만 안 된다"는 사고의 대부분을 미리 잡아요.

두 자리는 정확히 무엇이 다른가

다른 점은 막연하지 않아요. 실제로 갈리는 곳은 일곱 군데예요. 사고가 났을 때 이 표를 위에서부터 짚어 내려가면 원인 후보가 금방 두세 개로 줄어요.

갈리는 곳내 컴퓨터에서는실서버에서는
저장된 기록연습용으로 넣은 몇 줄이에요. 이름도 길이도 얌전해요진짜 손님 기록이에요. 빈칸·특수문자·아주 긴 이름이 섞여 있어요
비밀 값내 컴퓨터에만 있는 파일에서 읽어요서버에 따로 넣어 둔 값을 읽어요. 안 넣었으면 그 기능만 조용히 죽어요
회선파일이 바로 옆에 있어 기다림이 없어요밖에서 들어오는 길을 타요. 지하철·매장 안에서는 몇 초씩 걸려요
기기와 브라우저내 노트북, 내가 쓰는 브라우저 하나예요손님의 오래된 폰과 다른 브라우저가 섞여요. 같은 코드를 다르게 해석해요
파일 이름의 대소문자윈도우와 맥은 Logo.png 와 logo.png 를 같은 파일로 봐요대부분의 서버는 다른 파일로 봐요. 내 화면에만 뜨는 사진이 여기서 나와요
시간내 컴퓨터 시계와 내 나라 시간대를 써요서버 시간대가 다를 수 있어요. 예약 시간이 몇 시간 밀려 보여요
저장해 둔 옛 화면고치면 바로 반영돼요중간에 쌓아 둔 사본이 있어서 옛 화면이 한동안 남아요

다섯 번째 줄은 사장님이 직접 잡을 수 있어요

"내 화면에는 로고가 뜨는데 손님 화면에만 안 떠요"는 열에 아홉이 파일 이름 문제예요. 대문자와 소문자가 한 글자라도 다르면 서버는 없는 파일로 봐요. 이럴 땐 원인을 찾기 전에 파일 이름과 코드에 적힌 이름을 나란히 놓고 글자 하나씩 대조해 보세요.

"제 컴퓨터에선 됩니다"를 들었을 때

장면 1 · 외주 개발자가 전화로 말했다

방금 확인했는데 저는 잘 되는데요. 제 컴퓨터에선 됩니다.

이 말은 거짓말이 아니에요. 그 사람 자리에서는 정말로 되고 있어요. 다만 그 말은 아직 아무것도 확인하지 않았다는 뜻이에요. 그래서 되물을 문장은 하나예요. "제가 지금 보고 있는 주소를, 그쪽에서도 폰으로 열어 봐 주시겠어요." 같은 주소·같은 기기 조건으로 맞추기 전까지는 서로 다른 것을 보고 이야기하는 중이에요.

듣게 되는 말실제로 무슨 뜻인가그 자리에서 되물을 한마디
제 컴퓨터에선 됩니다만드는 자리에서만 확인했어요. 손님 자리는 아직 안 봤어요"손님이 여는 주소로도 한 번 열어 봐 주세요"
환경 문제예요코드 말고 자리 탓이라는 뜻이에요. 다만 아직 어느 자리인지는 안 정해졌어요"어느 쪽이 다른지 하나만 짚어 주세요"
캐시일 거예요옛 화면이 남아 있다는 추측이에요. 맞을 때도 있고 덮는 말일 때도 있어요"새 창으로 열어도 같으면 캐시가 아닌 거죠"
올릴 때 값이 빠졌네요서버에 넣어야 할 비밀 값을 안 넣었어요. 그 기능만 죽어 있었어요"다른 값도 빠진 게 있는지 목록으로 확인해 주세요"
손님 기기 문제예요특정 폰이나 브라우저에서만 난다는 뜻이에요"어떤 기기에서 났는지 두 대만 알려 주세요"

세 번째 줄이 가장 자주 나와요. 옛 화면이 남아 있는 건 실제로 흔한 원인이지만, 확인 없이 말하면 그냥 시간을 버는 말이 돼요. 확인은 30초면 끝나요. 새 창으로 열어 보고, 그래도 같으면 그건 옛 화면 문제가 아니에요.

자리 탓인지 코드 탓인지 5분 만에 가르기

고치기 전에 갈라야 해요. 코드 탓이면 어디서 열든 똑같이 안 되고, 자리 탓이면 어떤 자리에서는 되고 어떤 자리에서는 안 돼요. 여섯 걸음이면 판정이 나와요. 사장님이 혼자 할 수 있어요.

  1. 1손님이 여는 주소를 그대로 복사해요. 만들던 화면 말고, 손님에게 보낼 링크를 그대로 씁니다. 여기서 이미 주소가 다르면 그 자체가 답이에요.
  2. 2새 창으로 한 번 더 열어요. 브라우저의 새 시크릿 창이면 충분해요. 여기서 멀쩡하면 원인은 저장된 옛 화면 쪽이에요.
  3. 3내 폰으로 열어요. 컴퓨터에서는 되는데 폰에서만 안 되면 화면 폭이나 기기 쪽 문제로 후보가 좁혀져요.
  4. 4집이 아닌 회선으로 열어요. 폰의 데이터로 열어 보면 돼요. 여기서만 느리면 회선을 타는 무거운 파일이 원인일 가능성이 커요.
  5. 5다른 사람 계정으로 열어요. 내 계정에서만 되는 기능이었는지 확인하는 단계예요. 권한을 관리자에게만 열어 둔 사고가 여기서 잡혀요.
  6. 6언제부터인지 물어요. "어제 올린 뒤부터"라는 답이 나오면 자리 이야기를 접고 이전 판으로 되돌리기를 먼저 검토해요.

여섯 걸음의 목적은 고치는 게 아니에요

이 순서는 원인을 고치는 절차가 아니라 원인 후보를 줄이는 절차예요. 결과를 한 줄로 적어 두세요. "컴퓨터는 되고 폰만 안 됨. 새 창에서도 같음." 이 한 줄이 있으면 개발자든 AI든 훨씬 빨리 답을 내요. 이 한 줄이 없으면 상대는 처음부터 다시 물어봐요.

확인해 보세요

손님이 "주문 버튼이 안 눌려요"라고 했어요. 내 컴퓨터에서는 잘 눌려요. 가장 먼저 할 일은?

자주 나는 다섯 가지

증상자리 차이 중 무엇이 원인인가지금 할 일
내 화면에만 사진이 뜨고 손님 화면은 빈칸파일 이름의 대소문자예요. 서버는 다른 파일로 봐요파일 이름과 코드에 적힌 이름을 글자 하나씩 대조해요
메일이나 문자 보내기만 안 돼요서버에 넣어야 할 비밀 값이 빠졌어요환경 변수 목록을 열어 빠진 줄이 있는지 봐요
고쳤는데 예전 화면이 그대로예요중간에 쌓인 옛 사본이 남아 있어요새 창으로 열어 확인해요. 새 창에서 새 화면이면 기다리면 풀려요
목록이 내 컴퓨터에선 빠른데 실제로는 느려요연습 기록은 몇 줄이고 실제 기록은 훨씬 많아요줄 수를 먼저 세요. 많으면 화면을 끊어 부르는 쪽으로 손봐요
예약 시간이 몇 시간씩 어긋나 보여요서버 시간대가 내 컴퓨터와 달라요시간대와 날짜 처리에서 기준 시간대를 못 박아요

장면 2 · 문을 연 다음 날 손님이 메시지를 보냈다

결제까지는 됐는데 확인 메일이 안 왔어요.

화면은 멀쩡한데 한 가지 기능만 죽어 있는 모양이에요. 이 조합은 대개 서버에 넣어야 할 값이 빠진 경우예요. 만드는 자리에는 그 값이 파일로 있어서 잘 됐고, 서버에는 안 넣어서 그 부분만 조용히 실패한 거예요. 순서는 이래요. 손님에게 주문이 정상 접수됐다고 먼저 알리고, 빠진 값을 채우고, 그동안 들어온 주문에 메일을 다시 보내요.

AI에게 그대로 말하는 문장

직접 만드는 중이면 아래 문장을 그대로 옮겨 쓰면 돼요. 중요한 건 어디서 되고 어디서 안 되는지를 같이 말하는 것이에요. 증상만 말하면 상대는 자리 차이를 볼 수 없어요.

내 상황그대로 보낼 문장
내 화면만 되고 손님 화면은 안 돼요"내 화면에서는 정상인데 손님이 여는 주소에서는 이 버튼이 안 눌려요. 두 자리에서 달라질 수 있는 원인부터 목록으로 알려 주세요."
사진이 손님 화면에만 안 떠요"이 사진이 내 화면에만 보이고 실제 주소에서는 안 보여요. 파일 이름의 대소문자부터 확인해 주세요."
기능 하나만 조용히 죽었어요"결제는 되는데 확인 메일만 안 나가요. 서버에 있어야 할 값 중 빠진 게 있는지 목록으로 보여 주세요."
실제 기록에서만 느려요"연습 자료에서는 빠른데 실제 기록에서는 목록이 느려요. 지금 줄 수에서 문제가 되는 부분을 짚어 주세요."
폰에서만 깨져요"컴퓨터에서는 멀쩡하고 폰에서만 화면이 옆으로 밀려요. 폭이 좁은 화면 기준으로 다시 봐 주세요."

직접 해보기

증상 한 줄에 자리를 붙여 보세요

지금 걸려 있는 문제가 있으면 이렇게 적어 보세요. "어디서는 되고, 어디서는 안 되고, 언제부터." 세 조각이 다 들어간 문장은 답이 훨씬 빨리 와요. 스튜디오 대화창에 그대로 붙여 넣어 보세요.

스튜디오에서 적어 보기

자주 묻는 것

Q. 바이브캠퍼스로 만들면 이 차이가 없어지나요?
차이가 줄지만 사라지지는 않아요. 만드는 화면에서 보는 미리보기와 손님이 링크를 눌러 여는 화면은 확인하는 자리가 달라요. 손님의 기기와 회선, 그리고 실제로 쌓인 기록은 여전히 내 것과 달라요. 그래서 세상에 연 다음 손님과 같은 방법으로 한 번 더 눌러 보는 절차는 그대로 필요해요.
Q. 그럼 연습용 자리는 아예 없애고 실서버에서 바로 고치면 안 되나요?
안 돼요. 그건 영업 중인 가게 주방에서 새 메뉴를 실험하는 거예요. 실패가 그대로 손님에게 나가요. 대신 손님이 안 보는 연습용 주소를 하나 두면 실제와 비슷한 자리에서 시험할 수 있어요.
Q. 연습용 자리에서 됐으면 실서버에서도 되는 거 아닌가요?
기록의 양이 같을 때만 그래요. 연습 자리에 열 줄이 있고 실제에 삼만 줄이 있으면 같은 화면이 전혀 다르게 움직여요. "연습에서 됐어요"를 들으면 줄 수가 비슷했는지 한 번 물어보세요.
Q. 손님 한 명만 안 된다고 하면 무시해도 되나요?
무시하지 말고 두 가지만 물어보세요. 어떤 기기로 열었는지, 그리고 언제부터인지예요. 한 명이 말했다는 건 말하지 않고 나간 사람이 여럿이라는 뜻일 때가 많아요. 다만 원인을 못 찾았을 때 무리하게 고치는 것보다는, 그 손님을 먼저 다른 방법으로 도와 드리는 게 나아요.
Q. 매번 폰으로 다시 확인하는 게 번거로운데 꼭 해야 하나요?
바꾼 내용이 화면에 보이는 것이면 해야 해요. 1분이 걸리고, 안 하면 사고를 손님이 먼저 발견해요. 손님이 먼저 발견한 사고는 고치는 비용에 신뢰까지 얹혀요.

더 깊이 (안 읽어도 괜찮아요)

왜 하필 대소문자에서 자주 터지나 · 만드는 사람의 컴퓨터는 대개 윈도우나 맥이고, 이 둘은 파일 이름의 대문자와 소문자를 같은 것으로 봐요. 실제 서버는 대부분 리눅스이고, 리눅스는 둘을 다른 파일로 봐요. 그래서 코드에 logo.png 라고 적고 파일 이름이 Logo.png 여도 내 컴퓨터에서는 멀쩡히 뜨다가, 서버에 올리는 순간 없는 파일이 돼요. 코드는 한 글자도 안 바뀌었는데 결과가 달라지는 대표 사례예요.

연습 자리를 실제와 얼마나 비슷하게 맞출까 · 완전히 똑같이 맞추는 건 비싸고, 대부분의 가게에는 필요 없어요. 값이 나가는 순서가 있어요. 첫째는 기록의 양이고, 둘째는 비밀 값의 목록이 같은지이고, 셋째는 시간대예요. 이 세 가지만 맞춰도 자리 차이로 나는 사고의 대부분이 미리 걸려요. 기기와 브라우저까지 맞추는 건 그다음 이야기이고, 손님이 늘어난 뒤에 생각해도 늦지 않아요.

이 문서가 [[debug|원인 찾기]]와 어떻게 갈리나 · 원인 찾기는 코드 안에서 범위를 좁히는 기술이에요. 이 문서는 그 앞에서 코드 안을 볼지 말지를 정하는 단계예요. 순서를 지키면 헛수고가 줄어요. 자리 차이를 먼저 갈라내지 않으면, 멀쩡한 코드를 몇 시간씩 들여다보다가 결국 서버에 값 하나가 빠져 있었다는 결론에 도착해요.

이것만 기억하세요

  • ·"제 컴퓨터에선 됩니다"는 거짓말이 아니라, 손님 자리는 아직 안 봤다는 뜻이에요
  • ·고치기 전에 가릅니다. 어디서는 되고 어디서는 안 되는지가 답의 절반이에요
  • ·손님이 여는 주소를 폰으로 한 번 더 여는 데 1분이면 돼요. 이 습관이 사고를 미리 잡아요
  • ·기능 하나만 조용히 죽었으면 서버에 넣을 값이 빠진 경우를 먼저 의심해요
  • ·"어디서는 되고, 어디서는 안 되고, 언제부터" 세 조각을 적어서 물어보세요
VibeCampusNew build