AI 코딩 시작하기: 비개발자 완전 로드맵 (2026) - dea:no

Table of Contents

1년 전의 저는 터미널이 뭔지도 몰랐어요

솔직히 고백하면, 2025년 초까지만 해도 저는 “터미널”이라는 단어를 들으면 공항을 떠올리는 사람이었어요. 컴퓨터 화면에 검은 창이 뜨면 뭔가 잘못된 줄 알고 바로 닫았고요.

AI 코딩 시작하기: 프로그래밍 경험 제로에서 첫 프로젝트까지 완전 로드맵 - 인포그래픽

그런 제가 지금은 Claude Code로 블로그 자동화 시스템을 운영하고, n8n으로 뉴스 큐레이션 워크플로우를 돌리고 있어요. 타로 타이머라는 웹앱도 만들어서 실제로 서비스하고 있고요. 코드를 한 줄도 직접 쓰지 못하던 사람이요.

이 글은 그래서 “나도 할 수 있을까?” 하는 분들을 위해 썼어요. 솔직한 경험담이에요. 예쁘게 포장하지 않을게요.

AI 코딩, 뭐가 달라진 건가요

예전 코딩은 프로그래밍 언어의 문법을 외우고, 한 글자라도 틀리면 에러가 나는 그런 세계였어요. 세미콜론 하나 빠뜨렸다고 30분씩 디버깅하는 거요. 솔직히 그 시절이었으면 저는 코딩 근처에도 안 갔을 거예요.

2026년의 AI 코딩은 좀 다릅니다. 핵심 차이는 이거예요:

전통 코딩: “이 버튼을 클릭하면 handleClick 함수를 호출하고, state를 업데이트하고, re-render 트리거하고…” → 구현 방법(How)을 일일이 지시
AI 코딩: “로그인 페이지 만들어줘. 비밀번호 찾기 버튼도 있어야 해.” → 원하는 결과(What)만 설명

이걸 요즘 바이브코딩(Vibe Coding)이라고 불러요. Andrej Karpathy(전 Tesla AI 리더)가 만든 용어인데, “분위기만 전달하면 AI가 알아서 코드를 짠다”는 뜻이에요. 자세한 개념은 바이브코딩 입문 가이드에 정리해뒀어요.

물론 “아무 말이나 하면 뚝딱 나온다”는 건 아니에요. 여전히 배워야 할 것들이 있어요. 다만 진입 장벽이 극적으로 낮아진 건 맞습니다.

현실적인 4주 로드맵

아래는 제가 실제로 밟은 경로를 정리한 거예요. 다만 저는 삽질을 엄청 많이 해서 실제로는 6주 넘게 걸렸어요. 여러분은 이 글을 읽었으니 좀 더 빠를 수도 있겠지만, 4주보다 더 걸려도 전혀 이상한 게 아니에요.

1주차: AI 채팅으로 코딩이 뭔지 감 잡기

별도 설치 없이, ChatGPT나 Claude 웹사이트에 들어가서 이렇게 말해보세요.

"Python으로 구구단 출력하는 코드 만들어줘"
"이 코드가 뭘 하는 건지 한 줄씩 설명해줘"
"에러가 났는데: [에러 메시지 복붙] 뭐가 잘못된 거야?"

이 단계의 목표는 딱 하나예요. “아, 코드라는 게 이런 거구나”라는 감을 잡는 것. 코드를 외울 필요도 없고, 직접 쓸 필요도 없어요. 그냥 AI한테 이것저것 시켜보는 거예요.

저는 이 단계에서 “Hello World”를 찍어보고 신기해하다가, 욕심이 나서 “쇼핑몰 만들어줘”라고 했다가 당연히 망했어요. 한 걸음씩 가세요.

2주차: AI 코드 에디터 설치하고 실제로 돌려보기

웹 채팅으로 감을 잡았으면, 이제 실제로 코드가 돌아가는 환경을 세팅할 차례예요.

가장 쉬운 시작: Bolt.new

설치가 아예 필요 없어요. 웹 브라우저에서 바로 앱을 만들 수 있는 서비스예요. “할일 목록 앱 만들어줘”라고 입력하면 코드가 생성되고 바로 미리보기가 뜹니다. 제가 처음 “와, 내가 앱을 만들었다!” 느낌을 받은 게 여기서였어요.

좀 더 본격적으로: Cursor 설치

Cursor 공식 사이트에서 현재 설치 파일과 플랜을 확인하세요. 무료·유료 한도는 자주 바뀌므로 고정 요청 횟수는 본문에 적지 않았습니다.

이 단계에서 중요한 건 작은 프로젝트를 완성하는 경험이에요. “버튼 하나 만들기” → “버튼 누르면 글자 바뀌기” → “간단한 계산기” 이런 순서로요.

3주차: 프롬프트 쓰는 법 연습

이쯤 되면 “AI한테 어떻게 말하느냐”에 따라 결과가 천차만별이라는 걸 체감하게 돼요. 프롬프트 엔지니어링 가이드에서 자세히 다뤘지만, 핵심만 말하면:

나쁜 예: "로그인 페이지 만들어줘"

좋은 예: "React + Tailwind CSS로 로그인 페이지를 만들어줘.
- 이메일/비밀번호 입력 필드
- '로그인' 버튼 (파란색)
- '비밀번호 찾기' 링크
- 모바일 반응형
- 다크 테마"

구체적으로 쓸수록 결과가 좋아져요. 이건 진짜예요.

4주차: 첫 실전 프로젝트

이제 본인이 실제로 필요한 걸 만들어볼 차례예요. 이게 가장 중요한 단계예요. 남이 시킨 과제가 아니라, 본인이 진짜 쓰고 싶은 걸 만들어야 동기부여가 됩니다.

저의 경우는 “타로 타이머”였어요. 타로 카드 리딩할 때 시간을 재는 앱인데, 앱스토어에서 마음에 드는 게 없어서 “직접 만들어볼까?” 했던 게 시작이었어요.

꼭 알아두면 좋은 기본 개념들

“AI가 다 해주는데 왜 개념을 알아야 해?”라고 생각할 수 있는데, 제 경험상 이 5가지를 모르면 AI한테 뭘 요청해야 하는지 자체를 모르게 돼요.

HTML/CSS/JavaScript — 웹의 3요소예요. HTML은 뼈대, CSS는 옷, JavaScript는 움직임이라고 생각하면 됩니다. AI가 생성하는 웹 코드의 90%가 이 세 가지 조합이에요.

API — 프로그램끼리 대화하는 방법이에요. “날씨 앱이 기상청 데이터를 가져온다” = “날씨 앱이 기상청 API를 호출한다”예요. 제 블로그 자동화도 WordPress API, Gemini API, Meta API를 연결하는 거예요. 처음에 API가 뭔지 몰라서 한참 헤맸는데, 알고 보니 그냥 “정해진 형식으로 요청 보내면 응답 돌려주는 것”이더라고요.

프론트엔드 vs 백엔드 — 프론트엔드는 눈에 보이는 화면, 백엔드는 뒤에서 데이터를 처리하는 부분이에요. 식당으로 치면 프론트엔드는 홀, 백엔드는 주방이에요.

Git — 코드 버전 관리 시스템이에요. 문서 작업할 때 “보고서_최종.docx”, “보고서_진짜최종.docx” 이런 식으로 파일을 복사하잖아요? Git은 그걸 체계적으로 해주는 도구예요. AI 코딩에서도 “이전 버전으로 되돌리기”가 가능해서 실수해도 괜찮아요.

터미널(명령줄) — 검은 화면에 텍스트로 명령을 입력하는 거예요. 무서워 보이지만 자주 쓰는 명령어는 5개 정도밖에 안 돼요:

cd 폴더이름        # 폴더 이동
ls                 # 파일 목록 보기
npm install        # 패키지 설치
python app.py      # Python 실행
git status         # Git 상태 확인

이것만 알면 시작하는 데 충분해요. 나머지는 그때그때 AI한테 물어보면 됩니다.

제가 타로 타이머 웹앱을 만든 실제 과정

이론만 늘어놓으면 와닿지 않으니까, 제 실제 경험을 공유할게요.

2025년 초에 타로 리딩용 타이머가 필요했어요. 앱스토어에서 찾아봤는데 타로에 특화된 건 없었어요. 그래서 “AI로 직접 만들어볼까?” 했던 게 시작이에요.

1일차: Claude에게 “타로 타이머 웹앱을 만들고 싶은데, 어떤 기능이 필요할지 정리해줘”라고 물어봤어요. 기능 목록이 나왔고, 그걸 기반으로 Cursor에서 코드 생성을 시작했어요.

2일차: 기본 타이머는 돌아가는데 디자인이 눈 뜨고 못 볼 수준이었어요. “신비로운 느낌의 다크 테마로 바꿔줘”라고 했더니 CSS가 확 바뀌었어요. 타로 카드 종류별로 다른 시간을 설정하는 기능도 추가했어요.

3일차: Vercel에 배포. “Vercel에 배포하는 방법 알려줘”라고 했더니 명령어 세 줄이면 끝이었어요. 실제 URL이 생기고 핸드폰에서도 들어갈 수 있을 때의 쾌감은… 코딩 모르던 사람이 본인 앱을 만들었다는 그 느낌은 직접 겪어봐야 알아요.

물론 중간에 에러도 많이 났어요. 타이머가 0초에서 멈추지 않고 마이너스로 가는 버그, 모바일에서 버튼이 화면 밖으로 나가는 문제 등등. 하지만 에러 메시지를 복사해서 AI에게 보여주면 거의 다 해결됐어요.

초보 때 제가 했던 실수들

여러분은 이 실수를 안 하면 시간을 많이 아낄 수 있을 거예요.

“쇼핑몰 전체를 한 번에 만들어달라”고 한 적 있어요. 당연히 엉망이 됐어요. “상품 목록 페이지” → “장바구니” → “결제 페이지” 식으로 쪼개서 하나씩 요청해야 해요. 한 번에 큰 걸 만들려고 하면 AI도 헷갈려하고, 나도 뭐가 잘못된 건지 파악이 안 돼요.

AI가 준 코드를 그대로 복붙만 했어요. 나중에 보안 문제가 생겼어요. 최소한 “이 코드에 보안 문제 없는지 검토해줘”라고 한 번 더 물어보세요. 1분이면 되는 일이에요.

에러 나면 바로 포기했어요. 지금 생각하면 웃기지만, 빨간 에러 메시지가 뜨면 “아 망했다” 하고 프로젝트를 접으려고 했어요. 에러 메시지를 그대로 AI에게 보여주면 거의 항상 해결책을 알려줘요. 에러는 실패가 아니라 “여기를 고치면 돼”라는 안내문이에요.

프롬프트를 한 줄로만 썼어요. “로그인 페이지 만들어줘” 이렇게요. 기술 스택, 디자인, 기능, 제약 조건을 구체적으로 쓸수록 결과가 나아져요.

학습 리소스 추천

제가 실제로 도움받은 것들만 추렸어요.

생활코딩(opentutorials.org) — 한국어, 무료. HTML/CSS/JS 기초를 가장 쉽게 설명해주는 곳이에요. 코딩을 직접 배우려는 게 아니라 “개념 이해”용으로 추천.
Bolt.new — 설치 없이 웹에서 바로 앱을 만들 수 있어요. “일단 뭔가 만들어보는 경험”을 하기에 가장 좋아요.
Cursor — AI 코드 에디터. 무료 플랜 있음. 본격적으로 프로젝트를 진행할 때 사용.
Claude Code — 터미널 기반 AI 코딩 도구. 저는 이걸로 블로그 자동화 시스템 전체를 구축했어요. 진입 장벽이 좀 있지만 익숙해지면 가장 강력해요.
freeCodeCamp — 영어지만, 체계적인 무료 코딩 강의. 기초를 탄탄히 다지고 싶을 때.

제 추천 순서: 생활코딩(기초 개념) → Bolt.new(바로 만들기) → Cursor(본격 개발) → Claude Code(고급 자동화)

자주 묻는 질문

코딩 경험이 정말 제로인데 시작해도 되나요?

시작해도 돼요. 다만 솔직히 말하면, 처음 2주는 좀 답답할 거예요. AI가 뱉는 코드가 뭔지도 모르고, 에러가 나면 뭐가 잘못된 건지도 모르니까요. 그래서 위에서 말한 기본 개념 5가지를 병행해서 공부하면 훨씬 수월해져요. “코드를 직접 짤 줄 아는 것”이 아니라 “AI에게 정확히 뭘 시킬지 아는 것”이 목표예요.

ChatGPT, Claude, Gemini 중에 뭘 써야 하나요?

2026년 3월 기준, 저의 솔직한 평가는 이래요. 코드 품질은 Claude(Opus/Sonnet)가 가장 좋아요. 특히 긴 코드를 한 번에 생성할 때 안정적이에요. GPT-5는 범용적으로 무난하고요. Gemini 2.5 Flash는 무료인데도 코딩 성능이 상당해서 가성비가 좋아요. 저는 자동화에 Gemini 무료 티어, 수동 글 작성에 Claude를 쓰고 있어요. 비용? 월 2만 원도 안 돼요. 자세한 비교는 Gemini 2.5 Flash vs GPT-5 비교 리뷰를 참고하세요.

마치며

1년 전의 저한테 “너 1년 뒤에 자동화 시스템 운영하고, 웹앱 배포하고, MCP 서버 설정하고 있을 거야”라고 했으면 절대 안 믿었을 거예요.

AI 코딩은 “새로운 문해력”이에요. 코드를 외울 필요 없어요. AI와 소통하는 법, 원하는 것을 정확하게 설명하는 법, 결과를 검토하고 피드백을 주는 법 — 이 사이클을 반복하다 보면 어느 순간 “이건 내가 만든 거다”라고 말할 수 있는 무언가가 생겨요.

첫 걸음이 가장 무거워요. 오늘 ChatGPT를 열고 아무거나 하나 물어보는 것부터 시작하세요.

AI 코딩 시작하기: 프로그래밍 경험 제로에서 첫 프로젝트까지 완전 로드맵