OPENCOURSE바이브 코딩으로 배우는 Flutter 첫걸음

챕터 1 / 5

바이브 코딩이란

예상 50분 · 소단원 3

영상을 준비하고 있어요

브라우저에서 조립해 재생해요 — 보통 몇 초면 끝나요

1.1AI와 함께 만든다는 것

코딩이라고 하면 검은 화면에 알 수 없는 글자를 빠르게 치는 모습을 떠올리기 쉬워요. 그래서 시작하기도 전에 겁부터 나요. 하지만 이 교재에서 하는 코딩은 달라요. 우리는 코딩을 대화로 하는 조립처럼 해 볼 거예요. 원하는 것을 말로 설명하면 부품이 만들어지고, 그 부품을 맞춰 보며 앱을 완성해요. 복잡한 것을 한 번에 만들지 않아요. 작은 조각을 하나씩 맞춰 가요.

이런 방식을 바이브 코딩이라고 불러요. 만들고 싶은 것을 말로 설명하면 AI 코딩 도구가 코드를 만들어 줘요. 코드는 컴퓨터에게 내리는 지시문이에요. 사람은 그 결과를 읽어 보고, 마음에 들지 않는 부분을 고쳐 달라고 다시 말해요. 정리하면 사람과 AI 코딩 도구, 앱의 관계는 이래요. 사람이 방향을 정하고, AI 도우미가 코드를 쓰고, 그 코드가 앱이 돼요.

사람이 원하는 화면을 말로 설명하면 AI 코딩 도구가 코드를 만들고 그 코드가 앱이 되는 관계를 나타낸 그림. 학습자는 결과를 읽고 확인한 뒤 고쳐 달라고 다시 말하는 화살표로 되돌아간다.
그림 1 — 말로 부탁하고 읽고 고치는 바이브 코딩의 순환을 한눈에 보게 한다

프로그래밍 경험이 없어도 시작할 수 있는 이유가 여기에 있어요. 첫 코드를 쓰는 일은 AI가 대신해 줘요. 그래서 학습자가 처음부터 문법을 외울 필요가 없어요. 문법은 프로그래밍 언어의 쓰기 규칙이에요. 타자가 느려도, 수학이 어려워도 괜찮아요. 우리말로 원하는 것을 차근차근 설명할 수 있다면, 이미 시작할 준비가 된 거예요.

그렇다고 배울 것이 없다는 뜻은 아니에요. AI가 만든 코드가 늘 정답은 아니에요. 엉뚱한 화면이 나오기도 하고, 요청과 다른 결과가 나오기도 해요. 그때 코드를 읽고 어디가 이상한지 판단하는 사람은 학습자예요. 이 교재의 목표가 바로 그 힘이에요. 코드를 처음부터 끝까지 혼자 쓰는 힘이 아니라, AI가 쓴 코드를 읽고 판단해서 더 나은 방향으로 이끄는 힘이요. 틀린 부분을 발견하고 고쳐 달라고 말하는 것도 훌륭한 코딩이에요. 그 힘은 대화를 반복할수록 조금씩 자라요.

1.2이 교재의 사용법

이 교재는 다섯 개의 챕터로 이어져요. 먼저 바이브 코딩이 무엇인지 알아보고, 첫 프로젝트를 만들어요. 그다음에는 화면을 이루는 부품(Flutter에서는 위젯이라고 불러요)이 어떻게 쌓여 화면이 되는지 배워요. 이어서 상태로 움직이는 화면을 만들고, 마지막에 나만의 카드 앱을 완성해요. 앞에서 만든 것이 다음 챕터의 재료가 돼요. 그래서 순서대로 읽는 것을 권해요.

각 챕터는 같은 흐름으로 진행돼요. 먼저 읽고, 그다음 그려 보고, 마지막에 실습해요. 읽기에서는 개념을 익혀요. 그려 보기에서는 방금 읽은 내용을 종이에 손으로 정리해요. 그림 실력은 필요 없어요. 네모와 화살표면 충분해요. 손으로 그려 보면 이해한 부분과 아직 흐릿한 부분이 구분돼요. 실습에서는 직접 앱을 만지며 확인해요.

챕터 첫머리에는 90초짜리 개요 영상이 있어요. 본문을 읽기 전에 먼저 보세요. 이 영상은 챕터 전체의 지도를 그려 주는 용도예요. 한 번에 다 이해하려고 애쓰지 않아도 돼요. 흐름만 눈에 담으면 충분해요. 지도를 먼저 보면 지금 읽는 부분이 어디쯤인지 알 수 있어요.

읽다가 막히면 화면 오른쪽 아래의 도우미를 눌러 보세요. 도우미는 질문에 답해 주는 AI예요. 지금 읽고 있는 문장을 그대로 붙여 넣고 물어봐도 괜찮아요. 질문을 멋지게 다듬을 필요는 없어요. 도우미와의 대화는 평가나 성적에 쓰이지 않아요. 그러니 모른다는 사실을 숨기지 말고 편하게 물어보세요.

마지막으로 부탁이 하나 있어요. 실습을 건너뛰지 마세요. 글을 읽기만 하면 다 아는 것 같은 기분이 들기 쉬워요. 하지만 손을 움직이면 어디서 막히는지가 드러나요. 그 막히는 지점이 진짜 배움이 시작되는 자리예요. 자전거를 책으로만 배운 사람이 안장에 오르면 흔들리듯, 코딩도 읽기만 해서는 실전에서 흔들려요. 조금 서툴러도 직접 만들어 본 학습자가 결국 더 멀리 가요.

1.3준비물 확인

공부를 시작하기 전에 필요한 것들을 확인해요. 준비물은 생각보다 단출해서, 노트북과 인터넷과 시간 이 세 가지면 돼요.

첫 번째 준비물은 노트북이에요. 지금 쓰고 있는 것이면 충분해요. 윈도우도 맥도 모두 괜찮아요. 최신 기종일 필요는 없어요. 저장 공간은 여유가 있으면 좋아요.

두 번째 준비물은 인터넷이에요. 바이브 코딩은 AI 코딩 도구와 대화를 주고받으며 진행돼요. 이 대화가 인터넷을 타고 오가요. 그래서 안정적으로 접속할 수 있는 환경이 필요해요. 학교나 집의 와이파이면 충분해요.

세 번째 준비물은 시간이에요. 코딩은 눈으로만 읽으면 늘지 않아요. 직접 만들어 보는 시간이 쌓여야 해요. 한 번에 오래 하기보다 짧게 자주 하는 편이 좋아요.

설치가 걱정되는 학습자도 있을 거예요. 걱정하지 않아도 괜찮아요, 처음에는 아무것도 설치하지 않고 시작할 수 있거든요. Flutter에는 브라우저에서 바로 코드를 써 보고 결과를 확인할 수 있는 공식 온라인 연습장이 있는데, 그 연습장의 이름이 DartPad예요. 프로그램을 깔지 않고 코드를 쓰고 결과를 확인하는 웹 페이지예요. 그림을 본격적으로 그리기 전에 쓰는 낙서장 같은 거예요. 인터넷 검색창에 DartPad라는 이름만 치면 이 연습장을 찾을 수 있어요.

AI 코딩 도구도 필요해요. 이런 도구는 종류가 여러 가지라 뭘 고를지 어려울 수 있어요. 고민하지 않아도 돼요. 수업에서 안내하는 AI 코딩 도구를 그대로 쓰면 돼요. 도구마다 이름은 달라도 쓰는 방법은 비슷해요.

아래 목록에 모두 표시할 수 있으면 준비 끝이에요.

  • 내 노트북이 있다 (윈도우·맥 모두 가능)
  • 인터넷에 안정적으로 접속할 수 있다
  • 브라우저에서 온라인 연습장을 열어 봤다
  • 코딩 연습에 쓸 시간을 매주 얼마나 낼지 정해 두었다

이제 다음 챕터에서 첫 프로젝트를 함께 만들어 봐요.