AI CODER / LEARNING NOTES
AI 코딩·바이브 코딩,
첫 웹 서비스까지 배우는 순서
AI로 화면을 만들었지만 어디부터 공부해야 할지 막막한가요? 할 일 목록 하나를 기준으로 기초 개념, 요청 작성, 검증, 배포까지 이어지는 학습 순서를 정리했습니다. 특정 유료 도구를 먼저 구매할 필요는 없습니다.
AI Coder 편집 · · 비전공자·입문자
1. 화면·동작·저장을 구분합니다
AI 코딩은 요구사항을 정리하거나 코드를 작성하고 오류를 찾는 과정에서 AI의 도움을 받는 개발 방식입니다. 바이브 코딩은 자연어로 원하는 결과를 설명하고 생성된 결과를 보며 반복하는 방식을 가리킬 때 자주 쓰입니다. 이 가이드에서는 어느 도구를 쓰든 결과를 직접 확인하고 수정할 수 있는 것을 학습 목표로 삼습니다.
처음에는 HTML로 제목·입력칸·버튼을 만들고, CSS로 배치와 크기를 바꾸고, JavaScript로 클릭에 반응하는 흐름부터 확인하세요. 서버와 데이터베이스는 다른 기기에서도 같은 내용을 읽거나 사용자를 구분해 저장할 때 필요합니다. 한 번에 전부 도입하기보다 지금 필요한 역할을 먼저 고르는 편이 이해하기 쉽습니다.
확인 과제: 이름을 입력하고 버튼을 누르면 인사말이 나타나는 화면을 만드세요. 이름이 비어 있을 때 보여줄 안내도 직접 정해보세요.
2. 첫 프로젝트는 한 가지 일을 끝내게 만듭니다
예약 사이트를 만들고 싶다면 첫 목표를 ‘신청한 내용을 저장하고 다시 확인한다’로 줄여보세요. 회원가입·결제·알림·통계까지 동시에 넣으면 어디서 문제가 생겼는지 찾기 어려워집니다. 작은 기능을 끝까지 완성하면 화면과 데이터가 연결되는 과정을 반복해서 배울 수 있습니다.
첫 연습으로는 할 일 목록이 적당합니다. 항목 추가, 완료 표시, 삭제를 먼저 구현하고 그다음 필터와 저장을 붙여보세요. 화면은 어떤 조각으로 나뉘는지, 어떤 값이 바뀌는지 먼저 적어두면 나중에 React의 컴포넌트와 상태를 배울 때도 연결하기 쉽습니다.
확인 과제: 만들 기능 세 가지와 이번에는 만들지 않을 기능을 적어보세요. 빈 항목을 등록할 수 있는지, 같은 이름을 허용할지도 결정하세요.
3. AI에게는 조건과 확인 방법을 함께 전달합니다
‘할 일 앱 만들어줘’만으로는 저장 방식이나 빈 입력 처리 같은 조건이 정해지지 않습니다. 사용자가 할 일, 입력값, 예상 결과, 실패 조건을 함께 적어주세요. 이미 프로젝트가 있다면 사용 중인 기술과 관련 코드, 실제 오류 메시지를 제공하되 비밀키와 사용자 정보는 제외합니다.
한 기능을 요청한 뒤에는 바뀐 파일과 이유를 확인하세요. 예상하지 않은 파일까지 바뀌었다면 다음 기능을 추가하기 전에 범위를 확인하는 편이 좋습니다. 설명이 어렵다면 실제 입력 하나가 어떤 함수를 지나 화면에 나타나는지 순서대로 따라가 달라고 요청해 보세요.
요청 예시: ‘할 일 입력칸과 추가 버튼을 만들어줘. 앞뒤 공백을 없앤 뒤 빈 값은 오류로 안내하고 입력은 유지해줘. 추가한 항목은 목록에 표시하되 아직 서버 저장은 하지 말아줘. 변경한 파일과 직접 확인할 순서를 설명해줘.’
4. 실행 성공 다음에는 실패하는 경우를 확인합니다
정상 입력 한 번으로는 기능을 확인하기 어렵습니다. 빈 값, 긴 문장, 빠른 두 번 클릭, 새로고침을 차례로 시도해 보세요. 목록 순서를 바꿨을 때 완료 표시가 다른 항목으로 옮겨가지 않는지도 확인합니다. 저장 실패 안내와 입력 유지까지 살펴야 사용자가 다시 시도할 수 있습니다.
AI가 만든 테스트가 통과해도 원래 요구사항이 빠졌을 수 있습니다. 먼저 직접 적은 성공·실패 사례와 결과를 대조하세요. 오류를 발견하면 어떤 조건에서 재현됐는지 남겨두고, 수정 후 그 조건을 다시 확인합니다. 코드 검증을 더 연습하려면 아래의 배포 전 체크리스트를 이어서 보세요.
확인 과제: 정상 입력·빈 입력·중복 클릭·새로고침의 예상 결과와 실제 결과를 각각 한 줄씩 기록하세요.
5. 공개 주소에서 처음부터 다시 사용합니다
내 컴퓨터에서 열리는 화면과 공개 서버에서 동작하는 서비스는 환경이 다를 수 있습니다. 필요한 환경 변수, 저장 위치, 실행 명령을 정리하고 배포한 주소에서 처음 방문한 사람처럼 사용해 보세요. 다른 기기에서 접속했을 때도 데이터가 남아야 한다면 브라우저 안의 저장만으로 충분한지 다시 판단해야 합니다.
로그인을 붙였다면 버튼 표시뿐 아니라 서버에서도 권한을 확인해야 합니다. API 비밀키는 브라우저에 전달하지 않고 서버에서 사용하세요. 개인정보나 결제처럼 중요한 기능은 학습용 예제와 구분해 설계·검토해야 합니다. 첫 공개는 민감한 데이터를 받지 않는 작은 기능부터 시작하는 편이 좋습니다.
완성 기준: 다른 기기에서 주소를 열고 기능을 끝까지 사용할 수 있으며, 실패했을 때의 안내와 복구 방법을 설명할 수 있습니다.
다음 학습을 고르는 기준
화면이 어떻게 동작하는지 설명하기 어렵다면 HTML·CSS·JavaScript 기초를 더 연습하세요. 목록과 입력값을 다룰 수 있다면 React로 화면을 나누고 상태를 관리하는 연습으로 이어갈 수 있습니다. 여러 사용자의 데이터를 저장해야 하는 단계에서 서버·데이터베이스·인증을 배워보세요. 기술 이름을 많이 아는 것보다 작은 기능을 설명하고 고칠 수 있는지가 다음 단계의 기준입니다.
혼자 정하기 어렵다면 현재 만든 결과물, 막힌 부분, 매주 공부할 수 있는 시간을 정리해서 상담해 보세요. 과정별 커리큘럼에서 대상과 학습 목표를 확인하고, 강사 소개에서 실제 개발·교육 경험을 살펴볼 수 있습니다.