프로젝트 회고2025.09 - 2025.10개인 프로젝트

만점웹 기반 점자 학습 서비스 만들기

웹 기반 점자 학습 서비스. 점자표, 6점 입력, 선택형/입력형 연습, 한글 점자 변환기를 하나의 학습 흐름으로 묶었습니다.

프로젝트 소개

manjeom.biyeon.net에서 운영 중인 웹 기반 점자 학습 서비스 점자표를 보는 데서 끝나지 않고 6점 입력, 선택형/입력형 연습, 점자 변환기를 연결해 실제로 익힐 수 있는 흐름을 만들었습니다.

Main Screen

배포된 만점 서비스의 첫 화면을 캡처해 학습 시작, 점자 변환기, 점자표 진입 흐름을 보여줍니다.

Next.js App Router와 TypeScript로 화면을 구성하고, hangul-js와 JSON 점자 데이터를 조합해 한글 음절과 기호를 점자로 변환했습니다.

언어

TypeScript

점자 데이터 타입과 변환 결과 형태를 명확히 잡아, 데이터 수정이 화면과 변환 로직에 미치는 영향을 추적하기 위해 사용했습니다.

프레임워크/라이브러리

Next.js

점자표, 연습, 변환기, 관리자 화면을 App Router 기반 페이지로 나누고 실제 서비스로 배포하기 위해 사용했습니다.

React

6점 입력 패드, 퀴즈 화면, 변환 결과처럼 상태가 자주 바뀌는 UI를 컴포넌트로 구성하기 위해 사용했습니다.

Tailwind CSS

학습 화면의 버튼, 카드, 점자표 레이아웃을 빠르게 만들고 반응형 간격을 조정하기 위해 사용했습니다.

언어/라이브러리

TypeScript

점자 데이터 타입과 변환 결과 형태를 명확히 잡아, 데이터 수정이 화면과 변환 로직에 미치는 영향을 추적하기 위해 사용했습니다.

hangul-js

한글 음절을 초성, 중성, 종성으로 분해해 점자 변환 규칙을 적용하기 위해 사용했습니다.

데이터

JSON Data

점자표, 문제, 변환기가 같은 원천 데이터를 보도록 표준 점자 데이터를 구조화하기 위해 사용했습니다.

배포

Vercel

개인 도메인 manjeom.biyeon.net에 빠르게 배포하고 정적/동적 페이지를 함께 운영하기 위해 사용했습니다.

점자표, 연습 문제, 변환기가 같은 JSON 데이터를 기준으로 동작하도록 구성했습니다. 한글 변환은 `hangul-js`로 음절을 분해한 뒤 초성, 중성, 종성, 약자, 문장부호, 수학 기호 규칙을 순서대로 적용합니다.

점자 변환은 글자 하나를 코드 하나로 치환하는 문제가 아니었습니다. 한글 음절을 초성, 중성, 종성으로 분해하고, 초성 ㅇ 생략, 약자/약어, 약자+종성 조합까지 고려해야 실제 학습 화면에서 어색한 결과가 줄었습니다.
처음에는 단일 셀 기준으로 처리하던 로직 때문에 셀이 2개 이상인 점자에서 표기가 어긋났습니다. 선택형/입력형 연습의 모음 처리도 `toPoolSingle`에서 `toPoolMulti` 기준으로 바꾸며 여러 셀을 가진 점자 데이터를 안정적으로 다루도록 수정했습니다.
점자표, 문제, 변환기가 서로 다른 기준을 쓰면 학습 서비스의 신뢰도가 떨어집니다. 그래서 자음/모음/숫자/로마자/수학/문장부호 데이터를 JSON으로 분리하고, 화면과 변환기가 같은 데이터 소스를 보도록 정리했습니다.
문장부호와 로마자표를 추가하면서 ID와 mask 값의 일관성이 중요해졌습니다. 로마자표 mask 오류를 수정하고 문장부호 데이터를 보강해, 데이터 품질이 곧 문제 생성 품질로 이어진다는 점을 확인했습니다.
점자 변환기에서는 입력마다 변환이 반복되므로 디바운스와 메모이제이션을 적용했습니다. 불필요한 숫자 변환 함수를 제거하고 변환 페이지의 훅 구성을 정리해, 화면 반응성과 코드 이해도를 함께 개선했습니다.