패스트캠퍼스

나의 첫 번째 웹사이트 만들기

1. 들어가는 말

이제 인터넷은 없어서는 안될 존재입니다. 이 세상은 그 어떤 일이든 인터넷과 연결되어 살아가고 있습니다. 산업, 교육, 정치, 직장 모든 것이 인터넷과 어떤 식으로든 관련을 맺고 있습니다.

기술의 발전과 지식 산업의 성장으로 말미암아 누구나 인터넷 상에 자신의 정보를 올려놓을 수 있는 시대가 되었습니다. 이미 누군가 만들어놓은 플랫폼을 이용해도 좋습니다. 예를 들어, 블로그, 유튜브 같은 것이 대표적인 것이겠죠.

IT 기술이 호황을 맞게 되면서 웹 개발 강의를 통해 기술을 배우고 싶어하는 사람들도 많아졌습니다. 기존의 대기업의 플랫폼(블로그, 카페 등)을 이용해도 좋지만 내가 직접 만든 나만을 위한 웹사이트를 갖고 싶다는 생각을 가진 사람들이 많아졌습니다. 저도 그런 사람 중 하나였습니다. 프로그래밍을 전공하지 않았던 다른 사람들처럼 나만의 웹사이트 만들기라는 것은 그저 이루어지지 않을 희망이었습니다.

이제는 웹사이트를 만드는 방법과 관련한 정보들을 꾸준히 찾아보고 실습하면서 꽤 많은 웹사이트들을 만들어내고 있습니다. 비 전공자였던 제가 할 수 있다면 다른 사람들도 할 수 있습니다. 인터넷상에는 관련 정보들이 정말 많이 있습니다. 다만, 어떤 정보를 취하고 배워야 할지 알기 위해서는 시행착오가 필요합니다. 이 글은 그 시행착오를 충분히 겪고 난 뒤 쓰여진 것으로 독자들의 시간을 아껴줄 수 있는 방법이 될 것입니다. 아주 간단하면서 빠르게 나만의 웹사이트를 만들어 볼 수 있습니다.

단순히 따라해보는 것만으로도 온라인 서버에 나만의 웹 문서를 쉽게 만들어 볼 수 있게 될 것입니다. 또한 이 글은 코딩을 배우고 싶어하는 분들께도 유용합니다. 웹사이트 제작을 위한 코딩을 배우려고 하는 분들 또한 웹 서버를 이용할 것이기 때문에 이 글에 나와 있는 과정은 일단 알아두는 게 좋습니다.

이 글에서는 무료호스팅을 개설하고 FTP 프로그램과 Notepad++ 프로그램을 이용하여 웹 서버에 HTML로 만든 나만의 문서를 올려보는 것을 목표로 하고 있습니다. 아주 쉬우니 걱정 말고 따라와 보세요.

2. 닷홈에서 무료 호스팅 설치하기

일반적으로 웹사이트는 서버에 프로그램이나 웹 문서를 올려 두게 됩니다. 서버(Server)란 간단히 꺼지지 않는 컴퓨터라고 보시면 됩니다. 온라인에서 누군가 내 웹사이트에 접속하려는데 그 웹사이트 정보가 저장되어 있는 컴퓨터가 꺼져 있으면 안되겠죠?

언제든지 내 웹사이트에 접속할 수 있게 하려면 서버에 웹프로그램이나 웹 문서를 올려 두어야 합니다. 물론 집에 있는 내 컴퓨터에도 웹사이트를 만들 수 있습니다. 하지만 집에 있는 컴퓨터를 1년 365일 24시간 계속 켜 두긴 어렵습니다. 그래서 웹 서버를 이용하는 것입니다.

웹 서버는 데이터센터 같은 곳에 있는 수많은 서버들 중 일부를 할당 받는 것을 말합니다. 마치 컴퓨터 하드디스크 중 일부 폴더를 할당 받는 것이라 생각하시면 됩니다. 이렇게 웹 서버를 할당해주는 것을 호스팅(Hosting) 또는 웹호스팅이라고 합니다.

당연히 데이터센터와 서버를 운영하는 곳에서는 이렇게 서버 일부를 할당해주고 비용을 받습니다. 호스팅을 하면 이렇게 비용이 들어가는데 무료 호스팅을 이용할 수 있는 곳들이 있어서 먼저 그 호스팅을 이용해 보도록 하겠습니다. 먼저 닷홈(dothome)에 접속합니다. 주소는 www.dothome.co.kr 입니다. 이 주소로 접속하면, 아래와 같은 화면이 보입니다. 회원가입을 먼저 하시고 로그인까지 진행해 보세요.

닷홈(dothome)으로 이동

상단 메뉴 중에 웹호스팅이 보이는데 그곳을 클릭해서 세부 메뉴를 살펴봅니다. ‘무료 호스팅’ 메뉴가 있습니다. 우리가 이용할 상품입니다. 무료 호스팅을 선택해 주세요.

닷홈 무료호스팅은 3개월간만 쓸 수 있습니다. 3개월이 지나기 전에 사용 연장을 해야 합니다. 그렇게 계속 연장하여 사용할 수 있습니다. 그리고 계정당 2개의 무료호스팅을 쓸 수 있습니다. 연습용으로는 충분하다고 생각됩니다. 무료 호스팅 사양을 살펴보면,

▪ 디스크 200MB
▪ 트래픽 300MB/day
▪ DB 200MB

입니다. 이게 무엇을 의미하는지 지금은 몰라도 됩니다. 간단히 얘기해서 호스팅의 저장 용량에 대한 설명입니다.

신청하기를 클릭합니다.

무료 호스팅 이용안내 페이지가 나옵니다. 이용 시 주의사항 같은 것을 한번쯤 읽어봅니다. 다 읽어봤다면, ‘위의 사항을 숙지했습니다.’에 선택을 하고 ‘무료 호스팅 신청하기’를 클릭합니다.

신청 과정 페이지를 보면 먼저 이 무료 호스팅 신청 내용이 아래처럼 나옵니다. 그냥 확인만 해두세요. 나중에라도 언제든 확인이 가능합니다.

그 밑에 담당자 및 계약자 정보를 입력하게 되어 있습니다. 우리처럼 일반 개인이라면 내 정보를 둘다 입력하면 됩니다.
(전화번호, 휴대전화 모두 입력해야 합니다. 같은 번호 쓰시면 됩니다.)

만14세 미만은 이용 시 보호자 동의가 필요합니다.

이 다음이 중요합니다. 웹호스팅 설정 정보를 입력하게 되는데요. 닷홈은 무료호스팅에 무료도메인을 지원하고 있습니다. 도메인 형태는 http://○○.dothome.co.kr 이런 형태입니다. 우리가 무료 도메인에서 결정할 수 있는 것은 ○○에 해당하는 부위입니다. 이 ○○가 FTP 아이디가 됩니다.

그래서 이 글을 통해 만드는 여러분의 웹사이트 주소는 http://(FTP아이디).dothome.co.kr 가 될 것입니다.
FTP 아이디를 원하는 것으로 입력하고 중복 확인한 다음 FTP 패스워드와 DB 패스워드를 입력합니다. FTP 패스워드를 입력하면 DB 패스워드도 같이 입력되는데 같은 비밀번호를 쓸 것이라면 DB 패스워드는 따로 쓰지 않으셔도 됩니다.

도메인 연결은 지금은 안할 것이니 생략해도 됩니다. 나중에 도메인을 따로 구입하여 연결하고 싶을 때 사용하시면 됩니다.

CMS 자동 설치는 호스팅 설치 시 워드프레스나 그누보드 같은 것을 설치할 것인지 물어보는 것입니다. 현재 호스팅에 워드프레스를 설치하고 싶은 분은 워드프레스로 선택하면 됩니다.

그런데 우리는 그냥 호스팅만 만들고 웹사이트는 직접 HTML코드로 만들어볼 것이므로 설치안함으로 합니다.
일단 FTP 아이디와 패스워드는 꼭 기억해 두셔야 합니다.

저는 일단 testwebpage라는 아이디를 생성해 보겠습니다.
아래에 확인 단어 입력 및 이메일 인증 단계까지 완료하면 호스팅 설치가 완료됩니다.

인증코드 발송을 하면 내 이메일에 들어가 인증코드를 복사한 뒤 인증코드 입력란에 넣습니다.

이제 마지막 단계로 무료 호스팅 신청 페이지 맨 아래에 무료 계정 사용 정책 동의와 로봇이 아니라고 하는 곳에 체크한 뒤 ‘신청하기’를 눌러 완료합니다.

신청하기를 클릭하면 무료 호스팅 설치가 시작됩니다.

3~4초 정도 지난 뒤, 아래와 같이 설치가 완료되었다는 페이지가 나오면 드디어 여러분만의 웹 호스팅 서버와 나만의 도메인을 갖게 된 것입니다.

이제 내 도메인에 접속해 봅시다. 신청 완료 페이지에 나온 도메인으로 접속해 봅시다.

저의 경우는, http://testwebpage.dothome.co.kr 입니다.

이렇게 화면이 나오면 성공적으로 설치된 것입니다.

3. HTML 문서 만들기

앞서 말씀드린 것처럼 우리가 크롬이나 익스플로러와 같은 브라우저로 보는 모든 인터넷 페이지는 HTML로 만들어진 문서입니다. 우리가 나만의 웹 문서, 웹사이트를 만든다고 할 때 역시 브라우저가 해석할 수 있는 HTML 언어로 만들어야 합니다.

이 글의 목적이 웹 개발 강의처럼 HTML 언어를 배우는 것이 아니므로 아주 간단한 구조의 웹 페이지를 만들어 보겠습니다. 먼저 HTML 문서의 구조를 알아야 합니다. 웹 문서는 웹 표준을 준수해서 만드는 것이 아주 중요합니다. HTML의 기본 구조는 다음과 같습니다.

가장 기본이 되는 구조입니다. 먼저 로 이 문서가 HTML로 만들어졌다는 것을 선언하고 태그 안에 와 가 들어가는 구조입니다.

HTML은 태그로 이루어져 있습니다. 태그는 ‘<’ 와 ’>’ 와 같은 꺾쇠로 사용되며 여는 태그와 닫는 태그가 있습니다. 일부 태그는 닫는 태그가 없을 수도 있습니다.(예. img 태그) 여는 태그는 < p > 이것과 같은 것이고 닫는 태그는 < /p > 이렇게 /가 붙습니다. < head >와 < /head >는 각각 여는 태그와 닫는 태그로 한쌍임을 알 수 있습니다.
백문이 불여일견이고 백견이 불여일행. 이제 직접 만들어 보겠습니다. 간단한 자기소개 페이지를 만들어볼건데요. 내용은 다음과 같은 것을 써볼거에요.

이런 글을 만들어보겠습니다.
일단 먼저 파일을 새로 만들겠습니다. 파일 이름은 index.html입니다. index 파일은 웹사이트에 접속할 때 맨 처음 보여주는 파일입니다. index 파일을 쓰면 끝에 index 파일명을 붙이지 않아도 됩니다. 자동으로 이 파일이 맨 처음 보여지는 파일이라고 설정이 되어 있기 때문입니다. 코드 편집기에서 index.html 파일을 만들어 주세요. 이 파일에다 코드를 작성하겠습니다.

먼저 head에 들어갈 내용은 title과 언어에 대한 설정입니다.

< meta charset=”utf-8” >을 넣어서 한글 콘텐츠를 uft-8방식으로 인코딩되게 해줍니다. 한글 기반 사이트를 만들 때 필수적으로 넣어주세요. 그 다음,

< meta name="viewport" content="width=320">
< meta name="viewport" content="width=device-width,initial-scale=1">

이 두 줄은 반응형 페이지를 위한 뷰포트 설정으로 화면 크기에 따른 콘텐츠 크기 제어에 대한 내용입니다. 당장 이해할 필요는 없습니다. charset부터 여기까지 필수적으로 넣어주세요.

다음이 사이에 이 문서의 제목을 넣어주세요. 여기에 넣은 내용은 브라우저 탭에 표시됩니다.

다음은 실제 보여질 내용을 작성하겠습니다. < body>< /body> 사이에 작성합니다. 몇가지 태그를 알아둘 필요가 있습니다.
h태그는 헤딩 태그라고 하며 웹페이지의 제목에 해당되는 내용을 기입하는 태그입니다. h1부터 h6까지 있습니다. 가장 순위가 높은 것이 h1이고 숫자가 낮을수록 하위에 속합니다.

p태그는 문단 태그입니다. p태그 안에 쓰이는 내용은 문단으로 인식합니다. ul태그는 목록을 만드는 태그입니다. 단, 숫자로 표시되지 않는 목록입니다. 숫자가 표시되는 목록은 ol을 사용합니다.

ul 태그나 ol 태그는 < li >태그로 항목을 리스트화 합니다.

a태그는 하이퍼링크를 만들어주는 태그입니다. 흔히 링크 태그라고 하죠. a태그를 사용함으로써 클릭 시 설정한 url로 이동을 시켜주게 됩니다.
이 태그들을 이용해 예시 글을 html문서로 만들어 보겠습니다.

< body>< /body>내부에 < h1 >태그로 큰 제목을 만들고 < p >태그로 내용을 문단으로 만들었습니다.

< ul >태그와 < li >태그를 이용하여 목록을 만들고 < a >태그를 포함하여 href 속성에 있는 주소로 이동할 수 있게 만들었습니다. 각 태그에 대한 것은 구글 검색을 통해 좀 더 자세히 알아보실 수 있습니다.

이렇게 작성 후 저장한 뒤 다시 사이트에 접속해 봅시다.

원하던 대로 웹 문서가 잘 만들어졌습니다.
나의 첫 웹사이트 만들기가 끝이 났습니다. 이제 누구든 언제 어디서든 내 주소로 인터넷 접속을 하게 되면 내가 만든 문서를 볼 수 있게 된 것입니다.

저랑 같이 따라 해보면서 본인만의 웹사이트 만들기 성공하셨나요? 축하 드립니다. 저도 이렇게 시작했습니다. 그러다 HTML언어와 CSS에 대해 좀 더 공부를 하고 나니 인터넷에서 자주 보던 그럴싸한 사이트도 만들 수 있게 되더라구요.

인터넷에 나만의 공간을 갖게 된다는 것은 참 매력적인 일이라고 생각합니다. 이 글을 읽게 된다고 해서 곧바로 멋들어진 웹사이트 만들기가 끝난 것은 아니지만 인터넷에 나만의 공간을 만드는 것 만으로도 이미 반은 성공하셨다고 볼 수 있습니다. 빠른 시간 안에 여러분들도 HTML을 통해 멋진 사이트를 세상에 선보이게 되실 겁니다.

그 때도 이 글에서 소개한 웹 서버와 FTP, 코드 편집기는 꼭 사용하시게 될 겁니다. 그 때를 위해 이 글에서 설명한 내용을 꼭 완수해 보셨으면 좋겠습니다.

출처
마크님의 브런치 글을 동의 하에 업데이트 하였습니다.
나의 첫번째 웹사이트 만들기