홈 › 웹 제작
코딩을 몰라도 홈페이지를 만들 수 있을까: HTML, CSS, 자바스크립트의 역할
코딩을 배운 적 없이 AI와 대화하면서 이 사이트를 만들었습니다. 처음에는 AI가 내놓는 코드가 외계어처럼 보였지만, 웹페이지가 세 가지 재료로 이루어진다는 것을 알고 나서는 무엇을 어떻게 부탁해야 할지 감이 잡혔습니다.
웹페이지를 이루는 세 가지 재료
| 언어 | 역할 | 비유 | 이 사이트에서의 예 |
|---|---|---|---|
| HTML | 내용과 구조 | 집의 뼈대 | 제목, 메뉴, 글 목록, 문의 폼 |
| CSS | 모양과 배치 | 벽지와 가구 | 글자 크기, 색, 카드 모양, 휴대폰 화면 배치 |
| 자바스크립트 | 동작 | 전기와 스위치 | 다크모드 버튼, 분류 버튼, 폼 전송 |
이렇게 나눠 보면 요청도 나눠서 할 수 있습니다. "버튼 색을 바꿔 줘"는 CSS, "버튼을 누르면 목록이 바뀌게 해 줘"는 자바스크립트 일입니다.
가장 작은 홈페이지
아래 몇 줄만 index.html로 저장해 브라우저로 열어도 홈페이지가 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 홈페이지</title>
<style>
body { font-family: sans-serif; max-width: 700px; margin: 0 auto; padding: 16px; }
h1 { color: #c2410c; }
</style>
</head>
<body>
<h1>안녕하세요</h1>
<button id="hello">눌러 보세요</button>
<script>
document.getElementById("hello").addEventListener("click", () => alert("반갑습니다!"));
</script>
</body>
</html><style> 안이 CSS, <script> 안이 자바스크립트, 나머지가 HTML입니다. 처음에는 이렇게 한 파일에 모두 넣어도 됩니다.
페이지가 늘어나면 파일을 나눈다
처음 만든 사이트는 index.html 한 장이었습니다. 소개, 개인정보처리방침, 글 페이지가 생기면서 모든 페이지가 같은 디자인과 같은 다크모드 버튼을 써야 했고, 그래서 공통 부분을 따로 뺐습니다.
style.css: 모든 페이지가 함께 쓰는 디자인site.js: 다크모드 버튼, 분류 버튼, 문의 폼 같은 공통 동작
이제 버튼 색을 바꾸려면 style.css 한 곳만 고치면 모든 페이지에 반영됩니다.
휴대폰에서도 보기 좋게
두 가지가 핵심이었습니다. 첫째, <head>에 viewport 메타 태그를 넣어야 휴대폰이 화면을 억지로 축소하지 않습니다. 둘째, CSS의 미디어 쿼리로 좁은 화면에서만 다른 규칙을 적용합니다.
@media (max-width: 600px) {
.logo { font-size: 26px; } /* 휴대폰에서는 로고를 조금 작게 */
}AI에게 부탁할 때 효과가 있었던 방법
- 무엇을, 어디에, 어떤 모습으로를 함께 말합니다. "폼 만들어 줘"보다 "페이지 맨 아래에 이름, 이메일, 문의 내용을 받는 제휴 문의 폼을 만들어 줘"가 훨씬 정확한 결과를 냅니다.
- 한 번에 하나씩 요청합니다. 여러 기능을 한꺼번에 부탁하면 어디서 문제가 생겼는지 찾기 어렵습니다.
- 바뀐 결과를 바로 브라우저로 확인합니다. 휴대폰 화면 크기와 다크모드도 함께 봅니다.
- 코드에 한국어 주석을 달아 달라고 부탁합니다. 나중에 직접 고칠 때 어디를 봐야 할지 알 수 있습니다.
AI가 만든 코드라도 "이 줄은 무슨 일을 하나요?"라고 물어보며 이해하려고 노력하는 편이 결국 빨랐습니다. 이해한 만큼 더 정확하게 부탁할 수 있기 때문입니다.
댓글