웹사이트 배포

옷가게 쇼핑몰 사이트를 만들었다고 생각해 보세요. 화면도 다 짰고, 콘텐츠 스튜디오에 등록해 둔 상품도 잘 불러옵니다. 그런데 이 사이트는 아직 내 컴퓨터 안에만 있습니다. 손님이 주소를 치고 들어와 보게 하려면, 사이트를 인터넷에 올려 둘 곳이 필요합니다. 이렇게 만든 웹사이트를 인터넷에 올려 누구나 주소로 들어올 수 있게 해 주는 것이 Web Hosting입니다.

세 들어 가게를 여는 것에 비유할 수 있습니다. 내가 꾸며 둔 가게(웹사이트)를 가져와 자리에 들여놓고, 가게 간판에 쓸 주소를 정합니다. 그러면 그 주소로 손님이 찾아옵니다. Web Hosting은 그 "자리"와 "주소"를 한자리에서 내어 줍니다. 이 페이지에서는 Web Hosting이 무엇이고, 만들어 둔 사이트를 어떻게 올려 공개하는지, 그리고 나중에 사이트를 고쳤을 때 어떻게 다시 올리는지 살펴봅니다.

올릴 수 있는 사이트의 모양

Web Hosting에 올리는 것은 미리 만들어 둔 화면 파일들입니다. 손님이 주소로 들어오면 만들어 둔 그 화면이 그대로 나타납니다. 손님이 들어올 때마다 그 자리에서 화면을 새로 계산해 만들어 주는 별도의 프로그램은 두지 않습니다. 그래서 올리기 전에 화면을 모두 완성해 파일로 만들어 두어야 합니다. 옷가게로 치면, 손님이 올 때마다 진열을 새로 하는 것이 아니라 진열을 다 끝낸 가게를 통째로 들여놓는 셈입니다.

올릴 때는 그 화면 파일들을 하나의 묶음 파일로 만들어 올립니다. 사진 여러 장을 한 폴더에 담아 압축하듯, 사이트를 이루는 파일을 하나로 묶어서 올린다고 생각하면 됩니다. 이 묶음에는 두 가지 규칙이 있습니다.

• 묶음 안의 파일은 한 번에 최대 100개까지입니다. 사이트를 이루는 화면, 그림, 글꼴 같은 파일을 모두 합쳐 100개를 넘기면 올릴 수 없습니다. 파일 수가 많아질 것 같으면, 같은 그림은 한 번만 두고 여러 곳에서 함께 쓰거나, 글꼴 같은 무거운 파일은 인터넷에 이미 공개된 것을 끌어다 쓰는 식으로 묶음에 담는 파일 수를 줄이세요.
• 묶음을 풀었을 때 맨 위에 index.html이 있어야 합니다. index.html은 손님이 주소로 처음 들어왔을 때 보여 줄 첫 화면 파일입니다. 이 파일이 묶음의 맨 위가 아니라 하위 폴더 안에 들어 있으면 올릴 수 없습니다. 사이트의 첫 화면 파일을 묶음의 가장 바깥에 두세요.

사이트가 콘텐츠 스튜디오에 등록해 둔 상품 같은 콘텐츠를 불러와 보여 주려면, 그 콘텐츠를 읽어 올 수 있는 열쇠가 사이트 안에 들어 있어야 합니다. 이 열쇠(Delivery Access Token)를 발급하는 방법은 토큰에서 다룹니다. 사이트를 올리기 전에 이 열쇠를 사이트에 넣어 두세요.

주소(서브도메인) 정하기

사이트를 올릴 때 함께 정하는 것이 손님이 들어올 주소입니다. 주소의 앞부분을 직접 정하면, 그 앞부분이 들어간 인터넷 주소 하나가 사이트에 붙습니다. 예를 들어 옷가게 이름을 따 myclothes로 정하면, 손님은 그 이름이 들어간 주소로 사이트에 들어옵니다.

주소의 앞부분에는 몇 가지 규칙이 있습니다.

• 영문 소문자와 숫자, 그리고 사이를 잇는 붙임표(-)만 쓸 수 있습니다. 빈칸이나 그 밖의 글자는 쓸 수 없습니다.
• 길이는 3글자 이상 32글자 이하입니다.
• 이미 다른 사람이 쓰고 있는 주소는 정할 수 없습니다. 주소는 한 곳에 하나뿐이라, 먼저 차지한 쪽이 임자입니다. 그래서 사이트를 올리는 화면에서 중복 확인을 눌러 정하려는 주소가 비어 있는지 확인하는 단계가 있습니다(아래 "사이트를 올려 공개하기" 참고). 비어 있지 않으면 다른 주소를 정해야 합니다.

사이트를 올려 공개하기

옷가게 쇼핑몰 사이트를 Web Hosting에 올려, myclothes 주소로 손님이 들어올 수 있게 만들어 봅니다. 올릴 화면 파일들은 index.html을 맨 위에 둔 하나의 묶음으로 미리 만들어 두었다고 하겠습니다.

1. 옷가게 Space의 설정에서 Web Hosting 화면을 여세요.
2. 오른쪽 위의 생성 버튼을 누르세요.
3. 이름 칸에 옷가게 쇼핑몰을 입력하세요. 이 이름은 나중에 어떤 사이트인지 알아보기 위한 것입니다.
4. Subdomain 칸에 myclothes를 입력하세요.
5. 중복 확인을 눌러 그 주소를 쓸 수 있는지 확인하세요. "사용 가능한 Subdomain입니다"가 나오면 됩니다. 이미 쓰이고 있다면 다른 주소를 정하세요.
6. 배포 파일에 미리 만들어 둔 화면 파일 묶음을 올리세요. 묶음의 맨 위에 index.html이 있으면 "루트에 index.html이 확인되었습니다"라고 표시됩니다.
7. 생성 버튼을 눌러 배포하세요.

올린 묶음은 자리에 들여놓는 준비를 거쳐 공개됩니다. 준비가 끝나면 사이트에 들어갈 수 있는 주소(myclothes가 들어간 .weegloo.app 주소)가 화면에 나타납니다. 그 주소를 눌러 사이트가 제대로 열리는지 확인하세요. 옷가게 상품이 화면에 보이면 성공입니다.

사이트를 고친 뒤 다시 올리기

사이트는 한 번 올리고 끝나지 않습니다. 옷가게라면 새 시즌 상품을 더하거나 화면 디자인을 바꾸는 일이 생깁니다. 이렇게 사이트를 고쳤을 때는, 고친 화면 파일들을 다시 하나의 묶음으로 만들어 같은 Web Hosting에 새로 올립니다. 주소는 그대로 두고 내용물만 바꿔 끼우는 셈입니다. 새로 올린 내용으로 바뀌면, 손님은 같은 주소로 들어와 고쳐진 사이트를 보게 됩니다.

다시 올리려면, 그 Web Hosting 화면을 열어 파일에 고친 묶음을 새로 올리고 저장을 누릅니다. 다시 올릴 때도 묶음 규칙은 처음과 같습니다. 파일은 100개 이하여야 하고, 맨 위에 index.html이 있어야 합니다.

내 도메인으로 바꾸기

지금까지 쓴 주소는 myclothes.weegloo.app처럼 WEEGLOO가 내어 주는 무료 주소입니다. 옷가게 이름으로 따로 사 둔 내 도메인(예: myclothes.shop.com)이 있다면, 손님이 그 주소로 들어오도록 바꿀 수 있습니다. 이미 올려 둔 사이트는 그대로 두고, 들어오는 주소만 내 도메인으로 잇는 것입니다.

이 작업은 배포가 끝난 Web Hosting의 상세 화면에서 합니다.

1. 커스텀 도메인 칸에 손님에게 보여 줄 내 도메인(예: myclothes.shop.com)을 입력하세요.
2. 입력하면 도메인 연결 버튼을 누를 수 있게 됩니다. 눌러서 연결을 시작하세요.
3. 화면에 도메인 업체에 등록할 DNS 레코드 세 개가 나타납니다. 각 레코드는 종류와 이름(Name), 값(Value)으로 되어 있습니다.
   • 트래픽 연결(CNAME): 손님을 내 도메인에서 실제 사이트로 보내는 길입니다.
   • 도메인 소유권(TXT): 그 도메인이 정말 내 것인지 확인하는 값입니다.
   • SSL 인증서(TXT): 안전한 연결(주소창에 자물쇠가 붙는 https)을 발급받는 값입니다.
4. 이 세 줄을 도메인을 산 곳(도메인 관리 업체, 예: 가비아·Cloudflare)의 설정에 화면에 나온 그대로 옮겨 등록하세요. 종류, 이름, 값을 똑같이 넣으면 됩니다.
5. 등록을 마쳤으면 새로 고침을 눌러 검증 상태를 확인하세요. 바꾼 내용이 인터넷에 퍼지는 데 시간이 걸릴 수 있어(최대 48시간), 바로 확인되지 않으면 잠시 뒤 다시 누릅니다.
6. 세 레코드가 모두 확인되면 내 도메인이 사이트에 연결됩니다. 이제 손님은 myclothes.shop.com으로 들어와 같은 사이트를 보게 됩니다.

내 도메인을 연결하려면 그 도메인을 먼저 갖고 있어야 합니다. 도메인은 WEEGLOO가 아니라 도메인 관리 업체에서 따로 구입합니다. 무료 주소(.weegloo.app)는 도메인을 연결한 뒤에도 그대로 함께 쓸 수 있습니다. 연결한 뒤에는 변경으로 도메인을 바꾸거나 제거로 연결을 끊을 수 있습니다.

다음으로 할 일

• 토큰: 공개한 사이트가 콘텐츠 스튜디오의 상품을 읽어다 보여 주려면 Delivery Access Token이 필요합니다. 사이트에 넣을 열쇠를 발급합니다.
• API 레퍼런스: 프로그램에서 Web Hosting을 직접 다루거나 파일 묶음을 올릴 때 필요한 요청 형식 같은 기술 명세를 다룹니다.