핵심 비유
앱 빌더 수업에서 교사의 자리는 '코딩 선생'이 아니라 '작품 합평을 이끄는 실기 지도교사'다 — 코드는 AI가 짜고, 교사는 학생이 만든 앱을 하나씩 돌아보며 "무엇을 목표했고, 화면을 어떻게 설계했고, 어떻게 더 나아질지"를 되물어 준다. 그래서 이 도구를 쓰기 전에 기획·디자인·데이터 코스를 먼저 배워 두면(앞 코스들), 앱 빌더는 그 배움을 '실제로 돌아가는 화면'으로 바꾸는 마지막 공정이 된다. 단, 이 공정은 서버가 아니라 브라우저라는 손바닥만 한 스케치북 위에서 돈다 — 능력에 한계가 있고, 그 한계를 아는 것 자체가 수업의 일부다.
핵심 포인트
- 다른 티처메이트 도구와 똑같이 수업 만들기(교사) / 수업 참여하기(학생) 두 버튼에서 시작한다. 교사가 '수업 만들기'로 세션을 열면 6자리 세션 코드가 생기고, 학생은 그 코드로 들어온다.
- 세션 상세 대시보드가 이 수업의 관제탑이다 — 학생이 앱을 만들면 자동 저장되어 교사 화면에 자동으로 나타난다. 만들어진 앱은 미리보기·다운로드·코드 보기까지 그 자리에서 가능해, "지금 누가 뭘 만들고 있나"를 함께 보며 이야기할 수 있다. (대시보드의 '감상 투표'는 아직 실험 단계 — 안정화 전까지는 보류하고 여름방학 이후 함께 쓰는 것을 권한다.)
- 교사가 직접 시연·연습할 때는 내 시범작 → 시범작 만들기로 들어간다. 여기엔 ① 단계별로 따라 하는 튜토리얼들과 ② 자유 만들기가 있다.
- 자유 만들기는 브라우저 안에서 통째로 돈다 — 서버를 쓰지 않는다. 학생이 컴퓨터실을 독점하거나 태블릿만으로도 수업할 수 있게 하려는 의도적 설계이고, 그 대가로 무거운 연산·직접적인 공공데이터 연결 같은 능력에는 한계가 있다.
- 왼쪽 채팅에는 두 종류의 AI가 있다. 대화 AI(검은 버튼) 는 텍스트만 다루는 대화 상대로, 티처메이트의 앱 기획·앱 디자인 교육을 배경 맥락으로 삼아 "프롬프트를 어떻게 다듬고 무엇을 디자인할지"를 함께 궁리한다(한 번 답할 때 3~5분, 최대 10분까지 걸릴 수 있다). 만들기 AI는 실제로 코딩만 하는 AI다(더 오래, 최대 1시간까지 흐를 수 있다). 잘못 눌렀을 때를 위한 중지 버튼도 있다.
- 모델은 빠름 / 보통 중에 고른다 — 빠름은 Haiku로 빨리 나오지만 퀄리티가 낮고, 보통은 느리지만 결과가 비교적 낫다. 프롬프트를 대충 쓰면 AI가 알아서 '그럴듯하게' 만들어 버리므로, 구체적으로 지시할수록 의도한 앱에 가까워진다.
- 앱이 생성되면 상단 UI가 활성화된다 — 보기 배율(작게·맞춤·크게 보기), 닫기, 스크린샷, 기본 자동 저장, 여러 슬롯을 오가는 내 불러오기, 학생 입장용 QR 코드(교사 화면에만 뜬다), 처음부터(초기화 = 새로고침처럼 리셋), 다운로드(.zip), 사진(이미지 분석 — 곧 다른 용도로 바뀔 예정), 다른 튜토리얼(앱 빌더 안 다른 모듈로 이동).
- 기획·디자인 탭은 AI에게 매번 같은 맥락을 반복해 말하지 않도록 '한 번 써 두면 계속 참조되는 메모장'이다 — 여기 적어 둔 기획·디자인 내용을 대화 AI·만들기 AI가 자동으로 바탕에 깔고 일한다(작은 하네스처럼 작동). 코드 보기는 말 그대로 생성된 코드를 보는 탭이다.
- 다운로드한 앱은 React 코드라서 그대로 실행되는 형태는 아니다 — 받은 파일을 GPT 같은 다른 AI에게 넘기면 사용자가 쓰기 편한 형태로 바꿔 준다. 주식 데이터 쓰기 토글은, 브라우저 제약상 공공데이터를 통째로 연결할 수 없어 일부만 미리 담아 둔 것으로, 켜면 '데이터를 쓴 듯한' 좀 더 그럴듯한 앱을 만들 수 있다.
- 튜토리얼 모듈(예: '스마트 주식 투자 도우미')은 "프롬프트를 이렇게 입력하면 앱이 이렇게 나온다" 를 직접 보여 준다 — 예시 프롬프트를 복사해 입력창에 붙여 넣고 만들기를 누르면 얼추 비슷한 앱이 생성되며, 학생은 '프롬프트를 입력하는 감각'을 익힌다.
- 사람이 많아지면 각자에게 주어진 생성 슬롯이 정해져 있어 중복·과부하로 에러가 날 수 있다. 이때 뜨는 고치기 버튼을 누르면 AI가 스스로 디버깅한다. 앱이 이미 너무 커져 고치기로 안 되면 처음부터로 초기화하거나 저장 슬롯을 활용한다.
- 교사가 실제로 할 일은 코딩이 아니라 순회 코칭이다 — 학생이 만드는 것을 하나씩 보면서 "네가 정한 목표가 뭐였고, 화면 설계를 어떻게 해 왔고, 어떻게 고도화하면 되는지"를 되물어 방향을 잡아 준다.
교사 팁
앱 빌더를 켜기 전에 "오늘은 무엇을 만들지"를 학생 스스로 한 줄로 정하게 하라 — 프롬프트가 두루뭉술하면 AI가 제멋대로 만들어 버리므로, 앞선 기획·디자인 코스에서 배운 '목표 한 줄 → 화면 설계 → 고도화' 흐름을 그대로 프롬프트에 옮기게 하는 게 핵심이다. 학년에 따라 기대치를 조절하라 — 중학생은 게임처럼 재미 위주로도 충분하고, 고등학생은 진로·취업에 닿는 조금 더 수준 높은 앱을 향하게 한다. 처음 시연할 때는 교사가 '내 시범작 → 자유 만들기'로 하나를 직접 만들어 상단 도구(보기·저장·불러오기·QR·처음부터·다운로드·기획/디자인·코드·주식데이터)를 한 바퀴 눌러 보이고, 이어서 튜토리얼 모듈의 예시 프롬프트를 복붙해 "프롬프트→앱"의 감각을 보여 주면 학생이 곧바로 따라 한다. 에러가 나면 당황하지 말고 먼저 고치기를 누르게 하고, 그래도 안 되면 처음부터로 리셋한다 — 브라우저라는 스케치북이 감당할 크기에는 한계가 있다는 것을 이 순간 자연스럽게 가르칠 수 있다. 수업의 무게중심은 '완성된 앱'이 아니라, 학생 각자의 화면을 돌아보며 나누는 합평 대화에 둔다.