비하인드 스토리: 국제 키
Figma는 미국 키보드 기준으로 설계된 단축키가 국제 키보드 사용자에게 작동하지 않는 문제를 해결하기 위해 1년간 단축키 시스템을 개선했다. 문제는 단순히 키 조합을 추가하는 것이 아니라, 브라우저의 키보드 이벤트 처리, 문자 정규화, 키보드 레이아웃 감지 등 여러 계층에 걸쳐 있었다. 특히 독일어 `ß`처럼 대소문자 변환만으로는 안전하게 처리할 수 없는 문자와 수천 가지 키보드 레이아웃이 복잡성을 높였다. ### 국제 키보드에서 발생한 단축키 문제 - Figma의 기존 단축키는 미국 키보드를 기준으로 설계되었다. - 일부 사용자는 키보드에 존재하지 않는 키를 요구받았다. - `⌘ + \`로 UI를 전환해야 하지만 `\` 키가 없는 경우 - `/` 키를 누를 수 없어 Cursor Chat을 시작할 수 없는 경우 - 단축키는 작업 효율성과 접근성에 중요한 기능이므로, 모든 지역의 사용자가 동일한 기능을 이용할 수 있어야 했다. - 이를 해결하기 위해 에디터 사용성 팀을 중심으로 여러 직군이 참여한 프로젝트가 시작되었다. ### Figma의 단축키 처리 구조 - 사용자가 키를 누르면 브라우저가 `KeyboardEvent`를 Figma에 전달한다. - Figma는 이벤트를 에디터가 해석할 수 있는 내부 표현으로 변환한다. - 가능한 단축키와 실행할 동작은 JSON 파일에 정의되어 있다. - 단축키 활성화 여부는 다음과 같은 상태에 따라 달라진다. - 사용자 설정 - 현재 사용 중인 Figma 제품 - 운영체제 - 기타 제품 상태 - 입력된 키 조합을 정의된 단축키 목록과 비교해 일치하면 해당 동작을 실행한다. ### 단순한 단축키 추가로 해결되지 않은 이유 - 처음에는 키보드별 대체 조합을 JSON에 추가하면 될 것처럼 보였다. - 스웨덴어 키보드: `⌘ + ]` 대신 `Meta + Ä` - 한국어 키보드: `⌘ + \` 대신 `₩` - 그러나 단축키를 정규화하는 과정에서 언어별 문자의 특수성이 드러났다. - 독일어 키보드의 `Meta + Alt + ß`를 처리할 때 JavaScript의 `"ß".toUpperCase()`가 `SS`로 변환되었다. - 하나의 키 문자가 두 글자로 늘어나면서 단일 키 단축키라는 전제가 깨졌다. - 더 나아가 `"ß".toUpperCase().toLowerCase()`도 원래의 `ß`로 되돌아가지 않았다. - Figma는 대문자 에스체트인 `ẞ`를 사용해 우회했다. - `ẞ`는 대문자로 변환해도 동일하게 유지된다. - 이 문자는 2017년 독일 철자위원회에서 공식 채택되었지만, 프로그래밍 언어와 도구의 지원은 아직 완전하지 않았다. ### 키보드 레이아웃 감지의 어려움 - 전 세계에는 매우 많은 키보드 레이아웃이 있어, 처음부터 모두 지원하기는 어려웠다. - Figma는 사용자가 많이 사용하는 레이아웃부터 지원하기로 했다. - 데스크톱 앱에서는 운영체제의 키보드 설정을 직접 감지할 수 있었다. - 브라우저에서는 운영체제 정보를 충분히 얻기 어려워 실험적인 Keyboard API와 휴리스틱을 사용했다. - API가 제공하는 키 위치별 문자를 알려진 레이아웃과 비교해 사용자의 레이아웃을 추정했다. - 예를 들어 `Quote` 키 위치에 `ä`가 입력되는지 확인하고 다른 키 정보와 조합해 스웨덴어 키보드인지 추론한다. - 실제 사용 데이터를 수집한 결과, 30일 동안 Figma에서 2,500개가 넘는 서로 다른 키보드 레이아웃이 관찰되었다. - 이는 키보드 레이아웃의 다양성이 예상보다 훨씬 크며, 국제 단축키 지원이 단순한 지역별 매핑 이상의 문제임을 보여준다. 국제 키보드 단축키를 설계할 때는 특정 국가의 키 조합을 추가하는 데 그치지 말고, 문자 정규화의 언어적 예외, 브라우저와 데스크톱 환경의 감지 차이, 레이아웃의 폭넓은 다양성을 함께 고려해야 한다. 특히 키 이름이나 문자를 문자열로만 처리하면 `ß` 사례처럼 예기치 않은 변환이 발생할 수 있으므로, 키 위치와 입력 문자를 구분하는 견고한 설계가 필요하다.
원문 읽기(새 탭에서 열림)