AI 코딩으로 첫 웹앱을 만들어본 지 한 달, 달라진 것

• 목록
• 답변
• 글쓰기
• 옵션
  • 수정
  • 삭제

코딩 문법을 거의 모르는 상태에서 AI에게 “웹앱 하나 만들어 줘”라고 입력하면 그럴듯한 화면은 금방 나옵니다. 문제는 버튼이 작동하지 않거나 오류가 발생했을 때입니다. 어디를 고쳐야 하는지 몰라 대화를 처음부터 다시 시작하면, 조금 전까지 되던 기능마저 사라지곤 합니다.

저도 첫 주에는 AI가 생성한 코드를 복사하는 데 집중했습니다. 한 달 동안 작은 할 일 관리 웹앱을 직접 만들고 고쳐 보니, AI 코딩의 핵심은 코드를 많이 받는 것이 아니라 작업을 작게 나누고 결과를 확인하는 습관에 있었습니다. 초보자가 첫 프로젝트에서 무엇부터 배우면 되는지 실제 진행 순서에 맞춰 풀어보겠습니다.

첫 주에는 앱보다 작업 지도를 먼저 만들었습니다

한 문장 아이디어를 기능 목록으로 바꾸기

처음 정한 목표는 “할 일을 기록하는 웹앱”이었습니다. 그대로 AI 코딩 도구에 입력했더니 로그인, 달력, 통계, 알림까지 한꺼번에 제안했습니다. 보기에는 풍성했지만 오류가 난 지점을 찾기 어려웠고, 기능끼리 연결되는 방식도 이해할 수 없었습니다.

그래서 목표를 오늘 할 일을 입력하고, 완료 표시하고, 다시 접속해도 남아 있는 앱으로 줄였습니다. 이 문장에는 입력, 목록 표시, 완료 상태, 데이터 저장이라는 네 가지 기능만 들어갑니다. 초보자라면 멋진 서비스 설명보다 사용자가 실제로 누르는 순서를 적는 편이 훨씬 유용합니다.

• 사용자: 혼자 사용하는 사람 한 명으로 제한합니다.
• 핵심 행동: 할 일 추가, 완료, 삭제 세 가지부터 정합니다.
• 저장 범위: 처음에는 브라우저 내부 저장소를 사용합니다.
• 완료 기준: 새로고침해도 목록이 유지되면 첫 버전이 끝난 것으로 봅니다.

AI에게 한 번에 맡기지 않은 이유

AI에게는 “전체 앱을 완성해 줘” 대신 “아직 코드를 작성하지 말고 필요한 화면과 데이터만 목록으로 제안해 줘”라고 요청했습니다. 제안된 내용을 읽고 불필요한 회원가입과 알림 기능을 제외한 뒤, 한 단계씩 구현했습니다. 설계 요청과 코드 작성 요청을 분리하자 대화가 짧아지고 수정 범위도 분명해졌습니다.

처음 만드는 앱의 좋은 기준은 기능 수가 아니라, 내가 처음부터 끝까지 동작을 설명할 수 있는가입니다.

AI 코딩 도구와 개발 환경은 최소 구성으로 시작했습니다

초보자에게 필요한 네 가지

도구를 많이 설치하면 더 전문적으로 느껴지지만, 초반에는 오류 원인만 늘어날 수 있습니다. 제가 실제로 필요했던 것은 코드 편집기, AI 코딩 도구, 웹 브라우저, 버전 관리 도구뿐이었습니다. 특정 제품보다 중요한 것은 파일을 열고, 실행하고, 변경 사항을 되돌릴 수 있는 흐름입니다.

웹앱 기술도 HTML, CSS, JavaScript부터 시작했습니다. 프레임워크는 반복 작업을 줄여 주지만 폴더 구조와 빌드 과정이 추가됩니다. 버튼 클릭과 데이터 저장 원리를 아직 모른다면, 기본 기술로 작은 결과를 만든 뒤 프레임워크로 옮기는 편이 이해하기 쉽습니다.

• 코드 편집기: 프로젝트 폴더와 파일 내용을 확인합니다.
• AI 도구: 설명, 코드 초안, 오류 분석을 요청합니다.
• 브라우저 개발자 도구: 화면 오류와 콘솔 메시지를 확인합니다.
• Git: 정상 작동하던 시점으로 돌아갈 기록을 남깁니다.

무료와 유료를 고르는 현실적인 기준

입문 단계에서는 무료 플랜이나 사용량 제한이 있는 체험 범위로도 작은 프로젝트를 진행할 수 있습니다. 다만 서비스별 요금과 제공량은 자주 바뀌므로 가입 화면에서 현재 조건을 확인해야 합니다. 유료 구독은 답변이 좋을 것이라는 기대보다, 매일 사용하는 빈도와 긴 대화가 필요한지를 기준으로 판단하는 것이 안전합니다.

일주일에 한두 번 연습한다면 먼저 무료 범위에서 작업 방식을 익혀 보세요. 반대로 매일 여러 파일을 함께 수정하고 사용량 제한 때문에 흐름이 자주 끊긴다면 그때 유료 플랜을 검토해도 늦지 않습니다. 초보자에게 가장 비싼 비용은 구독료보다 이해하지 못한 코드를 계속 쌓아 다시 만드는 시간입니다.

기능 하나를 요청하고 세 번 확인하니 오류가 줄었습니다

요청은 목적·조건·완료 기준으로 적기

“예쁘게 만들어 줘”나 “오류를 고쳐 줘”는 AI가 추측해야 할 부분이 많습니다. 저는 요청을 목적, 현재 상태, 변경 조건, 완료 기준의 순서로 바꿨습니다. 예를 들어 “할 일 추가 버튼을 만들어 줘. 기존 삭제 기능은 유지하고, 빈 입력은 저장하지 않으며, 추가 후 입력창을 비워 줘”라고 쓰는 방식입니다.

이렇게 요청하면 AI가 수정해야 할 범위와 건드리지 말아야 할 기능을 함께 알 수 있습니다. 코드를 받았을 때도 무엇을 시험해야 하는지가 보입니다. 질문이 길어지는 것이 걱정된다면 배경 설명을 늘리기보다 변경하면 안 되는 조건과 성공 기준을 선명하게 적는 편이 좋습니다.

1. AI가 수정할 파일과 변경 이유를 먼저 설명하게 합니다.
2. 코드를 적용한 뒤 요청한 기능을 직접 실행합니다.
3. 기존의 추가·완료·삭제 기능도 다시 눌러 봅니다.
4. 정상이라면 Git에 작은 단위로 기록을 남깁니다.

눈으로 보기, 콘솔 보기, 새로고침하기

첫 번째 확인은 화면입니다. 글자가 겹치지 않는지, 모바일 너비에서도 버튼을 누를 수 있는지 살펴봅니다. 두 번째는 브라우저 콘솔입니다. 화면이 멀쩡해 보여도 빨간 오류가 남아 있다면 다음 기능을 붙이기 전에 원인을 해결해야 합니다.

세 번째는 새로고침과 재접속입니다. 할 일 목록처럼 저장이 필요한 기능은 현재 화면에서만 보이는 것으로는 충분하지 않습니다. 데이터를 입력하고 새로고침한 뒤 남아 있는지, 삭제한 항목이 되살아나지 않는지 확인해야 합니다. 이 세 번의 확인을 습관으로 만들자 한 기능을 고친 뒤 다른 기능이 망가지는 일이 눈에 띄게 줄었습니다.

코드를 몰라도 설명을 요구하니 수정이 쉬워졌습니다

복사하기 전에 세 가지를 물었습니다

AI가 긴 코드를 제시하면 초보자는 일단 붙여 넣고 싶어집니다. 하지만 코드가 작동하지 않을 때 다시 질문할 근거가 사라집니다. 저는 적용 전에 “어느 파일에 넣는가”, “기존 코드 중 무엇을 바꾸는가”, “사용자가 클릭하면 어떤 순서로 실행되는가”를 물었습니다.

설명을 들은 뒤에는 변수 이름과 함수 이름을 살펴봤습니다. 모든 문법을 외울 필요는 없지만, 할 일 목록을 담는 값과 화면에 그리는 함수 정도는 구분할 수 있어야 합니다. 코드 한 줄씩 번역해 달라고 하기보다 데이터가 이동하는 흐름을 설명해 달라고 요청하면 전체 구조를 더 빨리 이해할 수 있습니다.

• 이 함수가 받는 입력과 내보내는 결과는 무엇인지 묻습니다.
• 사용자 데이터가 어느 위치에 저장되는지 확인합니다.
• 이 코드를 제거하면 어떤 기능이 멈추는지 질문합니다.
• 같은 기능을 더 단순하게 구현할 수 있는지 비교합니다.

보안은 배포 직전에 붙이는 기능이 아닙니다

연습용 웹앱이라도 비밀번호나 API 키를 코드에 직접 적어 공개 저장소에 올리면 안 됩니다. 외부 서비스 키는 환경 변수로 분리하고, 사용자가 입력한 내용은 그대로 HTML로 실행되지 않도록 처리해야 합니다. 코드와 정보를 보호하는 기본 개념은 코드 보안 용어 설명을 함께 읽으면 범위를 이해하는 데 도움이 됩니다.

AI가 생성한 패키지를 설치할 때도 이름과 공식 문서를 확인해야 합니다. 존재하지 않거나 이름이 비슷한 패키지를 제안할 가능성을 염두에 두고, 설치 목적을 먼저 설명하게 하세요. 공개 배포 전에는 비밀값 노출, 입력값 처리, 외부 라이브러리 출처를 점검하고 코드 보안 핵심 내용도 참고할 수 있습니다.

AI가 “안전합니다”라고 말한 것은 검증 결과가 아닙니다. 어떤 위험을 어떤 방식으로 막았는지 코드와 실행 결과로 확인해야 합니다.

한 달 동안 가장 자주 막혔던 질문에 답해 봤습니다

초보자가 실제로 묻는 AI 코딩 FAQ

Q. 코딩을 전혀 몰라도 시작할 수 있나요?
시작은 가능하지만, 파일과 폴더의 차이, 브라우저에서 코드가 실행되는 방식, 오류 메시지를 복사하는 방법은 일찍 익혀야 합니다. AI가 만든 결과를 평가하려면 최소한의 기준이 필요합니다. 하루에 문법을 많이 외우기보다 작은 기능 하나의 흐름을 말로 설명하는 연습이 효과적입니다.

Q. 처음부터 React 같은 프레임워크를 사용해야 하나요?
목표에 따라 다릅니다. 취업용 프로젝트나 팀 개발을 준비한다면 필요할 수 있지만, 첫 화면과 버튼 동작을 배우는 단계라면 기본 HTML·CSS·JavaScript가 더 투명합니다. 기본 앱을 한 번 완성한 뒤 같은 기능을 프레임워크로 다시 만들어 보면 차이가 분명하게 보입니다.

• Q. AI 답변이 계속 바뀌면? 현재 파일 내용과 실제 오류 메시지를 다시 제공하고, 한 번에 하나의 수정안만 요청합니다.
• Q. 영어로 질문해야 하나요? 한국어로 충분합니다. 다만 오류 문구, 함수명, 파일명은 번역하지 않고 원문 그대로 전달합니다.
• Q. 코드를 전부 다시 만들어도 되나요? 초기 실험에서는 가능하지만, 기능이 늘어난 뒤에는 문제 구간만 수정해야 기존 동작을 지킬 수 있습니다.
• Q. 언제 배포하면 되나요? 핵심 동작과 모바일 화면을 확인하고, 비밀키와 개인정보가 포함되지 않았을 때 작은 테스트 버전을 배포합니다.

AI가 해결하지 못할 때 질문을 바꾸는 법

같은 오류를 두세 번 수정했는데도 해결되지 않으면 “다시 고쳐 줘”라고 반복하지 않았습니다. 대신 재현 순서, 기대한 결과, 실제 결과, 콘솔 오류, 직전에 바꾼 파일을 묶어서 전달했습니다. 그리고 코드를 즉시 작성하지 말고 원인 후보를 세 가지로 나누어 진단하게 했습니다.

그래도 막힌다면 변경 전 버전으로 돌아가 기능을 더 작은 단계로 나눕니다. 예를 들어 저장이 안 될 때 화면 표시와 저장 기능을 동시에 고치지 말고, 먼저 브라우저 저장소에 값이 들어가는지만 확인합니다. 문제를 작게 재현하는 능력은 AI 코딩뿐 아니라 일반 개발에서도 오래 쓰이는 기본기입니다.

지금 20분 동안 ‘할 일 한 줄’부터 작동시켜 보세요

설치보다 먼저 완성 경험 만들기

이제 새 도구를 더 찾아보기보다 아주 작은 결과를 만들어 볼 차례입니다. 빈 폴더에 HTML 파일 하나를 만들고, 입력창과 추가 버튼, 목록 영역만 구현해 보세요. 디자인, 로그인, 데이터베이스는 잠시 제외합니다. 목표는 사용자가 입력한 한 문장이 버튼을 누른 뒤 화면 목록에 나타나는 것입니다.

AI에게 아래 순서대로 요청하면 작업 범위가 흔들리지 않습니다. 각 단계가 끝날 때 브라우저에서 직접 눌러 보고, 작동한 코드는 별도로 저장하세요. 첫 단계가 실패했다면 다음 기능을 추가하지 말고 콘솔 오류와 현재 코드로 원인을 좁혀야 합니다.

1. “HTML 파일 하나로 입력창, 추가 버튼, 빈 목록을 만들고 각 영역의 역할을 설명해 줘”라고 요청합니다.
2. 화면이 열리면 “버튼 클릭 시 입력값을 목록 한 줄로 추가하되 빈 값은 거부해 줘”라고 요청합니다.
3. 추가 기능이 되면 같은 동작을 세 번 반복하고, 긴 문장과 공백만 있는 입력도 시험합니다.
4. 마지막으로 “현재 코드를 초보자 관점에서 설명하고 다음에 추가할 기능을 하나만 추천해 줘”라고 묻습니다.

오늘 남겨야 할 한 문장 기록

작업을 끝낸 뒤에는 “무엇을 만들었는지”보다 “어디까지 직접 확인했는지”를 기록하세요. 예를 들면 입력창에 문장을 넣고 추가 버튼을 눌렀을 때 목록에 표시되는 것까지 확인함이라고 적을 수 있습니다. 이 한 문장이 다음 AI 대화의 출발점이자 프로젝트의 현재 상태가 됩니다.

지금 타이머를 20분으로 맞추고 첫 요청을 그대로 입력해 보세요. 시간이 끝났을 때 화면이 완벽하지 않아도 괜찮습니다. 입력한 한 줄이 목록에 나타나고 그 과정을 자신의 말로 설명할 수 있다면, AI가 대신 만든 결과물이 아니라 직접 통제할 수 있는 첫 웹앱이 시작된 것입니다.