이 문서는 웹사이트와 웹서버, 도메인 네임의 기본 원리를 풀어서 안내하고자 한다. 일반적으로 웹사이트에 대해 조금 아는 초보자들은 웹서버와 도메인 네임의 개념을 분리하는데 어려움을 겪는 경우가 많다. (주로 웹사이트 업체들의 상술 때문에 그렇다). 여러가지 기본 개념들을 하나씩 직접 해보면서 익혀보자.
나 혼자 쓰는 방구석 웹 문서
조금 과장해보자면 웹사이트는 정말 아무것도 아니다. 윈도우 사용자라면 메모장을 열어서(왼쪽 밑의 윈도 아이콘/"시작"을 클릭 한 뒤 그 상태에서 그대로 notepad 라고 입력하고 엔터를 누르면 된다) 다음을 입력해보자:
<html><body>세상아 안녕?</body></html>
웹의 표준 문법이 된 HTML 언어 규칙에 맞추어 (편의상 몇가지 요소는 생략했다) "세상아 안녕"이라는 글이 나오도록 한 웹 문서이다.
C: 드라이브 최상위 경로 위에 c:\temp 폴더를 하나 만들고[주 1] hello.html 로 저장하자. 저장 화면에서 파일 종류를 *.txt 에서 All file 로 바꾸어주어야 hello.html.txt 가 아닌 hello.html 로 저장하자.
이제 브라우저를 열어서 주소창에 (보통 naver.com 이나 google.com 이라고 타이핑 하는 그 줄에) c:\temp\hello.html 을 입력하고 엔터를 누르자. 브라우저의 왼쪽 위 구석에 "세상아 안녕?" 이 보일 것이다.
짠! 이것으로 웹사이트를 만드는 것에 성공했다!
웹사이트라는 것은 별 대단한 것이 아니라, 1) 브라우저에게 HTML 언어로 된 웹 문서를 던져주고 2) 그 문서를 해석해서 화면에 보여주도록 하는 것이다. 여기서 웹 문서 사이에 상호 링크를 달기 시작하면 "웹사이트" 사용자 경험의 기본 골격이 완성된다.
HTML 문법을 활용해 두 문서간에 서로 링크를 달아보자. hello.html 를 다음으로 바꾸자.
<html><body>세상아 안녕? <a href="bye.html">출구는 이쪽이야</a></body></html>
그리고 다음과 같은 내용으로 같은 폴더에 적당히 bye.html 를 만들어주자.
<html><body>잘가! <a href="hello.html">다시 돌아올때는 여기를 눌러줘</a></body></html>
이제 hello.html 에는 인사를 한 뒤 bye.html 로 보내주는 링크가 있으며, bye.html 에는 작별인사를 한 뒤 다시 hello.html 로 보내주는 링크가 있도록 만들었다.
다만 이 "웹사이트"는 우리가 일반적으로 알고 있는 웹사이트와는 몇가지 차이점이 있다:
- 다른 사람이 인터넷 상에서 볼 수 없다.
- 이게 웹사이트가 맞을까? 내용이 너무 초라한데?
이런 요소들을 하나씩 추가하며 웹사이트의 작동 원리에 대해 알아보자.
다른 사람이 볼 수 있게 해보자
먼저 인터넷이 아닌, 가정 네트워크 상에서 서버를 실행시켜 보자. 컴퓨터들이 모여 구성하는 네트워크의 개념은 인터넷의 대중화보다 더 오래되었으며, 인터넷이 없는 상황에서도 기본적으로 지원되는 기능이다. 라우터/공유기만 있으면 인터넷 신호가 없더라도 네트워크 구성이 가능하다. 그 라우터에 유선으로 꽂힌 컴퓨터와 무선 와이파이에 접속한 모든 컴퓨터, 스마트폰, 타블렛 등 인터넷을 활용하는 모든 기기는 네트워크의 일부가 된다.
네트워크에 접속한 기기 사이에서는 데이터 교환이 가능하며, 웹 서버 같은 것을 돌려 "사설 인터넷" 같은 기능이 가능하다. 네트워크에서 웹 서버를 돌리는 것은 별 의미가 없어도, 미디어 서버 같은 기능은 좀 큰 집에서는 자주 볼 수 있는 기능이다. 데스크탑 컴퓨터의 하드에 들어있는 동영상을 와이파이에 접속되어 있는 다른 기기, 노트북, 스마트TV, 스마트폰, 타블렛 기기로 연결해서 와이파이 상에서 실시간으로 스트리밍하며 보는 것이다.
nginx 등의 간단한 윈도우용 웹서버 프로그램을 설치하면 컴퓨터가 웹서버로 기능하게 된다. (이 부분을 쉽게 따라하기 위해서는 웹서버 설치 및 설정 설명이 더 필요한데 일단 귀찮아서 나중에..) 웹서버 기본 설정을 확인하고 아까 작성한 hello.html 을 웹 서버 루트 폴더로 옮기고, 컴퓨터의 네트워크 내부 IP 주소를 확인하자.
내부 IP 주소를 알기 위해서는 컴퓨터에서 윈도 시작 버튼을 누른 후 CMD 라고 입력하고 실행시킨 후, ipconfig 라고 입력하자. 그러면
IPv4 address.... 192.168.1.242
같은 것이 뜰 것이다. 여기서 이 4개의 숫자로 이루어진 번호가 컴퓨터의 IP 주소이다. 하나의 네트워크에 접속한 모든 기기가 하나씩 내부 IP 주소를 부여받고, 주소 선택은 라우터가 알아서 해준다. 특별하게 설정하지 않는 한 내부 IP는 보통 192.168. 으로 시작하고, 세번째 숫자는 설정에 따라 1 또는 0이 주로 쓰이며, 그 후 마지막 네번째 숫자가 기기마다 달라지는 숫자이다.
와이파이에 연결된 스마트폰을 이용해서 이 웹페이지를 열자. 주소창에
192.168.1.242/hello.html
라고 입력하면 된다. (물론 1.242 대신 자신의 주소를 입력해야 한다) 세상아 안녕? 이 뜨면 성공한 것이다. 잘 안 되었으면, 다시 컴퓨터의 웹서버 설정과, 어느 폴더에 HTML 파일을 넣어두어야 하는지 확인해보자. 혹시 공유기/라우터가 없는건..가?
인터넷에서 볼 수 있게 해보자
드디어 바깥 세상으로 나갈 준비가 되었다. 이 단계를 진행하기 전에 숙지 할 점은, 개인이 직접 운영하는 수제 웹 서버를 별다른 보안 대책도 없이 인터넷에 오랫동안 노출시키면 언젠가는 해킹 공격의 대상이 될 수 있기 때문에, 시험삼아 해보고 나서는 반드시 파이어월 설정을 복원하고 웹서버 프로그램도 꺼두는 게 안전하다는 점이다. 한두시간 정도 돌리는 것은 괜찮다.
먼저 나의 공개 IP 주소가 무엇인지 알아야 한다. (내부 IP 주소와 다르다) 제일 간단한 방법은 구글에서
my ip address
라고 검색하는 것이다. 그러면 검색 결과 맨 위에 "Your public IP address"라고 주소를 보여준다.
두번째는 웹 서버가 이 주소로 요청이 들어와도 작동을 하도록 하는 것인데, 서버의 설정을 특별히 건드려서 보안을 높이지 않았다면 원래 설정 그대로 작동할 것이다.
세번째는 라우터/공유기에서 80 번 포트를 여는 것이다. 같은 IP 주소라도 여러가지 방법으로 상호작용이 가능한데, 특정 상호작용 요청마다 다른 "포트"를 통해 연결을 한다. 브라우저 창에 입력 할 때는
105.32.201.20:80
이런 식으로 콜론을 붙여 포트를 표시한다. 여러가지 요청에 따라 다른 포트를 사용하는데, 인터넷에서 대중적으로 알려진 것은 웹 밖에 없기 때문에 일반인이 특정 포트를 사용할 가능성은 전혀 없다. 웹서버용 포트는 일반적으로 80번을 사용하는데, 브라우저에서 주소를 입력하면 당연히 80 포트일 것일 것이기 때문에 80포트에 접속을 한다.
웬만한 집의 인터넷 보안 설정에서는 이 포트가 닫혀있을 것이다. 웹서버의 보안 취약점을 노리고 온갖 해킹 시도가 판을 치기 때문에 괜히 포트를 열어둘 필요가 없기 때문이다. IP 주소가 105.32.201.20 이라고 치자. 그러면 컴퓨터 브라우저 주소창에 다음을 입력하자
105.32.201.20/hello.html
"세상아 안녕"이 뜨면 80 포트가 열려있는 것이다. 안 뜨면 라우터/공유기 설정에서 이 포트를 열어야 한다.
포트가 열려있으면 이제 시험을 해보자. 스마트폰에서 와이파이를 끄고, 상기 주소를 입력하자. 스마트폰에 "세상아 안녕"이 표시되면 성공이다. 친구에게 전화를 해보자! "친구야 너네 집에서 이 주소를 입력해봐! 내 집 컴에 들어있는 글이 나온다구!"
집에 있는 컴퓨터에 직접 연결하는 것이기 때문에 컴퓨터를 끄거나 네트워크 연결을 끊으면 바로 접속이 안 된다. 또 다른 점은, 대부분 가정용 인터넷은 IP 주소가 연결 할 때마다 변하기 때문에, 모뎀을 껐다키거나 또는 밤새 IP 주소가 변할 수도 있다. 그러면 새 주소로만 접속이 가능하다.
복습: 웹 서버의 원리
기본적으로 웹 서버는 하드디스크에 웹 문서 HTML 파일과 이미지 파일들을 잔뜩 담고 있다가 공개 IP 주소로 접근 요청이 들어올 때마다 파일들을 내보내주는 컴퓨터에 지나지 않는다. 이 컴퓨터가 24시간 켜져있고 IP 주소가 안정적으로 유지되면 본격적으로 웹사이트를 운영할 수 있는 서버로 구실을 하게 된다. (서버 주인이 잘 때는 꺼두었다가 낮에만 켜서 운영하는 것도 가능은 하지만.. 그러면 밤에만 웹사이트 접속이 안 되는, 인터넷 시대에 좀 적응 안 되는 사태가 발생하게 된다.)
도메인 네임을 씌우자
IP 주소로 웹서버를 만들어서 작동시키는 것도 신기하지만, "진짜" 웹사이트는 뭐뭐 닷컴, google.com 이니 korea.go.kr 이니 이런 멋있어 보이는 도메인을 달고 있다. 이것도 꽤 쉽다. 다만 돈과 시간이 들어가기 시작한다.
컴퓨터를 다루다 보면 "X를 원하면 A를 입력해야 하지만, 편의상 B를 입력하는게 더 편하면 A 도 X, B도 X가 되도록" 가능하게 하는 것들이 많다. 이런 것들을 통틀어 별명(alias) 또는 가면(mask) 라고 부른다. 도메인 네임은 기본적으로 IP 주소의 별명에 가깝다.
예를 들어, 위키백과 포털 입구 서버의 도메인 네임 주소는 https://wikipedia.org 이지만, 서버 컴퓨터의 IP 주소는 198.35.26.96 이다. http://198.35.26.96/ 으로도 웹사이트에 들어갈 수 있다. 다만 요즘 웬만한 사이트들은 보안과 브랜딩 상 서버에 HTTPS, 도메인 포워드 서비스들을 적용해서 아예 아무것도 안 보이거나 에러메세지를 보여준다. (위키백과 서버는 에러 메세지를 보여준다). 그러나 개인이 운영하는 수제 서버는 IP 주소와 도메인 네임 둘 다 들어갈 수 있다.
도메인은 돈을 내고 구매를 해야 한다. 기본 가격은 1년에 한화 1만원 안팎이다. namecheap.com 같은 리셀러들이 많이 있는데 이 중 아무곳에서나 살 수 있다. 구매 후 네임서버 설정을 본인의 웹 서버의 네임서버 서비스로 연결해두면 된다.
동적 웹서버의 발흥
여기까지 해도 뭔가 이상한 느낌이 들 것이다. "아니, 내가 평소에 쓰는 사이트와는 느낌이 많이 다른데? 게시판도 아니고, 블로그도 아니고, SquaredSpace 같은 것도 아닌.. 왜 이리 밍밍하지?" 아직 갈길이 멀어서 그렇다. 지금 우리가 만든 웹사이트는 겨우 1998년경 유행하던 GeoCities 류의 웹사이트이다.
이런 식으로 웹사이트를 만들다보면 곧 네비게이션 요소를 중심으로 문제가 생기기 시작한다. 예를 들어 고전 음악가를 하나씩 소개하는 웹사이트를 만들고 있다고 하자. 자신만만하게 바흐, 모차르트, 베토벤, 브람스, 리즈트, 쇼팽 의 페이지를 만들고 이를 공개했다. 이 웹사이트에는 첫 페이지가 있고, 거기서 각 음악가의 페이지를 고를 수 있다. 그 음악가의 페이지에서 다시 첫 페이지로 돌아가는 링크만을 달기만 한다면 상관없지만, 편하게 사이트 내용을 열람하기 위해서는 바흐에서 나머지 다섯명의 페이지로 이동하는 링크가 있으면 제일 편하다. 그렇게 각 페이지마다 나머지 음악인에 대한 링크를 달았다. 그리고 2주가 흘렀다. 생각해보니 라흐마니노프에 대한 페이지도 만들어야겠다. 페이지를 올렸는데, 이제 나머지 6명의 페이지에 하나씩 다 라흐마니노프에 대한 링크를 편집해 넣어줘야 한다. 그리고 또 며칠이 흘렀다. 자세히 보니 모차르트 페이지의 파일 이름을 Mozart.html 이 아닌 Moszart.html 이라고 잘못 썼다. 파일 명은 웹페이지에서 보이는 것은 아니지만 어쩄든 거슬리니 이름을 변경했다. 그러면 이제 또 나머지 6개 페이지에서 링크를 수정해주어야 한다. 이게 페이지가 6개 밖에 없는 사이트이니 망정이지, 수백개 씩 있는 페이지면 수작업으로는 실수가 생길 수 밖에 없다. 노하우가 쌓이면서 드림위버 등 전용 툴이 이런 문제를 템플릿으로 보완하긴 했지만, 동시에 들어온 커다란 변화의 물결에 덮여버렸다.
2000년대 초반 웹 2.0 이라는 엄청난 변화가 인터넷에 들이닥쳤다. 웹 2.0 에는 여러가지 요소가 있지만, 기술적으로 가장 큰 변화는 웹 문서가 더 이상 컴퓨터에 들어있는 파일이 아니라, "내용"과 "디자인"을 분리하고, "내용"은 데이터베이스에 넣어두고 서버에 요청이 있을 때 마다 "디자인"을 입혀 파일에 해당하는 정보를 생성 한 뒤 보내주는 변화였다. 정적인 웹 문서를 보내주는 웹 서버에서 매 순간 업데이트 되는 동적인 웹 문서를 보내주는 웹 서버로 바뀐 것이다.
대기업의 웹사이트들은 이미 90년대부터 이런 형식을 취하긴 했지만, 웹 2.0 의 의의는 중소기업에서 개인 사용자까지 누구나 이런 기술을 활용 할 수 있도록 서버 기반과 소프트웨어가 대중화 되었다는 것이다.이 기술을 등에 업고 댓글 등 사용자 상호호환적 요소, Shell이나 FTP 등의 백엔드 요소 없이 없이 순수하게 웹 인터페이스로만 관리되는 웹사이트, 워드프레스 등 CMS의 발전, CSS와 자바스크립트의 발전, AJAX의 도입 그리고 끝판왕인 소셜 매체가 들어섰다. 초반 기술적인 설정만 누군가가 해주면 더 이상 HTML 에 대해 생각하지 않고도 얼마든지 직접 웹사이트를 운영 할 수 있는 시대가 열린 것이다.
지금까지 설정한 웹 서버에 동적 웹 서버의 요소를 추가해보자.
대부분의 동적 웹 서버는 리눅스 운영체제 위에 아파치 웹 서버, 아파치 상에서 돌아가는 PHP 프로그래밍 언어, MySQL 데이터베이스의 조합으로 운영된다. 이를 각 프로그램의 첫 글자를 따서 편의상 LAMP 스택이라 부른다. LAMP 스택을 설치할 수도 있고, 여기서 L만 뺀 윈도우용 스택을 설치할 수도 있다.
서버 구성이 끝나면 워드프레스 를 설치해보자.
뭔가 엄청나게 바뀌었지만 아직도 도메인 네임이라는 별명 뒤에 IP 주소로 접근 가능한 서버 역할의 컴퓨터가 있고, 그 컴퓨터가 HTML 파일을 보내주는 기본적인 동작 방식은 바뀌지 않았다.
로드밸런싱
부연 설명
- ↑ 윈도우의 기본 보안 설정 상 c:\ 에는 파일을 만들 수 없게 되어있다.