[SideProj.] 일주일 Vibe Coding으로 만든 나만의 단어 시험 웹사이트, W.I.T.

 
🔗 W.I.T. 바로가기
 
https://statdusthub.github.io/W.I.T./

---

 

0. 제작 배경

영어 단어 공부를 하며 동기들과 스터디를 진행했고, 해커스북 단어 시험지 제작 사이트를 활용해 직접 시험지를 만들어 아이패드로 매일 단어 테스트를 진행했다.
 
손으로 써가며 외우는 학습 방식은 분명 도움이 되었지만, 막상 시험을 볼 때는 하루에 수십 개의 단어를 반복해서 적다 보니 팔에 부담이 커지고 점점 비효율적으로 느껴졌다.
‘굳이 매번 손으로 쓰면서 외워야 할까?’라는 고민이 들었고, 보다 편리하게 반복 학습할 수 있는 환경을 만들고 싶어 직접 단어 시험 웹사이트를 제작하게 되었다.
 
또한 학습을 이어가면서 반복적으로 틀리는 단어들이 계속 쌓이는 것을 체감했다. 어떤 단어를 몇 번 틀렸는지 수기로 기록하며 관리하는 과정은 생각보다 큰 부담이었고, 지속하기도 어려웠다. 이 경험을 통해 오답을 자동으로 기록하고 개인의 취약 단어를 추적해 주는 시스템이 있다면 훨씬 효율적인 복습이 가능하겠다고 느꼈고, 이러한 문제의식이 W.I.T 프로젝트의 핵심 기능 설계로 이어졌다.
 
+) 제작 시작은 지난 학기 기말고사 즈음(12월?) 만들었는데, 중간에 배포 직전에 멈췄다가 2월 말이 되어서야 배포를 진행했다. 제작 기간만 생각한다면 1주일 정도 걸린 것 같다.
 

1. 단어 시험 환경 설정

 
 

Light & Dark mode

라이트 모드와 다크 모드를 상황에 따라 바꿔 사용하는 사용자로서, 학습 환경의 몰입도를 높이기 위해 테마 전환 기능을 필수 요소로 구현했다. 낮과 밤, 주변에 따라 화면을 조절할 수 있어 눈의 피로를 줄이고 보다 편안한 학습 경험을 제공한다.

 
 

단어장 양식

단어 파일은 Category | Words | Meanings | Synonyms 컬럼 구조를 따르며, .xlsx / .xls / .csv 형식을 지원한다. 여러 개의 뜻이나 동의어는 콤마(,)로 구분해 입력해야 하며, 업로드한 파일을 기준으로 Category별 시험 출제가 가능하다. Category는 Day 번호뿐 아니라 시험 단위 등 사용 목적에 맞게 자유롭게 설정할 수 있다.
 

양식 예시

업로드 후 화면

 
업로드한 단어 데이터는 브라우저의 localStorage에 저장된다. 따라서 페이지를 새로고침하거나 탭을 닫았다 다시 열어도 그대로 유지된다. 다만 브라우저 캐시 또는 사이트 데이터를 직접 삭제하거나, 다른 브라우저 또는 시크릿 모드로 접속할 경우 데이터는 저장되지 않는다.
 
휴지통 버튼 클릭 시 브라우저 localStorage에 저장된 단어 데이터가 초기화된다. 삭제 전 확인 팝업이 표시되며, 데이터 삭제 후에는 기존 정보가 복구되지 않는다. 이후 다시 이용하려면 단어 파일을 재업로드해야 한다.

 
 
시험 설정

시험 유형은 영→한 / 영→영 두 가지로 구성되어 있으며, 학습 목적에 따라 연습 모드와 실전 모드를 선택할 수 있다. 연습 모드는 틀린 기록이 저장되지 않아 부담 없이 암기 연습에 활용할 수 있고, 실전 모드는 오답 단어가 자동으로 기록되어 실제 시험 대비용으로 사용할 수 있다.

 
 
문제 개수는 사용자가 직접 지정할 수 있으며, 0을 입력하면 선택한 Category의 전체 단어가 출제된다. 입력한 숫자가 선택한 단어 수를 초과할 경우 시험을 시작할 수 없다.
 

 
 
 

2. 단어 시험 응시

 

정답 판정 기준

정답은 반드시 업로드한 엑셀 파일에 등록된 답안을 그대로 입력해야 인정된다. 예를 들어, 정답이 “인정하다” 인 경우 “인정한” 과 같이 형태가 다른 답변은 오답으로 처리된다. 이후 입력 결과에 따라 다음과 같이 판정된다.
 
 
✅ 정답 : 엑셀 파일에 등록된 뜻 또는 동의어와 정확히 일치하는 경우 정답으로 처리된다. 
❌ 오답 : 등록된 정답과 일치하지 않거나 형태가 다른 단어를 입력한 경우 오답으로 처리된다.
⚠️ 부분 정답 : 여러 개의 정답이 등록된 경우, 일부만 입력하면 부분 정답으로 처리된다. (예: 전체 정답 2개 중 1개만 입력한 경우)
⛔ 입력 없이 제출한 경우 : 답을 입력하지 않고 정답 확인 버튼을 누르면 경고 메시지가 표시되며, 다음 문제로 진행할 수 없다.
 
다만 입력 편의성을 위해, 정답 뒤에 콤마(,)나 마침표(.) 등과 같은 불필요한 기호가 포함된 경우에도 정답으로 인정된다.
정답에 괄호로 표시된 보조 설명은 입력하지 않아도 되며, 핵심 의미만 입력해도 정답으로 처리된다.
또한, 답안을 입력하지 않은 상태에서 ‘다음 문제’ 버튼을 클릭하면 해당 문제는 자동으로 오답 처리된다. 

 

 
 
시험이 종료되면 최종 점수와 함께 전체 문제 수 대비 맞힌 개수와 틀린 개수가 요약 화면에 표시된다. 해당 화면에서 홈으로 돌아가거나, 동일한 Category로 다시 시험을 시작할 수 있다.

 
 
 

3. 틀린 시험 기록 및 관리

 
W.I.T.는 단순히 단어 시험을 보는 데서 끝나지 않고,
틀린 단어를 자동으로 기록하고 분석하여 다시 학습할 수 있도록 설계된 오답 관리 시스템을 제공한다.
 
 

Category 필터

업로드한 단어 파일의 Category 기준으로 오답을 필터링할 수 있다.
특정 Day 또는 원하는 단위만 선택해 확인할 수 있어, 범위별 복습이 가능하다.
 
 

단어별 오답 횟수 표시

각 단어 옆에는 해당 단어를 총 몇 번 틀렸는지가 표시된다. 이를 통해 자주 틀리는 단어를 한눈에 파악할 수 있다.
 
 

상세 기록

‘상세 기록’을 클릭하면 해당 단어의 뜻 / 동의어 / 오답 내역을 확인할 수 있다. 어떤 의미나 표현에서 반복적으로 실수했는지 바로 알 수 있다.
 
 

오답 리포트

각 단어 아래에는 오답 리포트가 시각화되어 표시된다. 뜻 또는 동의어 중 어느 부분에서 몇 번 틀렸는지를 막대 그래프로 확인할 수 있어, 취약한 영역을 직관적으로 파악할 수 있다.
 
 

오답 기록 다운로드 / 업로드

모든 오답 기록은 파일로 다운로드할 수 있으며, 저장된 파일을 다시 업로드해 학습 기록을 복원할 수 있다. 이를 통해 기기를 변경하거나 브라우저를 바꾼 경우에도 기존 오답 데이터를 그대로 이어서 사용할 수 있다.
 
오답 기록 파일은 다운로드 시 현재 날짜 기준으로 자동 파일명(틀린 단어기록_연도-월-일)이 생성되며, 날짜별로 학습 기록을 관리하고 이전 기록과 구분해 체계적으로 보관할 수 있다.
 
기본적으로 오답 데이터는 브라우저의 localStorage에 자동 저장되지만, 다음과 같은 경우 다운로드 / 업로드 기능이 특히 유용하다.

• 기기 변경 시 (노트북 → 데스크탑, 맥 → 윈도우 등)
• 브라우저 변경 시 (크롬 → 사파리 등)
• 시크릿 모드처럼 localStorage가 유지되지 않는 환경
• 브라우저 데이터 초기화 전 백업이 필요할 때
• 오답 기록을 다른 사람과 공유하고 싶을 때

반대로, 항상 같은 기기와 브라우저를 사용한다면 별도의 파일 저장 없이도 자동 저장만으로 충분하다.
 

 
 

오답 기록 엑셀 파일 구조

틀린 단어 기록은 엑셀 파일로 다운로드되며, 다음 정보들이 함께 저장된다.

• Category: 단어가 속한 시험 카테고리
• Words: 영어 단어
• Meanings / Synonyms: 해당 단어의 뜻과 동의어
• Wrong Count: 해당 단어를 틀린 총 횟수
• First Wrong Date / Last Wrong Date: 처음 틀린 날짜와 가장 최근에 틀린 날짜
• Missed Details: 뜻·동의어별 오답 횟수 (어떤 의미에서 얼마나 틀렸는지 기록)

 
 
틀린 단어로 시험 보기
기록된 오답만 모아서 다시 시험을 볼 수 있다. 단순 제출제가 아니라, 실제로 틀린 단어만을 기반으로 재학습이 이루어진다. 또한, 시험 유형에 따라 오답 복습 방식이 달라진다.

• 영 → 한 선택 시: 뜻 쓰기에서 틀린 단어만 시험 가능
• 영 → 영 선택 시: 동의어 작성에서 틀린 단어만 시험 가능

즉, 오답은 시험 유형 기준으로 분리 저장되며, 사용자는 자신이 약한 유형만 골라 집중적으로 복습할 수 있다.
 
 
기록 삭제
저장된 모든 오답 기록을 한 번에 삭제할 수 있다. 삭제 시 localStorage에 저장된 데이터가 제거되며, 이후 다시 단어 파일을 업로드해야 한다.
 
 

---

 

마무리하며

이번 W.I.T.는 처음으로 제대로 해 본 vibe coding 사이드 프로젝트였다.
사실 거창한 아이디어에서 시작한 게 아니라, 내가 진짜 필요해서 만들게 된 웹사이트다. 매일 단어 시험 보면서 팔 아프고, 오답 기록 관리하기 귀찮고, “이거 그냥 내가 만들면 더 편하지 않을까?”라는 생각에서 출발했다.
 
그런데 만들다 보니 은근히 재미있었고, “내가 쓰려고 만든 것”이다 보니 기능을 구현하는 과정에서도 막힘이 크게 없었다.
 
아직은 부족한 점도 많고 계속 다듬어야 할 부분도 있지만, 많은 사람들이 직접 써 보면서 남겨주는 피드백을 하나씩 반영해 보고 싶다.  기회가 된다면 나중에는 iOS 앱 형태로도 발전시켜 보고 싶다. (내가 애플 유저라서... ㅎㅎ)
 
무엇보다 이 프로젝트 덕분에 나 스스로도 영어 공부를 더 꾸준히 하게 될 것 같아서 그게 제일 좋다.
 
앞으로도 “내가 불편한 것들”을 하나씩 고쳐가며, 그때마다 새롭게 만드는 것들을 여기다 기록하고 공유해 보려고 한다.