brunch

You can make anything
by writing

C.S.Lewis

by 김영하 Feb 07. 2019

간단히 나만의 홈페이지 및 블로그 만들기

도메인, 호스팅 걱정없이 무작정 만들어보기

어느 정도 웹 공부를 하거나 다른 사람들의 홈페이지 및 블로그를 보면 자신만의 것들을 만들어 보고자 합니다. 

이 때, 개발 지식도 물론 중요하지만, 기껏 만들어 놓은 것들을 올려놓을 서버가 필요합니다. 또한, 이 서버에 접속할 URL 즉, 도메인도 필요합니다. 간단히 하나 만들고자 하는데 손이 많이 필요합니다. 


그래서, 간혹은 Github를 사용하기도 합니다. 하지만, 기존 HTML, Javascript, CSS외에 Jekyll 뭐시기나, 마크다운 (markdown)을 또 사용해야 합니다. 


아니면, 무료로 홈페이지 공간을 제공해주는 사이트도 있지만, 광고가 포함되거나 뭔가 좀 하려면 자유도 떨어집니다.


이에 대한 대안이 있습니다!!!


1mbsite 입니다!


이름에서도 어느 정도 느껴지시겠지만, 사이트를 만드는데 가용한 용량은 1메가바이트로 제한이 있습니다.

그러나, Javascript나 CSS의 경우 CDN을 사용할 수도 있고, 이미지의 경우는 다른 곳에 올리고 그 링크를 연결하면 되기 때문에 1메가바이트면 충분히 경쟁력있는 홈페이지 및 블로그를 만들 수 있습니다. Dalton Edwards라는 인디 개발자분이 만들었는데 계속 이 서비스를 운영해주었으면 합니다. 




자세히 한번 살펴보겠습니다. 

아래 링크를 누르면 해당 서비스 사이트로 이동합니다.



이동하면 아래와 같이 깔끔한 1mbsite 메인 화면이 나옵니다. 2019년 2월 7일 기준으로 695개 사이트가 운영중이라고 합니다. Free website hosting platform이라는 말이 우리에게 매우 기쁘게 다가옵니다. 이제 여러분도 이곳에 홈페이지나 블로그를 만드시면 695개가 더욱더 늘어날 것입니다. 그 아래에는 쉽다라는 말이 강조되는데 하나하나 살펴보면서 얼마나 쉽게 가능한지 확인해보겠습니다.


화면을 조금더 이동하면 개발자 API도 제공된다는 것을 알 수 있습니다. 이 내용은 다음 기회에 살펴보겠습니다. 그 아래에는 이 1mbsite를 이용해서 만든 사이트들을 볼 수 있습니다. 이 1mbsite를 통해 만들 수 있는 가능성들을 살펴볼 수 있는 좋은 예제들이 많이 있습니다. 그럼, 쉽다고 하니 사용해 볼 시간입니다!


메인 화면 오른쪽 윗부분의 Register를 클릭합니다.


Register를 클릭하면 아래 화면과 같이 이 1mbsite의 철학과 비슷하게 매우 간단한 등록화면이 나옵니다.

사용자 이름 (Username), 이메일 (Email), 패스워드 (Password)를 입력하고 사용 조건에 동의하고 Capcha를 처리하고 Register를 클릭합니다. 사용자 등록이 완료되었습니다. 간단하지요? 이 때 사용자 이름을 잘 선택하시기 바랍니다. 이 사용자 이름을 나중에 도메인 이름에 사용하게 됩니다.


사용자 등록을 하게 되면 바로 로그인이 되는데 아래 화면처럼 이메일 인증을 하라고 알려줍니다. 등록할 때 입력한 이메일 계정에 가면 인증하라는 메일이 와 있을 것입니다. 바로 인증을 해줍니다.


인증을 하면 앞 화면에서 인증하라는 메시지가 없어진 정말 간단한 아래와 같은 메뉴가 나옵니다.

메뉴들이 직관적이라 어려울 것이 없습니다. Logout은 당연히 로그아웃을 하는 것이고, Change Password를 패스워드를 수정하는 것입니다. Update Email은 등록한 이메일 주소를 바꾸는 것입니다. 아마도 우리가 주로 사용할 메뉴는 Edit Site일 것입니다. 자, 그럼 이 메뉴를 클릭합시다!


그럼 아래와 같은 화면이 나옵니다. 이제 이곳에서부터 여러분의 홈페이지와 블로그가 시작됩니다. 화면 오른쪽 윗부분의 점 3개가 나란히 세워져 있는 것을 클릭합니다.


이 화면에서 사용할 수 있는 메뉴들이 나옵니다. Open은 현재 만들고 있는 홈페이지나 블로그를 브라우저로 확인할 때 사용합니다. 


메뉴에서 Toggle Preview를 클릭하면 아래와 같이 왼쪽에서는 소스코드를 편집하면서 오른쪽에서 실시간으로 확인할 수 있도록 창이 2개로 나뉩니다.


메뉴에서 Templates를 클릭하면 이 1mbsite에서 미리 사용할 수 있는 만들어 놓은 템플릿들을 사용할 수 있습니다. 말 그대로 쉽고 빠르게 홈페이지 및 블로그를 만들 수 있게 해놓았습니다. 


아래 화면은 Templates에서 Bootstrap (4.13)를 선택하고 편집중인 화면입니다. 미리 필요한 소스코드들을 입력해 주니 편하고, 빠릅니다.


메뉴에서 Settings를 클릭하면 아래와 같이 몇 가지 설정을 할 수 있습니다. 

Toggle line wrapping은 화면에 맞쳐서 줄을 알아서 내려줄 것인지 설정이고, Toggle auto indent를 들어쓰기를 알아서 해줍니다. Toggle dark mode는 요즘 MacOSX 모하비 (Mohave)에서 강조되고 있는 다크 모드를 활성화할 것인지를 설정합니다. 이 설정은 개인의 취향에 맞게 사용하면 좋을 것 같습니다.


메뉴 및 부분의 Resources를 클릭하면 현재 자신의 1mbsite의 계정에서 사용할 수 있는 .html, .md, .css, .js, .json, .code 등과 같은 텍스트 형식의 소스코드들을 추가하거나, 사용중인 파일들을 확인할 수 있습니다. 현재 제가 사용중인 사이트에는 index.html, output.html, page1.html 총 3개 html 파일이 있습니다. 해당 파일이름을 클릭하면 해당 편집 화면으로 이동합니다.


이제 편집이 완료되면 Save를 클릭하고 저장합니다. 메뉴에서 Open을 클릭하거나 사용자 등록부분에서 말씀드렸듯이, 자신의 사용자명을 추가해서 https://[사용자명].1mb.site 로 접속하면 홈페이지 및 블로그 내용이 나옵니다.

이상으로 간단히 1mbsite에 대해서 소개하였습니다. 텍스트 형식의 파일을 생성만 할 수 있고, 정적인 페이지만 보여줄 수 있다는 것이 한계가 있지만, 광고도 없고 위에서 보여드렸듯이 클릭 몇 번만으로도 간단한 홈페이지 및 블로그를 만들 수 있다는 것, 그리고 무엇보다, 도메인 및 서버를 별도로 준비할 필요없이 무료로 나만의 홈페이지 및 블로그를 만들어 볼 수 있다는 것이 이 서비스의 매력이 아닐까 생각이 됩니다. 앞으로 이 사이트 활용방법을 올려보도록 하겠습니다.


작가의 이전글 [리뷰] 파이썬 코딩 도장
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari