안녕하세요! 최근 사이드 프로젝트로 웹에서 간편하게 한글 따라 쓰기를 연습할 수 있는 '한글 쓰기 연습 프로그램(Practice Korean)'을 개발했습니다.
처음 아이디어를 구현하는 것부터 시작해서 개발 과정 전반을 구글의 AI 스튜디오(Gemini)와 협업하며 진행했는데요, 생각보다 생산성이 엄청나게 올라가는 경험을 했습니다. 저처럼 나만의 웹 서비스를 직접 만들고 배포해 보고 싶으신 분들을 위해 생생한 제작기를 공유합니다.
1. 프로젝트의 시작: 왜 만들었을까?
한글을 처음 배우는 아이들이나 외국인 학습자들에게 가장 필요한 것 중 하나가 바로 '직접 써보는 연습'입니다. 시중에 인쇄용 학습지는 많지만, 태블릿이나 PC에서 설치 없이 바로 접속해 손가락이나 펜으로 슥슥 따라 쓸 수 있는 깔끔한 웹 도구가 있으면 좋겠다는 생각이 들었습니다.
- 핵심 목표:
- 설치나 회원가입 없이 링크만 누르면 바로 시작할 수 있을 것.
- 다양한 글씨체를 지원하여 악필 교정이나 정자체 연습이 모두 가능할 것.
- 반응형 인터페이스로 스마트폰, 태블릿, PC를 모두 지원할 것.
기술 스택은 빠르고 안정적인 모던 웹 개발을 위해 Vite + TypeScript + TailwindCSS 조합을 선택했습니다.
2. 구글 AI 스튜디오와의 협업, 그리고 깃허브(GitHub) 연동
개발 생산성을 극대화하기 위해 구글 AI 스튜디오(Google AI Studio)를 적극적으로 활용했습니다. AI 스튜디오 프롬프트 창에 구현하고 싶은 기능과 화면 레이아웃을 설명하면 리액트와 타입스크립트 기반의 완성도 높은 코드를 뱉어내 주었습니다.
코드가 완성된 후에는 지속적인 버전 관리와 배포를 위해 깃허브(GitHub) 저장소를 생성했습니다. 구글 AI 스튜디오 에디터 우측에 있는 [Sync to GitHub] 기능을 활용하니, 로컬 환경에서 복잡하게 Git 명령어를 치지 않아도 클릭 한 번으로 최신 코드가 레포지토리에 깔끔하게 반영되었습니다.
3. Vercel를 통한 배포 자동화(CI/CD) 구축
코드를 저장소에 올린 후, 전 세계 사람들이 접속할 수 있도록 웹 호스팅 서비스인 Vercel를 연결했습니다.
처음에는 구글 계정 가입 후 깃허브 연동 과정이 헷갈렸지만, Vercel에 깃허브 계정 접근 권한(Authorize Vercel)을 부여하니 제가 만든 PraticeKorean 저장소를 바로 불러올 수 있었습니다.
Netlify 빌드 설정은 Vite 프로젝트 기준에 맞춰 아래와 같이 세팅했습니다.
- Build command: npm run build
- Publish directory: dist
이 세팅의 가장 큰 장점은 '자동 배포 툴체인'이 완성된다는 점입니다. 이제 구글 AI 스튜디오에서 코드를 수정하고 깃허브 싱크를 누르면, Vercel 알아서 변경 사항을 감지해 10초 만에 실시간 사이트에 반영해 줍니다. 임시 주소를 원래 목표였던 깔끔한 도메인(https://pratice-korean.vercel.app/)으로 변경하는 것으로 배포를 마쳤습니다.
4. 데이터 기반 운영의 시작: 구글 애널리틱스 4(GA4) 연동
"과연 사람들이 내 서비스를 얼마나 많이 이용할까?" 홍보를 시작하기 전, 방문자 통계를 정확히 파악하기 위해 구글 애널리틱스 4(GA4)를 설치했습니다.
구글 애널리틱스에서 웹 스트림을 생성하여 G-로 시작하는 측정 ID와 추적 스크립트 코드를 발급받았고, 이를 프로젝트의 index.html 내 <head> 태그 닫히기 직전에 삽입했습니다.
[📷 사진 추천 4: 구글 애널리틱스의 '실시간(Real-time)' 보고서 화면 캡처 (내가 접속했을 때 사용자 수 '1'이 찍혀 있는 화면)]
코드를 넣고 깃허브 싱크를 누르니 자동 배포 덕분에 사이트에 즉시 반영되었습니다. 브라우저 시크릿 창을 켜고 사이트에 접속한 뒤 GA4의 [보고서] ➡️ [실시간] 메뉴를 확인해 보니, 사용자 수 1과 함께 접속 지역이 정확히 찍히는 감격스러운 순간을 확인할 수 있었습니다.
5. 앞으로의 발전 계획: 다양한 글씨체와 풍부한 예문
현재 서비스는 기본 고딕체 위주로 구현되어 있지만, 앞으로 사용자의 선택 폭을 넓히기 위해 다음과 같은 기능을 추가할 예정입니다.
- 원하는 글씨체 선택: 내가 가지고 있는 마음에 드는 글씨체를 이용해서 만들 수 있도록 개발예정입니다
- 풍부한 연습 예문: 한국어 학습자들에게 인기가 많은 BTS 가사(일부 구절 인용)나, 저작권이 만료되어 안심하고 사용할 수 있는 윤동주, 김소월 시인의 아름다운 현대시 구절을 대량으로 탑재해 지루하지 않게 쓰기 연습을 할 수 있도록 보완할 계획입니다.
6. 제작기를 마치며
기획부터 배포, 그리고 분석 툴 설치까지 AI와 협업하니 혼자서 몇 주가 걸릴 분량을 단 며칠 만에 끝낼 수 있었습니다. 개발 장벽이 낮아진 만큼, 앞으로 이 서비스를 필요한 커뮤니티(외국인 한국어 학습 커뮤니티 등)에 적극적으로 홍보하며 피드백을 받아 개선해 나가려고 합니다.
혹시 한글 쓰기 연습이 필요하시거나 서비스가 궁금하신 분들은 아래 링크로 언제든 편하게 방문해 주세요! 불필요한 가입 없이 바로 이용하실 수 있습니다.
👉 한글 쓰기 연습 프로그램 바로가기: https://pratice-korean.vercel.app/
'학습 도우미' 카테고리의 다른 글
| 독후감 쓰기에 대한 안내 (0) | 2026.07.09 |
|---|---|
| 학원 교재 양식 맞춤형 '일차방정식 문제 자동 생성기' 제작기! (0) | 2026.06.14 |
| [사고력 수학] 다이하드 물통 퍼즐을 아기자기한 마법 물약 게임으로 만들기 (0) | 2026.06.13 |