전문직 바이브 코딩 · 기초편

한 시간 · 7개 절

• 이 교재를 마치면 무엇이 손에 남는지 봅니다.
• 바이브 코딩이 기존 방식과 무엇이 다른지 압니다.
• 만들 사이트의 구조를 종이에 그려 봅니다.
• 시작하기 전에 준비할 것을 챙깁니다.
• 결과물을 먼저 봅니다
• 바이브 코딩이 무엇인가
• 무엇을 만들지 정합니다
• 종이에 그려 보기
• 준비물
• 이 교재의 사무소
• 점검표

한 시간 반 · 7개 절

• 무엇을 설치해야 하는지 알고 설치를 마칩니다.
• 작업 폴더를 만들고 그 안에서 도구를 켭니다.
• 도구가 무엇을 할 수 있고 무엇을 못 하는지 압니다.
• 시키기 전에 계획을 먼저 보는 습관을 들입니다.
• 무엇을 설치하나
• 설치하기
• 작업 폴더 만들기
• 처음 켜기
• 시키기 전에 계획을 봅니다
• 안 될 때
• 점검표

두 시간 · 7개 절

• 빈 폴더에서 웹사이트 뼈대를 만듭니다.
• 브라우저에 내 화면을 띄웁니다.
• 1장에서 그린 스케치를 그대로 시켜 봅니다.
• 마음에 안 드는 것을 말로 고칩니다.
• 뼈대 만들기
• 브라우저에 띄우기
• 첫 화면을 내 것으로
• 마음에 안 들면
• 오류가 났을 때
• 오늘 한 것을 남기기
• 점검표

두 시간 · 6개 절

• 만든 것을 깃허브에 올려 안전하게 보관합니다.
• Vercel 로 인터넷에 올려 주소를 만듭니다.
• 고치면 자동으로 반영되게 만듭니다.
• 사무소 사이트에 맞는 요금제를 고릅니다.
• 왜 두 단계인가
• 깃허브에 올리기
• Vercel 로 띄우기
• 고치면 자동으로 반영되게
• 요금제 — 반드시 읽으십시오
• 점검표

두 시간 · 6개 절

• 도메인을 사고 사이트에 붙입니다.
• 파비콘을 만들어 브라우저 탭에 띄웁니다.
• 로고를 글자로 만듭니다. 디자인 파일이 없어도 됩니다.
• 검색 결과와 카톡 링크에 뜨는 모양을 정합니다.
• 도메인 고르기
• 도메인 붙이기
• 파비콘 만들기
• 로고 만들기
• 검색과 링크에 뜨는 모양
• 점검표

세 시간 · 6개 절

• 페이지를 늘리고 각각의 주소를 갖게 합니다.
• 모든 쪽에 공통으로 뜨는 메뉴를 만듭니다.
• 휴대전화에서 깨지지 않게 합니다.
• 소개·업무분야·오시는 길을 채웁니다.
• 페이지가 늘어나는 방식
• 메뉴 만들기
• 휴대전화에서 보기
• 페이지 채우기
• 만들면서 지킬 것
• 점검표

두 시간 반 · 5개 절

• 사진을 넣고 알맞은 크기로 줄입니다.
• 사진이 없을 때 어떻게 하는지 압니다.
• 글을 읽기 쉽게 다듬습니다.
• 전문직 광고 규정에 걸리는 표현을 걸러 냅니다.
• 사진 넣기
• 사진이 없을 때
• 글 다듬기
• 걸러 내야 할 표현
• 점검표

두 시간 · 6개 절

• 잘못됐을 때 되돌립니다.
• 내보내기 전 점검 목록을 씁니다.
• 느려졌을 때 어디를 볼지 압니다.
• 앞으로 무엇을 할지 정합니다.
• 되돌리기
• 무엇이 바뀌었는지 보기
• 느려졌을 때
• 내보내기 전 점검
• 앞으로
• 기초편 점검표