혼자 보던 localhost와 도메인연동과 배포

코딩 모르는 친구가 직접 만든 홈페이지, "야 내 홈페이지야 하고 보내줬는데 내가 ???" 했던 이유

지난 글에서 약속했던 친구 이야기, 드디어 풀어볼게요. 개발은 1도 모르지만, 자기 브랜드 홈페이지를 직접 만들어보겠다고 나선 친구였어요.

오늘도 결론부터 말하면요. 오늘은 비개발자가 거의 100% 부딪히는 그 벽, "다 만들었는데 왜 나만 보이지?" 이야기입니다.

시작은 클로드 데스크톱 앱이었어요

친구는 거창하게 시작하지 않았어요. 그냥 클로드 데스크톱 앱을 깔고, 채팅창에 "이런 느낌 브랜드 홈페이지 만들어줘" 하고 말을 건 게 전부였죠.

놀랍게도 화면이 나왔어요. 색감 바꿔달라, 메뉴 추가해달라, 말로 시키니까 척척 바뀌고요. 코딩 한 줄 안 쳤는데 자기 브랜드 페이지가 눈앞에 뜨니까, 친구가 진짜 신나했어요.

( 여기서 속으로 비개발자쉑ㅋㅋㅋ 하면서 웃긴했어요 아직 절반도 안왔는데 끝난것처럼 생각하니깐요) )

그런데 친구가 이런 말을 하더라고요

"이거 다 만들었는데… 나만 볼 수 있는 것 같아 다른사람들이 안보인데.."

제목부터 느낌 오셨죠?

localhost:3000

ㅋㅋㅋㅋㅋㅋ

이게 바로 로컬 주소예요. 쉽게 말하면 "내 컴퓨터 안에서만 열리는 문"이에요.

내 노트북에선 멀쩡히 보이는데, 친구한테 카톡으로 주소를 보내면 상대방은 아무것도 안 보이는 거죠.

비개발자분들이 여기서 진짜 많이 당황해요. "분명히 다 만들었는데 왜 손님은 못 보지?" 하면서요.

만든 것 ≠ 세상에 올린 것

여기서 친구가 처음 알게 된 사실이 있어요.

홈페이지는 두 단계예요.

만든다 (화면을 짠다)

올린다 (누구나 들어올 수 있는 진짜 주소로 내보낸다)

우리가 흔히 "홈페이지 만들었다"고 할 때 떠올리는 건 사실 2번까지 끝난 상태인데, AI랑 만들면 1번까지는 순식간이라, 2번이 남아 있다는 걸 모르고 다 됐다고 착각하기 쉬워요.

이 "올리는" 과정을 어려운 말로 배포라고 불러요. 그리고 그 끝에 있는 게 바로 내 도메인, 내브랜드.com 같은 나만의 진짜 주소고요.

그래서 '내 주소' 갖기 여정이 시작됐어요

여기서부터 친구가 본격적으로 헤맸어요. 말로 화면 만드는 건 쉬웠는데, 올리고 → 주소 연결하는 건 단계가 좀 있었거든요.

만든 걸 인터넷에 올려주는 서비스에 연결하기

도메인(내브랜드.com) 구입하기

그 도메인을 내가 올린 홈페이지에 연결하기

특히 마지막 "연결"에서 제일 많이 막혔어요. 도메인은 샀는데 주소를 쳐도 홈페이지가 안 뜨고, 한참 기다려야 되고… (이게 원래 시간이 좀 걸리는 작업인데, 그걸 모르면 "내가 뭘 잘못했나" 싶어서 더 불안해져요.)

이때 저는 원래 부딪히며 배우는게 좋다 생각해서 cname이 뭔데 TXT가뭐고 어떻게 넣어야 하는지를 물어보는친구에게

그거야! 지금 한 질문을 그대로 클로드한테 해봐 !! ( 사실 비개발자한테 이 부분이 어느 영역까지는 가장 깔끔하고 정확한 정보죠 ㅎㅎ)

이 즈음 클로드 코드로 넘어갔어요

채팅 앱으로만 하다 보니, 파일이 많아지고 손볼 게 늘면서 한계가 왔어요( 그 친구는 잘 몰랐지만 1년이 지난 지금도 파일구분만 하고있어요 ㅋㅋ). 그래서 친구가 한 단계 더 들어간 게 클로드 코드예요.

결국에 질문하는 것도 작업하는 것도 터미널에서 해야한다고 생각해서 터미널 세팅을 해줬어요 한번 세팅 해주면 그다음은 컨텍스트가 늘어나도 초보자한테는 큰 영향이 없고 오히려 " 나 개발자같지!?" 하는 반응도 좋았구요.

본론으로 돌아와서 배포하고 주소 연결하는 것 같은, 파일을 실제로 만지는 작업은 클로드 코드가 훨씬 수월했거든요.

비개발자한테는 이 전환이 좀 무서운 단계인데, 솔직히 이 부분은 옆에서 일단 잡아주니까 금방 넘어갔어요. 혼자였으면 "이건 개발자 영역이네" 하고 포기했을 지점이거든요.

드디어, 진짜 주소로 떴어요

제가 쓰는 빌더에 cname과 txt를 연동해서 클로드코드한테 물어보면서 도메인 구입한 사이트에서 작업을 하라고 했어요 ( 카페24나,아입웹같은 플랫폼은 쓰면 편한데... 자기가 다 만들고 싶다고해서 저도 골치아프긴 했더랍니다..^^)

그러다 어느 날. 친구가 자기 폰으로 내브랜드.com을 쳤더니, 카페 와이파이로, 데이터로, 다른 사람 폰으로도 홈페이지가 똑같이 떴어요.

친구가 그 순간 캡처해서 보낸 메시지가 아직도 기억나요. "XX이제 진짜 내 거 맞지"

localhost에서만 보이던 화면이, 드디어 세상 누구나 들어올 수 있는 내 가게가 된 거예요.

정리하면

AI로 만들면 화면은 금방 나와요. 진짜 관문은 "올리고 → 내 주소로 연결"입니다.

localhost는 내 컴퓨터에서만 열리는 문이에요. 손님한테 보여주려면 한 단계가 더 있어요.

도메인 연결은 원래 시간도 걸리고 단계도 있는 작업이라, 안 막히는 게 이상한 거예요. (당황 안 해도 돼요!)

채팅 앱으로 막히면 클로드 코드 같은 한 단계 더 들어간 도구가 도움이 됩니다.

이때는 클로드 코드가 데스크톱앱에 없었던 시절이었고, 데스크톱앱으로 간단한 채팅으로도 가능합니다.

하지만 그리고 이 관문들, 혼자보다 결국 한 번 넘으면 그다음부턴 혼자서도 됩니다. 그래서 제가 친구에게 터미널을 강요했어요 ㅋㅋㅋ

코딩 몰라도 자기 홈페이지 직접 가질 수 있는 시대인 건 진짜 맞아요. 다만 "만들었다"와 "올렸다"는 다르다는 것, 이거 하나만 알아도 절반은 덜 헤맵니다.

다음 글에선 한 고비 더 넘은 이야기를 풀어볼게요. 홈페이지에 디자인 레이아웃 본인이 원하는 홈페이지를 만드는 과정 그리고 !! '결제'를 붙이는 과정, 카드 결제(PG) 연동에서 친구가 또 한 번 제대로 막혔거든요. 그 이야기는 다음 편에서.

#바이브코딩 #AI홈페이지만들기 #코딩없이홈페이지 #비개발자 #1인사업가 #도메인연결 #홈페이지직접만들기 #브랜드홈페이지 #클로드코드 #배포 #사이드프로젝트 #컴윗 #컴윗미