바이브코더가 꼭 알아야 할 것

좋은 소식: HTML/CSS 전체를 알 필요 없습니다.
나쁜 소식: 최소한의 개념은 알아야 합니다.

AI에게 명확하게 지시하려면, 자신이 뭘 원하는지 알아야 합니다.

이 글은 “개발자 수준의 이해”가 아니라, “AI에게 명확하게 말할 수 있는 수준”입니다.

HTML 필수 태그 10개

HTML은 “웹페이지의 뼈대”입니다.

1. <h1>, <h2>, <h3>: 제목

• h1: 페이지 제목 (가장 큼)
• h2: 섹션 제목
• h3: 소제목

→ AI에게: “제목을 h1으로 만들어줄래”

2. <p>: 단락

모든 텍스트는 <p> 태그로 감싸야 합니다.

→ AI에게: “설명 문장을 단락으로 감싸줄래”

3. <button>: 버튼

“클릭하기”, “구매하기” 같은 상호작용 요소.

→ AI에게: “파란색 버튼을 추가해줄래”

4. <input>: 입력창

사용자가 텍스트, 이메일, 숫자를 입력하는 공간.

예: 검색창, 이메일 입력, 전화번호 입력

→ AI에게: “이메일 입력창을 만들어줄래”

5. <div>: 박스

여러 요소를 그룹화합니다.

6. <img>: 이미지

사진, 아이콘, 그래픽 표시.

→ AI에게: “프로필 사진을 원형으로 표시해줄래”

7. <a>: 링크

다른 페이지로 이동.

→ AI에게: “이 텍스트를 클릭하면 example.com으로 가도록 해줄래”

8. <ul>, <li>: 목록

• 글머리 기호 목록 (bullet points)

예:
– 사과
– 바나나
– 오렌지

9. <form>: 폼

여러 입력 요소를 묶어서, “제출” 버튼과 함께 처리.

10. <header>, <footer>, <nav>: 레이아웃

• header: 상단 (로고, 네비게이션)
• nav: 메뉴
• footer: 하단 (연락처, 저작권)

→ AI에게: “상단에 헤더를 추가해줄래. 로고와 메뉴가 있어야 해”

CSS 필수 개념 5개

CSS는 “웹페이지의 색칠”입니다.

1. 색상

• 배경색: background-color
• 글자색: color

→ AI에게: “배경색을 파란색 (#3498db)으로 바꿔줄래”

2. 크기

• 너비: width
• 높이: height
• 여백 안쪽: padding
• 여백 바깥쪽: margin

→ AI에게: “이 박스를 200px 넓게 해줄래”

3. 배치 (Flexbox)

요소들을 가로/세로로 정렬.

→ AI에게: “카드들을 가로로 3개씩 배열해줄래”

4. 폰트

• 크기: font-size
• 모양: font-family
• 굵기: font-weight

→ AI에게: “제목을 20px, 굵게 해줄래”

5. 반응형 (모바일)

화면 크기에 따라 자동으로 조정.

→ AI에게: “모바일에서도 깔끔하게 보이도록 반응형으로 만들어줄래”

AI에게 명확하게 말하기

나쁜 설명

“웹사이트를 예쁘게 만들어줄래”

→ “예쁘다”는 주관적. AI가 뭘 원하는지 몰라서 추측만 함.

좋은 설명

“헤더에 파란색 배경을 깔고, 가운데 흰색 글씨로 로고를 넣고, 우측에 네비게이션 메뉴를 가로로 배열해줄래. 모바일에서는 메뉴가 접혔다 펼쳐지도록”

→ 정확함. AI가 정확하게 구현 가능.

태그 vs 클래스 vs ID

태그: 요소의 종류

<p>단락</p>
<button>버튼</button>

클래스: 여러 요소에 같은 스타일

<div class="card">카드 1</div>
<div class="card">카드 2</div>

→ AI에게: “class=’card’인 모든 박스에 음영 효과를 주고, 테두리를 둥글게 해줄래”

ID: 유일한 요소

<div id="header">헤더</div>

→ 거의 안 쓰므로 무시해도 됨.

자주 하는 질문

Q: 모든 HTML을 외워야 하나?

A: 아니요. 10개 태그만 알면 충분. 나머지는 필요할 때 AI가 알려줍니다.

Q: CSS의 “Flexbox” “Grid”는?

A: 고급 개념. AI가 자동으로 처리. 당신은 “가로로 배열해줄래” 말하면 됨.

Q: 코드를 수정할 수 있어야 하나?

A: 아니요. 하지만 “폰트 크기 20px” “색상 파란색” 같은 수치를 알면, AI에게 더 명확하게 말할 수 있습니다.

실제 사용 사례

사례 1: 포트폴리오 웹사이트

당신: “포트폴리오 웹사이트를 만들어줄래?
– 상단: h1으로 이름, p로 소개글
– 중간: 프로젝트를 div 박스 3개, 가로로 배열
– 하단: footer에 연락처”

→ AI가 완벽하게 구현

사례 2: 사진 갤러리

당신: “사진 갤러리를 만들어줄래?
– img 태그로 사진 표시
– 가로로 4개씩 배열 (Flexbox)
– 마우스 호버하면 커지도록”

→ AI가 “이건 Flexbox와 CSS hover 효과가 필요해” 알아서 처리

CSS 색상 코드

자주 쓰는 색상의 코드 (HEX):

→ AI에게: “배경을 #3498db으로 바꿔줄래”

단위 이해하기

px (픽셀)

화면의 가장 작은 단위.
– 20px = 약 5mm
– 보통 p 태그: 16px
– 제목 h1: 32px 이상

%

부모 요소의 비율.
– width: 100% = 부모 너비와 같음
– width: 50% = 부모의 절반

다음 단계

이 10개 태그 + 5개 개념만으로:

1. Claude Code에 명확하게 요청하기
2. AI가 만든 코드 이해하기 (수정 시)
3. 피드백 전달하기

“앗, 아이콘이 너무 커” → “img 태그의 width를 16px으로 줄여줄래”

완벽한 이해가 아니어도 괜찮습니다.
당신은 설계자입니다. AI는 개발자입니다.

더 궁금한 게 있으신가요?
바이브코딩·AI 활용에 대해 직접 소통하고 싶다면 아래로 연락 주세요.

📞 010-9883-7268
🔗 스레드 팔로우하기

본 글은 개인적인 AI 활용 경험과 공개된 정보를 바탕으로 작성된 정보성 콘텐츠입니다.

전문가 상담이 필요하신가요?

비슷한 상황으로 고민 중이시라면, 혼자 판단하지 마시고 자료를 놓고 같이 확인해보는 편이 좋습니다. 한동노무법인 박실로 노무사가 19년간 광주·전남 현장에서 쌓은 경험으로 같이 정리해드리겠습니다.

한동노무법인
📞 062-521-5678 / 010-9883-7268
💬 카카오톡 상담
🌐 silronomu.com | 전남광주노무사.com
🧵 @silrobag

이 글은 19년차 공인노무사이자 한동노무법인 대표 박실로 노무사가 작성하였습니다.