개인 웹사이트 쉽게 만드는 방법, fast.io

지금까지 개인 웹사이트를 hostinger에서 제공하는 무료 서비스를 이용하여 운영하고 있었는데, 일반적인 웹 호스팅 서비스라서 홈페이지를 수정하려면 랩탑에 있는 소스 코드를 수정해서 FTP로 접속해서 파일 업로드하는 일련의 과정이 너무 귀찮았다 (이를 핑계로 홈페이지 관리 소홀을 정당화...ㅎㅎ).

그러다 최근에 재미있는 서비스를 발견하게 되었다!

fast.io라는 회사가 제공하는 서비스는 CDN. 위키페이지 링크를 달아 두었지만, CDN을 간단하게 설명하자면 Content Delivery Network라고 보통 파일들을 큰 네트워크의 서버들을 이용하여 좀 더 빠르고 안정적으로 파일들을 엑세스 가능하게 해주는 서비스다. 주로 이용되는 분야는 소프트웨어들을 다수의 사람들에게 배포할 때.

Fast.io - Simple File Sharing with Direct Download Links

Reimagine File Sharing; Host PDFs, videos, images, etc. on a super fast global network. Keep your file sharing on-brand, in-channel, and capturing value.

fast.io

당연히 수요가 많은 서비스이므로 Microsoft Azure, Cloudflare 등등 많은 회사들이 CDN 서비스를 제공하나 이 서비스가 재미있는 점이,

개인의 클라우드 서비스 상에서 동작 (e.g., 구글 드라이브, 드롭박스, 박스, 마소 원드라이브, 등등)
html 랜더링해서 웹페이지 파일을 올려두면 웹서버로 동작 (다른 서비스들도 제공하려나??)
초기 셋업이 직관적이고 엄청 쉽다. 몇 스텝 안걸려서 홈페이지가 만들어진다;
공짜!! (당연히 유료 서비스도 있는데 무료 서비스가 개인 웹사이트용은 충분히 커버하는 것 같다)

이 서비스를 발견하자마자 내 개인 웹사이트 (dongchankim.io) 도 바로 옮기고 몇 일째 써보고 있는데 속도나 availability 면에서 상당히 만족스럽다 :) 나는 개인적으로 Box서비스랑 연동하여 이용 중이다.

그래서 만약 개인 웹사이트를 만들고 싶은데 나처럼 귀찮고 잘 모르겠을때 쉽게 따라할 수 있는 과정을 여기서 설명하려 한다. 당연히 쉽게 설명하는 것에 초점을 맞춰서 정적인 홈페이지를 만드는 것에 포커스로 한다. 그리고 클라우드 서비스는 dropbox를 이용할 예정인데 구글 드라이브나 다른 서비스를 이용하려면 처음 부분은 건너뛰고 fast.io 설정하는 부분으로 바로 가면 된다.

Dropbox 가입

우선 dropbox.com으로 가서 서비스 가입을 해야한다. 아래가 현재 (2020/05/16일) 기준 영문 드롭박스 첫 페이지인데 한글 페이지도 구성은 비슷한 것 같다. 아래 사진에서 보이듯이 이름, 성, 이메일 주소, 그리고 비밀번호를 넣고 아래 동의한다는 체크박스에 체크를 하고 sign up 버튼을 누르면 된다.

그러면 다음과 같이 유료 플랜에 관심있냐, 우리가 14일 공짜로 해줄께 써볼래? 라고 물어보는 페이지가 나오는데 쿨하게 무시! 제일 아래 붉은색 상자의 기본 플랜 사용한다는 링크 클릭!! (디자인 1도 모르는 공대 남자라 예쁘게 사진 편집하는 법 못 배웠음. 그래서 빨간 상자로 무식하게 표시했음. 양해 바람.)

다음 페이지는 드롭박스 프로그램을 설치하는 과정을 시작한다. 설치하는 것은 본인 선택. 개인 웹페이지 만드는 과정에서는 옵션이니 무시.

여기서 한가지 불편한 점이 드롭박스 첫 화면으로 가는 링크가 없다는 점이다 (아니면 내가 못찾았거나..) 그래서 그냥 주소창에 다시 드롭박스 주소를 이용해서 첫 화면으로 간다. 클릭 >> dropbox.com

웹 브라우저 설정에 따라 다시 로그인이 필요할 수 있으니, 필요하면 로그인 다시! 그러고 나면 아래와 같은 첫 페이지를 볼 수 있다.

여기까지 왔다면 드롭박스 가입은 성공! 하지만 아직 해야될 일이 많이 남았다 ㅎㅎ

Fast.io 가입

fast.io에 가면 현재 (2015/05/16) 기준 아래와 같은 첫 페이지를 볼 수 있다. 사진에서 보이는 빨간 상자안에 sign up버튼을 눌러서 가입 시작!

그럼 화면은 아래와 같이 변하고 여기서 원하는 이메일 주소와 비밀번호 적어주고, 역시나 서비스 관련 동의 체크 박스에 체크 후 sign up 버튼 클릭.

여기서부터 fast.io의 장점이 빛을 발한다. 스텝별로 필요한 정보들을 물어보고 이 과정이 끝나면 이미 웹페이지는 세팅이 되어있는 놀라운 기적을 체험하게 될 것이다 ㅋㅋㅋㅋ

우선은 웹페이지 이름을 물어본다. 나는 설명을 위한 사이트를 만드는 것이니 Demo라고 이름 지었다. 이것이 최종 사이트 주소가 되는 것은 아니고 fast.io에서 사이트 관리하는 페이지에 표시되는 용도이다. Next!!

다음 화면은 연결된 클라우드 서비스 (storage provider) 선택하는 화면. 우리는 드롭박스 쓰기로 결정했으니 Dropbox 클릭. (역시나 빨간 상자로 하이라이트 한 점은 ㅈㅅ)

그러면 자기들이 어떤 일을 할지에 대한 설명을 해준다. 사용자가 승인을 해주면 자기가 fast.io라는 폴더를 드롭박스에 만든다는 소리. 어차피 다른 옵션은 없으니 승인!! 클릭 "Connect Dropbox Now" 버튼.

다음은 드롭박스 페이지로 넘어가서 승인할지를 묻는다. Allow 버튼 클릭!

이제 클라우드 서비스랑 fast.io랑의 연결은 성공. 이제 어떤 사이트를 만들지 묻는 화면으로 넘어간다. 나는 demo_20200516이라는 사이트를 만든다고 설정했다. 이러면 최종적으로 홈페이지 주소는 https://demo_20200516.imfast.ion 가 된다. (이 설명서 작성 후에 사이트는 제거했으니 저 주소로 가봐야 뭐 안보일꺼다) "Create Site" 버튼 눌러 사이트 생성!!

다음 화면에서는 설정이 완료되고 자동으로 싱크되는 모습을 볼 수 있을 것이다. 다 끝나면 "Done" 버튼 클릭.

아마 자동으로 생성된 사이트가 다른 창이나 탭으로 열릴텐데 어차피 아무 파일도 dropbox에 올려두지 않았으니 아래처럼 아무것도 없다고 표시된다 (there is no content in this folder).

이제 fast.io를 이용하여 사이트는 만들었다. 다음은 웹페이지 어떻게 만들 것인가이다.

웹페이지 생성

fast.io에서 가입 및 사이트 생성이 완료되면 아래 사진처럼 드롭박스에 컨탠트를 올리라고 나올 것이다. 노란 "Open Dropbox Folder" 버튼을 눌러서 드롭박스로 간다.

이제 홈페이지 파일들을 올려야 하는데 이미 홈페이지 파일들을 갖고 있다면 그것을 올리면 된다. 우선은 설명을 위하여 공개된 웹페이지 탬플릿을 이용한다. 웹브라우저의 새창을 열어 html5up.net 로 간다. 아무 템플릿이나 상관 없다. 원하는 템플릿 옆에 있는 "Free Download" 버튼을 눌러서 다운 받는다.

다운 받은 파일은 압축된 파일이니 압축을 푼다 (요새 윈도우나 맥이나 다 기본적으로 압축 해제는 쉽게 지원하므로 그냥 더블클릭하면 열린다). 압축 풀면 아래처럼 파일들이 나올 것이다.

이제 이 파일들을 Dropbox에 올려주면 된다. 3번째 이전의 화면에서 누른 "Open Dropbox Folder" 버튼이 아마 dropbox웹페이지를 열어뒀을 것이다. 하지만, 새로 창 열어서 dropbox열어도 똑같다. 아래 처럼 fast.io폴더로 이동하면 본인이 선택한 웹사이트 주소로 명명된 폴더가 보일 것이다. 그 폴더를 더블클릭하여 폴더로 이동.

이동한 폴더 내부는 비어있을 것이다. 이제 아래 화면처럼 웹페이지 파일들을 올려주면 된다. 주의할 점은, 현재 위치가 웹사이트의 초기 화면이 될 것이므로 여기에 index.html 파일이 있어야 한다. (빨간 상자 참고)

이제 다시 fast.io페이지로 돌아오면 자동으로 싱크가 되고 있을 것이다. 원래 드롭박스의 fast.io폴더에 있는 파일이 업데이트 되면 자동으로 싱크가 되나 혹시나 싱크가 안된다면 아래 "Last sync ..." 버튼을 눌러 재 싱크할 수 있다.

버튼을 누르면 자동싱크 켜져있는데 그래도 강제로 전체 싱크할래? 라고 사용자의 동의를 구하고 여기서 "Yes"를 누르면 싱크 진행.

싱크가 끝났다면 이제 웹사이트를 엑세스해보자. 웹브라우저에 위에서 설정했던 주소를 직접 입력해도 되고 fast.io의 사이트 대시보드에서 "View Site" 버튼을 눌러도 된다. 그럼 예상했던 웹사이트를 볼 수 있을 것이다.

여기서 한가지 설정을 바꿔줘야 할 부분이 있다. 처음에 설명했듯이 fast.io는 태생이 CDN서비스이다. 그래서 파일 제공이 목적이라 사이트 폴더에 있는 파일들을 전부 볼 수 있다 (https://demo_20200516.imfast.io/images/ 주소로 가보면 아래 사진처럼 images폴더 아래에 있는 파일들이 다 표시된다).

본인은 쿨해서 파일들 저렇게 표시돼도 상관없다면 여기서 끝. 하지만 그게 아니라면 사이트 설정에서 바꿀 수 있다. 오른쪽 상단에 "Site settings" 클릭.

아래 사진처럼 "Folder Browser"항목을 off로 바꾼다. 말 그대로 폴더를 탐색하는 기능을 끝다는 소리다.

그럼 아래처럼 사용자 확인을 다시 한번 요청한다. 우리는 결심했으므로 "Continue" 클릭!!!

그럼 아래 화면처럼 싱크하고 끝.

다시 웹사이트 주소 (https://demo_20200516.imfast.io/images/) 로 가보면 아래처럼 파일이 더이상 노출이 되지 않는다. 이 기능이 파일들을 웹페이지에서 열거하는 기능만 제거한 것이지 파일에 대한 접근 권한까지 제거한 것은 아니다. 만약 웹브라우저에서 파일을 직접 연다면 (e.g., https://demo_20200516.imfast.io/images/pic01.jpg) 파일은 여전히 볼 수 있을 것이다.