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

 
작년부터 아이가 영어학원을 가고싶다고...
그래서 이번에 영어학원을 다니게 됐는데...
 
읽기, 듣기, 쓰기, 문법 수업시간의 단어암기 말고도,
별도의 단어장으로 별도의 시험까지 본다네요??
 
그러니까,
1. 수업시간에 하는 단어도 외우고 (클래스카드라는 앱으로 쉽게 가능)
2. 단어장 책에 나오는 단어도 외우라는말 (제가 만들고자 하는 앱은 이것 때문)

1. 일단 학원단어장엔 단어 설명이 없기에,
   하나하나 단어를 사전에 입력해서 
   뜻과 쓰임 및 발음을 찾아 익혀야 하고
2. 외우는 건 그 다음 문제라는 것. 
3. 아이가 1번 과정을 제대로 안 해서,
   어플을 직접 만들고자 해요.

흠..수십년 전과 똑같은 교육방식..입시학원..

학생이 12년 공부하는 걸
AI가 12분만에 만점받을 수 있는데...

목차박스

1. 바이브 코딩 누구나 할 수 있다던데? 2. 어떤 프로그램으로 만드는 걸까? 3. Lovable 로 만들어 보기    1) 러버블 접속    2) 첫 프롬프트 설계    3) 첫 결과물 확인하기    4) 부족한 부분 수정하기 4. Codex로 만들어 보기    1) 코덱스 설치     2) 첫 프롬프트 설계 5. 마무리_추천앱

 

1. 바이브코딩, 누구나 할 수 있다던데?

바이브코딩이란 (Vibe Coding)
AI와 대화하면서 코드를 만들어내는 방식.
코드의 존재를 잊고 분위기에 몰입하는(vibe) 방식
 
그냥 아이 영어단어 test 도와주기 귀찮아서
앱을 하나 만들어봐야 겠다는 생각이 들었는데,
너무 쉽게 뿅! 하고 만들어지니 정말 신기하네요.

 

2. 어떤 프로그램으로 만드는 걸까?

 
일반인이 본인이 사용할 용도로
가장 쉽게 접근 가능한 것은  "Lovable"(러버블)

저처럼 "단어장 앱" 정도는
Lovable로 지금 당장 시작할 수 있어요.
(Lovable 무료 플랜 : 하루 5 크레딧 제공, 한달 최대 30 크레딧까지 사용가능. 6일간 사용 할 듯)
- 그런데 무료크레딧이 생각보다 일관적이지 않아서, 어떤 날은 무료크레딧이 없다가 다음날 들어가면 다시 주고...뭐 그렇더라고요. 매일 정확하게 5크레딧 지급이 아니었어요. 아마도 하루 기준이 한국시간이 아니었을 수도 있고요. 참고하세요.
 
챗GPT 유료 사용자라면 *Codex를 사용할 수 있는데, 이것도 아래 후기가 있습니다. 

항목	초보자용			중급자용
	Lovable	Bolt	Replit Agent (리플릿)	Cursor	Claude Code	Codex
링크	Lovable ↗	Bolt ↗	Replit Agent ↗	Cursor ↗	Anthropic ↗	OpenAI Codex ↗
난이도	★☆☆☆☆	★★☆☆☆	★★★☆☆	★★★★☆	★★★★☆	★★★★☆
한국어 프롬프트	매우 좋음	좋음	보통	매우 좋음	매우 좋음	매우 좋음
비개발자 적합성	최고	매우 좋음	보통	낮음	낮음	낮음
디자인 생성	매우 강함	강함	약함	없음	없음	없음
OpenAI API 연동	가능	가능	가능	가능	가능	가능
배포	쉬움	쉬움	매우 쉬움	직접 해야 함	직접 해야 함	직접 해야 함
유지보수	쉬움	보통	보통	매우 강함	최고	강함
대형 프로젝트	보통	보통	좋음	최고	최고	최고
장점	진입장벽 없음 디자인 좋음 배포 쉬움 속도 매우 빠름	API, OCR 연결 잘함 모바일앱제작	배포까지 원샷 서버구축 쉬움		큰 프로젝트 기억력 좋음 리팩토링, 버그수정 강함	ChatGPT 친화적 코드 이해력 높음
무료 / 유료	무료 가능 $25/월	무료 가능 $25/월	무료 가능 $20~25/월	무료 가능 $20/월 수준	무료 없음 $20/월	ChatGPT 기반 Plus $20/월~

 
 

3. Lovable로 만들어 보기

1단계. Lovable 접속하기

1. https://lovable.dev/ko
   로그인 하기
   (구글로그인 등 클릭으로 쉽게 로그인 가능)
2. 이제 채팅창에 프롬프트를 넣을 차례 ↓

 

2단계. 첫 프롬프트 설계

"난 이런 앱을 원해"
단어장 사진을 찍으면 - 발음, 예문 등 자동학습
 
"학원 단어장을 사진 찍으면,
AI가 자동으로 영어 선생님 역할을 해주는 앱"
 
저는 챗GPT와 대화해서
프롬프트를 다듬었습니다. 

너무 많은 내용을 넣으면
Lovable이 중간에 오류가 나거나
엉뚱하게 구현하는 경우가 있으니
프롬프트는 단계별로 추가합니다.
 
바이브코딩 고수들도
작은 기능을 차례대로 추가하는 방식을 씁니다.
 
 

3단계. 첫 결과물 확인하기

결과물을 보고 수정할 부분을 수정합니다. 
 
두 번 질문했더니, 
남은 무료크레딧은 사라졌습니다.
추가할 내용은 내일 다시 해야 함. ^^
 
일단 아래처럼 만들어졌는데요.

 
미리보기 화면에서 
이런 저런 테스트를 해 본 다음에,
잘 작동한다면,
 
오른쪽 상단 "게시하기" 버튼 클릭.
https://xxxxx.lovable.app 으로 주소가 생성됩니다.
그러면 폰, 패드, PC 어디서든 접속이 가능합니다. 
 
그리고 공유버튼 → 홈 화면에 추가
하면 앱처럼 쓸 수 있어요.

 

 
4단계. 부족한 부분 수정하기
 

둘째 날,
한 꺼번에 많은 내용을 요청하면
꼬일 수 있기 때문에
두 번에 나눠 요청했어요.
 
두 번 요청하니 당일 무료 크레딧은 0...
 
셋째 날,
수정사항 다시 요청함.
Tip  "현재 구조는 유지하고" 라는 말을 넣는 게 중요하다.
AI가 "새로 만드는 게 빠르겠다" 라고 판단해서 기존 화면을 다 갈아엎는 경우가 있고, 그러면 크레딧도 많이 소진된다.

 

넷째날,
다시 수정하려고 보니,
크레딧이 없다고 하네요.

 
그래서 챗GPT와 연계되는 CODEX로 갈아탐!
그런데 Codex도 장단점이 있더군요.
아래 내용을 확인해 보세요.
 
일반인이 사용하기엔
$25 결제하고  Lovable 사용을 추천드립니다
 

4. Codex로 만들어 보기

1단계. Codex 설치하기

Codex 앱은 설치 후 열어서
ChatGPT 계정으로 로그인하고,
작업할 프로젝트 폴더를 선택하는 방식입니다.

1. 코텍스 설치
   https://chatgpt.com/codex
   챗GPT 왼쪽 사이드바에 Codex 클릭
   이제 다운받아 설치하세요.
2. Node.js 설치
   Codex를 쓰려면 Node.js가 필요합니다
   https://nodejs.org?utm_source=chatgpt.com 에서 LTS 버전 설치.
   설치할 때는 Next, Next, Next, Finish 계속 누르면 됩니다.
   설치 후 윈도우 시작키→cmd 입력후 검은창에서 node -v 입력후 v24.4.0 이 나오면 성공입니다.
3. ChatGPT 계정으로 로그인
4. 왼쪽 사이드바에서 [프로젝트] 선택하여 폴더를 하나 생성하세요.
5. 이제 Codex 채팅창에 프롬프트를 입력하면 됨.

 

2단계. 첫 프롬프트 설계

이미 Lovable에서 한 기록들이 있어. 
비슷하게 구현해 봤습니다.
 

• ChatGPT = 같이 토론하고 아이디어를 다듬는 곳
• Codex Work = 개발자에게 일을 맡기는 작업실 

그래서 GPT와 대화하며 아이디어를 다듬고 프롬프트를 정리하고,
CODEX(WORK) 화면에서 작업만 맡깁니다.
 
but 해 본 결과,,
 
Lovable은 사진 올리면 AI가 알아서 처리해서 결과를 보여주는 데 특화되어 있어서 정말 만들기 쉽더군요. 내부적으로 GPT, OCR엔진, 이미지 분석이 이미 잘 연결되어 있었습니다.
예를 들어, [자동차 만들어줘]라고 말하면, 이미 만들어져 있는 엔진, 바퀴, 핸들 등 부품들 조립만 하면 되어서 10분이면 자동차가 굴러가게 만들어주죠.
 
Codex는 개발자 도구에 가까워서 ocr기능을(이미지 문자 인식 기능) 만들어 달라고 하면, 허접한 무료 라이브러리를 붙여서 결과물이 더 안 좋더군요. 
예를 들어, [자동차 만들어줘]라고 말하면, 엔진은 뭘 쓰냐, 바퀴는 뭘 쓰냐? 브레이크는 뭘쓰냐? 다 물어봅니다. 자유도는 높지만 손이 많이 가는 스타일이긴 합니다. 
 
그래서 Lovable에서 만든 프로젝트를  GitHub로 내보내기까지 마무리 했다면 [Lovable OCR +Codex 수정]이 가능했을텐데라는 아쉬움이 들었습니다. 
 
Codex는 OpenAI API 비용(앱이 GPT를 호출하는 비용)이 별도여서, 만약 코덱스의 OCR기능(이미지 문자인식)이 안 좋아서 GPT가 사진을 분석하고 추출하게 만들면 그때마다 API비용이 발생합니다.
Codex에 OCR을 계속 고치게 하는 건 너무 비효율적이었어요.(거의 새로 개발하는 수준) 단어장 사진을 AI Vision으로 읽으면 쉽게 읽히는데 그러면 또  API비용이 들고요. OpenAI API는 보통 토큰(token) 기준으로 과금돼요. 최신 가격표 기준으로 GPT 계열은 입력 100만 토큰당 몇 달러 수준.
제가 만드는 단어장앱은 OCR기능(사진 문자인식 기능)이 앱 가치의 대부분을 차지하는데, Codex는 개발시간(오류 수정 시간)이 더 큰 비용이라 여겨집니다. 
 
게다가 아래처럼 이미지도 예쁘지 않음...
(초딩 아이들은 이런 이미지를 좋아하지 않지유...)

 
결국, 비용이 들어요.
사진의 숫자, 한글, 영어의 자동 인식을 원하면 Lovable 유료 또는 OpenAI Vision API비용이 필요합니다. (Lovable 무료까지 한달을 더 기다려도 되겠지만요..) 이래 저래 따져보니 러버블 Pro 1개월 결제가 더 경제적일 가능성이 높더라고요. 빠르게 결과물을 만들어 주니까 시간도 아껴주고요. 

반응형

5. 마무리

 

빨리 당장 앱 만들어서 사용하고 싶다!
→ 러버블 압승!!

 
우린 개발자가 아니라 사용자죠.
우리가 앱을 만드는 목적은 "사용하기" 위함인데,
묻지도 따지지도 않고 러버블 압승이었습니다. 
 
여러분이 앱 만들기를 체험하고 싶으시다면,
추천 1위는 러버블 Pro 한 달 결제! ($25=약4만)
→ 하지만  $25이면 100크레딧이 제공되는데, 
(+유료 크레딧 구매시 별도로 매일 5크레딧을 무료로 줌)

시행착오를 많이 해야하는 초반에는 100크레딧은 금방 소모됩니다.

 
→ 다른 AI(ex. chatGPT나 제미나이 등)에서 앱을 먼저 설계하고,
러버블에서는 한 번에 큰 단위로 작업을 시키는 전략을 쓰는 것이 좋습니다. 
내 아이디어를 러버블에게 최종적으로 구현, 배포시키는 것이죠.

현재 Lovable 무료 플랜: 하루 5 크레딧 제공 한 달 최대 30 크레딧까지 사용 가능 (5크레딧씩 6일간) 다음 달 1일 다시 30 크레딧 제공. 유료 플랜도 매일 무료 Build Credits를 준다 Pro: 매일 5 Daily Build Credits Business: 매일 5 Daily Build Credits

다 만들었으면 웹앱에서 열어서 
공유버튼 → 홈 화면에 추가
하면 앱처럼 쓸 수 있어요.
*갤럭시에서는 먼저 웹앱 설치 후, 홈화면 추가 하세요
 (그냥 추가만 하면 아이콘에 배지가 붙어서 보기 안 좋음)
*아이폰은 공유후 홈화면 추가만 해도 됩니다.

아래 이미지에서 보듯이
폰이나 패드의 바탕화면에 
아이콘으로 표시되어,
일반 앱처럼 사용 가능합니다.

앱 아이콘(임시)

학생은 할인도 됩니다. ↓

 
아래 초대 링크로 들어가셔서 사용해 보세요. ↓
https://lovable.dev/invite/W2QJ5H1

Claim your invite and earn 10 credits - Lovable

 
 
[4. 방향찾는, 영어 수학 교수 방법] - 코딩 몰라도 무료AI로 영어 단어 학습 앱 만들어보기 2탄

코딩 몰라도 무료AI로 영어 단어 학습 앱 만들어보기 2탄

 
[분류 전체보기] - 실용적인 IT·생활 정보는 두 번째 블로그에 따로 정리하고 있습니다.

실용적인 IT·생활 정보는 두 번째 블로그에 따로 정리하고 있습니다.

 
[2. 정돈하는, 인생 탐구] - AI를 잘 쓰는 사람 vs 못 쓰는 사람 _ 듀얼 브레인

AI를 잘 쓰는 사람 vs 못 쓰는 사람 _ 듀얼 브레인

 
[7. 덜어내는, 생활감각] - 이젠 제미나이가 대세?_챗GPT, 퍼플렉시티, 클로드, 코파일럿, 제미나이_다 잘함

이젠 제미나이가 대세?_챗GPT, 퍼플렉시티, 클로드, 코파일럿, 제미나이_다 잘함