어떤 파일을 인터넷상에 올려 url로 접근할 수 있게 만들어야하는 경우가 종종 있습니다. 내가 가진 파일의 인터넷 링크, 즉 http url을 생성해서 접근할 수 있도록 하는 방법에 대해 알아봅시다. 이를 웹호스팅이라고 합니다. 무료로 사용할 수 있으며 안정적이고 신뢰도 높은 GitHub이라는 서비스를 사용할 것입니다. GitHub의 웹호스팅 기능을 이용해 파일을 인터넷에 배포해서 인터넷 상에서 url로 누구나 다운로드하고 접근할 수 있게하는 방법을 저장소 만들기, 파일 업로드, url 확인 순으로 누구나 할 수 있도록 쉽게 알려드리겠습니다.
내 컴퓨터에 있는 파일들을 주변에 공유하기 위해서 우리는 보통 어떤 방법을 쓰나요? 카카오톡같은 메신저, 이메일을 통한 파일 전달이 가장 쉽고 흔하며 대표적인 방법입니다.
더 나아가 자신이 어떤 웹사이트를 운영하거나, 기존에 있는 웹서비스를 사용할때 파일을 넣으려고 한다고 칩시다. 블로그에 글을 쓸때는 글쓰기에서 쉽게 사진과 같은 파일을 첨부할 수 있습니다. 이렇게 파일을 삽입할 수 있는 웹서비스들에는 직접적인 파일 업로드 기능을 지원합니다. 단, 파일 포맷(확장자)의 제한과 용량의 제한을 갖고있습니다. 그래서 어떤 경우에는 해당 서비스가 제공하는 용량 이상의 파일을 삽입하려면 해당 파일의 링크 url을 입력해야하는 경우도 있습니다.
내가 어떤 기능에 내 컴퓨터에 있는 음악을 삽입하려고 하는데 음악 파일의 용량이 커서 링크 url로 삽입해야한다고 가정합시다. http 또는 https로 시작하는 url을 입력해서 해당 음악파일에 접근할 수 있도록 만들어야 합니다.
인터넷 웹서핑을 하다보면 이런 링크를 자주 접할수 있습니다만 직접 만들려고 하니 방법을 몰라 막막할 수 있겠죠. 이럴때 어떻게 하면 내가 가진 파일을 '인터넷 URL'을 통해 접근하게 만들 수 있는지 알아봅시다.
GitHub
'GitHub'이라는 것을 이용해 위와 같은 작업을 할 수 있습니다. GitHub는 코드 호스팅 및 버전 관리 플랫폼으로, 협업과 소스 코드 관리를 쉽게 할 수 있도록 하는 서비스입니다. IT 분야에 종사하거나 개발자인분들은 잘 아실겁니다. GitHub은 꼭 어떤 프로그램을 개발하지 않더라도 그냥 여러가지 파일들을 GitHub 서버에 올려 인터넷 링크를 통해 해당 파일에 접근할수있게 만드는데도 사용할수 있습니다.
(사족: GitHub를 이러한 목적으로 사용하는 것은 개발자들도 잘 모르기도 합니다. 저 또한 이 방법을 알기 전에는 몇개 파일을 http로 접근할 수 있게 해야하는데.. 아마존 AWS의 S3를 사용해야 하나..? 좋은 무료 웹 호스팅 서비스가 있나? 라는 생각을 했습니다. 물론 개발자들은 이를 위해 뭐가 필요하고 어떻게 검색해야 하는지 알기때문에 금방 방법을 찾을 순 있습니다.)
파일을 인터넷에 올려 http 인터넷 URL을 취득할 수 있는 방법은 아주 여러가지가 있습니다만 제가 GitHub을 사용하는 이유는 신뢰성이 있고 안정적이며 무료이기 때문입니다.
무료라는 것은 부가 설명이 필요없는 당연한 장점인데 '신뢰성'과 '안정성'은 왜 중요할까요? 내가 만든 인터넷 URL이 오래 안정적으로 유지되어야 하기 때문입니다. 파일을 업로드해서 인터넷 URL을 얻을 수 있는 A라는 무료 서비스가 있어서 내가 그것을 이용해 링크를 만들었는데 A라는 서비스가 종료해버리면 내 링크도 더이상 접근할 수 없는 URL이 되어버립니다. 그래서 서비스의 신뢰성과 안정성은 중요하며 GitHub이 조건에 부합하는 서비스이기 때문에 이를 사용한 방법을 알려드릴 것입니다.
이 글에서 다룰 '파일을 인터넷에 올려 url을 통해 접근할 수 있도록 만들기'는 전문적인 용어를 사용하면 '웹호스팅', '정적 리소스의 인터넷 http endpoint 생성'이라고 얘기할수 있습니다. 아래 내용부터 그러한 용어가 나오면 같은 의미로 이해하면 됩니다.
GitHub을 이용한 웹호스팅 방법
GitHub을 이용해서 웹호스팅을 하는 방법을 다음의 순서로 알려드릴것입니다.
- 1. Repository(저장소) 만들기
- 2. 파일 업로드
- 3. Repository 설정 변경
- 4. URL 확인
쉽게 알려드릴테니 차근차근 같이 해봅시다.
1. Repository(저장소) 만들기
GitHub 계정이 없는 분들은 하단의 '부록 - GitHub 회원가입 방법'을 참고하세요.
제일 먼저 github에 repository 라는 것을 만들어야 합니다. 인터넷 상의 저장소라고 생각하면 됩니다. Repository는 내가 업로드할 파일들을 담는 가장 바깥의 폴더와 비슷한 개념입니다. 참고로 repository는 여러개 만들 수 있습니다.
우측 상단 '+' 버튼을 클릭하고 New repository를 클릭합니다.
또는 좌측의 Create repository를 클릭해도 됩니다. (참고로 이 버튼은 repository가 한개도 없는 계정만 뜹니다.)
Repository 생성 화면입니다. 설정해야 할것은 딱 2가지입니다.
Repository name에 적당한 repository 이름을 입력하고 Public에 체크하고 Create repository를 클릭합니다.
나머지는 모두 기본값으로 하면 됩니다.
Repository를 생성하면 위와 같은 화면이 보입니다.
죄다 영어고 처음엔 익숙치 않아 다소 복잡해보이지만 어려울것 없습니다.
다음으로 파일을 업로드하겠습니다.
2. 파일 업로드
중앙의 'uploading an existing file(파일 업로드)'를 클릭합니다.
중앙에 'Drag files here to add them to your repository(파일을 드래그해서 Repository에 추가하세요)'라는 문구가 보입니다.
이렇게 GitHub repository에도 우리가 많이 사용하는 구글 드라이브나 네이버 마이박스와 똑같이 파일을 업로드할 수 있습니다.
업로드할 파일을 드래그&드롭하세요.
저는 파일이 있는 폴더를 그대로 드래그&드롭해서 업로드했습니다.
화면에 /wibees-blog-example/images/stage.jpg 라고 표시되는데요.
제 컴퓨터에는 wibees-blog-example 폴더 안에, images 폴더 안에 stage.jpg 라는 이미지 파일이 있고 wibees-blog-example 폴더를 끌어다 업로드한것입니다.
내 컴퓨터에 파일들이 다 바탕화면에 나와있는게 아니라 각 폴더에 정리돼있듯이 repository에도 폴더에 담아서 올리면 관리하기 편합니다.
업로드가 완료된 후 Commit changes를 클릭합니다.
업로드가 완료된 화면입니다.
제가 올린대로 /wibees-blog-example/images 폴더가 repository에도 생성된것을 볼 수 있습니다.
클릭해서 들어가봅시다.
업로드한 폴더와 파일이 그대로 올라갔음을 볼 수 있습니다.
참고로 제가 업로드한 이미지 파일은 이것입니다.
3. Repository 설정 변경
기본적으로 github repository를 생성하면 인터넷상의 저장소가 생기는겁니다.
우리의 목적인 '웹 호스팅'을 통한 파일의 '인터넷 링크'를 만들려면 repository의 설정을 '웹 호스팅' 용도로 바꿔야합니다.
우측 상단의 Settings(설정)을 클릭합니다.
좌측 사이드바 메뉴에서 'Pages'를 클릭하고 Branch 항목의 'None'이라고 되어있는 부분을 클릭합니다.
(Branch는 파일의 버전관리를 위한 개념 중 하나인데 궁금하다면 Git Branch 라고 검색해서 공부해보셔도 좋습니다. 여기서는 반드시 알아야하는 것은 아닙니다.)
Select branch에서 'main'을 클릭하고 'Save'를 클릭합니다.
그러면 상단에 'GitHub Pages source saved.'라는 문구가 뜹니다.
Repository를 '웹 호스팅' 용도로 사용하기 위한 설정 변경이 완료된 것입니다.
4. URL 확인
이제 업로드한 파일의 인터넷 URL을 확인해보겠습니다.
Repository의 설정을 바뀐 후 어느 정도 시간이 지난 뒤 Settings 메뉴에서 새로고침을 해보면
내가 만든 repository의 url이 뜹니다.
자신의 유저이름 + repository 이름의 조합으로 생성되기 때문에 각자 다릅니다.
저같은 경우에는 유저이름이 wibees, repository 이름이 wibees-blog-example이기 때문에 'https://wibees.github.io/wibees-blog-example/' 와 같이 생성되었습니다.
해당 링크를 클릭하거나 우측 'Visit site' 버튼을 클릭하면 내 repository를 인터넷을 통해 확인할 수 있습니다.
자, 클릭해봅시다.
위와 같은 화면이 보일것입니다.
내 repository의 루트(최상단)에 아무것도 없기때문에 위와 같이 보이는것이 정상입니다.
이제 이 주소 뒤에 내가 올린 파일명을 붙여 입력해봅시다.
저는 '/wibees-blog-example/images/stage.jpg' 입니다.
여러분이 업로드한 파일의 전체 경로를 입력하세요.
저의 경우에 주소창에 입력하는 전체 url은 'https://wibees.github.io/wibees-blog-example/wibees-blog-example/images/stage.jpg'입니다. (여러분도 접근할 수 있으니 클릭해보세요.)
url을 입력하니 제가 업로드한 파일이 보입니다.
이제 이 파일은 인터넷 링크가 생성되어 인터넷 상에서 url만 입력하면 접근할 수 있게 되었습니다.
이미지 파일 뿐만 아니라 모든 파일을 이와 같이 웹호스팅을 이용해 링크를 만들어서 공유하거나 필요한 서비스에 사용할 수 있습니다.
인터넷상에서 누구나 접근가능해지므로 민감한 정보가 담긴 파일이나 저작권이 있는 파일은 올리지 않도록 주의하세요.
부록 - 파일을 업로드하고 바로 링크가 생기는건 아니다.
Repository에 파일을 업로드하고 바로 인터넷에서 접근이 가능한 링크가 생기는건 아닙니다.
파일을 인터넷에 배포하기 위한 작업에 시간이 소요되고 배포 작업이 완료돼야 비로소 링크를 통해 파일에 접근할 수 있게 됩니다.
이 작업이 완료되었는지는 아래와 같이 확인할 수 있습니다.
Repository에서 'Actions' 메뉴를 클릭하면 'pages build and deployment'라는 문구가 보이는데요.
Repository에 파일을 업로드할 때 마다 이 문구가 하나씩 추가됩니다.
(정확히는 repository의 파일에 변경이 발생하는 모든 시점에 추가됩니다. 파일 변경, 추가, 삭제 등...)
그리고 배포 작업이 진행중일때는 좌측에 주황색 점으로 표시됩니다.
작업이 완료되면 위와 같이 주황색 점이 녹색 체크 아이콘으로 바뀝니다.
이렇게 작업이 완료된 후에 내 repository url 뒤에 파일의 전체 경로를 입력하면 해당 파일에 접근할 수 있게 됩니다.
부록 - GitHub 회원가입 방법
GitHub 회원가입은 무료이며 가입하기 쉽습니다.
이메일만 있으면 됩니다.
웹브라우저에서 github.com을 입력하여 접속해서 Sign up(회원가입)을 클릭합니다.
Enter your email(이메일을 입력하세요) 란에 GitHub 회원가입에 사용할 이메일을 입력하고 Continue 버튼을 클릭합니다.
Create a password(비밀번호를 입력하세요) 란에 사용할 비밀번호를 입력하고 Continue 버튼을 클릭합니다.
Enter a username(유저명을 입력하세요) 란을 입력합니다. 닉네임같은 것입니다. 입력 후 Continue를 클릭합니다.
하단에 'Username XXX is not available.' 와 같이 뜬다면 이미 다른 사람이 사용중인 username인 것이므로 다른것을 입력하세요.
마지막 항목은 업데이트 소식, 공지를 이메일로 받을것인지 여부입니다.
받을거면 y를, 받지않을거면 n을 입력하고 Continue를 클릭합니다.
저는 안받을것이기 때문에 n을 입력했습니다.
로봇이 아님을 확인하기 위한 항목입니다. 적절한 그림을 클릭해서 넘기고 Creat account(계정 생성)을 클릭하세요.
다음은 이메일 검증 화면입니다. GitHub은 무료 서비스이기 때문에 부적절한 계정 생성을 막기 위해 확인 항목이 많습니다.
이메일로 온 코드 8자리를 입력하면 회원가입이 완료됩니다.
처음 회원가입하면 위와 같은 페이지로 이동되는데요.
부가 항목이기때문에 굳이 입력하지 않아도 됩니다. 귀찮으니 이 화면은 패스하고 다시 github.com으로 접속해서 서비스를 계속 사용하면 됩니다.
굳이 선택하고싶다면? 자신에게 맞는 항목을 선택하고 Continue를 클릭하세요.
보통의 용도라면 첫 화면(팀원이 몇명인지, 학생인지 교사인지 여부)은 Just me, Student 정도로 대충 선택하면 되고 두번째 화면(관심있는 기술)은 아무것도 선택하지 않고 Continue를 클릭하면 됩니다.
다음 화면은 유료 구독 유도 화면입니다.
Continue for free 를 클릭하세요.
이상으로 GitHub의 pages 기능을 이용한 웹호스팅 방법에 대해 알아보았습니다.
댓글