페이지가 리뉴얼되어 다시 쓰는, 웹 호스팅 서비스 네트리파이(netlify) 이용해 웹 사이트 배포하는 방법!!

이전에 블로그에 네트리파이 사용법을 안내하는 글을 게시한 적이 있는데, 오랜만에 네트리파이에 접속해 보니 홈페이지가 리뉴얼되어 있었습니다. 이에 발맞춰 네트리파이 사용법에 대한 안내글도 리뉴얼하는 게 좋겠다고 판단해 이 글을 씁니다. 누군가에게는 도움이 되길 바라는 마음을 담아서...

 

네트리파이(netlify)?

네트리파이는 웹 호스팅 서비스입니다. 웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것으로, 이러한 서비스를 제공하는 웹 사이트는 무척 많습니다. 그 중에서도 네트리파이는 사용법이 무척 간단하고, 일정 수준의 용량까지는 무료로 이용할 수 있어 초보자들에게도 부담없는 서비스입니다. 

 

네트리파이 서비스 이용 방법

네트리파이를 이용해 내가 만든 웹사이트를 호스팅하여 다른 사람들에게 배포하는 방법을 안내하겠습니다. 이때 사용자가 만든 웹사이트 폴더 및 HTML 문서가 존재한다는 점과, 해당 HTML 문서의 이름의 index.html 임을 가정하고 진행합니다. 

 

1. 네트리파이 홈페이지로 이동합니다.

=> www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

 

2. 이미 계정이 있으신 경우 로그인을 하시고, 없다면 우측 하단의 Sign up을 눌러 회원가입을 먼저 해야합니다. 

 

3. 새롭게 회원가입을 할 경우, 여기에서는 Email로 회원가입하기를 선택한다고 가정합니다(화면의 맨 아래 회색 버튼).

 

4. Email 로 회원 가입을 할 때는 현재 사용 중인 이메일을 작성하고, 네트리파이에서 사용할 비밀번호를 차례로 입력해주어야 합니다.

 

5. 입력을 마치고 'Sign Up' 버튼을 누르면 '당신의 메일을 확인하세요'라는 안내 문구가 나옵니다. 입력한 이메일 주소로 접속해 메일 박스를 확인하세요.

 

6. 네트리파이 측으로부터 전달된 메일을 열어 보면, 메일 확인 및 회원 가입 완료를 처리할 수 있는 초록 버튼이 보입니다. 이것을 눌러 회원가입 절차를 마무리하세요.

 

7. 회원 가입이 끝나면, 신규 회원에 대한 간단한 설문(?)이 진행되는데, 각 항목을 적당히 입력하고 넘어가시면 됩니다.

 

8. 설문을 마치고 나면 '당신의 첫 번째 프로젝트를 배포하세요(Deploy your first project)'라는 문구가 나오는데, 이 부분은 문구 바로 아래의 'Skip this step for now'를 클릭해 건너뛰겠습니다. 물론 이 화면에서부터 당장 배포를 시작해도 되긴 하지만, 뒤에서 좀 더 일반적인 방법으로 절차를 진행보겠습니다.

 

9. 드디어 로그인 첫 화면으로 진입했습니다. 맨 위에 자신의 닉네임이 표시되고, 그 아래로 다양한 메뉴들이 보입니다. 배포를 시작하기 위해 여러 메뉴 중 'Sites'를 선택해주세요.

 

10. Sites 메뉴에서 스크롤을 살짝만 내려보면, 흐릿하게 점선으로 표시된 영역이 하나 보입니다(아래 이미지에서 가장 아래 부분). 여기에 내가 배포하고자 하는 웹 사이트 문서들이 저장된 폴더를 드래그 앤 드롭 해주세요. 좀 더 쉽게 말하자면, 내가 배포하고자 하는 웹 사이트의 index.html 문서가 저장되어 있는 폴더를 드래그 앤 드롭 해주세요. 그러면 곧장 배포 작업이 시작됩니다.

 

11. 곧바로 배포 작업이 시작되고, 시간이 조금 지나고 나면 다음과 같은 화면을 만나볼 수 있습니다. 배포가 완료된 직후의 화면인데, 이 화면의 왼쪽 상단부를 보시면 netlify.app 으로 끝나는 링크가 하나 생성되어 있음을 발견할 수 있습니다. 이 링크가 바로 배포 완료된 내 웹사이트의 주소입니다.

그러나 이렇게 절차가 완료된 것은 아닙니다. 배포 직후의 링크는 기본적으로 네트리파이 측에서 랜덤으로 아무렇게나 지어주는 이름에 불과한데, 원하는 경우 사용자는 자신이 원하는 이름으로 사이트 이름을 변경할 수 있습니다. 이를 위해서는 아래 이미지에서 'Site settings' 버튼을 눌러 사이트 설정 화면으로 이동해야 합니다. 

 

12. 사이트 설정 화면에는 'Change site name'이라는 항목이 있는데, 이를 클릭하면 내가 원하는 사이트 이름을 입력할 수 있습니다. 입력 후 저장을 하면 사이트 이름이 곧 변경됩니다. 유료 도메인을 구매한 경우가 아니라면, 사이트 이름 뒤에 붙는 'netlify.app'이라는 문자열은 없앨 수 없으니 이 점을 참고해주세요.

 

13. 사이트 이름 변경 후에 웹 브라우저 주소창에 해당 이름을 포함한 주소를 입력하면, 이렇게 배포 완료된 페이지를 만나보실 수 있습니다.