첫 프로젝트 만들기

이번 챕터에서는 첫 프로젝트를 만들어요. 그 전에 프로젝트가 어떻게 생겼는지 먼저 구경해요.

Flutter는 구글이 만든 앱 제작 도구예요. 코드를 한 번만 쓰면 스마트폰, 태블릿, 컴퓨터에서 모두 도는 앱을 만들 수 있어요. 코드 하나로 여러 기기의 앱을 만든다는 이 특징은 Flutter 공식 문서가 가장 먼저 소개하는 내용이기도 해요.

프로젝트라는 말부터 풀어 볼게요. 앱 하나는 파일 하나로 만들어지지 않아요. 여러 파일이 모여 앱 하나가 돼요. 이 파일들을 한 폴더에 모아 둔 묶음이 프로젝트예요. 폴더는 파일을 담는 상자라고 생각하면 돼요.

새 프로젝트를 열면 폴더와 파일이 잔뜩 보여요. 처음 보면 겁이 날 수 있지만, 전부 알 필요가 없으니 괜찮아요. 우리가 기억할 곳은 딱 하나예요. lib 폴더 안의 main.dart 파일이에요. 앱의 화면과 동작을 정하는 코드가 여기에 있어요. 우리가 읽고, AI 코딩 도구에게 고쳐 달라고 말할 파일도 바로 이 파일이에요. main.dart라는 이름은 Flutter가 쓰는 프로그래밍 언어 Dart에서 왔어요. 앞 챕터에서 연습장으로 소개한 DartPad의 그 Dart예요.

위 그림은 프로젝트 폴더의 지도예요. 지도의 몇 곳만 더 짚어 볼게요. pubspec.yaml이라는 파일은 앱의 이름표이자 재료 목록이에요. 앱의 이름과, 앱이 빌려 쓰는 재료들이 적혀 있어요. android나 ios 같은 폴더는 각 기기에 맞춰 앱을 포장하는 방이에요. 지금은 문을 열지 않아도 돼요. 이 포장하는 방들은 Flutter가 알아서 관리하거든요.

다 이해하지 못해도 괜찮아요. 낯선 도시에서 지도를 볼 때도 모든 골목을 외우는 대신 내 위치만 알면 길을 잃지 않아요. 이 프로젝트에서 우리의 위치는 lib/main.dart예요. 여기만 기억하면 돼요.

2.1에서 lib/main.dart가 앱의 시작점이라는 걸 봤어요. 이제 그 파일에 들어갈 첫 화면을 AI에게 부탁해 볼 차례예요. AI에게 건네는 부탁의 문장을 프롬프트라고 해요. 우리는 말로 설명해요. AI 코딩 도구는 그 말을 코드로 바꿔 줘요.

그런데 부탁에도 요령이 있어요. "앱 만들어 줘"는 아쉬운 부탁이에요. AI가 무엇을 만들어야 할지 알 수 없거든요. 좋은 부탁은 화면에 무엇이, 어디에 보일지 말해 줘요. 좋은 부탁의 예를 하나 들어 볼게요.

화면 위쪽에 '나의 첫 앱'이라는 제목 막대가 있고, 가운데에 '안녕, Flutter!' 인사말이 보이는 화면을 만들어 줘.

이 부탁에는 무엇('나의 첫 앱' 제목 막대, 인사말)과 어디(위쪽, 가운데)가 함께 들어 있어요. 이런 부탁을 받으면 AI는 lib/main.dart에 넣을 코드를 돌려줘요. 단순하게 줄이면 이런 모양이에요.

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('나의 첫 앱')),
        body: Center(child: Text('안녕, Flutter!')),
      ),
    ),
  );
}

한 줄로 풀면, runApp은 "이 내용으로 앱을 시작해"라는 지시고, 그 괄호 안이 화면에 보일 것들이에요.

코드가 낯설어 보여도 괜찮아요. 지금은 전부 읽지 않아도 돼요. 첫 읽기 요령 하나만 기억해요. 받은 코드에서 따옴표 안의 우리말만 먼저 찾아보는 거예요. 우리가 부탁에 넣었던 '나의 첫 앱'과 '안녕, Flutter!'라는 말이 방금 받은 코드 속에 그대로 보이죠? 우리가 부탁한 말이 그대로 들어가 있어요. 부탁과 코드가 이렇게 이어진다는 것만 확인하면 충분해요.

이제 받은 코드를 진짜 화면으로 만들어 볼 차례예요. 실행이란 코드를 컴퓨터가 읽어서 화면으로 바꾸는 일이에요. 우리가 준비한 설계도를 컴퓨터가 그림으로 옮기는 셈이죠. 코드는 실행해 보기 전까지는 그냥 글자예요. 실행해야 비로소 앱이 돼요.

DartPad에서 이렇게 해 보세요.

1. 2.2에서 받은 코드를 전부 복사해요. 일부만 복사하지 말고 처음부터 끝까지 전부 복사해요.
2. DartPad의 코드 칸에 있던 내용을 모두 지워서 빈칸으로 만들어요. 그 자리에 복사한 코드를 붙여 넣어요.
3. 실행 단추를 눌러요. 잠시 기다리면 오른쪽에 결과 화면이 나타나요.

화면이 떴다면 축하해요 — 여러분의 첫 앱이 방금 태어났어요.

그런데 여기서 끝이 아니에요. 바이브 코딩의 기본 습관은 부탁한 것과 나온 것을 대조하는 거예요. 우리가 AI에게 부탁했던 내용을 하나씩 확인해요.

• 화면 위쪽에 우리가 부탁한 "나의 첫 앱" 제목이 있나요?
• 화면 가운데에 인사말이 보이나요?

하나라도 다르면 AI 코딩 도구에게 다시 말해서 고치면 돼요. 이렇게 대조하는 눈이 곧 실력이에요.

실행이 안 될 때는 두 가지를 순서대로 해 보세요.

1. 코드를 전부 지우고 처음부터 다시 붙여 넣어요. 실행이 안 되는 가장 흔한 원인이, 코드가 반쯤만 복사되어 붙는 것이거든요.
2. 그래도 안 되면 빨간 글씨로 나온 오류 문구를 그대로 복사해요. 그리고 AI 코딩 도구에게 "이 오류가 났어요, 고쳐 주세요"라고 되물어요. 오류 문구는 어렵게 보여도 사실 읽으라고 있는 안내문이에요. 무슨 뜻인지 몰라도 괜찮아요. 그대로 옮겨 주는 것만으로 충분해요.

부탁하고, 실행하고, 대조하기. 이 세 걸음이 바이브 코딩의 한 바퀴예요. 오늘 그 첫 바퀴를 직접 돌려 본 거예요.