가부터 힣까지

자판을 치면 초성·중성·종성 조각이 날아와 한 글자로 조립되고, 한글 음절 11,172자 지도에서 내 이름의 글자가 몇 번째인지 찾아보고 해부도 카드로 하나하나 풀어 보는 한글 조립 실험실이에요. ■ 이렇게 해 보세요 · 휴대폰: 작품 화면을 한 번 누르면 바로 자판이 나와요. 화면 자판을 눌러 치고, 지도는 끌어서 옮기고 두 번 눌러 확대해요(두 손가락으로 벌려도 돼요). · 컴퓨터: 작품 화면을 한 번 누른 뒤에 키보드를 쓸 수 있어요. 두벌식 자리 그대로 치면 되고 한/영 상태는 상관없어요. Shift는 쌍자음, ⌫는 지우기, 숫자 1·2·3은 조립·지도·해부도 탭이에요. 지도는 휠이나 두 번 클릭으로 확대해요. · 먼저 해 볼 것: 내 이름을 쳐 보세요. 조각이 칸에 끼워지고, 모음과 받침에 따라 글자 모양(6가지)이 바뀌는 게 보여요. 다 치면 '해부도' 탭을 눌러 보세요. · 숨은 재미: '사랑해요'를 치면 받침이 두 번 옆 글자로 넘어가는 순간을 반 배속으로 천천히 보여 줘요. '똠'이나 제목의 '힣'처럼 완성형 2,350자에 없는 글자도 찾아보세요. ■ 무엇을 볼 수 있나요 · [조립] 큰 칸에서 글자가 조립돼요. '숫자로 보기'를 누르면 유니코드 공식 0xAC00 + (초성×21 + 중성)×28 + 종성으로 지금 글자의 코드와 11,172자 중 몇 번째인지 계산해 보여 줘요. 예를 들어 '한'은 10,589번째예요. · [지도] 한글 음절 11,172자를 한 장에 모았어요. 큰 칸 하나가 초성 하나이고, 가로로 중성 21개, 세로로 받침 28가지(받침 없음 포함)가 늘어서요. 1987년에 정한 완성형(KS C 5601, 지금의 KS X 1001) 2,350자와 나머지 8,822자를 색으로 나눴고, 확대하면 점이 글자로 바뀌어요. 내가 친 글자는 주홍 핀으로 꽂혀요. · [해부도] 이름을 5자까지 자모·코드값·몇 번째 글자인지로 풀어 줘요. 화면이 넉넉하면 지도 축소판 위에 친 순서대로 '이름 별자리'도 그려요. 캡처해서 친구·가족 이름과 비교해 보세요. · 미션 3개(받침 두 번 넘기기, 완성형 밖 글자, 겹받침 글자)가 있어요. 점수나 시간은 없어요. · '획 더하기'를 누르면 ㄱ에 획 하나를 더해 ㅋ이 되는 것처럼, 「훈민정음」 해례본 제자해에 적힌 글자 만드는 원리를 11장 카드로 보여 줘요. ■ 알아 두세요 · 소리는 화면을 누른 뒤에 나와요. 오른쪽 위 소리 버튼을 누르면 소리 크기 막대(처음 40)가 열리고, 한 번 더 누르면 소리가 꺼져요(마우스는 올리면 열리고 누르면 꺼져요). 꺼진 채로 막대를 움직이면 고른 크기로 다시 켜지고, 0으로 내리면 꺼져요. 키보드는 Tab으로 막대에 들어가 화살표로 고르고 Esc로 닫아요. 막대가 열려 있어도 자판은 그대로 쳐져요. · 이 사이트에서는 기록이 저장되지 않아요. 새로고침하면 처음부터 다시 시작해요. · 위쪽 '전체화면' 버튼으로 크게 볼 수 있어요. 큰 모니터에서 전체화면으로 보면 글자와 버튼이 더 커져요. · 입력한 이름은 이 화면에만 있고 어디로도 보내지 않아요. ■ 만든 과정 · Hotml 운영자가 Claude Code에게 기획서(PRD)를 맡겼어요. Claude Code가 관점이 다른 기획안 4개(작품 후보 12개)를 쓰고 3가지 관점으로 심사한 뒤, 고른 세 작품의 장마다 플랫폼 제약 검증과 비평을 거쳐 기획서를 다듬었어요. · 그 기획서대로 Claude Code가 코드를 쓰고, 헤드리스 브라우저로 휴대폰·컴퓨터 화면 크기를 흉내 내 캡처를 찍어 보며 검토하고 고치기를 되풀이했어요. 휴대폰 화면 크기 6가지(가로 화면 포함)에서 터치만으로 처음부터 결과 화면까지 조작해 보는 시험도 했어요. · 기간: 기획 1일(2026-10-10), 제작과 검토·수정 2일(10-11~10-12). · 사람이 한 일: 처음 요청과 기획 방향, 기획서에 남은 질문 결정(운영자 예시 표시, 결과 화면의 'Hotml에서 실행' 표기 등). · HTML 파일 하나로 만들었고 인터넷에서 아무것도 불러오지 않아요. 이미지·글꼴·음악 파일 없이 그림은 canvas와 SVG로, 소리는 Web Audio로 코드에서 직접 만들었어요. · 두벌식 입력기(오토마타)를 직접 구현해서 운영체제 입력기 없이 돌아가요. · 작품 안에 자동 시험 73개를 넣었어요. 11,172자 분해·조합 왕복, 입력열 54개, 완성형 2,350자 집합, 화면 크기 13종의 넘침·겹침을 확인해요. ■ 사용한 프롬프트 · 기획 요청(원문): "여기에 운영자가 예시로 올릴 프로그램을 3개 만드려고 해. 3개로 사이트의 정체성을 표현할 수 있게 다양한 카테고리로 만들고싶어. 그리고 아무래도 예시 프로그램이니까 완성도도 엄청나게 만들고싶어. 우선 prd를 작성해줘." · 제작 요청(원문): "셋 다 만들어서 사이트에 올리기 까지 해줘." ■ 사용한 AI 도구 · Claude Code (Claude Opus 5.5): 기획서, 코드, 테스트 · 이미지·음악 생성 도구는 쓰지 않았어요. ■ 소스 코드 · 작품 페이지의 '파일 다운로드'로 index.html을 받아 메모장이나 코드 편집기로 열어 볼 수 있어요. 한국어 주석과 목차가 달려 있어요. · 맨 위 '① 바꿔 보세요' 표부터 보면 쉬워요. 색(COLOR), 화면 문구(TEXT), 자판 위 예시 낱말(EXAMPLES), 움직임 시간(CONFIG)을 바꾸면 작품 전체에 반영돼요. ■ 바뀐 점 · 2026-10-12 버전 1.0 처음 공개 · 2026-10-14 버전 1.1 소리를 부드럽게 다듬고(높은 음을 낮추고 쨍한 소리를 깎음), 처음 소리 크기를 예전의 40%로 낮추고, 소리 크기 막대를 달았어요.