아이디어에서 홈페이지까지,
AI와 함께 실행하는 방법.

01 / CONCEPT · 원자료 5–8쪽

바이브 코딩은 무엇인가요?

만들고 싶은 기능을 일상 언어로 설명하고, AI가 작성한 프로그램을 실행해 보며 개선하는 개발 방식입니다. 비전공자도 업무 아이디어를 직접 시험해 볼 수 있다는 점에 초점을 둡니다.

처음부터 복잡한 시스템을 만들기보다, 작게 시작해 ‘설명 → 생성·실행 → 확인·수정’을 반복하는 것이 자료에서 제시하는 기본 흐름입니다.

02 / IDEAS · 원자료 7–8쪽

어떤 업무부터 시도할까요?

반복적으로 처리하는 업무 중 입력과 원하는 결과가 명확한 일을 골라 작은 기능으로 시험합니다. 자료에서는 다음과 같은 아이디어를 예로 듭니다.

교육자료에 제시된 활용 예시입니다. 이 홈페이지에서 해당 기능을 제공하는 것은 아닙니다.

03 / TOOLS · 원자료 9–26쪽

만드는 곳, 보관하는 곳, 공개하는 곳.

자료는 브라우저 기반 개발 환경에서 작업하고, GitHub에 변경 이력을 보관한 뒤, 연결된 호스팅 서비스로 배포하는 구성을 소개합니다.

도구의 역할을 설명한 요약입니다. 설치·로그인 화면과 설정 절차는 서비스 업데이트에 따라 달라질 수 있습니다.

04 / WORKFLOW · 원자료 27–35쪽

작은 홈페이지로 전체 과정을 경험합니다.

1. 작은 기능으로 시작

   이름을 입력하면 환영 문구를 보여주는 페이지처럼, 결과를 쉽게 확인할 수 있는 기능을 요청합니다.

2. 요구사항을 구체화

   회사 소개, 서비스 3개, 문의 영역처럼 필요한 내용을 정하고, 색상과 모바일 메뉴 등 화면 조건도 함께 전달합니다.

3. 실행하고 수정

   만들어진 화면을 확인하고, 문구나 버튼 크기, 모바일 메뉴처럼 바꿀 부분을 구체적으로 요청합니다.

4. 저장소 반영 후 배포

   변경 내용을 커밋·push하고 호스팅 서비스에서 배포 결과를 확인합니다. 파일을 저장한 것과 사이트에 게시된 것은 구분해야 합니다.

05 / COMPANY MATERIALS · 원자료 36–38쪽

회사 자료를 근거로 콘텐츠를 만듭니다.

소개서와 로고·사진을 준비한 뒤, 먼저 파일이 제대로 올라왔는지 확인하고 회사 정보를 요약합니다. 이후 해당 자료를 근거로 소개와 서비스 문구를 수정합니다.

• 자료 준비: 회사 소개서, 서비스 설명, 로고와 소개 사진을 구분해 업로드합니다.
• 내용 확인: 수정하기 전에 업로드한 자료와 핵심 정보를 확인합니다.
• 근거에 따른 반영: 제공되지 않은 실적이나 연락처를 임의로 추가하지 않습니다.
• 이미지 확인: 로고와 사진의 원래 비율을 유지하고 화면에서 확인합니다.

06 / REVIEW · 원자료 8·39쪽

완료 여부는 직접 확인합니다.

• 회사명과 연락처가 원자료와 일치하는가?
• 요청한 서비스와 메뉴가 빠짐없이 표시되는가?
• 로고·사진의 비율이 유지되는가?
• 모바일에서도 읽기 쉽고 메뉴가 작동하는가?
• 실제 업무 적용 전 기능 오류, 개인정보 처리와 보안을 검토했는가?

결과가 기대와 다르면 문제가 발생하는 화면과 원하는 상태를 구체적으로 설명해 다시 수정합니다.