LEVEL 36 QUEST

바이브코딩으로 프론트엔드 구축하기

AI를 활용한 바이브코딩으로 무료 웹 도구의 프론트엔드(UI)를 빠르게 구축하는 방법을 학습합니다.

Stage 11-1 — 바이브코딩으로 프론트엔드 구축하기

바이브코딩 프론트엔드 개발 워크플로우

바이브코딩이란 AI에게 자연어로 설명하면 코드가 자동 생성되는 개발 방식입니다. 이전 Stage에서 만든 기획서와 와이어프레임을 AI에게 전달하면, 실제 작동하는 웹 페이지를 몇 시간 만에 만들 수 있습니다.

바이브코딩 프론트엔드 개발 3단계:

1단계: 구조 생성 — HTML 레이아웃과 기본 구조
2단계: 스타일링 — CSS로 예쁘게 디자인
3단계: 인터랙션 — JavaScript로 동적 기능 추가

각 단계에서 AI에게 어떻게 지시해야 최상의 결과를 얻는지 구체적으로 배워봅시다.

사전 준비물

이 레슨을 시작하기 전에 다음을 준비하세요:
- Stage 10에서 작성한 원페이지 기획서
- 와이어프레임 (종이 스케치도 OK)
- AI 도구 접근 (Cursor IDE, Claude, ChatGPT 중 하나)
- 코드 에디터 (VS Code 또는 Cursor)

Step 1: HTML 구조 생성

AI에게 HTML 구조를 요청하는 프롬프트

첫 번째 단계는 HTML 뼈대를 만드는 것입니다. AI에게 다음과 같이 요청하세요:

다음 사양의 웹 도구 HTML 구조를 만들어줘:

도구: [도구 이름] - [한 줄 설명]

페이지 구조:
1. 헤더 - 로고와 도구 이름
2. 히어로 섹션 - 한 줄 설명과 부제목
3. 입력 폼 섹션
   - [입력 필드 1]: [타입] (예: text, number, select)
   - [입력 필드 2]: [타입]
   - [입력 필드 3]: [타입]
   - 제출 버튼: "[버튼 텍스트]"
4. 결과 섹션 (처음에는 숨김)
   - 핵심 결과 표시
   - 상세 분석
   - 공유 버튼 3개 (쓰레드, 이미지 저장, 링크 복사)
5. 푸터 - 만든 사람 정보, 쓰레드 계정 링크

요구사항:
- 시맨틱 HTML5
- 접근성(aria-label) 기본 적용
- 모바일 퍼스트
- 한국어 콘텐츠
            

프롬프트 작성 핵심 원칙:

구체적인 구조를 리스트로 나열하세요
각 입력 필드의 타입을 명시하세요
"시맨틱 HTML5"를 요청하면 올바른 태그를 사용합니다
"모바일 퍼스트"를 명시하면 모바일 기준으로 코드를 작성합니다

생성된 HTML 검토 체크리스트

AI가 생성한 HTML을 받으면 다음을 검토하세요:

구조 검토:

meta charset="UTF-8"이 있는가? (한국어 깨짐 방지)
viewport meta 태그가 있는가? (모바일 대응)
title과 meta description이 적절한가?
Open Graph 태그가 있는가? (쓰레드 링크 미리보기용)

필수 메타태그 (AI가 빠뜨리면 직접 추가):

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[도구 이름] - [한 줄 설명]</title>
<meta name="description" content="[도구 설명 160자 이내]">

<!-- Open Graph (쓰레드/SNS 공유 미리보기) -->
<meta property="og:title" content="[도구 이름]">
<meta property="og:description" content="[한 줄 설명]">
<meta property="og:image" content="[OG 이미지 URL]">
<meta property="og:url" content="[도구 URL]">
<meta property="og:type" content="website">
            

접근성 검토:

모든 input에 label이 연결되어 있는가?
버튼에 의미 있는 텍스트가 있는가?
이미지에 alt 속성이 있는가?

🔒

여기까지는 미리보기입니다

바이브코딩으로 프론트엔드 구축하기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)