바이브 코딩 - 검토 가능한 정적 페이지 만들기

실습 목표: AI가 생성한 화면을 그대로 배포하지 않고, 요구사항과 검증 항목을 기준으로 검토할 수 있는 정적 페이지를 만든다.

AI로 코드를 시작할 수는 있지만, 페이지의 정확성·접근성·보안은 자동으로 보장되지 않는다. 특히 실제 고객 정보, 비밀값, 결제·전송 기능은 작은 실습 범위에 넣지 않는다.

요구사항을 먼저 적기

구분	예시
목표	공개 강의를 찾고 언어별 진입점을 이해하게 한다.
포함	제목, 짧은 소개, 공개 링크, 모바일 레이아웃
제외	로그인, 결제, 문의 전송, 사용자 추적
승인 기준	링크·문구·모바일 화면을 사람이 확인한다.

작업 순서

1. 실제 공개 정보만 담은 한 페이지 요구사항을 작성한다.
2. AI에게 컴포넌트 구조와 초안 코드를 요청한다.
3. 생성된 링크, 제목, 이미지 대체텍스트를 원문과 대조한다.
4. 좁은 화면과 넓은 화면에서 줄바꿈·탭 이동·링크 동작을 확인한다.
5. 환경변수와 비밀값은 코드·프롬프트·스크린샷에 넣지 않는다.
6. 배포 전 변경 목록과 되돌릴 방법을 기록한다.

Agent Lab로 연습

언어 허브의 실제 공개 링크를 참고해, 두 언어 진입점을 소개하는 정적 안내 페이지를 설계한다. 각 언어에 실제 번역 쌍이 있을 때만 연결하고, 존재하지 않는 번역을 만들어 낸 것처럼 표시하지 않는다.

프롬프트 예시

공개 정보만 사용하는 반응형 정적 페이지의 초안을 만들어 주세요.

- 목적: [사용자 행동]
- 포함할 실제 링크와 문구: [목록]
- 제외할 기능: 로그인, 결제, 폼 전송, 분석 스크립트
- 완료 기준: 390px와 데스크톱에서 링크·텍스트·키보드 탐색을 확인할 수 있음

임의의 고객 후기, 성과 수치, 기능 설명을 만들지 말고,
검토가 필요한 가정은 주석으로 분리해 주세요.

생성 결과는 초안이다. 프로덕션 배포에는 코드 리뷰, 비밀값 관리, 실제 브라우저 확인, 승인 절차가 별도로 필요하다.