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

코딩을 시작하는 가장 가벼운 방법

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

특별한 프로그램을 구매하거나 복잡한 설치 과정을 거치지 않아도 컴퓨터에 기본으로 설치된 메모장 하나면 누구나 나만의 웹페이지를 만들 수 있다.

프로그래밍을 배운다고 하면 흔히 비싼 장비나 어렵고 복잡한 개발 도구를 떠올리기 쉽다. 하지만 웹의 뼈대를 이루는 HTML은 세상에서 가장 친근한 언어 중 하나다. 메모장을 열고 몇 줄의 글자를 적어 내려가는 것만으로도 세상에 단 하나뿐인 나만의 공간을 웹상에 구현할 수 있다.

이 과정은 프로그래밍에 대한 두려움을 없애주고 디지털 세상을 주도하는 능력을 길러주는 첫걸음이 된다.

준비물은 오직 컴퓨터와 메모장 하나면 충분하다

웹페이지를 만들기 위해 우리가 준비해야 할 것은 놀랍게도 단 두 가지뿐이다. 첫째는 윈도우나 맥 등 운영체제가 설치된 개인용 컴퓨터이고 둘째는 운영체제에 기본으로 포함된 텍스트 편집기다.

윈도우 사용자라면 누구나 아는 메모장을 사용하면 되고 맥 사용자라면 텍스트에디트를 활용하면 된다.

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

비용이 전혀 들지 않는 것은 물론이고 컴퓨터 사양을 타지 않아 언제 어디서나 가볍게 실습할 수 있다는 엄청난 장점이 있다.

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

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

• 첫 번째 줄에는 웹페이지의 시작을 알리는 코드를 적는다
• 제목을 나타내는 태그 사이에 원하는 웹페이지 이름을 넣는다
• 본문 영역을 뜻하는 태그 안에 화면에 실제로 보여질 글자를 적는다
• 모든 태그는 시작할 때와 끝날 때의 모양이 미세하게 다르다는 점을 기억한다

코드를 다 적었다면 가장 중요한 단계인 저장 과정이 남았다. 메모장의 파일 메뉴에서 다른 이름으로 저장을 선택한 뒤 파일 형식을 모든 파일로 변경해야 한다. 파일 이름의 끝을 일반적인 텍스트 문서 형식이 아니라 html 확장자로 끝나는 이름으로 지정해주는 것이 핵심이다.

예를 들어 나의첫페이지.html 이라고 이름을 지어주고 저장 버튼을 누르면 바탕화면에 파란색 인터넷 아이콘 모양의 파일이 생성된 것을 확인할 수 있다.

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

저장된 파일을 더블클릭하면 우리가 흔히 사용하는 인터넷 브라우저인 크롬이나 엣지 등이 자동으로 실행되면서 방금 만든 웹페이지를 화면에 띄워준다.

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

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

이처럼 코드를 고치고 결과를 바로바로 확인하는 피드백 과정은 웹 개발의 가장 큰 재미 요소 중 하나다. 내가 쓴 글자가 전 세계 수십억 명이 사용하는 웹 브라우저 위에서 똑같이 작동한다는 사실은 큰 성취감을 안겨준다.

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

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

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

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

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

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

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

• 가장 큰 제목을 나타내는 태그를 활용해 시선을 사로잡는 대제목을 만들 수 있다
• 단락을 구분해주는 태그를 사용하면 줄바꿈이 자연스러운 본문 글을 작성할 수 있다
• 원하는 문구에 하이퍼링크를 걸어 다른 웹페이지로 이동하는 통로를 만들 수 있다
• 이미지 태그를 삽입하여 컴퓨터에 있는 사진이나 인터넷상의 그림을 화면에 띄울 수 있다

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

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

메모장으로 HTML 웹페이지를 만드는 기술은 단순한 취미를 넘어 실생활의 다양한 영역에서 강력한 도구로 활용될 수 있다. 나만의 온라인 이력서를 만들어 구직 활동에 활용하거나 기억하고 싶은 레시피와 맛집 리스트를 웹페이지 형태로 정리해 스마트폰이나 컴퓨터로 언제든 꺼내볼 수 있다.

프로젝트 발표를 앞두고 간단한 안내 페이지가 필요할 때도 굳이 복잡한 웹 제작 툴을 배울 필요 없이 메모장 하나로 몇 분 만에 뚝딱 만들어낼 수 있다.

소상공인이라면 가게의 영업시간과 메뉴를 안내하는 아주 간단한 디지털 명함 형태의 웹페이지를 직접 만들어 배포하는 것도 가능하다. 비용이 전혀 들지 않으면서도 디지털 역량을 키울 수 있는 가장 가성비 좋은 자기계발 방법이다.

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

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

• 태그를 열었으면 반드시 슬래시 기호를 포함한 닫는 태그를 작성했는지 확인해야 한다
• 영문 대소문자를 구별하지 않는 경우도 많지만 가급적 소문자로 통일하여 작성하는 것이 표준이다
• 따옴표나 꺾쇠괄호 같은 특수문자를 한글 자판 상태에서 입력해 오류가 나는 경우가 많으므로 반각 문자인지 확인한다
• 파일을 저장할 때 인코딩 방식을 UTF-8로 지정해야 한글이 깨지지 않고 정상적으로 출력된다

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

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

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

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

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