30분만에 나만의 웹사이트 제작하기 #0

#0 시작하기 전에… (공부하기 30분)

Hero Kim
XEHub
6 min readJan 11, 2019

--

본 포스팅은 실제 웹사이트를 만들어보기 전에 앞으로 다룰 것들에 대한 이해를 돕기위한 이론과 소개를 담고 있습니다. 이번 시리즈에서 우리는 XE3라는 오픈소스 플랫폼을 사용할 것입니다. 그리고 개발에 대해 어떤 지식도 가지고 있지 않다는 전제 하에 실습을 진행할 것입니다. 아래의 글들은 웹을 다룰때에 필요한 기초지식을 다루고 있지만, 이를 이해하거나 읽지 않아도 충분히 다음 챕터부터 웹사이트를 만들어볼 수 있습니다. 하지만 30분이 아니라 한시간 정도의 시간이 있다면 찬찬히 읽어볼 것을 권장합니다!

다른 글 보기: #0, #1, #2, #3 ,#4

스타트업이 활발해지고, 모바일 어플리케이션 시장이 급격하게 성장하면서 웹의 중요성에 대한 인식도 빠르게 확산되고 있습니다. 웹페이지를 통해 회사를 소개하고, 서비스를 소개하는 것부터 시작해서 커뮤니티를 운영하고 자체적인 어플리케이션까지 구축할 수 있게 되면서 웹의 가능성은 무궁무진하게 증가하고 있습니다. 이에 맞추어 우리는 예전부터 스스로 홈페이지를 손쉽게 구축할 수 있는 방법을 찾아왔습니다. XE는 그중에서도 우리나라 오픈소스 웹 생태계에서 깊은 역사를 가지고 있는 플랫폼입니다.

XE는 사람과 사람을 연결하고 사람과 기술을 연결하고 나아가 미래를 연결하는 것을 비전으로 두고 있습니다. 이 서비스의 원조 격인 제로보드가 출시했을 때에 우리는 클릭 몇번과 간단한 소스 수정만으로 게시판을 쉽게 만들 수 있었고 이 작은 프로젝트에서 시작해서 지금은 쉬운 방법으로 나만의 홈페이지를 클릭 몇 번만으로 가능할 수 있는 수준으로 발전했습니다!

XE3는 빠르게 진화하는 웹 개발 생태계에 적응하기 위해서 오래된 방식의 설계방식을 버리고 최신 버전과 현대적인 컨셉을 바탕으로 하는 php 라라벨 프레임워크를 기반으로 만들어진 따끈따끈한 최신형 CMS프레임워크 입니다. 자신이 원하는 기능을 붙이고 뗄 수 있는 add-on방식의 플러그인 형태를 그대로 가져왔지만 작동하는 방식은 훨씬 더 유연하고 빠르며, 간명합니다.

몇 가지 챕터를 통해서 우리는 XE3를 활용하여 원하는 웹사이트를 만들 것입니다. 이 스토리를 따라가다보면 우리는 30분도 채 걸리지 않아 실제로 작동하는 사이트 하나를 가질 수 있게 될 것입니다…! 개발자처럼 쉴 새 없이 키보드를 두드릴 필요도, 디자이너처럼 펜마우스를 손에 쥐고 그릴 필요도 없습니다.

그저 우리가 할 것은 키보드를 통해 우리가 원하는 부분에 이름을 지어주고, 마우스를 몇 번 클릭하는 것입니다.

웹사이트를 만들기 위해서 우리는 조금이나마 웹을 이해할 필요가 있습니다.

우리는 어떻게 포탈사이트 네이버에 접속할 수 있을까요? 사용자가 네이버에 접속할때에 사용자는 주소입력창에 www.naver.com 을 작성하고 접속합니다. 또는 어떤 링크나 즐겨찾기를 만들면 (바로 위의 주소를 클릭 했을 때 사이트로 이동하는 것이 링크입니다.) 주소입력창에 주소를 친 것과 같은 작동을 하게 해서 사용자는 네이버에 접근할 수 있습니다. 이렇게 브라우저에서 주소입력창에 주소를 치면 컴퓨터는 다음과 같은 일을 합니다.

  1. www.naver.com 이라는 주소를 인터넷에서 어떤 컴퓨터(서버)에 연결해야할지 물어봅니다.
  2. 연결해야할 컴퓨터(서버)가 확인 되면 그 컴퓨터에 있는 콘텐츠를 가져와서 띄워줍니다.

복잡해보이지만 지금은 브라우저가 어떤 컴퓨터(서버)를 필요로한다는 것을 이해하는 것으로 충분합니다.

물론 그 컴퓨터(서버)는 지금 당신이 사용하는 컴퓨터일 수도 있습니다!

지금 당장 메모장을 띄워 아무내용을 적고나서 .html 확장자로 저장하고 해당 파일을 더블클릭하면 브라우저를 통해 그 문서가 열리는 것을 확인할 수 있습니다. 주소입력창의 주소가 http로 시작하는 인터넷주소를 가리키고 있지는 않지만 우리가 탐색기를 사용하듯이 컴퓨터는 같은 방법으로 그 위치를 찾아내려고 하기 때문입니다.

하지만 당신의 컴퓨터에 사이트를 올리는 것은 무리입니다. 우리가 알고 있는 웹사이트는 ‘누구나’ , ‘어느 때에든’ 들어와서 확인할 수 있어야 합니다. 내 컴퓨터에 콘텐츠를 저장하지 않더라도, 내 컴퓨터가 켜져있지 않더라도 사이트는 항상 열려야 합니다. 게다가 스스로 동작하고 데이터를 담으려면 html이 아닌 프로그래밍 언어도 구동할 수 있어야합니다. 이런 기능을 대신 수행하고 개인 컴퓨터보다 더 많은 트래픽을 감당할 수 있는 컴퓨터(서버)가 필요합니다. 그래서 우리는 첫 시간에 이 서버를 구할 것입니다.

이 후에 우리는 이 서버 위에서 우리가 보여줄 콘텐츠와 사이트를 작동하게할 기능들이 필요합니다. 하지만 우리는 개발은 하지 않습니다. 이러한 기능들을 따로 개발하지 않더라도 사용할 수 있도록 이미 만들어져 있기 때문입니다. 그래서 우리는 따로 php와 같은 언어를 사용하지 않습니다. 우리는 단지 만들어진 기능들 위에서 게시물을 올리고, 사이트의 제목을 바꾸는 등의 행동만 하면 됩니다. 우리는 XE3를 이 서버에 설치하는 것으로 다른 개발자스러운 복잡한 일들을 하지 않아도 됩니다.

30분동안 우리는 홈페이지를 올릴 서버를 구하고 XE3를 설치하고 기본적인 사이트 설정을 해보려고 합니다. 이 커리큘럼은 다음과 같은 챕터로 구성되어있습니다.

#1. 내 사이트 올릴 공간 만들기 (호스팅받기 5분)

#2. 클릭 몇 번으로 xe3 설치하기 (설치하기 10분)

#3. 사이트 기본설정하기 (설정하기 10분)

#4. 사이트 이름과 메뉴 만들기 (만들기 5분)

이 많은 일들이 30분안에 끝날 것입니다. 일단 여기까지 읽으신 여러분은 컴퓨터 책상에서 일어나 잠시 커피 한 잔을 위한 시간을 가져도 좋습니다. 충분히 휴식을 취하신 후에 본격적으로 챕터 시작하겠습니다.

다음 글 보러가기 : #1 내 사이트 올릴 공간 만들기

--

--