메모장으로 첫 번째 HTML 웹페이지 만들고 실행해보기

메모장 하나로 HTML 웹페이지 만들기 (윈도우와 맥)

웹사이트는 어떻게 만들어질까 하는 호기심을 가져본 적이 있을 것이다. 인터넷을 열면 매일 수많은 화려한 페이지를 만나게 되지만 이 거대한 웹의 세계는 사실 아주 단순한 문장들에서 시작된다.

특별한 프로그램을 구매하거나 복잡한 설치 과정을 거치지 않아도 컴퓨터에 기본으로 들어 있는 텍스트 편집기 하나면 누구나 나만의 웹페이지를 만들 수 있다.

프로그래밍을 배운다고 하면 흔히 비싼 장비나 어렵고 복잡한 개발 도구를 떠올리기 쉽다. 하지만 웹의 뼈대를 이루는 HTML은 처음 배우기에 가장 쉬운 언어 중 하나다. 텍스트 편집기를 열고 몇 줄의 글자를 적는 것만으로도 나만의 웹페이지를 만들 수 있다.

이 과정은 프로그래밍에 대한 두려움을 줄여 주는 첫걸음이 된다.

준비물은 컴퓨터와 텍스트 편집기, 브라우저면 충분하다

웹페이지를 만들기 위해 필요한 것은 컴퓨터, 텍스트 편집기, 그리고 완성된 파일을 열어 볼 웹 브라우저뿐이다. 텍스트 편집기는 운영체제에 기본으로 들어 있고, 브라우저도 대부분 이미 설치되어 있다.

윈도우에서는 메모장을 사용하면 되고, 맥에서는 텍스트 편집기를 사용하면 된다. 다만 맥의 텍스트 편집기는 기본 상태로 쓰면 코드가 아니라 서식 있는 문서로 저장되므로, 뒤에서 설명하는 일반 텍스트 설정을 꼭 해야 한다.

전문 개발자들이 쓰는 복잡한 프로그램들은 화려한 기능과 자동 완성 기능을 제공하지만 초보자에게는 오히려 진입 장벽이 될 수 있다. 메모장은 아무런 부가 기능이 없는 순수한 텍스트 편집기이기 때문에 코드를 온전히 내 손으로 직접 타이핑하며 구조를 익히기에 가장 알맞은 도구다.

비용이 전혀 들지 않고 컴퓨터 사양도 타지 않아서 언제 어디서나 가볍게 실습할 수 있다는 장점이 있다.

첫 번째 HTML 코드를 작성하고 저장하는 방법

컴퓨터 화면에서 메모장을 실행하고 빈 화면을 마주하면 막막함이 느껴질 수 있다. 하지만 걱정할 필요가 없다. 웹페이지의 기본 뼈대를 이루는 아주 간단한 약속된 단어 몇 가지만 적어보면 된다. 아래의 내용을 메모장에 그대로 입력해보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 첫 페이지</title>
</head>
<body>
<p>안녕하세요. 처음 만든 웹페이지입니다.</p>
</body>
</html>

• 첫 번째 줄의 DOCTYPE은 이 문서가 HTML로 쓰였다는 것을 브라우저에 알려 주는 코드다.
• title 태그 사이에 넣은 글자는 브라우저 탭에 웹페이지 이름으로 표시된다. meta 줄은 한글이 깨지지 않도록 글자 방식을 UTF-8로 지정한다.
• body 태그 안에 적은 글자가 화면에 실제로 보인다. 예시에서 p 태그는 한 문단을 뜻한다.
• 태그는 열 때와 닫을 때의 모양이 다르다. 닫는 태그에는 이름 앞에 슬래시가 붙는다.

코드를 다 적었다면 가장 중요한 단계인 저장 과정이 남았다. 윈도우 메모장에서는 파일 메뉴의 다른 이름으로 저장을 선택한 뒤 파일 형식을 모든 파일로 바꾸고, 파일 이름의 끝을 html로 지정한다. 이름 끝이 txt로 남아 있으면 브라우저에서 웹페이지로 열리지 않는다.

맥의 텍스트 편집기에서는 먼저 화면 위쪽 메뉴에서 포맷, 일반 텍스트 만들기를 선택해야 한다. 그다음 코드를 붙여넣고 myfirst.html이라는 이름으로 저장한다. 이때 이름 뒤에 txt가 자동으로 붙어서 myfirst.html.txt가 되는 경우가 있다. 텍스트 편집기 설정의 열기 및 저장하기 탭에서 일반 텍스트 파일에 txt 확장자 추가 항목을 끄거나, Finder에서 파일 이름을 myfirst.html로 직접 고치면 해결된다.

만든 웹페이지를 실행하고 확인하는 과정

저장된 파일을 더블클릭하면 컴퓨터에 설정된 기본 브라우저가 열리면서 방금 만든 웹페이지를 화면에 띄워 준다. 크롬, 엣지, 사파리 중 어느 것이어도 상관없다. 아래 화면은 위 코드를 저장해서 열어 본 모습이다.

메모장에 적어두었던 글자들이 평범한 텍스트가 아니라 브라우저를 통해 하나의 웹페이지로 구현되어 나타나는 신기한 광경을 마주하게 된다.

만약 화면에 글자가 제대로 나오지 않거나 오타가 있다면 메모장으로 돌아가서 코드를 수정하고 저장한 뒤 브라우저를 새로고침하면 된다.

이처럼 코드를 고치고 결과를 바로바로 확인하는 과정은 웹 개발의 가장 큰 재미 요소 중 하나다. 내가 쓴 글자가 브라우저 화면에 그대로 나타나는 것을 보면 큰 성취감을 느낄 수 있다.

자주 하는 오해와 진실 바로 알기

처음 코딩을 접하는 사람들이 가장 많이 하는 오해 중 하나는 메모장으로 만든 웹페이지는 인터넷에 올릴 수 없다는 생각이다. 하지만 이것은 사실이 아니다.

메모장으로 만든 HTML 파일은 완벽한 웹 문서이기 때문에 추후에 무료 웹 호스팅 서비스나 개인 서버를 이용하면 전 세계 누구나 접속할 수 있는 진짜 웹사이트로 확장할 수 있다.

또 다른 오해는 HTML만으로는 아무것도 할 수 없다는 것이다. 물론 HTML은 웹페이지의 뼈대를 잡는 역할만 하므로 화려한 디자인이나 움직이는 효과를 넣기에는 한계가 있다.

하지만 집을 지을 때 튼튼한 골조가 먼저이듯 웹사이트 역시 HTML이라는 기초 공사가 탄탄해야 그 위에 예쁜 옷을 입히고 기능을 더할 수 있다. 모든 웹 기술의 출발점이 바로 이 메모장 속 HTML 작업인 이유가 여기에 있다.

웹페이지를 더욱 풍성하게 만드는 기초 태그 활용법

기본적인 텍스트만 출력하는 것에 성공했다면 조금 더 다양한 태그를 사용해 웹페이지를 꾸며볼 차례다. HTML은 다양한 마크업 태그를 통해 문서의 구조를 보기 좋게 정리할 수 있는 기능을 제공한다.

• h1 태그는 가장 큰 제목을 만든다. 페이지에서 가장 눈에 띄는 제목에 쓴다.
• p 태그는 문단을 구분한다. 문단마다 줄이 바뀌어서 본문 글을 읽기 편하게 만들 수 있다.
• a 태그는 글자에 링크를 건다. href 뒤에 이동할 주소를 적는다.
• img 태그는 사진을 화면에 보여 준다. src 뒤에 사진 파일 이름을 적고, 사진은 html 파일과 같은 폴더에 두어야 한다.

<h1>나의 첫 페이지</h1>
<p>안녕하세요. 처음 만든 웹페이지입니다.</p>
<p>제 블로그는 <a href="https://halmonisconer.com">여기</a>에서 볼 수 있습니다.</p>

위 코드는 앞에서 만든 파일의 body 태그 안에 넣어서 쓸 수 있는 예시다. 이러한 태그들은 영어 단어의 약자나 직관적인 의미를 담고 있어서 조금만 연습하면 누구나 쉽게 외우고 활용할 수 있다. 메모장에 태그를 하나씩 추가하고 저장과 새로고침을 반복하면서 웹페이지가 어떻게 변화하는지 관찰하는 것이 실력을 빠르게 키우는 지름길이다.

실생활에서 활용할 수 있는 나만의 아이디어 구현하기

메모장으로 HTML 웹페이지를 만드는 기술은 실생활에서도 쓸 수 있다. 나만의 온라인 이력서를 만들거나, 기억하고 싶은 레시피와 맛집 리스트를 웹페이지 형태로 정리해 스마트폰이나 컴퓨터로 꺼내볼 수 있다.

프로젝트 발표를 앞두고 간단한 안내 페이지가 필요할 때도 메모장 하나로 만들어 볼 수 있다.

소상공인이라면 가게의 영업시간과 메뉴를 안내하는 간단한 웹페이지를 만들어 둘 수 있다. 다른 사람이 인터넷으로 볼 수 있게 하려면 웹 호스팅 서비스에 올려야 한다. 연습하는 단계에서는 비용이 들지 않는다는 점도 장점이다.

초보자가 자주 겪는 오류와 해결하는 방법

메모장으로 코딩을 하다 보면 누구나 한 번쯤은 예상대로 페이지가 작동하지 않는 상황을 마주하게 된다. 대부분의 원인은 아주 사소한 오타나 기호의 누락에서 비롯된다.

• 태그를 열었으면 반드시 슬래시 기호를 포함한 닫는 태그를 작성했는지 확인해야 한다
• HTML 태그 이름은 대문자와 소문자를 구별하지 않지만, 소문자로 통일해서 쓰는 것이 관례다.
• 따옴표가 둥근 따옴표로 바뀌면 코드가 제대로 동작하지 않는다. 웹페이지에서 코드를 복사했거나 맥 텍스트 편집기의 스마트 인용 부호 기능이 켜져 있을 때 생길 수 있으니, 곧은 따옴표인지 확인한다.
• 한글이 깨지면 meta 줄에 UTF-8이 적혀 있는지, 파일이 UTF-8로 저장되었는지 확인한다.

이러한 시행착오를 겪는 과정 자체가 진짜 실력이 되는 법이다. 에러 메시지가 뜨지 않더라도 내가 짠 코드를 한 자 한 자 눈으로 짚어가며 오류를 찾아내는 능력을 자연스럽게 기를 수 있다.

지속적인 학습과 다음 단계로 나아가는 조언

메모장과 HTML로 웹페이지를 만들어 실행하는 성취감을 맛보았다면 이제 웹의 세계로 향하는 문이 활짝 열린 것이다. 처음에는 단순히 글자만 나오는 화면이 신기하겠지만 여기에 스타일을 입혀주는 CSS와 동적인 기능을 담당하는 자바스크립트로 학습을 확장해 나갈 수 있다.

하루에 단 30분이라도 메모장을 켜고 새로운 태그를 하나씩 적용해보는 습관을 들여보자. 완벽하게 외우려고 스트레스를 받을 필요는 전혀 없다. 필요한 태그가 생길 때마다 검색을 통해 찾아보고 직접 메모장에 적어 실행해보는 과정 자체가 가장 훌륭한 공부법이다.

누구나 시작은 미약하지만 메모장 속 몇 줄의 코드가 여러분의 멋진 개발자로서의 여정을 시작하는 단단한 초석이 되어줄 것이다.