일상에서 외국인을 마주치는 일이 많다 보니 가끔 영어를 사용해야 할 때가 있습니다.
업무에서도 영어가 완전히 남의 이야기는 아닙니다. 자주는 아니지만 영어로 회의를 진행할 때가 있고, 전화로 영어 통화를 해야 하는 경우도 있습니다.
해외여행도 가능하면 1년에 한 번 정도는 가려고 합니다. 영어권 국가일 수도 있고 유럽일 수도 있습니다. 어느 곳을 가더라도 영어가 필요한 순간은 생깁니다.
그런데 영어는 사용하지 않으면 금방 멀어집니다.
직장생활을 계속하는 입장에서 영어를 놓는다는 것이 단순히 외국어 하나를 못하게 되는 문제로만 느껴지지 않았습니다.
영어를 놓는 순간 내가 할 수 있는 일의 범위도 조금씩 줄어들 수 있다는 생각이 들었습니다.
그렇다고 다시 영어책을 사서 공부하는 방식도 제게는 잘 맞지 않았습니다.
책을 사면 처음에는 봅니다. 하지만 계속 들고 다니기도 불편하고, 내가 실제로 필요한 표현만 골라 반복하기도 어렵습니다. 새로운 학습 서비스를 이용하면 비용도 듭니다.
무엇보다 문제는 시작이 아니라 지속성이었습니다.
그래서 생각을 바꿨습니다.
내가 영어 공부 방식에 맞추는 대신, 내 생활에 맞는 영어 공부 도구를 직접 만들면 어떨까?
이 생각에서 MY ENGLISH LAB이 시작됐습니다.
✓ 코딩을 모르는데 웹앱을 어떻게 만들었을까
아이디어는 있었지만 웹앱을 직접 만들어본 적은 없었습니다. 처음부터 코딩을 배우는 대신, AI와 역할을 나눠보기로 했습니다.
제가 먼저 정한 것은 기술이 아니라 하루 학습량, 필요한 영어 상황, 문장을 보여주는 방식, 듣기와 복습을 연결하는 방식이었습니다. 기본 학습량은 하루 5문장으로 잡았습니다.
두 AI의 역할도 의도적으로 나눴습니다. ChatGPT는 기획자와 설계자 역할을 맡아 학습 방식을 정리하고 화면 구조와 요구사항을 구체화했습니다. Claude Code는 개발자 역할을 맡아 실제 HTML, CSS, JavaScript 코드를 작성하고 수정했습니다.
제가 필요한 것을 정하면 → ChatGPT가 구조를 설계하고 → Claude Code가 구현하고 → 제가 실제 사용하며 다시 수정하는 방식으로 진행했습니다.
여행이나 업무에서 실제로 쓸 만한 문장을 중심으로 고르고, 모르는 문장은 나중에 다시 만날 수 있게 만들자고 정했습니다.
✓ ChatGPT에서 스마트폰까지, 웹앱은 이렇게 만들어졌습니다
Claude Code가 코드를 만들었다고 바로 스마트폰에서 쓰는 웹앱이 되는 것은 아니었습니다. 여기서 GitHub와 Netlify가 등장합니다.
GitHub에는 코드 원본을 저장하고 수정 이력을 관리합니다. Netlify는 그 코드를 인터넷에서 접속할 수 있는 주소로 배포합니다.
그렇게 만들어진 주소를 스마트폰에서 열자 MY ENGLISH LAB이 실제로 실행됐습니다. ‘AI로 코딩해봤다’는 것과는 느낌이 상당히 달랐습니다. 실제로 제가 사용할 수 있는 도구가 된 것입니다.
✓ 하루 5문장에 듣기와 복습을 넣었습니다
문장을 눈으로만 보는 것으로는 부족해서, 브라우저에서 바로 쓸 수 있는 Web Speech API로 듣기 기능을 넣었습니다. 별도의 유료 음성 서비스는 쓰지 않았고, 데스크톱과 스마트폰에서 모두 테스트했습니다.
매일 같은 문장을 반복해서 보여주는 방식은 원하지 않아서, 하루 5문장을 새 문장 3개 + 복습 문장 2개로 구성했습니다. 복습할 문장이 없으면 새 문장으로 채웁니다.
학습 후에는 문장마다 ‘모르겠음 / 조금 어려움 / 알고 있음’ 세 단계로 평가하고, 평가 결과에 따라 복습 우선순위를 조정합니다. 학습 결과와 우선순위는 브라우저의 localStorage에 저장합니다.
✓ 여행·회의·전화, 실제 필요한 영어부터 넣었습니다
문장도 무작정 많이 넣기보다, 제가 실제로 영어를 쓸 가능성이 있는 상황을 기준으로 나눴습니다. 현재 대분류는 여행 / 회사·회의 / 사무용 / 일상 네 가지입니다.
영어시험용 앱이 아니라, 필요한 순간에 쓸 영어를 조금씩 계속 붙잡는 도구를 원했기 때문입니다. 하루 5문장이 실력을 크게 바꾸지는 않겠지만, 부담이 크지 않아 다시 열어볼 가능성을 높이고 어려운 문장은 다음 학습에서 다시 만날 수 있도록 만들었습니다. 저에게는 이 지속 가능한 구조가 중요했습니다.
✓ 모든 기능을 처음부터 붙일 필요는 없었습니다
웹앱을 만들면서 Supabase 계정과 프로젝트도 준비했습니다. 연결하면 휴대폰을 바꿔도 학습기록을 불러오거나, 가족 여러 명의 기록을 따로 관리하는 방식으로 발전시킬 수 있습니다.
하지만 아직 실제 DB는 연결하지 않았습니다. 지금은 localStorage만으로도 개인적으로 사용하고 기능을 테스트하는 데 충분하다고 판단했기 때문입니다. 가족과 Netlify 주소를 공유해도 각자의 휴대폰 브라우저에 따로 저장되어 기록이 섞이지 않지만, 브라우저 데이터를 지우거나 기기를 바꾸면 기록이 사라지는 한계는 있습니다. 이 불편함이 커지면 그때 Supabase를 연결할 생각입니다.
AI로 무언가를 만든다고 해서 가능한 기술을 처음부터 다 붙일 필요는 없다는 것도 이번에 배웠습니다. 실제로 써보면서 필요할 때 하나씩 채워가면 충분했습니다.
✓ AI를 사용하는 것과 실제로 만들어보는 것은 달랐습니다
ChatGPT와 Claude를 쓰는 것은 이제 특별한 일이 아닙니다. 하지만 실제 문제 하나를 정해 기획하고 → 개발하고 → 저장하고 → 배포하고 → 스마트폰에서 써보는 것까지 해보니 AI를 보는 관점이 조금 달라졌습니다.
중요한 것은 AI가 코드를 얼마나 잘 짜는가만이 아니었습니다. 무엇을 만들지 정하고, 기능을 나누고, 결과를 직접 쓰면서 다시 고치는 것은 결국 사람의 몫이었습니다.
MY ENGLISH LAB도 완성형은 아닙니다. 앞으로 실제로 사용하면서 필요한 기능만 하나씩 추가해볼 생각입니다. 코딩을 먼저 배운 것이 아니라, 필요한 것을 먼저 정하고 AI와 함께 만들어봤습니다. 저에게는 그 순서가 꽤 중요한 경험이었습니다.
| 모바일 웹앱 | 완료 |
| 여행·회사·사무·일상 카테고리 | 완료 |
| 영어 문장·뜻 보기 | 완료 |
| 영어 듣기 | 완료 |
| 하루 5문장 | 완료 |
| 새 문장 3 + 복습 2 | 완료 |
| 3단계 자기평가 | 완료 |
| localStorage 복습 관리 | 완료 |
| GitHub 버전관리 | 완료 |
| Netlify 공개 배포 | 완료 |
| Supabase DB 연결 | 향후 확장 |
| 기기간 학습기록 동기화 | 향후 확장 |
| AI 영어 튜터·대화 | 향후 확장 |
English Summary
MY ENGLISH LAB is a personal English-learning web app designed with ChatGPT and developed with Claude Code. The source code is managed on GitHub and deployed through Netlify for use on PCs and smartphones. It combines daily sentences, listening, self-evaluation, and review priorities to make English practice easier to continue.