부연 설명을 하자면, 기본적으로 이미지 유사도 분석을 통해서 어떤 위치에 어떤 키가 있는지 인식 합니다.

이미지 유사도 분석을 위해서는, 각 키별 이미지가 필요한데, 이를 자동화 하기 위해 만든 도구가 vkeypad-studio입니다.
피그마를 통해 키보드 이미지 위에 사각형을 쌓아주면, svg에 레이어가 쌓입니다. 이 레이어들의 좌표를 추출해서 이미지를 crop하고, 좌표, keycode를 기록합니다.
그리고 이렇게 저장해둔 이미지와, 좌표를 통해서 키를 분석을 할수 있는것 입니다.

사실 피그마를 쓰도록 한건 단순히 사용자의 편의를 위해서였습니다. 대부분 가상 키보드가 고정폭이고, figma에서 제공하는 auto-align이 워낙 뛰어나서 flow를 이렇게 제공해도 되겠구나 싶었는데, 오히려 더 어렵게 느껴질수도 있을것 같네요.