웹사이트를 만드는 방법은 세 가지이고, 어느 것이 맞는지는 실력이 아니라 목적 으로 정해집니다. 포트폴리오를 빨리 올리고 싶은 사람과 웹 개발을 배우고 싶은 사람은 같은 방법을 쓰면 안 됩니다. 이 글은 목적별로 방법을 고르는 기준과, 각 방법으로 시작했을 때 첫 한 달에 무엇을 하면 되는지, 그리고 실제로 처음 하는 사람이 막히는 지점을 정리한 것입니다.
먼저 목적을 고릅니다#
| 목적 | 추천 방법 | 이유 |
|---|---|---|
| 가게·개인 소개 페이지를 이번 주에 올리고 싶다 | 웹사이트 빌더 | 코드 없이 하루 안에 됩니다 |
| 블로그를 꾸준히 쓰고 싶다 | 빌더(워드프레스 등) 또는 정적 사이트 생성기 | 글 쓰는 흐름이 중요하지 코드가 중요하지 않습니다 |
| 웹 개발을 배우고 싶다 | HTML·CSS·JavaScript 직접 코딩 | 빌더로는 배워지지 않습니다 |
| 포트폴리오 사이트를 직접 만든 것으로 보여 주고 싶다 | 직접 코딩 → 프레임워크 | "직접 만들었다" 가 내용의 일부입니다 |
| 나중에 기능(로그인·결제)을 붙일 서비스를 만들 것이다 | 프레임워크(Next.js 등) | 처음부터 확장 가능한 구조로 가야 합니다 |
"일단 다 배우고 결정하겠다" 는 것이 가장 흔한 실패입니다. 목적 하나를 고르고 그 방법으로 한 달 안에 뭔가를 올리는 것이 다음 단계로 가는 가장 빠른 길이었습니다.
방법 1. 웹사이트 빌더 (코딩 없음)#
Wix, Squarespace, 워드프레스(wordpress.com), 국내 서비스로는 아임웹·카페24 등이 있습니다. 드래그로 화면을 만들고, 호스팅과 도메인 연결까지 한 곳에서 됩니다.
장점. 하루 안에 올릴 수 있고, 보안·속도·모바일 대응을 서비스가 맡아 줍니다. 단점. 월 구독료가 계속 나가고, 템플릿 바깥의 기능은 안 됩니다. 나중에 다른 곳으로 옮기기 어렵습니다.
첫 주 계획. 템플릿 하나를 고르고 페이지 세 장(소개, 하는 일, 연락)만 만듭니다. 더 만들지 않습니다. 사진은 직접 찍은 것으로 바꾸고, 글은 세 문단을 넘기지 않습니다.
막히는 지점. 도메인입니다. 빌더에서 도메인을 함께 사면 편하지만, 나중에 서비스를 바꿀 때 도메인 이전이 번거롭습니다. 도메인은 별도의 등록 업체에서 사서 빌더에 연결하는 편이 길게 보면 유리합니다. 어떤 방법을 쓰든 도메인은 "내 이름" 으로 사 두는 것이 원칙입니다.
방법 2. HTML·CSS·JavaScript 직접 코딩#
배우는 것이 목적이면 이 길입니다. 필요한 것은 텍스트 에디터(VS Code)와 브라우저뿐입니다.
가장 작은 웹사이트#
아래 내용을 index.html 로 저장하고 브라우저에서 열면 웹사이트가 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>홍길동 포트폴리오</title>
<style>
body { font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; line-height: 1.6; }
h1 { font-size: 1.6rem; }
</style>
</head>
<body>
<h1>안녕하세요, 홍길동입니다.</h1>
<p>웹을 배우고 있습니다. 만든 것을 여기에 모읍니다.</p>
<ul>
<li><a href="projects.html">만든 것</a></li>
<li><a href="mailto:me@example.com">연락하기</a></li>
</ul>
</body>
</html>이 파일 하나가 전부입니다. max-width 와 viewport 한 줄 덕분에 모바일에서도 읽힙니다. 처음 만든 페이지가 폰에서 깨져 보이는 이유의 대부분은 viewport 메타 태그가 없어서입니다.
첫 한 달 계획#
| 주차 | 할 것 | 결과물 |
|---|---|---|
| 1주 | HTML: 제목, 문단, 링크, 이미지, 목록, 표 | 소개 페이지 1장 |
| 2주 | CSS: 글자, 색, 여백, 상자 배치(flex) | 페이지 3장, 공통 메뉴 |
| 3주 | 반응형: 화면 크기에 따라 배치 바꾸기 | 폰에서 깨지지 않는 사이트 |
| 4주 | JavaScript: 버튼 클릭, 메뉴 열고 닫기, 폼 검사 | 다크 모드 버튼 하나 |
한 달이 지나면 "정적인 사이트" 는 혼자 만들 수 있습니다. 이 단계에서 디자인 욕심을 내면 진도가 멈춥니다. 글자와 여백만 정리해도 충분히 깔끔합니다.
막히는 지점. CSS 배치입니다. 요소가 생각대로 안 놓이는 경험을 모두가 합니다. flex 하나만 제대로 익히면 대부분 해결되고, grid 는 나중에 봐도 됩니다. 브라우저 개발자 도구에서 요소를 클릭해 적용된 CSS 를 보는 습관이 가장 빠른 공부법이었습니다.
방법 3. 프레임워크 (Next.js 등)#
나중에 로그인·결제·데이터 저장이 붙을 서비스라면 처음부터 프레임워크로 갑니다. React 기반 Next.js 가 문서와 배포 환경(Vercel)이 잘 맞물려 있어 혼자 시작하기에 무난합니다. 다만 방법 2 를 건너뛰고 오면 거의 반드시 막힙니다. HTML·CSS 를 모르면 프레임워크 오류 메시지를 읽을 수 없습니다.
첫 한 달 계획. 공식 튜토리얼을 끝까지 따라 하고(3~4일), 방법 2 에서 만든 정적 사이트를 Next.js 로 옮겨 봅니다. 그 과정에서 "페이지", "컴포넌트", "라우팅" 이 무엇인지 몸으로 익힙니다. 데이터베이스와 로그인은 두 번째 달로 미룹니다.
막히는 지점. 설정과 오류입니다. Node.js 버전, 패키지 설치 실패, 빌드 오류가 코드보다 시간을 많이 먹습니다. 오류 메시지를 그대로 복사해 검색하거나 AI 에게 "무슨 뜻인지, 흔한 원인 3개" 를 묻는 것이 빠릅니다.
올리기: 호스팅과 도메인#
직접 코딩이나 프레임워크로 만들면 어딘가에 올려야 합니다. 개인 사이트는 무료로 충분합니다.
| 서비스 | 맞는 경우 | 비고 |
|---|---|---|
| GitHub Pages | 정적 HTML·CSS 사이트 | 저장소에 올리면 끝. 가장 단순 |
| Netlify | 정적 사이트, 폼 처리 조금 | 드래그로 폴더 올려도 배포됨 |
| Vercel | Next.js 등 프레임워크 | Git 푸시가 곧 배포 |
세 곳 모두 무료 플랜으로 개인 사이트는 됩니다. 셋 중 무엇을 고를지 더 깊게 보려면 Vercel·Netlify·Cloudflare 비교를 참고하세요.
도메인. 연 1~2만 원대부터 시작합니다. 도메인 등록 업체에서 사고, 호스팅 서비스의 안내대로 DNS 레코드를 연결합니다. 연결 후 반영까지 몇 분에서 몇 시간이 걸리는데, 이걸 모르고 "안 된다" 고 다시 설정을 건드리는 실수가 흔합니다. 바꾸고 나서 기다리세요.
처음 하는 사람이 공통으로 겪는 것#
- 완성 기준이 없어서 끝이 안 남. "페이지 3장, 폰에서 안 깨짐, 도메인 연결" 처럼 끝을 미리 정합니다.
- 디자인을 먼저 고민함. 내용이 먼저입니다. 글자와 여백만 정리된 사이트가 어설픈 디자인보다 낫습니다.
- 여러 방법을 동시에 시도함. 하나로 한 달을 채운 뒤에 바꿔도 늦지 않습니다.
- 배운 것을 안 올림. 로컬에서만 돌아가는 사이트는 없는 것과 같습니다. 어설퍼도 올리면 다음에 고칠 것이 보입니다.
정리#
빠르게 올리는 것이 목적이면 빌더, 배우는 것이 목적이면 직접 코딩, 서비스로 키울 것이면 프레임워크입니다. 어느 길이든 한 달 안에 "폰에서 깨지지 않는 페이지 3장" 을 내 도메인으로 올리는 것을 첫 목표로 두면 그다음이 보입니다.
회사 홈페이지를 외주로 맡길 생각이라면 접근이 다릅니다. 그 경우는 기업 홈페이지 구축 가이드에서 외주 전에 정할 것을 먼저 보세요.
