Three.hangul

문장은 선형적이지만, 그 속에 담긴 소리와 다채로운 표현은 결코 선형적인 방향성을 갖지 않는다. Three.hangul은 초성·중성·종성을 벡터의 세 차원으로 매칭하고, 음절마다 그 벡터를 이어 하나의 궤적으로 배치한 작품이다. 읽는 순서를 따라 흐르던 문장은 공간 안에서 접히고, 뻗고, 겹치며 저마다의 형태를 드러낸다. 문장을 쓰고 지우는 행위는 그 형태를 함께 만들고 다시 바꾼다.

이 작품은 백창인, 이재현 님께서 제작한 **〈삼채널한글〉**에서 영감을 받아 제작했다.

작품 열기 · 문학 문장 10개 둘러보기

흰 화면의 입력창에 한글 문장을 쓰면 음절마다 선이 이어진다. 입력을 덧붙이면 기존 궤적에서 자연스럽게 확장되고, 지우면 남은 궤적에 맞춰 공간이 부드럽게 줄어든다. 3차원 공간에는 텍스트나 설명을 띄우지 않는다.

한글 고정폭 글꼴 D2Coding과 Three.js로 구성했다. 입력할 때마다 장면을 새로 만들지 않고 선과 시야를 갱신한다.

자모 매칭 JSON은 국립국어원의 사전에 올릴 적의 자모와 받침 순서에 따라 쌍자음·합성 모음·겹받침까지 포함한다. index는 순서 번호, coordinate는 작품에서 사용하는 대칭 좌표다. 자모의 순서는 표준을 따르며, 숫자와 좌표 배치는 이 작품을 위해 정의했다.

종성은 받침 없음까지 28개이므로, 서로 다른 좌표를 순서대로 0의 양쪽에 대칭 배치하기 위해 반정수를 쓴다. 받침 없음은 index: 0, coordinate: −13.5이며, 좌표 0을 뜻하지 않는다.

각 음절의 [초성, 중성, 종성]은 이전 점에서 다음 점으로 이동하는 변위 벡터다. 원점에서 출발해 문장의 순서대로 벡터를 누적한다.

감 → ㄱ, ㅏ, ㅁ → [−9, −10, 2.5]

감감의 궤적:
[0, 0, 0] → [−9, −10, 2.5] → [−18, −20, 5]

입력을 NFC로 정규화한 뒤 현대 한글 완성형 음절만 계산한다. 공백, 문장부호, 숫자, 독립 자모와 한글 외 문자는 건너뛰며 선을 끊지 않는다.

원문 31개와 새 문장 140개의 궤적을 비교해 10개를 선별했다. 위 이미지는 그중 9개의 문장과 궤적을 3×3으로 배치한 것이다. 비교 화면에서는 10개의 궤적을 직접 돌려 보고, 원하는 문장을 입력 화면으로 가져올 수 있다.

선별한 문장은 문학 원문 5개와 새로 쓴 변주 5개로 구성된다. 변주는 해당 작가의 실제 문장이 아니며, 비교 화면과 문장 데이터에 원문·변주 구분과 원문 출처를 기록했다. 탐색 자료의 형태 점수는 후보를 비교하는 보조 수단으로, 아름다움의 객관적인 척도는 아니다.

Node.js 24와 npm을 권장한다. Node.js 20.19 이상인 20.x 또는 22.12 이상에서도 실행할 수 있다.

npm ci
npm run dev

개발 화면은 http://localhost:5173/, 문학 문장 비교 화면은 http://localhost:5173/literature.html에서 연다.

npm test          # 자모 분해·좌표·궤적 동작 검증
npm run build    # dist/에 정적 사이트 생성
npm run preview  # 빌드 결과를 로컬에서 확인

GitHub Actions가 main 브랜치의 변경을 검증하고 Vite로 빌드한 뒤 GitHub Pages에 배포한다. 프로젝트 경로 /Three.hangul/을 기준으로 자원과 페이지를 불러오며, 배포 주소는 taewooopark.github.io/Three.hangul이다.

D2Coding 글꼴의 라이선스는 SIL Open Font License 1.1에 명시되어 있다. 문학 인용의 출처와 구분은 문장 데이터를 참고할 수 있다.