← 프로젝트 목록02 / CASE STUDY

CREATIVE TOOL / EXPRESSION

Keyboard Canvas

글을 색으로 바꿀 때, 내가 쓴 말은 어떤 모습으로 남을까.

v1.0.0 · 배포 기록
키보드 그림판 실행 화면
실제 그림판 화면 기록
01 / 만든 기록

키를 누르면 무엇이 남을까?

처음에는 피아노 키보드처럼 무언가를 누르면 반응하는 작은 도구를 생각했습니다. 그런데 키를 누를 때마다 그 흔적이 사라지는 것보다는 어디엔가 쌓이면 재밌겠다는 생각이 들었습니다.

소리로 표현할 수도 있고 그림으로 표현할 수도 있겠지요. 우선 색깔부터 해보기로 했습니다.

내가 쓴 글의 색깔을 보고 싶다.

같은 도구로 같은 규칙을 사용해도 제가 쓴 글과 다른 사람이 쓴 글은 분명 다를 겁니다. 그렇다면 결과로 나오는 그림도 달라지지 않을까? 그게 시작이었습니다.

02 / 만든 기록

같은 글자는 같은 색이어야 하지 않을까?

그림을 예쁘게 만드는 것이 목적이라면 아무 색이나 무작위로 뿌려도 됩니다. 그런데 그러면 굳이 글을 입력해야 할 이유가 없지 않을까 싶었습니다.

그래서 같은 글자는 항상 같은 색이라는 규칙을 먼저 정했습니다. 한글은 자모로 나눠서 보고, 영문과 숫자, 기호까지 각각 어떤 색으로 표현할지도 고민했습니다. 공백은 어떻게 할 것인가 하는 문제도 있었습니다.

100×100 크기의 작은 화면에서 시작해 한 칸에 무엇을 표현할지, 글이 길어지면 어떻게 보여줄지 조금씩 바꿔봤습니다. 원래는 단순한 생각이었는데 규칙을 정하는 과정은 생각보다 복잡했습니다.

03 / 만든 기록

만들었다가, 다시 되돌리고

자음과 모음의 영역을 나눠보기도 했고, 색의 밝기나 분포를 바꾸기도 했습니다. 마음에 드는 그림이 나오는 경우도 있었지만, 그럴수록 제가 처음 정한 규칙에서 멀어지는 경우도 있었습니다.

확대 방식도 바꿔보고, 화면이 너무 복잡해지면 이전 버전으로 되돌렸습니다. 되돌리는 과정에서 엉뚱한 글자의 색이 잘못 표시되기도 했습니다.

그렇게 실험하다가 한 가지를 계속 생각했습니다. 그림이 보기 좋다는 것과 내가 쓴 글이 표현됐다는 것은 같은 이야기일까? 지금도 답을 다 얻은 것은 아닙니다.

04 / 만든 기록

일단 지금까지 만든 것은

현재 v1.0.0에는 글자를 색으로 바꿔 그림을 만드는 기능과 PNG 저장, 두 가지 생성 방식이 들어 있습니다. 기기별 해상도를 맞추기 위해 삼성 55종과 아이폰 30종의 프리셋을 만들었고, 문자 색상 규칙도 494개까지 정리했습니다.

한국어를 비롯한 네 가지 언어의 화면을 준비했고, 입력량이 많아질 때 속도나 출력이 어떻게 달라지는지 테스트하면서 렌더링 방식도 수정했습니다.

Cloudflare에 배포해 직접 사용할 수 있도록 해뒀습니다. 그래도 처음 생각했던 모습에 완전히 만족하는 것은 아닙니다.

05 / 만든 기록

그럼 다른 사람의 글은 어떤 색일까?

내 글의 색깔을 보고 싶어서 시작했습니다. 그런데 만들어 놓고 보니 다른 사람은 어떤 색을 만들까 궁금해졌습니다.

글의 뜻을 몰라도 색만 보고 무언가 느낄 수 있을까? 같은 규칙으로 그림을 만들었을 때 서로의 결과를 비교하는 것도 재미있지 않을까?

지금 있는 것은 글을 그림으로 바꾸는 도구입니다. 그 뒤에 사람들의 그림을 어떻게 보여주고 연결할지는 아직 더 생각해보고 싶은 부분입니다.

USED TECHNOLOGIES

사용한 기술과 역할

글자를 색으로 바꾸는 계산부터 PNG 저장, 웹 배포까지 직접 사용한 기술들입니다.

화면
HTML · CSS · JavaScript글 입력, 색상 규칙 카드, 기종과 생성 방식 선택 화면을 만들었습니다.
그림 생성
Canvas 2D API · 픽셀 버퍼글자마다 정한 색을 이미지로 그리고, 기종 해상도에 맞춰 PNG로 저장합니다.
문자 처리
JavaScript · Unicode한글 자모와 영문, 숫자, 기호를 규칙에 따라 색으로 변환합니다.
배포와 번역
Cloudflare Workers · DeepL API그림판 정적 파일을 제공하고, 서버 측 번역 요청을 중계합니다.
빌드와 확인
Node.js · 자동 테스트기기별 해상도, 출력 크기, 입력 제한, 생성 방식 등을 확인했습니다.