소개
안녕하세요, 안성국입니다. 지난번에는 아주 간단하게 "배포" 목적으로 웹사이트를 만들어보았고, 이번에는 조금 기능을 붙여서 차근차근 배우는 방식으로 스터디에 참여하고 있습니다.
벌써 4주차인데, 가족여행 일정으로 2-3주차에 제대로 참여를 못했습니다. 초기에는 다소 기능이 복잡한(?) 웹사이트를 구현해보려고 하였는데, 조용히 나중으로 미루고.. 차분하게 한 단계씩 올라가면서 만드려고 합니다.
무엇을 만들까하다가, 마침 지텔프 영어시험을 치러야하는 개인적인 니즈가 생겼습니다. 역시 단어를 열심히 외워야하는데, 앱이나 여러 웹사이트를 찾아도 뭔가 딱 맞는게 없더라구요. 제가 공부하면서 모르는 단어만 쏙쏙 골라 담고 싶었고, 무엇보다 엑셀로 정리한 단어 리스트를 한방에 업로드해서 보고 싶다는 생각이 들었습니다.
"내 공부에 필요한 도구는 내가 직접 만들어보자!"는 목표로 G-TELP 나만의 암기장 프로젝트를 시작했습니다. 배포는 한 번 해보고, 그다지 어렵지 않은 기능이라서 쉬울 것으로 생각했어요.(쉬운 것만 골라하는 것 아님미다..단계적으로 차근...차근...)
진행 방법
사용 도구
코드 생성: 구글 안티그래비티
코드 수정: 윈도우 메모장
배포 도구: Vercel
일단 제미나이에게 이런 앱을 만들건데, 안티그래비티에게 명령할 프롬프트를 짜달라고 했습니다.
처음 만들어 준 것은 단어를 "수동"으로 입력하는 웹사이트였습니다.
제가 직접 단어와 뜻을 입력해야하죠. 듣기만 해도 불편합니다.
엑셀 업로드 방식으로 바꿔 달라고 했습니다.
엑셀 파일 올리기 버튼 (A열 단어, B열 뜻 자동 인식)
플래시카드 효과 (클릭하면 뒤집히면서 뜻이 나옴)
디자인: 네이비 & 골드 포인트로 신뢰감 주는 느낌
[미션]
나는 지텔프(G-TELP) 시험을 준비하는 수험생이야.
[나만의 암기장] 웹서비스를 만들 건데, 일일이 입력하기 귀찮아서 '엑셀 업로드' 기능을 넣고 싶어.
이번에도 딱 1개의 'index.html' 파일로 만들어 줘.
[기술 요구사항]
1. 파일명: index.html
2. 라이브러리:
- 디자인: Tailwind CSS (CDN)
- 엑셀 처리: SheetJS (CDN: https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js)
3. 데이터 저장: 'localStorage' 사용 (새로고침 해도 데이터 유지).
[주요 기능]
1. [기본 데이터 탑재]: 처음 실행하면 사용자가 심심하지 않게 '지텔프 필수 영단어 10개'를 미리 넣어놔 줘. (예: require-요구하다, mandatory-의무적인 등)
2. [엑셀 업로드 버튼]:
- 상단에 '엑셀 파일 올리기' 버튼 배치.
- 엑셀 파일(.xlsx)을 선택하면, A열을 '단어', B열을 '뜻'으로 인식해서 자동으로 리스트에 추가해 줘.
3. [수동 입력]: 기존처럼 한 개씩 입력해서 추가하는 기능도 유지.
4. [플래시카드 리스트]:
- 카드에는 '단어'만 크게 보임.
- 클릭하면 뒤집히는 애니메이션과 함께 '뜻'이 나옴.
- 각 카드에 [삭제] 버튼 포함.
5. 디자인: 네이비(Navy) & 골드(Gold) 포인트로 전문적인 느낌.
이 코드를 작성해서 보여줘.
안티그래비티에게 그대로 넣음과 동시에, 챗지피티로 가서 엑셀로 200개 정도 단어장을 만들어달라고 했습니다. (부가적으로, 요새 사무직분들. 챗지피티 엑셀이 업데이트 되면서 엄청 좋아진 거 아시죵?)
배포: AI가 짜준 코드를 메모장에 붙여넣고 index.html 로 저장한 뒤, CMD를 열어서 Vercel CLI를 통해 명령어 한 줄(vercel --prod)로 배포했습니다.
금방 잘 만들어줬고, 기능도 구현해줬는데 디자인이 조금 튀어나온 부분이 있습니다. 일단 제미나이에게 모든 단계를 의존하고 있기에 ㅎㅎ 결국 제미나이가 수정해준 코드로 index.html에서 수정했습니다.
다시 만들어서 완성했습니다. 엑셀 업로드도 잘 됩니다.
주요 기능 시연
PC에서 엑셀 파일 업로드: 제가 정리한 단어 100개가 1초 만에 등록되었습니다.
모바일 반응형: 처음엔 화면이 깨졌는데, flex-col 코드를 수정해서 폰에서도 입력창이 깔끔하게 나옵니다.
플래시카드 뒤집기: 단어를 누르면 휙 돌아가면서 뜻이 나오는 애니메이션이 아주 부드럽습니다.
아직 못한 부분 & 계획과 AI답변
웹 말고, 모바일에서도 열고 동기화되게 하고 싶어
우리가 사용한 localStorage 방식은 "각각의 기기(브라우저)에만 따로 저장하는 방식"입니다. - PC에서 업로드: PC 크롬 브라우저의 '서랍'에 저장됨. - 모바일에서 접속: 모바일 크롬 브라우저의 '서랍'을 열어봄. -> 텅 비어있음! (PC랑 모바일은 서로 연결되어 있지 않으니까요.) 지금은 "서버(구름 위 저장소)"가 없고 "내 기기(내 주머니)"에만 저장하는 상태라서 그렇습니다.그럼 로그인 기능과 DB연동을 하고 싶어!
만약 "PC에서 입력하면 폰에서도 자동으로 뜨게(동기화)" 하고 싶다면, 그때는 **[데이터베이스(DB)]**와 **[로그인 기능]**이 필요합니다.
현재: 각자도생 (PC 따로, 폰 따로)
미래 (Lv.10): Firebase나 Supabase 같은 DB를 써서, "꾹꾹이 계정"으로 로그인하면 데이터를 불러오는 방식.
하지만 오늘은 지금 방식이 훨씬 안전하고 빠릅니다.엑셀을 많이 올려도 괜찮을까?
Q. 엑셀 많이 올리면 DB 터지나? 👉 절대 안 터집니다. 왜냐하면 'DB(서버)'가 없기 때문입니다! 이 웹서비스의 가장 큰 장점(이자 특징)은 Serverless(서버 없음) & Client-side(내 컴퓨터 처리) 방식이라는 점이에요. 처리 장소: 엑셀 파일 100MB를 올려도, Vercel 서버가 아니라 **꾹꾹이님의 브라우저(크롬)**가 낑낑대며 처리합니다. 서버비는 0원입니다. 저장 장소: 데이터베이스가 아니라 **꾹꾹이님의 브라우저 용량(Local Storage)**에 저장됩니다. [주의할 점] DB 부하는 없지만, 브라우저 저장 용량의 한계는 있습니다. Local Storage 한계: 보통 5MB 정도입니다. 얼마나 들어가나?: 텍스트로 된 영어 단어는 용량이 아주 작아서, 대략 단어 2~3만 개 정도는 거뜬히 들어갑니다. 결론: 지텔프 단어장(보통 1~2천 개) 수준에서는 렉도 안 걸리고 아주 쌩쌩 돌아갑니다. 걱정 마세요!
사실 명확하게 이해되는 건 아닙니다. 어쨌든 동기화는 되지 않고, 로컬에서만 돌아가는 구조라고 이해되는데요, 일반적인 서비스가 아니라서 좀 헷갈립니다.(동기화 세상에서만 살아옴..)
지금은 제 브라우저에만 데이터가 저장되어서, PC랑 스마트폰의 단어장이 따로 놉니다. 나중에는 다른 스터디원처럼 로그인 기능을 붙여서 어디서든 제가 공부한 내용이 연동되게 업그레이드해보고 싶습니다.
향후 다른 시험, 공부, 지식정리할 때도 꽤 유용할 것 같습니다. 스터디원 분들도 쓰셔도 될듯합니다ㅎㅎㅎ 일단 현재 페이지에 기능을 더 붙여보고, 가능하다면 로그인과 DB까지 구현해보겠습니다. 모르면 스터디장님께 여쭤볼게요!
사이트 주소(나만의 단어장): https://gtelp.vercel.app/
감사합니다.
