Module 11Phase 490분

프로젝트 미션 — 내 수업 도구 만들기

내 수업의 실제 병목 하나를 골라 문제 정의 → 설계 → 프로토타입 → 테스트 → 공유까지 완성합니다.

핵심 메시지

좋은 앱보다 좋은 수업 문제 정의가 먼저입니다.

네 가지 미션 유형

1

수업 운영 도구

역할 배정, 토론 질문, 조별 활동 관리

2

평가 지원 도구

루브릭 기반 피드백, 서술형 코멘트, 오답 분석

3

탐구·질문 생성 도구

수준별 탐구 질문, 프로젝트 주제

4

학생 자기성찰 지원

수업 리플렉션, 자기평가 도우미

만들기 전, 디자인 준비하기

앱의 기능을 정했다면 디자인과 글꼴의 방향을 간단히 선택해 보세요.

DESIGN.md 활용

내 맘에 드는 디자인 정하기

getdesign.md에서 마음에 드는 디자인의 DESIGN.md 파일을 내려받아 Lovable 프로젝트의 디자인 기준으로 사용할 수 있습니다.

디자인 파일을 첨부하면 색상, 글꼴, 간격과 컴포넌트 스타일을 한 번에 전달할 수 있습니다.

폰트 파일 활용

내 맘에 드는 폰트 정하기

무료 폰트 사이트에서 원하는 글꼴을 내려받아 Lovable에 첨부하고, 앱에 적용해 달라고 요청할 수 있습니다.

  1. 1.무료 폰트 사이트에서 원하는 글꼴을 찾습니다.
  2. 2.사용 범위를 확인하고 폰트 파일을 내려받습니다.
  3. 3.폰트 파일을 Lovable에 첨부한 뒤 적용 프롬프트를 입력합니다.

가능하면 웹 사용에 적합한 WOFF2 또는 WOFF 파일을 사용하고, 해당 형식이 없다면 TTF 또는 OTF 파일을 사용할 수 있습니다.

무료 폰트라도 웹 사용, 파일 변환, 재배포와 상업적 이용 범위가 다를 수 있으므로 각 폰트의 라이선스를 확인하세요.

Lovable에는 이렇게 요청하세요

첨부한 폰트 파일을 이 프로젝트에 적용해줘.
폰트 이름: [다운로드한 폰트 이름]
제목과 주요 섹션에만 이 폰트를 사용하고, 본문은 읽기 쉬운 한글 폰트를 유지해줘.
한글이 없는 폰트라면 영문에만 사용하고 한글은 기본 폰트로 남겨줘.
기존 레이아웃과 기능은 바꾸지 말고, 모바일에서도 잘 보이게 해줘.

대괄호 안의 '다운로드한 폰트 이름'을 실제 폰트 이름으로 바꿔 사용하세요.

처음에는 이렇게 적용하세요

  • 제목용 폰트 1개만 먼저 선택하기
  • 본문은 읽기 쉬운 기본 한글 폰트 유지하기
  • 너무 많은 폰트를 한 화면에서 섞지 않기

첫 프로젝트에서는 제목용 폰트 하나만 바꿔도 충분합니다.

90분 프로젝트 보드

  1. 1

    문제 정의

    15분

    내일 수업에서도 다시 생길 가능성이 높은 병목 하나를 정한다.

  2. 2

    최소 기능과 PRD

    15분

    핵심 기능 3개, 하지 않을 일, 입출력 흐름을 한 줄로 정한다.

  3. 3

    러버블 제작

    30분

    PRD 기반 첫 프롬프트로 화면·기능을 만든다.

  4. 4

    테스트와 개선

    15분

    정상·빈 입력·긴 입력·모바일·잘못된 입력·API 실패를 점검한다.

  5. 5

    공유 준비

    15분

    세 문장 요약을 완성하고 공유 링크를 만든다.

자기 점검 루브릭

  • 교육 문제 정의

    실제 수업의 문제인가?

  • 수업·평가 연결성

    교육적 타당성이 있는가?

  • AI 활용 적절성

    이 일에 왜 AI가 필요한가?

  • 실현 가능성

    내일 수업에 정말 쓸 수 있는가?

  • 최소 기능 구현

    핵심 흐름이 실제로 작동하는가?

척도: 1 부족 · 2 일부 충족 · 3 기대 수준 · 4 우수

강사용 핵심 질문

  • 그 기능이 왜 필요한가요?
  • 이 앱은 수업의 어떤 문제를 해결하나요?
  • 교사 입장에서 실제로 쓰게 될까요?
  • 학생 경험이 어떻게 달라지나요?

앱 배포하기

완성한 앱을 인터넷에 공개하고, 다른 사람이 접속할 주소를 정해 봅니다.

처음에는 Lovable 기본 주소로 빠르게 배포하고, 필요할 때 내가 보유한 도메인을 연결할 수 있습니다.

가장 쉬움

방법 1. Lovable 기본 주소 사용

별도의 도메인을 구매하지 않고 '이름.lovable.app' 주소로 앱을 바로 공개합니다.

예시: my-science-tool.lovable.app

  • 별도 도메인 구매가 필요 없음
  • 설정 과정이 짧음
  • 첫 실습과 프로토타입 공유에 적합

이 주소는 커스텀 도메인이 아니라 Lovable이 기본으로 제공하는 게시 주소입니다.

브랜드 주소

방법 2. 내가 구입한 도메인 연결

가비아, Cloudflare 등에서 구입한 도메인이나 하위 도메인을 Lovable 앱에 연결합니다.

예시:

labbitory.com

app.labbitory.com

science.labbitory.com

  • 주소를 기억하고 공유하기 쉬움
  • 개인 브랜드나 포털에 활용 가능
  • 여러 앱을 하위 도메인으로 구분 가능

외부 커스텀 도메인 연결은 Lovable 유료 플랜이 필요할 수 있습니다.

항목
Lovable 기본 주소
외부 도메인
비용
별도 도메인 구매 비용 없음
도메인 구입·갱신 비용 발생
주소 예시
my-app.lovable.app
myapp.com 또는 app.mydomain.com
추천 상황
수업 실습, MVP, 빠른 공유
공식 서비스, 개인 브랜드, 장기 운영
설정 난이도
매우 쉬움
DNS 설정 필요

강사가 강조할 한 문장

첫 실습에서는 lovable.app 기본 주소로 완성을 경험하고, 실제 수업 도구로 장기 운영할 때 외부 도메인을 연결하면 됩니다.