마무리 — 나만의 카드 앱

이제 배운 것을 전부 모아 하나의 작품을 만들어요. 동그란 사진 자리 아래에 이름, 그 아래 한 줄 소개가 세로로 쌓인 프로필 카드예요. 세로로 쌓는 법은 이미 알아요. Column이 자식들을 세로로 늘어놓는 위젯이었죠.

새 위젯은 두 개만 알면 돼요. Card는 내용을 담는 카드 모양 틀이에요. CircleAvatar는 동그란 사진 자리예요. 이름이 낯설어도 역할만 기억하면 충분해요.

3장에서 익힌 습관대로 그림을 먼저 그려요. 완성 카드의 트리는 이렇게 생겼어요.

Card가 Column을 안고, Column이 세 자식을 세로로 쌓아요. 그 세 자식이 CircleAvatar와 이름 Text, 소개 Text예요. 트리를 그리고 부탁하는, 지금까지 해 온 방식 그대로예요.

실습 순서예요.

1. 위 그림을 보고 트리를 종이에 그려요. 이름과 소개 자리에는 내 이름, 내 소개를 적어요.
2. 그린 트리를 보며 AI에게 보낼 프롬프트를 직접 써요. 예를 들면 이렇게요. "동그란 사진 자리 아래에 내 이름이 굵게 보이고, 그 아래 한 줄 소개가 보이는 카드를 화면 가운데에 만들어 줘."
3. 받은 코드를 읽어요. 들여쓰기를 따라가며 Column의 자식이 셋인지 확인해요.
4. DartPad에서 실행하고 부탁한 모습과 화면을 대조해요. 다르거나 오류가 나면 문구를 복사해 되물어요.
5. 카드 내용을 내 것으로 바꿔요. 받은 코드에서 이름과 소개 글자를 직접 고쳐요. 따옴표 안의 우리말만 바꾸면 돼요. 코드를 내 손으로 고치는 첫 경험이에요.

완성한 카드는 이 교재의 채점 대상 작품이 돼요. 채점에서는 종이에 그린 트리와 코드의 들여쓰기가 서로 맞는지를 봐요. 그림과 코드가 하나로 이어지면 바이브 코딩의 한 바퀴를 스스로 돈 거예요.

코드를 쓰다 보면 누구나 막혀요. 화면이 이상하게 나오거나, 오류가 떠서 멈추기도 해요. 그건 실력이 부족하다는 뜻이 아니에요. 새로운 것을 배우는 중이라는 신호예요. 중요한 건 막힌 다음에 어떻게 묻느냐예요.

좋은 질문에는 세 가지 정보가 들어가요. ① 내가 하려던 것, ② 실제로 일어난 것, ③ 그래서 시도해 본 것이에요. 질문에 이 세 정보를 담으면 누구에게 묻든 답이 빨리 와요. 세 정보가 다 있으면 답하는 사람이 상황을 되물을 필요가 없기 때문이에요.

화면이 뜻대로 안 나올 때는 이렇게 물어요.

가운데에 두 줄이 보이게 하려고 Column을 부탁했는데, 글자가 왼쪽에 붙어 나와요. 부탁하는 문장을 어떻게 바꾸면 될까요?

오류가 났을 때는 오류 문구를 그대로 붙이고 물어요.

(오류 문구 붙여넣기) 이 오류가 났어요 — 받은 코드의 어디를 보면 될까요?

질문을 물을 곳에도 권하는 순서가 있어요. 먼저 이 교재의 도우미예요. 지금 읽는 부분을 알고 있어서 교재 내용과 이어서 답해 줘요. 대화는 평가나 성적에 쓰이지 않으니 편하게 물어도 돼요. 다음은 AI 코딩 도구예요. 내 코드와 오류 문구를 직접 보여 주며 묻기 좋아요. 마지막은 공식 문서예요. 공식 문서는 위젯의 정확한 사용법을 확인할 때 도움이 돼요.

여기까지가 이 교재의 전부예요. 우리는 화면을 트리로 읽는 법, 그림을 먼저 그리고 구조로 부탁하는 법, 상태와 setState로 화면을 움직이는 법, 부탁한 것과 나온 결과를 대조하는 법을 배웠어요. 그리고 그 방법으로 숫자 세기 앱과 나만의 카드 앱을 직접 만들었어요.

새 화면이 궁금해지면 오늘 배운 한 바퀴를 그대로 돌리면 돼요. 그림을 그리고, 부탁하고, 확인하기. 이 순서는 어떤 앱을 만들 때도 같아요. 막히면 하려던 것, 일어난 것, 시도한 것 세 가지를 담아 물으면 되고요. 여기까지 함께 와 줘서 고마워요. 다음 화면은 여러분의 차례예요.