자바스크립트(JavaScript)로 손글씨체를 구현하다!
자바스크립트(JavaScript)를 사용하여 손글씨체를 구현하고, 각 글자의 경로(Path)를 정의하여 렌더링함
Chaikin 곡선 알고리즘(Chaikin's curve algorithm)을 활용하여 부드러운 곡선 형태를 구현하고, 글자 획의 굵기 변화를 적용함
각 글자 쌍의 연결 문제를 해결하기 위해, 글자 경로의 시작과 끝에 연결 정보(Connection Info)를 추가하여 유연성을 확보함
글자 획의 굵기 조절(Variable Width), Perlin 노이즈(Perlin Noise)를 활용한 자연스러운 표현 등 다양한 시도를 통해 완성도를 높임
글자 경로 정의 및 편집 도구
개발자는 p5js 에디터(p5js editor) 내에서 글자 경로(Path)를 정의하고 편집하는 도구를 개발했다. 이 도구는 Chaikin 곡선(Chaikin Curve)을 적용한 결과를 실시간으로 보여주며, 사용자가 마우스 클릭(Mouse Click)으로 포인트를 추가하고 드래그하여 위치를 조정할 수 있도록 설계되었다. 또한, 각 글자에 대한 여러 가지 스타일 옵션(Style Options)을 제공하여 다양한 형태의 손글씨를 생성할 수 있도록 지원한다.
글자 연결 문제 해결
손글씨체 구현의 핵심 난제 중 하나인 글자 간의 자연스러운 연결 문제를 해결하기 위해, 개발자는 각 글자 경로의 시작과 끝에 연결 정보(Connection Info)를 추가했다. 이 정보는 다른 글자와의 연결 방식을 결정하며, 글자 쌍에 따라 추가 포인트(Additional Points)를 삽입하거나 삭제하는 방식으로 연결 문제를 해결한다. 이러한 접근 방식은 다양한 글자 조합에 대한 유연성을 제공하며, 시각적 일관성(Visual Consistency)을 유지하는 데 기여한다.
성능 최적화 및 코드 크기 관리
손글씨체 구현 과정에서 코드 크기(Code Size)를 줄이기 위한 노력이 있었다. 개발자는 글자 획의 좌표를 정의할 때, 기본 폰트 크기를 200으로 설정하여 소수점 자릿수를 제거하는 방식을 고려했다. 또한, minifier를 사용하여 코드의 크기를 줄이는 등, 성능 최적화(Performance Optimization)를 위한 다양한 방법을 모색했다. 이러한 노력은 손글씨체의 렌더링 속도(Rendering Speed)를 향상시키고, 사용자 경험을 개선하는 데 기여한다.
실제 활용 사례 및 향후 계획
개발자는 손글씨체를 다이어그램(Diagrams)의 제목, 레이블, 메모 등에 활용하고 있다. 또한, Perlin 노이즈(Perlin Noise)를 활용하여 글자에 자연스러운 질감(Natural Texture)을 부여하고, 글자 획의 굵기를 조절하는 등 다양한 시도를 통해 손글씨체의 완성도를 높였다. 향후에는 문장 생성 기능(Sentence Generation)을 추가하여, 더욱 다양한 활용 사례를 만들 계획이다.
