안녕하세요! 오늘은 코딩을 바로 시작하셨거나, 나만의 작은 웹 도구를 만들어보고 싶은 분들을 위한 아주 실용적인 이야기를 해보려고 합니다.
메모장이나 코드 에디터로 열심히 index.html 파일을 만들고 브라우저로 열어봤을 때의 뿌듯함, 다들 아시죠? 그런데 이 파일을 내 컴퓨터에서만 보는 게 아니라, 다른 사람들에게 링크로 공유하려면 어떻게 해야 할까요?
오늘은 내 서버에 직접 만든 HTML 코드를 올려서 깔끔한 ‘원페이지 웹사이트’로 서비스하는 과정을 아주 쉽게 풀어보겠습니다.
1. 웹페이지가 서비스되는 원리 (매장 오픈에 비유해 볼게요!)
복잡한 IT 용어는 잠시 내려놓고, 우리가 오프라인에 ‘작은 가게’를 하나 오픈한다고 상상해 봅시다. 웹 서비스의 원리도 이와 완벽하게 똑같습니다.
-
HTML 코드 (
index.html) = 가게의 인테리어와 상품내가 보여주고 싶은 글, 이미지, 버튼들이 어떻게 배치될지 적어둔 설계도이자 진열할 상품입니다.
-
서버 (Server) = 24시간 문을 열어두는 상가 건물
내 컴퓨터는 끄면 그만이지만, 웹사이트는 언제든 접속할 수 있어야 하죠. 그래서 24시간 전기가 끊기지 않고 인터넷에 연결된 컴퓨터, 즉 ‘서버’라는 공간을 임대하거나 구축해야 합니다.
-
웹 서버 프로그램 (Apache, Nginx 등) = 매장 직원
상가(서버)를 구했다고 끝이 아닙니다. 손님이 찾아오면 창고에서 상품(HTML)을 꺼내서 보여줄 직원이 필요합니다. 이 역할을 하는 프로그램이 바로 웹 서버입니다.
-
도메인 (Domain) = 가게 간판 (예:
heungin.com)복잡한 숫자 형태의 IP 주소 대신, 사람들이 쉽게 기억하고 찾아올 수 있도록 달아두는 예쁜 간판입니다.
정리하자면, “서버라는 건물에 HTML이라는 상품을 진열하고, 웹 서버라는 직원을 고용해 손님(접속자)을 맞이하는 과정”이 바로 웹 호스팅의 기본 원리입니다.
2. 실제 서버에 적용하는 4단계 (실전 압축)
원리를 알았으니 이제 진짜 내 서버에 코드를 올려보겠습니다. 보편적으로 많이 사용하는 리눅스(CentOS 등) 환경을 기준으로 설명해 드릴게요.
Step 1. 메인 파일 이름은 무조건 index.html로 저장하기
웹 서버 직원은 기본적으로 손님이 오면 가장 먼저 index.html이라는 이름의 파일을 찾아서 보여주도록 교육받아 있습니다. 만든 코드를 이 이름으로 저장해 주세요.
Step 2. 내 서버에 접속하기 (FTP 또는 SSH 이용)
파일질라(FileZilla) 같은 프로그램을 사용해 서버에 접속합니다. 원격으로 내 상가 건물에 문을 열고 들어가는 과정입니다.
Step 3. ‘웹 루트(Web Root)’ 폴더에 파일 업로드하기
서버 안에는 수많은 폴더가 있지만, 외부 손님에게 공개되는 ‘쇼윈도’ 공간은 정해져 있습니다. 보통 /var/www/html 이라는 경로가 이 역할을 합니다. 방금 만든 index.html 파일을 이 폴더 안에 쏙 넣어줍니다.
Step 4. 웹 서버 상태 확인 및 접속 테스트
모든 준비가 끝났습니다. 터미널에서 Apache 같은 웹 서버가 오류 없이 잘 돌아가는지 가볍게 테스트(apachectl configtest 명령어 입력 시 Syntax OK가 뜨면 정상!)를 해본 뒤, 스마트폰을 켜서 내 서버 IP나 도메인을 입력해 보세요. 내가 짠 코드가 전 세계 어디서든 접속 가능한 웹페이지로 뜨는 것을 볼 수 있습니다.
3. 원페이지 HTML, 이렇게 활용해 보세요!
거창한 기능 없이 HTML, CSS, JavaScript로만 만든 가벼운 원페이지 웹사이트라도 활용도는 무궁무진합니다.
-
나만의 소소한 편의 도구 제공: 앱을 만들기엔 무겁고, 남들이 만든 건 묘하게 불편할 때가 있죠? 직접 자바스크립트를 살짝 얹어서 나만의 툴을 만들어 서버에 올려보세요. 복잡한 기계 설계용 공차 계산기나 단위 변환기, 혹은 지인들과 재미로 돌려보는 ‘행운 가득 로또 기운 생성기‘ 같은 가벼운 웹 유틸리티를 만들어 두면 언제든 즐겨찾기를 통해 꺼내 쓸 수 있습니다.
-
세상에서 하나뿐인 디지털 명함 (Linktree 대체):
인스타그램이나 블로그 프로필 링크에 걸어둘 나만의 랜딩 페이지를 직접 디자인해 보세요. 내 이력, 포트폴리오, 운영하는 채널 링크를 깔끔하게 모아둘 수 있습니다.
-
아이디어 검증용 랜딩 페이지:
새로운 비즈니스나 프로젝트를 시작할 때, 서비스 소개와 ‘사전 예약’ 버튼 하나만 둔 원페이지를 빠르게 띄워 시장의 반응을 테스트해 보는 용도로도 아주 훌륭합니다.
💡 IT 블로거의 추가 팁
처음부터 무거운 워드프레스(WordPress)나 복잡한 프레임워크를 배워야 한다는 압박감을 가질 필요는 전혀 없습니다.
오히려 순수한 HTML/JS 파일 하나로 내 서버에 직접 무언가를 띄워본 이 경험이 서버 폴더 구조와 네트워크의 흐름을 이해하는 데 훨씬 큰 도움이 됩니다. 이렇게 가볍게 만든 웹페이지에 트래픽이 모이기 시작하면, 그때 가서 구글 애드센스(Google AdSense) 코드를 한 줄 쓱 붙여서 소소한 수익 창출을 시도해 보는 것도 웹을 다루는 또 하나의 큰 재미랍니다.
오늘 당장 메모장을 열고 간단한 문구라도 적어서 여러분의 서버에 첫발을 내디뎌 보시길 응원합니다!