#06 웹사이트 전세계 공개법

4 분 소요

지난 시간에 웹 사이트를 구성하는 HTML을 배웠는데요, 여러분들이 HTML을 배워 정말 엄청난 웹 서비스를 만들었다고 하더라도 세상에 공개하지 않으면 소용이 없겠죠? 웹 사이트는 인터넷에 공개되어 많은 사람들이 쉽게 이용할 수 있게 되어야 진정한 의미를 갖는다고 할 수 있겠습니다.

이번 칼럼에서는 직접 만든 웹 사이트를 5분도 안되어 전 세계에 공개해보겠습니다.

  1. 웹 사이트를 인터넷에 공개하는 방법

내가 만든 사이트를 인터넷에 공개하는 방법은 크게 2가지가 있습니다.

내 컴퓨터 자체를 서버 ①로 만드는 방법이나 외부 서버를 이용하는 방법입니다.

1-1. 내 컴퓨터를 서버로 만드는 방법

첫 번째로 내 컴퓨터를 서버로 만드는 방법입니다. 내 컴퓨터 자체를 서버로 만들어 인터넷에 내 컴퓨터로 들어올 수 있는 IP 주소②를 알리는 방법이죠. 이러한 방법은 누가 언제 접속할지 모르기 때문에 인터넷에 연결된 내 컴퓨터를 365일 24시간 가동해서 불편하며 개인 컴퓨터를 공개하는 것이기에 보안에 취약할 수 있습니다. 그러기에 별로 추천드리고 싶지 않은 방법입니다.

① 서버 : 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램(server program) 또는 장치(device)

② IP 주소 : 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호

1-2. 외부 서버를 이용하는 방법

이런 서버실 보신 적 있으신가요? 영화에서 보면 해커가 여기로 침투해 정보를 빼내기도 하죠. 대부분의 큰 기업들은 이렇게 24시간 돌아가는 자체 서버실은 운영하는데요. 이렇게 만들어 놓은 서버의 일부를 빌려서 그 공간을 이용해 내 사이트를 배포하는 방법이 있습니다.

이러한 서버에 내 HTML 파일을 올려두고 배포를 하게 되면 큰 서버의 일부를 이용하는 것이기에 부담해야 하는 유지 비용이 적게 들며 기업에서 알아서 관리를 해주기에 신경 쓸 부분도 적습니다.

이러한 서버를 제공하는 업체를 전문 용어로 웹 호스팅③ 업체 또는 클라우드 서비스④ 제공 업체라고 부르는데요,

정말 많은 기업들이 이러한 서비스를 제공하고 있고 그중 아마존 웹 서비스(AWS)⑤, 마이크로소프트 에저(Azure)⑥, 구글 클라우드 서비스(GCP)⑦가 대표적인 클라우드 업계 Top 3 기업입니다.

어떤 서비스를 사용해도 무관하지만 우리는 실습을 위해 무료로 간단히 쓸 수 있는 Netlify⑧라는 서비스를 이용해보겠습니다.

③ 웹 호스팅 : 인터넷 호스팅 서비스의 일종으로 개인과 단체가 월드 와이드 웹을 통하여 웹사이트를 제공하는 것

④ 클라우드 서비스 : 가상 서버, 데이터 스토리지 및 데이터베이스와 같은 일련의 빌딩 블록에 대한 액세스를 서비스 형태로 제공하는 것

⑤아마존 웹 서비스(AWS) : 아마존닷컴의 클라우드 컴퓨팅 사업부, 2006년에 공식 런칭한 아마존 웹 서비스는 기타 웹 사이트나 클라이언트 사이드 애플리케이션을 위한 온라인 서비스들을 제공하며 현재 클라우드 업계 1위이다.

⑥ 에저(Azure) : 2010년 시작된 마이크로소프트의 클라우드 컴퓨팅 플랫폼

⑦ 구글 클라우드 서비스(GCP) : 구글 검색과 유튜브와 같은 최종 사용자 제품을 위해 내부적으로 구글이 사용하는, 동일한 지원 인프라스트럭처 위에서 호스팅을 제공하는 구글의 클라우드 컴퓨팅 서비스

⑧ Netlify : 정적 웹 사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하는 샌프란시스코 기반 클라우드 컴퓨팅 회사

  1. 웹 사이트 만들기

2-1. 웹 사이트 템플릿 다운로드하기

웹 사이트를 인터넷에 공개하기 위해서는 업로드할 웹 사이트가 있어야겠죠. 물론 처음부터 만들어도 좋겠지만 너무 시간이 오래 걸릴 수 있습니다.

PowerPoint(PPT)⑩를 만드는 것을 생각해보겠습니다. 저는 대학생 때 PPT를 만들어야 하는 과제가 있다고 하면, 가장 먼저 인터넷에 적당한 PPT 무료 템플릿을 찾고 거기에 내용을 넣는 작업을 하였습니다. 그러면 디자인을 크게 생각하지 않아도 깔끔한 PPT 자료가 나올 수 있었죠.

웹 사이트를 만드는 것도 마찬가지입니다. 적당한 템플릿을 찾아서 내용만 바꾸어 놓는다면 디자인을 잘 하지 못해도 상당히 괜찮은 웹 사이트를 만들 수 있습니다.

⑩ PowerPoint(PPT) : 마이크로소프트파워포인트, 프레젠테이션을 위해 만든 마이크로소프트 프로그램

그러면 ppt 템플릿을 받는 것처럼 HTML 템플릿도 받아보겠습니다. Google에 html free template으로 검색해보시면 다양한 사이트에서 템플릿을 제공하는 것을 볼 수 있습니다. 아무 데나 들어가서 마음에 드는 템플릿을 골라봅시다.

저는 free-css라는 사이트로 들어왔습니다.

화면에서 마음에 드는 템플릿을 고르신 후 상세 화면으로 들어가서

[DOWNLOAD] 버튼을 눌러서 다운을 받아줍니다. 다운로드 후 압축을 풀어보시면 위와 같은 파일이 있습니다.

이때 주의사항으로 압축 해제된 폴더 속에는 인터넷에 공개할 수 있는 HTML 파일인 *index.html이 있어야 합니다. 또, readme.txt 혹은 license.txt 파일을 확인하여 저작권 관련 규정을 숙지하신 후 이용하셔야 합니다.

*index만 보이는 경우가 있는데 파일 확장자 표시가 안되어서 그럴 수 있습니다. 그러면 아래와 윈도우 탐색기 폴더 상단의 [보기] > [파일 확장자명 표시] 버튼을 눌러서 확장자명을 확인해보시면 나오실 겁니다.

Index.html 파일을 눌러서 실행해보시면 템플릿 웹 사이트를 확인할 수 있습니다.

  1. 웹 사이트 템플릿 수정하기

웹 사이트 템플릿을 수정하시려면 Index.html 파일을 지난 칼럼에서 설치한 visual studio code를 통해 실행시켜줍니다.

실행 방법은 [마우스 우 클릭] => [연결 프로그램] => [visual studio code]를 선택해주시면 되겠습니다.

Ctrl + F (문서 내 검색)를 눌러서 고치고 싶은 부분을 찾고 원하는 글자로 고쳐줍니다. 이때 지난번에 네이버를 해킹하면서 배운 HTML 지식을 활용할 수 있겠죠?

우리는 간단히 제목을 “조코딩의 홈페이지”로 고쳐주겠습니다. 그리고 Ctrl + S (저장)를 눌러서 html 파일을 저장해줍니다.

그리고 웹 브라우저에서 F5(새로 고침) 버튼을 누르면? 짜잔~ 조코딩의 홈페이지로 바뀐 것을 볼 수 있겠습니다.

  1. Netlify로 웹 사이트 배포(Deploy)⑪하기

만든 사이트를 Netlify에 업로드해보겠습니다.

먼저 우측 상단에 Sign Up 버튼을 눌러 회원가입을 진행해줍니다.

회원 가입은 Github⑫, GitLab⑬, Bitbucket⑭ 아이디로 간편 로그인을 진행할 수 있으며 아이디가 없으시다면 Email 회원가입을 하셔도 무방합니다.

⑪ 배포(Deploy) : 전략적으로 넓게 퍼뜨리거나 또는 배치한다는 의미로 웹 사이트 등을 다른 사람들이 사용할 수 있도록 배포하는 것을 뜻함

⑫ Github : git 데이터를 온라인에 저장해 주는 사이트, 개발자들의 코드 블로그 같은 공간

⑬ GitLab : 깃랩 사가 개발한 Github와 유사한 위키와 이슈 추적 기능을 갖춘 웹 기반의 데브옵스 시스템

⑭ Bitbucket : 아틀라시안 소유의 Github와 유사한 웹 기반 버전 관리 저장소 호스팅 서비스

로그인 후 아까 수정한 HTML 템플릿 폴더를 마우스로 드래그하여 스크린샷 속 붉게 표시한 영역에 올려놓습니다.

조금만 기다려보시면 Deploy가 금방 완료되며 상단의 주소를 클릭하여 들어가줍니다.

그러면 이렇게 정상적으로 사이트가 Deploy 된 것을 볼 수 있습니다.

  1. 웹 사이트 접속 주소 수정하기

사이트는 잘 들어가지지만 접속 주소가 조금 길고 이상하게 되어있죠? 이것을 수정해보겠습니다.

Netlify에서 [Site settings] > [Change site name] 버튼을 눌러줍니다.

그리고 원하는 사이트 이름으로 바꾸어줍니다. 저는 jocoding으로 바꾸어보겠습니다. 수정 후 [Save] 버튼을 눌러줍니다.

우리가 수정한 접속 주소인 jocoding.netlify.com으로 접속하셨을 때 우리가 만든 홈페이지가 정상적으로 뜨는 것을 볼 수 있습니다.

지금까지 내가 만든 웹사이트를 온라인에 공개하는 과정을 실습해보았습니다.

어때요, 생각보다 쉽지 않나요? HTML을 조금만 이해하고 있다면 템플릿을 이용해서 누구나 자기가 원하는 웹사이트를 만들어서 전 세계가 볼 수 있는 인터넷에 올릴 수 있습니다. 다음 칼럼에서는 이렇게 만든 내 사이트가 네이버에 검색 결과에 나오도록 만들어보겠습니다.

태그:

카테고리:

업데이트: