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

 

작년부터 아이가 영어학원을 가고싶다고...

그래서 이번에 영어학원을 다니게 됐는데...

 

읽기, 듣기, 쓰기, 문법 수업시간의 단어암기 말고도,

별도의 단어장으로 별도의 시험까지 본다네요??

 

그러니까,

1. 수업시간에 하는 단어도 외우고 (클래스카드라는 앱으로 쉽게 가능)

2. 단어장 책에 나오는 단어도 외우라는말 (제가 만들고자 하는 앱은 이것 때문)

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

목차박스

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

 

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

바이브코딩이란 (Vibe Coding)

AI와 대화하면서 코드를 만들어내는 방식.

코드의 존재를 잊고 분위기에 몰입하는(vibe) 방식

 

그냥 아이 영어단어 test 도와주기 귀찮아서

앱을 하나 만들어봐야 겠다는 생각이 들었는데,

너무 쉽게 뿅! 하고 만들어지니 정말 신기하네요.

 

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

 

일반인이 본인이 사용할 용도로

가장 쉽게 접근 가능한 것은  "Lovable"(러버블)

저처럼 "단어장 앱" 정도는
Lovable로 지금 당장 시작할 수 있어요.

(그런데 중요한 사실, 무료 플랜은 매달 첫 6일만 일일 무료 build credits가 있고, 이후에는 다음 달까지 무료 크레딧이 없다고 안내되어 있습니다) → 그런데 저는 직접 해보니까 3일까지 무료크레딧이 있었고, 4일차 되는날 무료크레딧이 없어지더라고요.

 

챗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와 대화해서

아래 프롬프트를 얻었습니다.

 

[프롬프트1]

초등학생용 영어 단어 학습 웹앱을 만들어줘. 앱 이름은 "레이첼 영어단어장"로 해줘. 이 앱의 목적은 사용자가 영어 단어장 사진을 업로드하면, 사진 속 영어 단어를 자동으로 추출하고, 각 단어의 한국어 뜻, 발음기호, 발음 듣기, 쉬운 영어 예문, 예문 해석을 제공해서 사전을 일일이 찾지 않아도 단어를 익히고 테스트할 수 있게 하는 것이다. 필수 기능: 1. 이미지 업로드 화면 2. 사진 속 영어 단어 자동 추출 3. 추출된 단어 목록을 사용자가 직접 수정 가능 4. 각 단어별 학습 카드:    - 영어 단어    - 한국어 뜻    - 발음기호    - 발음 듣기 버튼    - 쉬운 영어 예문    - 예문 해석 5. 테스트 3종:    - 영어만 보고 한국어 뜻 말하기    - 한국어 뜻만 보고 영어 스펠링 입력하기    - 소리 듣고 영어 스펠링과 뜻 입력하기 6. 채점 기능 7. 틀린 단어만 다시 풀기 8. 모바일과 아이패드에서 모두 보기 좋은 반응형 디자인 - 모바일에서는 한 화면에 한 기능씩 세로로 보기 좋게 - 아이패드에서는 화면이 넓으므로 카드와 테스트 영역을 2단 구성으로 배치 - 버튼은 손가락으로 누르기 쉽게 크게 - 글자는 초등학생이 읽기 쉽게 큼직하게 - 가로/세로 화면 전환에도 깨지지 않게 디자인: 초등학생이 쓰기 쉽게 밝고 깔끔하게. 버튼은 크게. 화면은 복잡하지 않게. 모바일에서는 단순한 세로형 화면으로, 아이패드에서는 넓은 화면을 활용한 카드형 레이아웃으로 만들어줘. 반응형 디자인으로 제작해줘.

 

너무 많은 내용을 넣으면

Lovable이 중간에 오류가 나거나

엉뚱하게 구현하는 경우가 있으니

여기까지 입력하고 단계별로 추가하자.

 

바이브코딩 고수들도

작은 기능을 차례대로 추가하는 방식을 쓴다. 

 

 

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

• 결과물을 보고 수정할 부분을 수정합니다. 
• 저는 아래 부분을 추가했어요.

[프롬프트2]

1. 영어 단어에 품사가 여러 개 있는 경우 모든 주요 품사를 표시해줘. 예를 들어 smile은 명사 (noun) 뜻: 미소 동사 (verb) 뜻: 미소 짓다 처럼 품사별로 구분해서 보여줘. 각 품사마다 뜻, 발음기호, 예문, 예문해석을 별도로 제공해줘. 품사가 여러 개일 경우 탭 또는 카드 형태로 보기 쉽게 구분해줘. 2. 품사별 사용 빈도를 표시해줘. 예를 들어 동사 ★★★★★ 명사 ★★★★☆ 처럼 표시해줘. 초등학생은 가장 자주 쓰는 뜻부터 보게 해줘.

 

이렇게 두 번 질문했더니, 

남은 무료크레딧은 사라졌습니다.

추가할 내용은 내일 다시 해야 함. ^^

 

일단 아래처럼 만들어졌는데요.

 

미리보기 화면에서 

이런 저런 테스트를 해 본 다음에,

잘 작동한다면,

 

오른쪽 상단 "게시하기" 버튼 클릭.

https://xxxxx.lovable.app 으로 주소가 생성됩니다.

그러면 폰, 패드, PC 어디서든 접속이 가능합니다. 

 

그리고 공유버튼 → 홈 화면에 추가

하면 앱처럼 쓸 수 있어요.

 

 

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

 

둘째 날,

한 꺼번에 많은 내용을 요청하면

꼬일 수 있기 때문에

아래처럼 두 번에 나눠 요청했어요.

(이렇게 두 번 요청하니 당일 무료 크레딧은 0)...

 

[프롬프트1,2]

현재 앱을 아래 요구사항에 맞게 수정해줘. 1. 단어 누락 문제 해결 - 현재 60개 단어를 인식했는데 50개만 생성되고 있어. - OCR로 추출된 모든 단어를 학습 데이터로 생성해줘. - 단어 개수 제한이 있다면 제거해줘. - 최소 200개 단어까지 처리 가능하게 해줘. - 화면에 OCR 인식 단어 수와 학습 생성 단어 수를 표시해줘. 예: OCR 인식: 60개 학습 생성: 60개 2. 단어장 저장 기능 - 사진 업로드 후 OCR이 완료되면 원본 사진, OCR 결과, 학습 데이터를 저장해줘. - 첫 화면에는 "내 단어장" 목록을 보여줘. - 단어장 이름은 사진 상단의 Day 정보를 자동으로 읽어서 저장해줘. 예: Day 1-2, Day 3-4, Day 5-6 - Day 정보를 못 찾으면 사용자가 이름을 직접 입력하게 해줘. - 사용자는 저장된 단어장을 다시 열어서 학습할 수 있어야 해. - 단어 수가 60개 이상이면 자동으로 30개 단위 시험 범위를 만들어줘. 예: Day 5-6 [1~30 시험] [31~60 시험] [전체 시험]

1. 미국식 발음 적용 - 모든 단어와 예문 음성은 미국식 영어(en-US)로 재생해줘. - 브라우저 음성합성을 사용할 경우 en-US를 기본값으로 설정해줘. 2. 아이패드 화면 최적화 - 모바일 디자인은 유지해줘. - 아이패드에서만 레이아웃을 최적화해줘. - 아이패드에서는 단어, 뜻, 예문이 가능한 한 한 화면에 들어오게 해줘. - 단어를 클릭할 때마다 스크롤을 많이 하지 않도록 해줘. 3. 시험지 모드 추가 - 기존 테스트를 시험지 모드로 바꿔줘. - 실제 학원 단어시험처럼 한 화면에 30개 문제를 표 형태로 보여줘. - 테스트 종류는 탭으로 나눠줘.   1) 영어 → 뜻   2) 뜻 → 영어   3) 듣기 → 영어 + 뜻 - 사용자는 30개를 모두 입력한 후 채점하기를 누른다. - 채점 후 각 문항마다 O/X를 표시해줘. - 점수 표시, 오답만 다시 보기 기능도 추가해줘.

 

 

셋째 날,

아래와 같이 수정사항 다시 요청함.

 

[프롬프트1, 2]

1. 사진 등록과 저장 기능을 먼저 안정화해줘. 1) 사진 등록 기능 현재는 카메라로 바로 찍어서 등록만 가능한데, 사진첩/갤러리에 저장된 이미지도 선택해서 업로드할 수 있게 해줘. 사진 등록 버튼을 누르면 사용자가 선택할 수 있게 해줘. a.카메라로 바로 촬영하기 b.사진첩에서 이미지 선택하기 아이폰, 아이패드, 안드로이드, PC에서 모두 작동하도록 해줘. 이미지 파일 형식은 jpg, png, heic도 가능하게 해줘. 2) 저장 방식 개선 localStorage만 사용하지 말고 IndexedDB를 사용해서 단어장 데이터를 안정적으로 저장해줘. 또한 단어장 내보내기/가져오기 기능을 추가해줘. - 내보내기: 저장된 단어장을 JSON 파일로 저장 - 가져오기: JSON 파일을 다시 불러와 복원 그래야 기기를 바꾸거나 홈화면 앱으로 열어도 단어장이 사라지지 않는다.

**현재 구현된 기능은 삭제하거나 새로 만들지 말고, 가능한 한 기존 구조를 유지하면서 수정해줘. 이미 저장된 단어장 데이터가 손실되지 않도록 해줘. 기존 UI 스타일은 유지하고, 아래 기능만 추가 또는 개선해줘. 2. 학습하기와 시험보기를 분리해서 수정해줘. 1. 학습하기 - 학습 화면에서는 영어 단어 목록을 30개씩 보여줘. - 사용자가 단어를 클릭하면 영어사전처럼 상세 정보를 보여줘. - 상세 정보에는 발음, 품사, 품사별 뜻, 품사 사용 빈도, 쉬운 예문, 예문 해석을 보여줘. - 이 상세 정보는 AI가 생성한 학습용 정보로 사용해줘. 2. 시험보기 - 시험보기에서는 사진 속 영어 단어와 한국어 뜻을 모두 OCR로 인식해줘. - 예시:   smile 미소, 미소 짓다   joy 기쁨, 즐거움   annoyed 짜증난, 화가난 - 시험 채점 기준은 반드시 사진에서 인식한 한국어 뜻으로 해줘. - AI가 생성한 추가 뜻은 시험 정답 기준에 포함하지 마. - 이유: 실제 학원 단어시험은 사진 속 단어장에 적힌 뜻을 기준으로 채점하기 때문이다. 3. 화면 표시 - 시험지 모드에서는 30개씩 문제를 보여줘. - 테스트 종류는 3개로 유지해줘.   1) 영어 → 뜻   2) 뜻 → 영어   3) 듣기 → 영어 + 뜻

** "현재 구조는 유지하고" 라는 말을 넣는 게 중요하다. AI가 "새로 만드는 게 빠르겠다" 라고 판단해서 기존 화면을 다 갈아엎는 경우가 있고, 그러면 크레딧도 많이 소진된다.

 

 

넷째날, 다시 수정하려고 보니,

크레딧이 없다고 하네요.

Lovable은 딱 3일만 무료사용인듯합니다. 

(6일이라고 안내해놓고서는...)

 

 

그래서 챗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에서 한 기록들이 있어. 

비슷하게 구현해 봅니다. 

1. React + Vite + TypeScript로 초등학생용 영어 단어 학습 PWA를 만들어줘. 앱 이름은 "레이첼 영단어"야. 핵심 기능: 1. 사진 업로드: 카메라 촬영과 사진첩 선택 둘 다 가능 2. OCR: 영어 단어와 한국어 뜻을 함께 인식 3. 2열 단어장은 번호 기준으로 정렬 4. 단어장은 30개 단위로 나눠 저장 5. 학습하기: 30개 단어 목록에서 모르는 단어만 클릭하면 상세 정보 표시 6. 시험보기:    - 영어 → 뜻    - 뜻 → 영어    - 듣기 → 영어 + 뜻    모두 30개를 표 형태로 한 번에 풀기 7. 저장: IndexedDB 사용 8. 내보내기/가져오기: JSON 백업 9. PWA: 홈화면 아이콘 포함 10. 모바일, 아이패드에서 보기 좋은 반응형 디자인 먼저 전체 폴더 구조를 만들고, 실행 방법을 알려줘.

 

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)

 

다 만들었으면 웹앱에서 열어서 

공유버튼 → 홈 화면에 추가

하면 앱처럼 쓸 수 있어요.

 

 

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

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

 

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

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

 

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

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