Lovable로 AI 오답노트 앱 만들기 (GitHub · Codex까지 활용)

Lovable 바이브코딩앱으로,
오답 관리 앱 만들기!!
 
그런데!! 러버블만으로 끝이 아닙니다.
 
Lovable로 만든 앱,
GitHub와 Codex로 계속 개발하기 !

내가 개발해 내가 쓰는 앱

목차박스

1. 왜 오답코치를 만들었을까? 2. 오답코치는 어떻게 동작할까? (앱 기획) 3. Lovable에서 앱 만들기 4. GitHub에 연결시키기 5. Codex로 계속 개발하기 6. Lovable에서 크레딧 아끼는 전략, 최적의 개발방식 7. 앞으로의 배포계획 8. 마무리

 

1. 왜 오답코치를 만들었을까?

 
수학을 잘하려면,
보통 수학문제집을 적어도 3 회독은 하면서,
틀린 문제를 마스터해야하죠.
그 방법으로, 문제집은 채점만 하고,
노트에 풀이와 답을 쓰는 방법이 있어요.
 
하지만, 아이가 그렇게 잘 안 합니다. 
(그래... 그냥 문제집에 풀어라...)
 
1. 그래서 제가 
틀린 문제를 지우개로 박박 지우고,
가위로 오리고 풀로 붙여서, 다시 풀게 했는데...
이게 바쁜 엄마들이 쉽지 않아요...
 
2. 더불어,
수년째 계산 실수를 반복하는 아이를 보며,
이건 오답노트 이상의 뭔가가 더 필요해 보였죠.
예를 들어 이런 거예요.

1. 최근 한 달 분석
   ex. 총 오답 15개 중 - 계산실수 8회, 개념 적용실패 2회, 문제를 제대로 안 읽음 3회, 문재 이해 못함 2회 등.
2. 더 깊은 원인 분석
   계산실수 중 (받아 올림 실수, 자릿수 실수, 덧셈을 곱셈으로 함, 소수점, 본인 글씨 못 알아봄 등)
   이건 과외선생님도 일일이 알아채기 어려운 일이죠. 풀이과정(생각의 과정)까지 저장이 되어 더 확실히 분석할 수 있게 한다. 
3. AI가 해결방안까지 제안
   ex. 검산은 다른 방법으로 하기(내가 쓴 풀이과정 보지 않기), 계산만 다 맞을때까지 따로 연습하기 등 효율적 방법을 제안한다. 
4. 그렇게 기록이 누적되면서, 학생도 "내 계산실수가 줄고 있네" 라며 동기부여에도 도움이 될 수 있다고 생각한다. 

 

비단 공부뿐만 아니라, 스스로 질문하고
일정간격으로 다시 꺼내보기는 삶에서도 필요합니다.
제가 블로그에 기록하고, 
다시 수시로 읽어보는 것과 같지요.
 
학원 선생님들도 오답 복사, 출력 엄청 많이 할 거예요.
가르치는 자도, 배우는 자도, 엄마도, "모든 이의 귀찮음을 줄여주는 오답코치"를 만들고자 합니다. 
 

2. 오답코치는 어떻게 동작할까? (앱 기획)

 

"문제를 다시 풀게 만드는 AI 오답코치"
 
학생이 문제를 촬영만 하면
AI가 사진을 pdf처럼 보정해주고
문제 영역 자르고, 연필 낙서도 지우고
다시 새 문제집처럼 짜잔~~!

1. 오답문제집을 만들어 주고,
2. 다시 풀게 하고,
3. 반복 실수까지 분석해 주는 앱

 

이 앱의 목표는 오답노트를 만드는 것만이 아니라,
틀린 문제를 다시 풀게 하고,
같은 유형을 마스터하는 것.
'귀찮음을 없애는 것'이 가장 중요한 철학이다.

1. 목표 : 전 학년용 AI오답노트
   학생은 쉽게 복습하고★
   부모는 아이의 반복 실수를 이해할 수 있는 AI오답관리 앱
2. 대상 : 초, 중, 고등학생
   추후 로그인 기능을 넣어 학부모, 선생님을 관리자로 포함시킬 수 있음.
   학생은 공부만 하면 되는 화면/
   학부모 및 선생님은 분석과 관리하는 화면
3. 과목 : 수학, 과학, 사회 등 + 추가 가능

 

3. Lovable에서 앱 만들기

1. 먼저 "오답노트 앱" 설계 → 러버블 구현
   아이와 테스트, 버그 수정
2. 기존 "영어 단어장 앱" 개선
   UI 등 소소한 수정
3. 두 앱 마무리 및 배포

 

이렇게 하면 한 달 동안 앱 2개를 손에 넣을 수 있다.

Lovable 로 앱 만들기

 

4. GitHub에 연결시키기

러버블 구독을 끊더라도
러버블에서 만든 앱을 깃허브에 연결시켜서 백업과 수정을 할 수 있어요.
 
러버블과 깃허브가 연결되어 있으면,
매일 러버블에서 작업한 개발일지가
자동으로 깃허브에도 저장되는 형태가 됩니다. 
 
집 짓는 걸로 비유하자면, 
깃허브는 설계도를 보관하는 저장고가 되겠지요.
 

1) 깃허브에 연결하면

1. 백업 : 코드는 깃허브에 남아있어요
2. 버전관리 : 오늘 망쳐도 어제 버전으로 되돌릴 수 있고요
3. 다른 AI와 작업이 가능해요 : 그래서 codex나 cursor에서도 사용가능하죠.

 

2) 러버블 프로젝트에 GitHub 연결하기 (5분이면 됨)

1. 러버블  → 설정 → Git → GitHub 눌러서 로그인 → 연결하기
2. 깃허브 계정이 없다면 만들기
   https://github.com/  들어가서 Sign up 클릭
   → 간단하게 구글이나 애플로 시작해도 됨.
   → 아니면, 이메일, 패스워드, 아이디 입력해서 계정 생성
3. 러버블에서 깃허브 권한 승인
   깃허브 가입 후, 러버블 설정 → 빌드 및 배포에서 Git → GitHub → Add connection.
   All repositories 선택 후, Install & Authorize 클릭
4. 러버블에서 만든 "프로젝트 클릭" → 설정 → 프로젝트를 "Git과 연결하기"

3) 더 중요한 건,  양방향 sync!

1. Lovable 공식 문서에 따르면 GitHub 연동은 양방향 sync입니다.
2. 깃허브는 저장소이면서 동시에 코드 편집도 가능한 곳입니다. 
   아래 보면 오른쪽 상단에 연필아이콘이 있는 것이 보이시죠?

깃허브 수정화면

깃허브 양방향 수정

5. Codex로 계속 개발하기

1. 구글 제미나이 Pro를 쓰시는 분은, 무료로 안티그래비티와 연동해 사용할 수 있고요.
   https://antigravity.google/
2. 챗GPT Plus를 사용하시는 분은, 무료로 코덱스를 연동해 사용할 수도 있어요.
   Codex | OpenAI의 AI 코딩 파트너 | OpenAI

챗GPT 왼쪽 사이드바에서 Codex

Codex화면

 
그러면, 직접 코드를 타이핑할 필요가 없는 편리함이 있어요. (챗GPT도 그러듯이, 얘도 가끔 버벅대긴 함...)
 
러버블은 크레딧을 소비하지만,
깃허브에서 직접 수정하거나,
코덱스나 안티그래비티를 이용한 코드 수정에는 
크레딧이 소비되지 않는 장점이 있습니다. 
 

6. Lovable 크레딧 아끼는 전략, 최적의 개발 방식

1. Lovable : 전체적인 디자인(UI)
   속도면에서 압도적인 듯,
   체감상, 같은 기능을 해도 코덱스가 15분 걸린다면 러버블에서는 5분도 안 걸림.
2. GitHub + Codex / antigravity : 개발(기능)
   AI 유료 구독자는 무료로 사용한다는 장점이 있음

이렇게 역할을 나누는 것이 가장 효율적입니다.
 
제가 러버블에서 100크레딧을
결제해서($25=약 4만) 사용해 보니
 
기능을 넣을 때는 막 8~10 크레딧이 없어지는데,
디자인수정은 1~2크레딧밖에 소모가 안되더라고요.
 
러버블에서 코딩한 "세부 코드"를 챗GPT에 전달해서
특정코드를 찾아서 수정시키도록 하면 
크레딧도 훨씬 덜 소모합니다. 중요!👍
 

7. 앞으로의 배포 계획

1. 무료버전 : 무료 기능만으로도 완성도 높은 오답노트 앱 - 오답 촬영, 오답 관리
   그러나 AI힌트보기, AI설명 듣기, AI 유형문제 만들기 등은 호출할 대마다 비용이 발생할 것이다. 
   - 문제 30개 저장 및 관리
   - 과목별 오답노트, 복습체크
   - 손글씨 풀이
2. Pro (월 구독 4,900원 ) : 하기와 같은 AI가 필요한 학생만 구독하면 될 것이다.
   - 무제한 저장
   - AI 무제한
     - 🤖 AI 힌트 / AI 설명
     - 🤖 같은 유형 뽀개기
     - 🤖 오답 분석 리포트

AI 채점은 가장 어려운 기능이다.
손글씨 인식, 수식 인식, 서술형 판단까지 들어가니까 정확도를 높이는 데 시간이 걸린다. 
AI 힌트와 AI 설명은 기술적으로 구현이 비교적 쉽고, 사용자도 바로 가치를 느낄 수 있어서 이것을 먼저 생성한다. 

8. 마무리

앱 개발은 개발자의 영역이라고 생각했습니다.
그런데 AI의 도움을 받아
Lovable, GitHub, Codex를 함께 사용해 보니

컴맹인 저도 가능한 AI 세계!!
생각을 실제 앱으로 만들어 갈 수 있다는 재미가 있어요. 물론 아직 부족한 부분도 많습니다.

'생각을 구현하는 힘'
이건 정말 대단한 것 같아요.
앞으로도 오답코치를 계속 발전시켜 보려고 합니다.

내가 만들어 내가 쓰는 앱!
바탕화면에 딱.

앱 아이콘은 Canva에서 디자인 함

이제 문제집 1권 다 풀면,
찰칵 찰칵 찍기만 하면 됨
지우개, 가위, 풀, 노동이 필요없어짐😃

학원 영어 단어장도
귀찮다며 막무가내로 외우지 않고
찰칵 찍기만하면, 발음/예문/도 알려주고
암기까지 도와줌.

엄마 신세계~~^^

 
[7. 덜어내는, 생활감각] - Lovable, Codex 앱 만들기, 직접 써본 솔직 후기 (영단어 암기 앱)

Lovable, Codex 앱 만들기, 직접 써본 솔직 후기 (영단어 암기 앱)

 
[7. 덜어내는, 생활감각] - Lovable 바이브코딩앱 : 크레딧 정책 확인하기

Lovable 바이브코딩앱 : 크레딧 정책 확인하기