🎯 Claude AI와 함께 React Native Expo로 안드로이드용 영어 단어장 앱 만들기 - 진짜 초보도 따라할 수 있어요!

안녕하세요 여러분! 😊

오늘은 제가 Claude AI의 도움을 받아서 학원 전자칠판(안드로이드 운영체제)에서 사용할 영어 단어장 앱을 처음부터 끝까지 만들어본 경험을 공유해 볼게요. 코딩을 잘 못해도 AI 친구의 도움을 받으면 이렇게 실용적인 앱을 뚝딱 만들 수 있다는 걸 보여드리고 싶었거든요! 🚀

 

"해당 APK파일이 필요하실 분들은 댓글로 메일 주소를 보내주시면 시간 나는 대로 보내드리겠습니다."

 

최종완성본

---

🤔 프로젝트의 시작 - 왜 이런 앱이 필요했을까?

저는 학원을 운영하면서 항상 고민이 있었어요. 전자칠판에서 학생들에게 영어 단어를 보여주고 싶은데, 기존 앱들은 제가 원하는 방식대로 동작하지 않더라고요. 😅

제가 원했던 건 정말 심플했어요:

• 📌 왼쪽에는 영어 단어
• 📌 오른쪽에는 한글 해석
• 📌 선생님이 터치하면 다음 단어로 슝~

게다가 전자칠판은 안드로이드 운영체제로 돌아가기 때문에 APK 파일로 설치할 수 있어야 했고, 동시에 윈도우 PC에서도 웹 형태로 바로 사용할 수 있으면 좋겠다고 생각했어요.

그래서 Claude에게 이렇게 물어봤죠! 👇

새로운 프로젝트를 할 거야. 이번에는 전자칠판(안드로이드 운영체제)에서 
사용할 프로그램을 만들 건데 2종류로 만들 거야.
- apk파일로 만들어서 전자칠판에 설치하는 버전
- 윈도우10 운영체제에 웹형식으로 바로 사용 가능한 버전

---

🛠️ 첫 번째 단계 - 개발 환경 선택하기

Claude에게 "윈도우11에서 APK 파일을 만들려면 어떻게 해야 하나요?"라고 물었더니, 세 가지 옵션을 제시해 줬어요!

📊 개발 프레임워크 비교

구분 React Native + Expo Flutter Android Studio (네이티브)

언어	JavaScript/TypeScript	Dart	Kotlin/Java
학습 난이도	⭐⭐ (웹 개발 경험 있으면 쉬움)	⭐⭐⭐ (새 언어 학습 필요)	⭐⭐⭐⭐
웹+앱 동시 개발	✅ 가능	✅ 가능	❌ 별도 개발 필요
빌드 난이도	⭐ (EAS로 간편)	⭐⭐	⭐⭐⭐
UI 퀄리티	좋음	매우 좋음	좋음
추천 대상	웹 개발자, JS 경험자	새로 시작하는 개발자	안드로이드 전문 개발자

 

저는 고민 없이 React Native + Expo를 선택했어요! 🎉

Claude도 이렇게 추천해 줬거든요:

"사용자님의 기존 React 경험을 살리고, 웹 버전도 같이 만들 수 있어서 Expo를 추천드립니다."

---

💻 개발 환경 설정하기

자, 이제 본격적으로 시작해 볼게요! 먼저 필요한 도구들을 설치해야 해요.

Step 1: Node.js 버전 확인

node -v   # 버전 확인 (이미 설치되어 있으면 스킵!)

Step 2: Expo CLI 설치

npm install -g expo-cli

Step 3: EAS CLI 설치 (APK 빌드용)

npm install -g eas-cli

Step 4: 프로젝트 생성 🎊

npx create-expo-app VocabBoard --template blank
cd VocabBoard

Step 5: 필요한 패키지 설치

npx expo install @supabase/supabase-js
npx expo install react-native-url-polyfill
npx expo install @react-native-async-storage/async-storage

 

여기서 잠깐! 웹에서 테스트하려면 추가 패키지가 필요해요:

npx expo install react-dom react-native-web

 

이거 안 하면 이런 에러가 떠요 😱:

It looks like you're trying to use web support but don't have 
the required dependencies installed.

---

🗄️ 데이터베이스 구조 - Supabase 활용

저는 이미 Supabase에 영어 단어 데이터베이스를 가지고 있었어요!

📋 quiz_words_dup 테이블 구조

컬럼명 타입 설명 예시

id	int8	고유 ID	1, 2, 3...
grade	varchar	등급	"초등", "중등"
english_word	varchar	영어 단어	"apple"
korean_answer	varchar	한글 해석	"사과"

 

총 2,738개 단어가 들어있었어요! 이 정도면 학원에서 쓰기에 충분하죠? 😄

---

🎨 버전별 개발 히스토리

📍 Version 1.0 - 첫 번째 시도 (심플 랜덤 단어)

처음에는 여러 단어를 리스트로 보여주는 방식이었는데, 컨셉을 바꿨어요!

컨셉을 수정해야 할 듯 해. 전체 영어 단어 중 랜덤으로 하나의 영어단어만 
왼쪽에 나오고 오른쪽은 해석이 나오면 되는 거야. 그 외에는 아무것도 필요 없어.

 

Claude가 바로 심플하게 만들어줬어요:

✅ 화면 전체가 반으로 나뉨
✅ 왼쪽: 영어 단어 (흰색, 큰 글씨)
✅ 오른쪽: 한글 해석 (노란색, 큰 글씨)
✅ 화면 아무 곳이나 터치 → 다음 랜덤 단어로 변경

---

📍 Version 2.0 - 표시 모드 버튼 추가

수업할 때 영어만 보여주고 학생들이 뜻을 맞추게 하고 싶었어요!

상단에 버튼식으로 "E/ㅎ", "/ㅎ", "E/" 이렇게 버튼 3개를 만들어줘.
E는 영어, ㅎ은 한글이란 의미야!

🎯 모드별 동작 설명

버튼 왼쪽 화면 오른쪽 화면 용도

영어/한글	영어 단어	한글 해석	기본 학습
영어	영어 단어 (중앙)	-	뜻 맞추기 퀴즈
한글	-	한글 해석 (중앙)	영단어 맞추기 퀴즈

 

나중에 "영어", "한글" 버튼을 누르면 화면 정중앙에 표시되도록 수정했어요. 이게 훨씬 보기 좋더라고요! 👍

---

📍 Version 3.0 - 자동 재생 기능 추가 ⏱️

선생님이 계속 터치하면서 단어를 넘기는 건 너무 불편하잖아요?

하단 왼쪽에 📝단어설정+콤보박스, 시계아이콘+Time+콤보박스, 
그리고 Start버튼 이렇게 배치해줘!

단어설정 콤보박스: 10, 30, 50, 100
Time 콤보박스: 1, 3 (초 단위)

🎮 동작 방식

상태 동작

Start 안 눌렀을 때	화면 터치 또는 Enter 키 → 다음 랜덤 단어
Start 눌렀을 때	자동으로 설정된 시간마다 단어 변경
재생 완료	설정된 개수 도달 시 자동 정지
재생 중	버튼이 "Stop (3/10)" 형태로 표시

 

예를 들어 단어 10개, Time 1초 선택 후 Start 버튼을 누르면? → 1초마다 단어가 슝슝 바뀌면서 10개 후 자동 정지! 🎯

---

📍 Version 4.0 - 단어 순서 관리 + 진행 표시

단어설정을 한 개수만큼 랜덤으로 저장을 하고, 
"영어/한글"을 누르면 reset을 하게 해줘.
단어설정 콤보박스와 시계아이콘 사이에 "x/설정단어" 이렇게 텍스트 표시해줘!

 

이제 하단에 "3/10" 처럼 현재 몇 번째 단어인지 표시돼요! 📊

---

📍 Version 5.0 - 속도 최적화 🚀

100개 단어를 로드하니까 너무 느렸어요... 😰

100개의 단어 로드를 하니 너무 딜레이가 심한데 이걸 빠르게 바꿀 수는 없을까?

⚡ 최적화 전후 비교

구분 기존 방식 개선 방식

API 호출	100개 = 100번 호출 😱	1번 호출 후 셔플 ✨
로딩 시간	10초 이상	1초 이내
체감 속도	답답함	즉시 반응

 

Claude가 Fisher-Yates 셔플 알고리즘으로 클라이언트에서 처리하도록 바꿔줬어요:

// Fisher-Yates 셔플 알고리즘
const shuffled = [...allWords];
for (let i = shuffled.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
const words = shuffled.slice(0, count);

---

📍 Version 6.0 - Lock/Unlock 기능 🔐

수업 중에 실수로 "영어/한글" 버튼을 눌러서 단어가 리셋되면 곤란하잖아요!

하단 중앙에 "Lock"이란 버튼을 만들고 
활성화 상태는 녹색, 비활성화 상태는 빨간색으로 해줘.
활성화 상태일 때는 영어/한글 버튼을 눌러도 reset이 되지 않게 해줘!

🔒 Lock 버튼 상태

상태 표시 색상 동작

Unlock (기본)	🔓 Unlock	🔴 빨간색	영어/한글 클릭 시 새 단어 로드
Lock	🔒 Lock	🟢 녹색	영어/한글 클릭해도 단어 유지

 

처음에는 아이콘만 있었는데, 직관적으로 "Lock/Unlock" 텍스트로 바꿨어요!

---

📍 Version 7.0 - Ahead 버튼 추가 ⏮️

단어를 보다가 처음으로 돌아가고 싶을 때가 있어요!

추가 버튼이 또 생겼어. "Ahead"란 단어로 클릭 시 저장된 단어의 맨 처음으로 가야 해.
위치는 "Ahead", "Lock", "Start" 이렇게 맨 아래 오른쪽에 위치하면 좋겠어.

 

이제 Ahead 버튼(파란색)을 누르면 1번 단어로 슝~ 돌아가요! 🎯

---

📍 Version 8.0 - 키보드 Enter 문제 해결 ⌨️

이상한 버그가 있었어요. 버튼을 클릭한 후 Enter 키를 누르면 그 버튼이 다시 눌리는 거예요! 😤

아직까지 버튼들을 누르면 포커스가 해제가 안 되고 
Enter가 계속 실행이 되고 있어!

 

Claude가 모든 버튼에 클릭 후 포커스 해제 코드를 추가해 줬어요:

// 버튼 클릭 핸들러에 추가
const handleButtonClick = () => {
  // 버튼 로직 실행
  doSomething();
  
  // 포커스 해제 - 이게 핵심!
  document.activeElement.blur();
};

 

이제 어떤 버튼을 클릭해도 Enter 키는 오직 다음 단어로 이동만 해요! ✅

---

📱 드디어 APK 빌드!

앱 기능이 완성됐으니 이제 실제 APK 파일을 만들 차례예요! 🎉

Step 1: Expo 계정 로그인

npx expo login
# 계정이 없다면: npx expo register

Step 2: EAS 프로젝트 설정

eas build:configure

 

⚠️ Git이 없다면 이런 에러가 나요:

git command not found. Install it before proceeding or 
set EAS_NO_VCS=1 to use EAS CLI without Git

 

걱정 마세요! 환경 변수 설정하면 돼요:

# PowerShell에서
$env:EAS_NO_VCS=1
eas build:configure

Step 3: APK 빌드 실행 🚀

# 한 줄로 실행 (PowerShell)
$env:EAS_NO_VCS=1; eas build -p android --profile preview

 

빌드는 Expo 서버에서 진행돼요. 약 10~20분 걸리고, 완료되면 다운로드 링크가 터미널에 표시됩니다!

---

🔧 빌드 오류와의 전쟁 (feat. 삽질 기록)

순탄하게 될 리가 없죠... 여러 오류를 만났어요 😅

🐛 오류 1: words.json 파일을 찾지 못함

Error: Unable to resolve module ./assets/words.json

 

원인: 로컬 데이터 파일이 assets 폴더에 없었어요!

해결:

1. words.json 파일을 assets 폴더에 넣기
2. metro.config.js 파일 추가

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('json');

module.exports = config;

---

🐛 오류 2: Kotlin 버전 충돌 💥

'compose-ui' was compiled with Kotlin compiler version 2.0.21 
but 'expo-modules-core' was compiled with version 2.1.0

 

이건 진짜 골치 아팠어요... Expo SDK 52에서 발생하는 문제였어요.

해결: Expo SDK를 51로 다운그레이드!

📊 SDK 버전 변경 내용

항목 이전 (SDK 52) 이후 (SDK 51)

Expo SDK	52	51
React	18.3.1	18.2.0
React Native	0.76.5	0.74.5

# node_modules 삭제 후 재설치
Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json
npm install

---

🐛 오류 3: projectId / slug 불일치

Project config: Slug for project identified by "extra.eas.projectId" 
(VocabBoard) does not match the "slug" field (vocabboard)

 

원인: 대소문자가 달랐어요! 😱

해결: app.json에서 slug를 맞춰주기

 

{
  "expo": {
    "slug": "VocabBoard",  // 대소문자 맞추기!
    "extra": {
      "eas": {
        "projectId": "1959c3c6-6527-4573-a2b2-c631deabefc0"
      }
    }
  }
}

---

📐 반응형 UI 적용하기

APK를 핸드폰에 설치해 보니 글자가 너무 크게 나왔어요! 전자칠판용으로 만들었으니 당연한 결과... 😅

다운해서 내 핸드폰에 설치를 해보니 너무 크게 나오네. 
혹시 반응형으로 수정이 될 수 있어?

 

Claude가 화면 크기에 따라 자동 조절되도록 바꿔줬어요!

📱 화면 크기별 UI 변화

화면 크기 단어 글자 크기 버튼 표시

작은 화면 (< 600px)	화면 너비의 12~15%	아이콘만 표시
중간 화면 (600~1200px)	화면 너비의 10~12%	중간 크기
큰 화면 (> 1200px)	화면 너비의 8~10%	전체 텍스트 표시

 

작은 화면에서는 "단어설정", "Time" 텍스트가 숨겨지고 아이콘만 표시돼요. 공간 활용 굿! 👍

---

🖥️ 전체화면 모드 구현

핸드폰에서 테스트해 보니 상단 상태바와 하단 네비게이션 바가 계속 보였어요.

전체화면이 안 되고 실제 화면에서는 상단에 상태바랑 하단 네비바가 안 없어져.
그리고 회전을 해도 세로 고정으로 되고 있어.

⚙️ app.json 전체화면 설정

{
  "expo": {
    "orientation": "default",  // 가로/세로 모두 지원
    "androidStatusBar": {
      "hidden": true,
      "translucent": true
    },
    "androidNavigationBar": {
      "visible": "immersive"  // 스와이프로 일시 표시
    }
  }
}

---

💾 로컬 데이터로 전환하기

인터넷이 연결되지 않은 환경에서도 앱을 사용할 수 있도록 변경했어요!

단어 data를 로컬로 APK 안에 추가하려면 어떻게 해야 해?

📊 온라인 vs 로컬 데이터 비교

구분 Supabase (온라인) words.json (로컬)

인터넷 필요	✅ 필요	❌ 불필요
로딩 속도	느림 (API 호출)	즉시 반응
데이터 업데이트	실시간 가능	앱 재빌드 필요
단어 수	2,738개	2,738개
추천 상황	자주 업데이트 필요할 때	오프라인 사용 필요할 때

🔄 변환 과정

1. Supabase 대시보드에서 CSV 내보내기
2. Claude에게 JSON 변환 요청
3. assets/words.json에 저장
4. App.js에서 import 방식 변경

// 기존: Supabase에서 가져오기
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// 변경: 로컬 JSON 사용
import wordsData from './assets/words.json';

---

🖥️ PC에서 APK 테스트하기

매번 핸드폰으로 APK를 옮기는 건 너무 귀찮아요!

APK 파일 만든 걸 PC에서 어떻게 볼 수 있을까? 
매번 핸드폰에 옮겨서 설치하기 번거러워서 그래.

📊 테스트 방법 비교

방법 설치 난이도 속도 추천 상황

웹 브라우저	⭐ (가장 쉬움)	즉시	개발 중 빠른 테스트
Android Studio 에뮬레이터	⭐⭐⭐	보통	APK 최종 확인
BlueStacks	⭐⭐	빠름	가벼운 테스트

🌐 웹 브라우저로 테스트 (가장 추천!)

cd C:\Users\조성현\VocabBoard
npx expo start
# 실행 후 'w' 키 누르면 웹 브라우저에서 열림!

 

빌드 없이 바로 테스트할 수 있어서 개발 중에는 이 방법이 최고예요! ✨

---

🏪 Play 스토어 등록은 어떻게?

APK 파일을 설치할 때 "알 수 없는 소스 설치 허용" 경고가 떠요.

"알 수 없는 소스 설치 허용" 없이 바로 설치는 어떻게 하면 되는 거야?

📊 배포 방법 비교

방법 비용 심사 설치 경고 추천 대상

APK 직접 배포	무료	없음	⚠️ 있음	내부 사용, 테스트
내부 테스트 트랙	$25 (1회)	없음	✅ 없음	특정 사용자만
Play 스토어 정식	$25 (1회)	1~3일	✅ 없음	일반 공개

🎯 현실적인 조언

학원 전자칠판이나 특정 기기에만 설치할 거라면, 그냥 APK 방식이 가장 간단해요! 한 번만 "알 수 없는 소스 허용"을 설정하면 끝이니까요 😊

---

✅ 최종 완성된 앱 기능 정리

기능 설명

표시 모드	영어/한글, 영어만, 한글만
단어 개수	10, 30, 50, 100개 선택
자동 재생	1초, 3초 간격
컨트롤	Start/Stop, Lock/Unlock, Ahead
조작	화면 터치 또는 Enter 키
데이터	로컬 JSON (2,738개 단어)
화면	반응형 UI, 전체화면 지원

---

🎓 이 프로젝트에서 배운 것들

1️⃣ AI 코딩 어시스턴트의 힘 💪

Claude는 제가 요청한 기능을 바로바로 구현해 줬고, 오류가 발생하면 해결책도 제시해 줬어요. 며칠 걸릴 작업을 몇 시간 만에 끝낼 수 있었어요!

2️⃣ Expo의 편리함 🚀

하나의 코드로 웹과 안드로이드 앱을 동시에 만들 수 있다는 건 정말 큰 장점이에요. EAS를 통한 클라우드 빌드도 너무 편리했어요!

3️⃣ 점진적 개발의 중요성 📈

처음부터 완벽한 앱을 만들려고 하지 않고, 기본 기능부터 시작해서 하나씩 추가해 나가는 방식이 효과적이었어요.

4️⃣ 버전 호환성 주의 ⚠️

Expo SDK 52에서 발생한 Kotlin 버전 충돌처럼, 최신 버전이 항상 좋은 건 아니에요! 안정적인 버전을 선택하는 것도 중요한 판단이에요.

---

🎁 마무리

이렇게 Claude AI의 도움을 받아 안드로이드 운영체제용 영어 단어장 앱을 완성했어요! 🎉

처음에는 막막했지만, AI와 대화하면서 하나씩 기능을 추가해나가다 보니 어느새 쓸만한 앱이 완성되어 있었어요.

여러분도 만들고 싶은 앱이 있다면, 너무 어렵게 생각하지 마시고 AI의 도움을 받아보세요! 생각보다 훨씬 쉽게 원하는 결과물을 얻을 수 있을 거예요 😊

 

이 글이 도움이 되셨다면 댓글과 공감 부탁드려요! 💕 궁금한 점이 있으시면 언제든 질문해 주세요!