컴퓨터의 파일에서 공개 링크까지

페이지를 만들어 브라우저에서 열었습니다. 사이트처럼 보이고 사이트처럼 동작합니다: 링크도 클릭되고 버튼도 눌립니다. 그런데 누군가에게 보내면 "안 열려요"라는 답이 돌아옵니다. 열리더라도 스타일과 이미지가 빠져 있습니다. 고장 난 것은 없습니다. 페이지는 딱 한 곳, 여러분의 디스크에만 있고, 브라우저 주소 표시줄이 그 사실을 보여 줍니다. 어디를 봐야 하는지만 알면 됩니다.

"사이트를 인터넷에 어떻게 올리나요?"라는 질문은 어딘가에 찾아야 할 버튼이 있는 것처럼 들립니다. 질문을 바꾸는 편이 더 쓸모 있습니다: 나 말고 다른 사람도 보려면 사이트가 어디에 있어야 할까? 답은 여러 조각으로 맞춰집니다: 서버, 두 가지 주소, 경로(path), 호스팅과 배포. 그다음에는 올린 것을 어떻게 업데이트하는지, 호스팅에 왜 키가 필요한지, 에이전트에게 "배포해 주세요"라고 부탁하면 무엇을 하는지 살펴봅니다.

1. 파일은 한 대의 컴퓨터에만 있습니다

페이지를 디스크에서 열었을 때 주소 표시줄을 보세요. 거기에는 링크가 아니라 파일 경로가 있습니다:

file:///C:/projects/landing/index.html    # 여러분 디스크에 있는 파일의 경로
https://landing-demo.tiiny.site/          # 다른 컴퓨터에 있는 주소

첫 번째 줄은 여러분의 디스크입니다. 이때 브라우저는 파일 뷰어처럼 동작합니다: 파일을 열고, 읽고, 보여 줍니다. 네트워크로는 아무 데도 가지 않았습니다. 두 번째 줄은 다른 컴퓨터의 주소입니다. 첫 번째는 여러분에게서만 열리고, 두 번째는 인터넷이 되는 기기라면 어디서든 열립니다.

"안 열려요"는 여기서 나옵니다. 파일을 보내는 것과 페이지를 공개하는 것은 서로 다른 일입니다. 페이지는 보통 파일 하나가 아니라 폴더입니다: index.html, 그 옆에 style.css와 이미지. index.html 하나만 보내면 받은 사람에게서 열리기는 하지만, 스타일과 이미지는 찾을 곳이 없습니다. "열리긴 하는데 엉망"인 이유가 이것입니다.

두 번째 제약은 더 단순합니다. 저녁에 노트북을 덮고 가방에 넣어 집으로 가져갑니다. 그걸로 끝입니다. 노트북은 잠들었고 누구에게도 아무것도 내줄 수 없습니다. 모두가 언제든 페이지를 보려면 페이지 파일이 여러분 쪽이 아닌 다른 곳에 있어야 합니다.

"내 컴퓨터에서는 된다"와 "모두에게 열린다"는 서로 다른 두 상태입니다. 이 글은 그 사이에 무엇이 있는지를 다룹니다.

2. 서버

핵심 단어는 서버입니다. 불빛이 깜박이는 수수께끼 상자가 아니라, 늘 켜져 있으면서 다른 사람에게 파일을 내주는 평범한 컴퓨터입니다. 서버의 존재 이유는 이것 하나입니다: 여러분이 자리에 없을 때도 연결되어 있는 것.

서버 없이도 되는 경우가 있는 것 같기도 합니다. 메신저로 친구에게 사진을 보내면 여러분 휴대폰에서 친구 휴대폰으로 곧장 날아가지 않나요? 아닙니다. 사진은 먼저 메신저 서버에 도착하고, 거기서 친구에게 갑니다. 그래서 사진을 보내고 휴대폰을 끈 채 잠들어도 친구는 두 시간 뒤에 사진을 열어 볼 수 있습니다. 서버는 눈에 보이지 않는 곳에서도 중간에 서 있습니다.

페이지도 마찬가지입니다: 모두가 보려면 파일이 그런 컴퓨터에 있어야 합니다. 인터넷은 물건이 저절로 들어가는 공용 구름이 아니라, 잠들지 않는 다른 컴퓨터입니다. 처음에는 조금 실망스러울 수도 있습니다. 너무 현실적이라서요. 대신 이해하기는 쉽습니다.

3. 도메인과 IP

세상에는 서버가 많고, 그중 필요한 서버를 어떻게든 찾아가야 합니다. 방법은 주소입니다. 서버의 주소는 보통의 건물처럼 두 가지입니다: 좌표와 간판.

첫 번째는 IP입니다. 192.0.2.1 같은 숫자 주소로, 정확하지만 사람이 읽기에는 불편한 날것의 좌표입니다. 컴퓨터끼리는 바로 이 방식으로 통신합니다.

두 번째는 도메인입니다. example.com 같은 사람을 위한 이름이죠. 이것이 간판입니다: 친구에게 "좌표 50도 45분, 30도 52분에 있는 건물에서 만나자"라고 하지는 않잖아요. "모퉁이 카페에서 보자"라고 합니다.

192.0.2.1        # IP: 서버의 숫자 주소, 기계용
example.com      # 도메인: 같은 장소, 사람을 위한 이름

둘은 이렇게 이어집니다: 이름을 입력하면 브라우저는 먼저 이름 안내소에 그 이름 뒤에 어떤 IP가 있는지 묻고, 그다음에 숫자 주소로 찾아갑니다. 이 안내소를 DNS라고 부르며, 지금은 그 이상 알 필요가 없습니다: 이름을 입력하면 나머지는 알아서 처리됩니다.

놓치기 쉬운 주소의 한 부분이 더 있습니다: 맨 앞의 https://. 이것은 이름의 일부가 아니라 연결 방식이며, 서버와의 통신이 암호화된다는 뜻입니다. 브라우저마다 표시 방법은 다르지만, s가 없는 http://는 모두 안전하지 않다고 표시합니다. 암호화는 호스팅이 알아서 제공합니다.

4. 경로(path)와 기본 파일

서버에는 보통 파일이 잔뜩 있습니다. 그중 어떤 파일이 필요한지는 경로(path)가 알려 줍니다. 주소에서 도메인 뒤에 오는 부분입니다. 도메인이 건물이라면, 경로는 그 안의 어느 매대인지에 해당합니다.

주소는 왼쪽에서 오른쪽으로 읽으며, 마법 주문이 아니라 세 가지 답입니다. https://example.com/about/team.html은 "example.com 서버에서 about/team.html 파일을 열어라"라는 뜻입니다.

경로는 말 그대로 서버 디스크 위의 파일 경로입니다: about 폴더, 그 안의 team.html. 여러분 컴퓨터의 폴더 경로와 같습니다. 큰 사이트에서는 페이지를 요청이 올 때마다 즉석에서 만드는 경우가 많지만, 원리는 같습니다: 주소는 특정한 자리로 이어집니다.

경로가 비어 있으면요? https://example.com/을 입력했다면 어떤 파일을 열어야 할까요? 답은 오래전에 정해져 있습니다: 서버는 사이트 루트 폴더의 index.html을 내줍니다. 거의 모든 호스팅이 이렇게 동작합니다. 여기서 곧 쓸모 있을 규칙이 나옵니다: index.html은 공개하는 폴더의 루트에 두고, 하위 폴더에 넣지 않습니다.

5. 전체 흐름

이제 조각이 모두 모였으니 하나의 흐름으로 이어 볼 수 있습니다.

여러분이 주소를 입력합니다. 브라우저는 이름 안내소에서 도메인의 IP를 알아내고 서버에 요청합니다. 서버는 경로로 파일을 찾아 내줍니다. 브라우저는 여러분 디스크에 있었을 수도 있는 바로 그 HTML 텍스트를 받아 페이지를 그립니다.

핵심은 이것입니다: 파일이 디스크에서 왔든 서버에서 왔든 브라우저는 마크업과 스타일을 똑같이 그립니다. 달라지는 것은 그 파일에 누가 더 접근할 수 있느냐입니다. 다만 디스크에서 연 파일에는 브라우저가 JavaScript 기능 일부를 제한하기 때문에, 같은 페이지라도 서버에서는 로컬에서보다 더 온전하게 동작할 때가 있습니다.

6. 호스팅

여러분에게는 데이터 센터에 둔 서버가 없고, 필요하지도 않습니다. 대신 호스팅이 있습니다. 빌려 쓰는 서버라고 보면 됩니다: 페이지가 든 폴더를 넘기면 호스팅이 늘 켜져 있는 자기 서버에 올리고 공개 링크를 돌려줍니다. 그게 전부입니다.

링크는 호스팅의 도메인 위에 만들어지고, 여러분의 이름은 그 왼쪽에 붙습니다: landing-demo.tiiny.site, 이름.github.io. 도메인은 호스팅의 것이고, 여러분에게는 그 앞의 이름이 주어집니다: 직접 고를 때도 있고 호스팅이 정해 줄 때도 있습니다. mysite.com 같은 자기 도메인도 쓸 수 있지만, 구입과 설정 이야기는 지금 하지 않겠습니다: 페이지를 보여 주는 데는 필요 없으니까요.

서버에서 돌아가는 프로그램이 필요 없는, 완성된 파일로만 이루어진 페이지(이런 페이지를 정적 페이지라고 하는데, 이건 따로 다룰 이야기입니다)라면 무료 호스팅도 있습니다. 서버 관리자가 될 필요도 없습니다.

7. 배포

이제 이 모든 이야기를 꺼낸 이유인 단어입니다. 배포, 영어로 deploy: 여러분의 파일을 여러분만 볼 수 있는 곳이 아닌 곳으로 복사하는 일, 즉 여러분 디스크에서 호스팅 서버로 옮겨 싣는 일입니다. 폴더는 여러분에게 그대로 남고, 저쪽에도 생깁니다.

배포가 끝나면 같은 폴더가 두 곳에 있고, 링크는 오른쪽 폴더를 가리킵니다. 왼쪽 폴더는 그대로 있으니 계속 작업하면 됩니다.

정확히 무엇이 올라가는지 보면:

landing/
  index.html
  style.css
  img/
    hero.png

landing/ 폴더를 통째로 공개하기 때문에 style.css와 이미지는 여전히 index.html 옆에 있고, 같은 경로로 찾아집니다. 그리고 index.html은 이 폴더의 루트에 있습니다. 한 단계 위의 폴더를 공개하면 링크를 열었을 때 폴더 목록이 나오거나 빈 화면이 나옵니다.

폴더가 서버에 올라가는 방식은 호스팅마다 다릅니다. 손으로 하는 가장 간단한 방법은 이렇습니다: 호스팅 사이트를 열고, 폴더나 파일을 묶은 압축 파일을 끌어다 놓고, 배포 버튼을 누릅니다. 터미널 명령으로 하는 방법도, 저장소를 거치는 방법도 있습니다. 핵심은 하나입니다: 여러분 폴더의 복사본이 호스팅 서버에 놓이는 것. 방법은 누가 배포하느냐에 따라서도 달라집니다: 여러분은 사이트에서 할 수 있지만, 에이전트는 명령으로만 할 수 있습니다.

여기서 나온 두 단어는 앞으로 계속 보게 됩니다. 로컬은 여러분의 컴퓨터에서, 여러분 혼자 보는 것. 외부 공개는 서버에서, 모두가 보는 것. 배포는 그 둘을 잇는 다리이고, 생각보다 짧습니다: 폴더 하나와 그 복사본 하나.

8. 공개한 페이지를 업데이트하는 방법

index.html의 제목을 고치고 휴대폰에서 페이지를 새로 고쳤는데, 여전히 예전 제목입니다. 정상입니다. 호스팅에는 배포하던 순간의 복사본이 있고, 여러분이 고친 것은 원본입니다. 링크에 새 내용이 나타나게 하려면 폴더를 다시 보내야 합니다: 업데이트란 다시 배포하는 것입니다.

여기에 한 가지 함정이 있습니다. 같은 주소로 다시 보낼 수 있는 것은 호스팅이 여러분을 알아볼 때뿐입니다. 그래서 링크는 두 종류로 나뉩니다.

임시 링크. 어떤 호스팅은 계정이 전혀 없어도 링크를 줍니다. 보여 주고 의견을 나누는 용도입니다. 수명은 짧아서, 예를 들어 Tiiny Host에서는 1시간 정도입니다. 이런 링크에도 호스팅이 이메일을 물어볼 수 있는데, 이것은 가입이 아니라 업로드를 뭔가에라도 연결해 두려는 방법입니다. 이런 링크는 업데이트할 수 없고, 폴더를 새 주소로 다시 올리는 수밖에 없습니다.

영구 링크. 계정이 있으면 링크가 사라지지 않고, 주소를 고를 수도, 업데이트하고 삭제할 수도 있습니다. 무료 요금제는 보통 사이트 수와 업데이트 횟수에 제한이 있습니다. 계정은 임시 링크를 주는 바로 그 호스팅들에서 무료로 만들 수 있습니다. 계정과 함께 키도 생기지만, 키가 늘 필요한 것은 아닙니다.

배포를 에이전트가 한다면 처음 올릴 때와 업데이트할 때의 차이는 문장 하나입니다:

landing 폴더를 호스팅에 배포해 주세요. 휴대폰에서 열 수 있는 링크가 필요합니다.

index.html의 제목을 고쳤습니다. landing을 다시 배포해 주세요. 가능하면 같은 주소로요.

두 번째 요청은 솔직합니다. "가능하면"이라는 말로 임시 링크가 될지 영구 링크가 될지를 에이전트에게 맡기고, 에이전트는 어느 쪽이 됐는지 알려 줍니다. 에이전트의 답은 여기 싣지 않았습니다: 호스팅과 스킬마다 다르기 때문입니다.

9. 액세스 키

호스팅 계정이 있으면 액세스 키가 생깁니다: 문자와 숫자로 된 긴 문자열로, 호스팅은 이것으로 여러분을 알아봅니다. 손으로 배포할 때는 필요 없습니다: 사이트에서 계정에 로그인하고, 폴더를 끌어다 놓고, 배포를 누르면 호스팅은 이미 여러분이 누구인지 압니다. 키가 필요한 쪽은 에이전트입니다: 에이전트는 사이트를 거치지 않고 명령으로 폴더를 보내는데, 호스팅은 그 명령이 누구의 것인지 키로만 알아볼 수 있습니다. 키가 있으면 배포가 여러분의 영구 주소에 파일을 올리고, 없으면 임시 링크만 나옵니다.

키에는 정해진 자리가 있어서 도구가 거기서 직접 읽습니다: 환경 변수, 또는 배포 스킬이 여러분 도움 없이 열어 보는 파일입니다. 스킬이 키를 어디에 저장할지 물으면, 채팅에 키 문자열을 적지 말고 그 자리를 알려 주세요.

반대 경우도 있습니다: 에이전트의 요청에 서비스가 응답하면서 키가 대화에 저절로 들어오는 경우입니다. 그때는 키를 그 자리에 저장하고, 대화가 이미 비밀을 봤다는 사실을 기억해 두세요.

처음 공개할 때는 키가 필요 없습니다: 임시 링크나 사이트를 통한 업로드로 충분합니다.

10. Claude Code와 함께 쓸 때는 어떻게 되나

에이전트에게 "배포해 주세요"라고 부탁하면 대략 다음과 같은 일이 일어납니다.

• 에이전트는 폴더를 보고, 완성된 파일로 이루어진 페이지라는 것을 알아봅니다. 해당 호스팅용 스킬이 없으면 설치를 제안하거나 어디에 올릴지 물어봅니다. 호스팅은 여러분이 고릅니다.
• 전송은 명령으로 합니다. 에이전트가 허락을 구하는 모드에서는 실행 전에 명령을 볼 수 있고, 거기에 어떤 폴더를 어디로 보내는지 적혀 있습니다. 습관처럼 "예"를 누르지 말고 읽어 보세요. 에이전트가 확인을 구하지 않는다면(그런 모드가 있고, 처음부터 켜져 있는 경우도 있습니다) 보내기 전에 명령과 폴더를 보여 달라고 요청하세요.
• 결과는 에이전트의 답에 있는 링크입니다. 휴대폰으로 열어 보세요: 에이전트에게는 두 번째 기기가 없어서 이것만큼은 스스로 확인하지 못합니다.
• 업데이트도 같은 부탁, "다시 배포해 주세요"입니다. 같은 주소로 되는 것은 호스팅이 키로 여러분을 알아볼 때뿐입니다. 그렇지 않으면 에이전트는 새 임시 링크를 그대로 알려 줄 것이고, 이것은 오류가 아닙니다.
• 임시 링크용 이메일은 에이전트가 물어볼 수 있습니다. 이메일은 비밀이 아니니까요. 키는 다릅니다: 에이전트가 키를 달라고 하면, 채팅에 문자열을 적지 말고 키를 읽을 수 있는 자리를 알려 주세요.