[HTML 기초 강좌 2강] 웹 사이트 만들고 인터넷에 공개하기 (.COM 도메인, HTTPS 적용까지 완전 무료)

 

5분만에 웹페이지 디플로이하기

웹 사이트를 공개하는 디플로이의 원리를 살펴본 후
1강에서 배운 태그 지식을 활용해 나만의 웹 사이트를
HTML 무료 템플릿을 이용하여 간편하게 만들어보고
Netflify라는 웹 호스팅 서비스를 이용해 디플로이 하는 강좌입니다.

추가적으로 Github에 저장된 코드로 디플로이하게되면
소스코드를 수정하는데로 즉각 반영이 된다고 하니 정말 유용하네요!

*HTML 템플릿 이용시 readme나 licence 파일을 꼭 확인하여 저작권에 문제가 없는지 유의해주세요!

- Netflify 주소
https://www.netlify.com/

- 완성된 사이트 주소
https://jocoding.netlify.com/

 

안녕하세요 누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다.

이번 영상에서는 내가 만든 웹 사이트를 인터넷 상에

올리는 방법을 알려드리고자 합니다.

그 원리를 간단하게 살펴보고 실습을 통해

직접 내 사이트를 전세계 누구나 접속할 수 있게 만들어보겠습니다.

자 그럼 함께 배워볼까요?

 

지난 시간에 우리는 HTML과 태그에 대해 배웠습니다.

HTML로 작성한 문서는 브라우저를 통해 웹 사이트의 형태로 보이게 되죠

 

그런데 여러분들이 HTML을 배워

많은 사람들에게 즐거움과 편리함을 제공할 수 있는

정말 대단한 사이트를 만들었다고 해도

내 컴퓨터에만 저장되어 있다면 아무 소용이 없을 것입니다.

웹 사이트는 이렇게 인터넷에 공개가 되어 많은 사람들이 이용할 수 있게 되어야

비로소 진정한 의미를 갖는다고 할 수 있겠습니다.

 

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

첫 번째로 내 컴퓨터 자체를 서버로 만드는 방법이나

외부 전문 서버를 이용하는 방법입니다.

 

첫 번재 방법인 내 컴퓨터를 서버로 만드는 방법입니다.

내 컴퓨터 자체를 서버로 만들어

인터넷에 내 IP 주소를 알리는 방법이죠

이러한 방법은 개인 컴퓨터를 공개하는 것이기에 보안이 취약할 수 있고

누가 언제 접속할지 모르기 때문에 인터넷에 연결된 내 컴퓨터를

365일 24시간 가동해야 합니다.

그러기에는 전기세 등 유지 비용이 어마어마 할 것입니다.

그러기에 별로 추천 드리지 않습니다.

 

두 번째로 외부 서버를 이용하는 방법입니다.

이런 서버실 보신적 있으신가요? 영화에서보면

여기로 침투해 정보를 빼내기도 하죠

대부분 큰 기업들은 이렇게 24시간 돌아가는 자체 서버실은 운영하는데요

이렇게 만들어 놓은 서버의 일부를 빌려서 그 공간을 이용해

내 사이트를 배포하는 방법이 있습니다.

 

이러한 서버에 내 HTML파일을 올려두고 배포를 하게 되면

큰 서버의 일부를 이용하는 것이기에 상대적으로 유지 비용이 적게들며

기업에서 관리를 해주기에 신경 쓸 부분도 적습니다.

그러나 가끔 Amazon Web Service 같은 큰 기업에서도

서버 관리를 잘못하여 문제가 생기는 경우도 있긴 합니다만

그래도 개인 PC를 사용하는 방식보다는 훨씬 안전하다고 할 수 있겠습니다.

 

기업의 서버를 제공하는 것을 전문 용어로

웹 호스팅 또는 클라우드 서버라고 부르는데요,

정말 많은 기업들이 이러한 서비스를 제공하고 있습니다.

아마존 웹 서비스가 시장에서 가장 큰 점유율을 차지하고 있지만 요금이 조금 비싼 편입이다.

어떤 서비스를 사용해도 무관하지만 우리는 실습을 위해

netlify라는 서비스를 이용해보겠습니다.

 

이 서비스를 선택한 이유는 대부분의 기능이 무료이며

초보자도 누구나 할 수 있도록 쉽게 되어있기 때문입니다.

 

웹 사이트를 인터넷에 공개하기 위해서는 업로드할 웹 사이트가 있어야 겠죠

빠르게 한번 만들어 보겠습니다. 물론 처음부터 코드 에디터를 켜고 만들어도 좋겠지만

너무 시간이 오래 걸릴 수 있겠죠. PPT를 만드는 것을 생각해보겠습니다.

저는 대학생때 PPT를 만드는 과제가 있다고 하면 가장 먼저 하는 일이 이거였습니다.

 

그러면 ppt 템플릿을 받은 것 처럼 Html 템플릿도 받아보겠습니다.

Html free template으로 검색해보시면 다양한 사이트에서 템플릿을 제공하는 것을 볼 수 잇습니다.

아무데나 들어가서 마음에 드는 템플릿을 골라봅시다

들어가서 다운로드를 누르시면 다운이 됩니다.

 

그럼 본격적으로 실습을 해보겠습니다.

Netlify 닷 컴으로 접속해보시면 이렇게 홈페이지가 나오게 됩니다.

우측 상단에 로그인 버튼을 눌러 로그인을 해봅시다.

다양한 사이트의 계정으로 간편 회원 가입을 할 수 있는데요

여기서 위 서비스들에 가입하지 않으셨다면 그냥 Email을 통해 가입하셔도 무방하지만

개발자들을 위한 코드 블로그라고 할 수 있는

GitHub 정도는 미리 가입하시는 것을 추천드립니다.

후에 Github에 대한 영상은 따로 다루도록 하겠습니다.

 

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

어때요, 생각보다 쉽지 않나요?

HTML을 조금만 이해하고 있다면 템플릿을 이용해서 누구나 자기가 원하는

웹사이트를 만들어서 전세계가 볼 수 있는 인터넷에 올릴 수 있습니다.

추가적으로 로그인이나 폼 전송 등 부가 기능도 쉽게 추가할 수 있습니다.

다음에 더 쉽고 유익한 주제로 찾아뵙겠습니다. 감사합니다.