STILLCODING

STILL CODING / NOTES

가나 공방 개발 노트

히라가나와 가타카나를 같은 소리와 손의 움직임으로 연결하는 학습 공방

149개 확장 표기까지 쓰기, 음성, 단어, 비슷한 글자와 짝 학습으로 익히고 브라우저에 진도를 이어서 기록합니다.

앱 열기 가나 공방 소개 모든 노트 보기

  1. 배포 뒤 MIME 오류가 남았다 — 서비스 워커의 빌드 파일 캐시를 걷어내기

    가나 공방의 MIME 오류 관련 커밋 두 개와 현재 서비스 워커 코드를 대조합니다. HTML 폴백을 캐시에서 거르는 수정 뒤에 빌드 파일 요청을 가로채지 않도록 바뀐 과정, 기존 캐시를 지우는 장치, 오프라인 동작의 확인 범위를 다룹니다.

  2. 탁음·요음·외래어를 외우지 않고 '만들게' 하기 — 149개 표기를 7가지 규칙으로

    가나 공방은 기초 46자 다음의 탁음, 반탁음, 요음, 촉음, 장음, 외래어 표기를 파생 규칙으로 가르칩니다. 데이터에서 원글자와 조립식을 생성하는 방법, 코스별 진도 분리, 예시 단어에서 확인된 내용과 남은 검토 항목을 다룹니다.

  3. 일본어 타자를 가르치는데 한글 입력기가 켜져 있다면 — 물리 키로 받는 입력 연습

    가나 공방의 '가나 입력 공방'은 로마자 입력 규칙 7가지를 연습시킵니다. event.code로 물리 키를 읽고 읽기 전용 입력창에 값을 표시하는 구조, 조합 이벤트 처리의 확인 범위, sessionRef로 최신 문제를 읽는 방식을 설명합니다.

  4. iPad에서 짧은 획이 사라지고 시리가 뜬다 — 필기 캔버스의 입력 처리 보강

    가나 공방의 개발 문서에 기록된 iPad·Apple Pencil의 짧은 획 유실과 현재 포인터 처리를 대조합니다. 시리 화면과 입력 중단이 겹친 기록, 캡처 제거와 window 추적, 기기에서 다시 확인할 항목을 설명합니다.

  5. 글자가 획순대로 써지게 하려면 폰트로는 안 된다 — SVG로 만드는 획순 애니메이션

    히라가나·가타카나를 한 획씩 써 보여 주는 애니메이션을 만들려면 획의 윤곽과 중심선이 필요합니다. 가나 공방이 AnimCJK 데이터와 SVG stroke-dashoffset으로 획순 예시를 구현한 방법과 라이선스 처리를 정리합니다.