[portfolio](https://geonwoo.kim/ko/portfolio) › 개인

# 언더더키 · 커스텀 키보드 플랫폼

https://geonwoo.kim/ko/portfolio/underthekey

기간: 2024.08 — 2024.11

커스텀 키보드 빌드를 한곳에서 다루려고 만든 플랫폼입니다. 실제 타건음을 들으며 타자를 연습합니다. 스위치 소리는 직접 녹음하고 믹싱했습니다.

2일 만에 사용자 500명

- [github](https://github.com/underthekey)
- [sentence-api](https://github.com/underthekey/sentence-api)

팀: 1인

역할: 기획·디자인 · 스위치 녹음·믹싱 · 랜덤 문장 공개 API · MSA 코어 모듈 · 프론트엔드 · 홈서버 · CI/CD · 모니터링

Java 17 · Spring Boot 3.3.3 · Spring Data JPA · Querydsl · MariaDB · Redis 7.2 · MinIO · Next.js · Web Audio API · Proxmox · Docker · Nginx Proxy Manager · Jenkins

- 체리 축 샘플 기반 스위치 소스 13종
- 키보드 배열별 입력 테스트
- imager: 사운드 공간감 시각화
- 볼륨 조절과 언어 변경
- 한국어 속담 약 5,000개와 영문 격언 약 300개를 언어·카테고리별로 내주는 공개 API
- 요청당 최대 20문장 응답

## 배열마다 늘어나는 음원 파일

문제: 처음에는 DAW 템플릿으로 키 배열(약 110개)별 소스를 만들어, 스위치마다 믹스된 파일 110개를 내려보냈습니다. 내려받는 파일이 많아 성능 문제가 있었고, 이 과정을 자동화하면서 줄일 방법이 필요했습니다.

해결: 믹스를 DAW 대신 클라이언트에서 Web Audio API로 하게 바꿨습니다. 8KB 소스 하나에 좌우 패닝, 상하 주파수, 키캡 크기별 필터를 걸어 모든 배열에 대응하는 템플릿을 만들었습니다. 내려받는 파일이 110개에서 1개로 줄었습니다.

## 공개 API 과다 요청

문제: 랜덤 문장 API는 공개 API라 요청이 몰릴 수 있었고, 서비스 핵심 서버라 멈추면 안 됐습니다. Remote IP를 직접 받아 세면 동시성 처리 부담이 컸고, 세부 규칙도 정할 수 있어야 했습니다.

해결: 정확성과 Redis TTL 연동을 따져 Bucket4j를 도입했습니다. 5분에 20회까지만 받도록 토큰을 제한해, 과도한 요청이 서버 부하로 이어지지 않게 했습니다.

## 아키텍처

Proxmox 위의 서비스, 문장 API, 데이터베이스 VM, 모니터링을 보여 주는 언더더키 배포 구조도

Proxmox 한 대 위에 서비스, 데이터베이스, 모니터링, CI를 나눈 구성입니다.

Proxmox 위의 Spring Boot 문장 API, Redis 캐시, MariaDB, 모니터링, Jenkins를 보여 주는 언더더키 문장 API 서버 구조도

문장 API 서버와 캐시, 데이터베이스를 VM별로 나눈 구성입니다.

문장을 따라 치는 언더더키 타이핑 화면

문장 입력과 타이핑 효과가 보이는 언더더키 화면

볼륨과 키보드 스위치를 고르는 언더더키 설정 창

키보드 스위치 종류를 고르는 언더더키 목록

타이핑에 반응하는 언더더키 입자 효과

입력한 키가 표시되는 언더더키 가상 키보드


[글로티커 · 거시경제 지표 크롬 익스텐션](https://geonwoo.kim/ko/portfolio/gloticker) · [서울팝 · 위치 기반 역사 탐방](https://geonwoo.kim/ko/portfolio/seoulpop)