셀프 코스

AI로 만드는 나의 첫 웹사이트

코딩 경험 없이, AI와 함께 실제로 사용할 수 있는 웹사이트와 도구를 만듭니다.

63개 절읽기 약 11시간동영상 약 9시간

목차

Part 0

시작하기 전에

Before you begin.

  1. 0.1이 책에 대하여10분 + 5분 동영상
  2. 0.2AI 시대의 개발이란15분 + 8분 동영상
  3. 0.3이 책의 사용법5분
Part 1

환경 설정

작업 공간을 준비합니다. 천천히 하세요. 이것이 기초입니다.

  1. 1.1Chrome 설치5분 + 5분 동영상
  2. 1.2Cursor 설치 (Windows)10분 + 10분 동영상
  3. 1.3Cursor 화면 구성10분 + 8분 동영상
  4. 1.4터미널 기초10분 + 10분 동영상
  5. 1.5Node.js 설치10분 + 8분 동영상
  6. 1.6GitHub 계정 생성8분 + 6분 동영상
  7. 1.7Vercel 계정 생성8분 + 5분 동영상
  8. 1.8첫 배포10분 + 12분 동영상
Part 2

첫 번째 웹사이트

나의 첫 웹사이트. 자기소개 페이지를 만듭니다.

  1. 2.1AI에게 요청하기10분 + 10분 동영상
  2. 2.2실행하고 확인하기8분 + 8분 동영상
  3. 2.3내용 수정하기10분 + 10분 동영상
  4. 2.4디자인 조정하기10분 + 8분 동영상
  5. 2.5모바일 대응8분 + 8분 동영상
  6. 2.6배포하기10분 + 10분 동영상
Part 3

기본 개념 이해

외울 필요는 없습니다. AI에게 더 정확하게 요청하기 위해 알아두는 것입니다.

  1. 3.1HTML — 구조12분 + 8분 동영상
  2. 3.2CSS — 스타일12분 + 8분 동영상
  3. 3.3JavaScript — 동작12분 + 8분 동영상
  4. 3.4React와 컴포넌트12분 + 10분 동영상
  5. 3.5더 정확하게 요청하는 법10분 + 8분 동영상
Part 4

프로젝트 1 — 우리 가게 홈페이지

실제 사업용 웹사이트. 메뉴, 위치, 영업시간, 연락처. 고객에게 바로 보여줄 수 있는 것.

  1. 4.1기획10분 + 8분 동영상
  2. 4.2프로젝트 생성10분 + 10분 동영상
  3. 4.3메인 페이지12분 + 12분 동영상
  4. 4.4메뉴/서비스 페이지12분 + 12분 동영상
  5. 4.5오시는 길 (카카오맵)10분 + 10분 동영상
  6. 4.6연락처10분 + 8분 동영상
  7. 4.7영업시간과 공지8분 + 8분 동영상
  8. 4.8네이버 검색 등록10분 + 10분 동영상
  9. 4.9배포10분 + 8분 동영상
Part 5

데이터베이스 기초

정보를 저장하고 불러오기. 클라우드에 있는 구조화된 엑셀 시트라고 생각하세요.

  1. 5.1데이터베이스란10분 + 8분 동영상
  2. 5.2Supabase 설정10분 + 10분 동영상
  3. 5.3테이블 만들기10분 + 10분 동영상
  4. 5.4데이터 다루기10분 + 10분 동영상
  5. 5.5웹사이트와 연결하기12분 + 12분 동영상
  6. 5.6입력 폼 만들기12분 + 12분 동영상
Part 6

프로젝트 2 — 예약 시스템

온라인 예약 페이지. 미용실, 식당, 병원, 또는 수업 접수용.

  1. 6.1기획8분 + 5분 동영상
  2. 6.2예약 폼12분 + 12분 동영상
  3. 6.3데이터 저장12분 + 12분 동영상
  4. 6.4관리자 페이지12분 + 12분 동영상
  5. 6.5확인과 취소10분 + 10분 동영상
  6. 6.6이메일 알림10분 + 10분 동영상
  7. 6.7카카오톡 알림10분 + 10분 동영상
  8. 6.8배포와 운영10분 + 8분 동영상
Part 7

프로젝트 3 — 업무 자동화 도구

반복 업무를 줄여주는 도구를 만듭니다.

  1. 7.1자동화할 업무 찾기8분 + 5분 동영상
  2. 7.2기본 구조 만들기12분 + 12분 동영상
  3. 7.3입력 화면10분 + 10분 동영상
  4. 7.4처리 로직12분 + 12분 동영상
  5. 7.5결과물 출력10분 + 10분 동영상
  6. 7.6배포와 활용8분 + 8분 동영상
Part 8

문제 해결

문제는 생기게 마련입니다. 차분하게 대처하는 방법.

  1. 8.1에러 메시지 읽기10분 + 8분 동영상
  2. 8.2AI로 해결하기10분 + 8분 동영상
  3. 8.3자주 만나는 에러 10가지15분
  4. 8.4되돌리기10분 + 8분 동영상
Part 9

다듬기

프로젝트를 더 좋게 만들기.

  1. 9.1디자인 개선10분 + 10분 동영상
  2. 9.2기능 추가10분 + 10분 동영상
  3. 9.3속도 개선8분 + 8분 동영상
  4. 9.4도메인 연결10분 + 10분 동영상
  5. 9.5유지보수8분 + 5분 동영상
Part 10

마치며

다음 단계.

  1. 10.1정리10분 + 5분 동영상
  2. 10.2더 만들어볼 것들10분
  3. 10.3AI 스크린 튜터 소개5분 + 5분 동영상