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

 

이제 누구나 할 수 있는 바이브코딩,

누구나 앱을 만들 수 있는 시대.

 

아래와 같이 영어단어 암기 앱을 1차로 만들었고, 

오늘은 몇 가지 수정사항을 기록합니다.

 

[4. 방향찾는, 영어 수학 교수 방법] - 영어 단어 암기 앱 만들기 Lovable, Codex 직접 써본 솔직 후기

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

 

 

러버블 코딩앱은

매월 "6일간 무료크레딧 소량 제공"된다고 했는데,

 

1. 1~3일차: Lovable 무료크레딧으로 하루 2개씩 질문하여 앱 생성
2. 4일차 : 갑자기 Lovable에서 무료크레딧 없다함
   (잠깐 codex로 갈아탔다가)
3. 5일차 : 무료크레딧 다시 생겨서, 기존에 만든 앱을 다시 수정하려 함.
   1개의 질문 후, 2번째 질문에서 작업은 완료했는데, 빌드에 실패해서...
   무료크레딧만 날라가고...내일로 기대함. ㅎㅎ
   거의 다 했는데, 결제하기 아까워서...ㅋㅋ
4. 6일차 : 앱 완성. 필요한 것만 수정하고 마무리함. 
   (무료버전으로, 하루 질문 2개씩, 6일차에 완성)
   유료버전으로 하면 단 몇시간이면 가능합니다.

목차박스

1. Lovable로 영어단어장 앱 만들기 2차 2. 마무리

 

 1. Lovable로 영어단어장 앱 만들기 2차

수정 사항으로 질문 2개 하고 앱 완성 함.

 

[프롬프트1~3]

1. 어제 빌드 실패한거 오류사항 확인하고 해결해줘.

2. 현재 발행된 정상 버전을 기준으로 작업해줘. OCR 정렬, 단어장 저장 기능은 변경하지 마. 기존 “시험보기” 기능을 삭제하지 말고, 기존 시험보기 화면을 “암기하기” 기능으로 변경해줘. 수정 요구사항: 1. “시험보기”라는 이름을 “암기하기”로 바꿔줘. 2. 듣기 시험 기능은 제거해줘. - 듣고 영어+뜻 쓰기 메뉴는 없애줘. 3. 암기하기에는 두 가지 모드만 남겨줘. - 영어 보고 뜻 확인 - 뜻 보고 영어 확인 4. 화면은 기존 시험보기 표 구조를 활용해서, 아래와 같이 수정하면 돼. 표 구성: 번호 | 단어 | 듣기 | 뜻 확인 | 체크 5. 듣기 버튼은 단어 옆에 크게 표시해줘. 6. 뜻 칸은 처음에는 가려져 있게 해줘. - 뜻 칸을 터치하면 뜻이 보이게 해줘. - 다시 터치하면 뜻이 가려지게 해줘. - 가능하면 오른쪽으로 밀면 뜻 보기, 왼쪽으로 밀면 다시 가리기도 지원해줘. 7. 오른쪽 끝에는 외웠는지 체크할 수 있는 표시를 넣어줘. 상태 종류 ⬜ 미확인 (회색) ✅ 외웠음 (초록색) ❌ 아직 못 외움 (빨간색) 사용자가 상태를 누를 때마다 ⬜ → ✅ → ❌ → ⬜ 순서로 변경되게 해줘. 색상은 한눈에 구분 가능해야 한다. 9. 체크 상태는 저장되게 해줘. 앱을 다시 열어도 체크 상태가 유지되어야 해. 10. 화면 상단에 진행률을 표시해줘. 예시 ✅ 18개 ❌ 7개 ⬜ 5개 11. ❌ 단어만 보기 기능을 추가할 수 있도록 상태값을 저장해줘. 목표: 시험지가 아니라 30개 단어를 빠르게 훑으며 뜻을 확인하고 외웠는지 체크하는 암기하기 화면으로 바꾸는 것이다.

3. 현재 발행된 정상 버전을 기준으로 수정해줘. 새 기능을 추가하지 말고, OCR 정렬, 단어장 저장, 암기장 기능은 절대 변경하지 마. 이번 수정은 “작은 글자 버튼을 크게 보이게 만드는 것”만 해줘. 특히 아래 버튼/링크가 너무 작아서 아이가 찾기 어렵다. - 내 단어장 - 암기하기 - 학습으로 돌아가기 - 목록으로 - 나가기 - ❌단어만 보기 - 가져오기 - 내보내기 - 새 단어장 수정 요구사항: 1. 위 버튼들은 모두 일반 작은 글자가 아니라 크고 눈에 띄는 버튼 형태로 바꿔줘. 2. 새 컴포넌트를 만들지 말고, 기존 버튼과 CSS만 수정해줘. 3. 버튼 색상: - 내 단어장/ 나가기/목록으로/학습으로 돌아가기: 크고 색상있는 버튼, 연분홍 또는 연보라색상으로 해줘. 4. 아이콘도 함께 표시해줘. 예시: ⬅ 목록으로, 나가기 5. 절대 새 Floating Button 컴포넌트를 만들지 마. 어제처럼 빌드 오류가 나지 않도록 기존 파일 안에서 최소 수정으로 처리해줘. 목표: 아이들이 버튼을 찾지 않아도 한눈에 보고 바로 누를 수 있는 크고 선명한 버튼 UI로 바꾸는 것이다.

 

 

반응형

2. 마무리

https://rachel-wordscan.lovable.app/

Internal Lovable project

요렇게 만들어 졌어요.

 

codex는 프롬프트 하나에 10분정도 걸리는데,

러버블은 상대적으로 금방금방 되더라고요.

 

다음에 무료크레딧이 더 생기면, 

아이폰이나 패드에서 고품질 음성을 선택하라는 것과,

앱 아이콘을 이쁘게 만들어 달라고 질문할 예정입니다.

 

[예정 프롬프트]

1. 홈화면에 추가했을 때 보이는 앱 아이콘을 만들어줘. 앱 이름은 "레이첼 영단어"이고, 아이콘은 영어 단어장 느낌이 나게 만들어줘. PWA 설정을 추가해줘. - app name: 레이첼 영단어 - short name: 레이첼 - theme color: 밝은 파란색 또는 민트색 - 아이콘 크기: 192x192, 512x512 - 아이폰/아이패드 홈화면에서도 아이콘이 보이게 apple-touch-icon도 설정해줘. 홈화면에 추가했을 때 빈 아이콘이 아니라 앱 아이콘이 표시되게 수정해줘.

2. 현재 iPad Safari에서는 Samantha 음성이 사용되어 발음이 부자연스럽게 들린다. 사용 가능한 음성 목록을 확인하여 Samantha 대신 Siri Voice, Ava, Allison 등 고품질 미국식 음성을 우선 선택하도록 수정해줘. 설정 화면에서 사용 중인 음성을 선택할 수 있게 해줘.