안녕하세요 :) 오늘은 requestAnimationFrame() 함수를 활용해 부드러운 애니메이션을 구현하고 성능을 최적화한 경험을 공유하고자 합니다. 회사에서 Canvas를 이용해 Figma처럼 드로잉툴을 구현해야 하는 과제가 있었습니다. 제가 택한 구현 방법은 mousemove 이벤트가 발생할 때마다 점을 수집해 state에 저장하고, 이를 기반으로 선을 그리는 것이었습니다. 아주 간단한 예시 코드는 다음과 같습니다. const handleMouseMove = () => { const point = stageRef.current.getPointerPosition(); if (point) { setDrawingPoints((prev) => [...prev, point]); ..

안녕하세요 😊 오늘은 Swagger 문서와 같은 OAS(OpenAPI Specification) 문서로부터 원하는 형태로 타입을 자동 생성하는 Generator를 직접 만든 경험을 공유하고자 합니다.  문제 정의타입스크립트가 보편화되면서 우리는 더 안전하게 코드를 작성할 수 있는 환경을 가지게 되었습니다. 하지만 그만큼 작성해야 하는 코드도 많아졌죠. 특히 API 통신 시 전달받은 API 스펙에 맞춰 타입을 수동으로 정의하는 과정은 번거롭고, 실수도 발생하기 쉬운 부분입니다. 직접 입력하다 보면 타입을 잘못 정의하거나 백엔드 개발자가 수정한 내용을 반영하지 못하는 경우가 생길 수 있죠. 저는 이전에  graphql-codegen이라는 라이브러리를 사용한 경험이 있어서, REST API에서도 자동으로 타..

안녕하세요 :) 웹 접근성 개선은 모든 사용자가 불편함 없이 웹을 이용할 수 있도록 하는 중요한 작업입니다. 하지만 리소스가 한정적인 스타트업에서는 단순히 “좋은 일이니까 하자”는 이유만으로 시간을 할애하기가 쉽지 않습니다. 그래서 우리는 왜 웹 접근성을 개선해야 하는지보다, 어떻게 현실적으로 추진할 수 있었는지를 중심으로 이야기해보려고 합니다. 저희 회사는 일본과 미국을 포함한 글로벌 프로젝트를 많이 진행했습니다. 해외에서는 웹 접근성이 법적으로도 중요한 요소이고, 이를 준수하지 않으면 소송의 대상이 될 수도 있습니다. 따라서 프론트엔드 팀에서 더 나은 사용자 경험을 제공하면서도 최소한의 법적 기준을 충족할 수 있도록 접근성 개선을 주도하게 되었습니다. 그 과정에서 저는 사내 접근성 스터디를 열었고, ..

안녕하세요:) 오늘은 거대한 컴포넌트를 복합 컴포넌트 패턴으로 리팩토링한 경험을 공유하고자 합니다.문제상황해결 과정을 설명하기 전에 어떤 문제점이 있었는지 살펴보겠습니다. 제가 리팩토링한 컴포넌트는 Input이었는데요.우리는 더 나은 사용자 경험을 제공하기 위해 input에 정해진 패턴의 값만 입력할 수 있는 기능을 구현합니다. 특히 카드번호나 휴대폰 번호와 같은 숫자 입력 시 자동으로 하이픈(-)이 삽입되도록 하는 경우가 많습니다. 이러한 기능을 편리하게 제공하면서도 공통된 스타일과 로직(clear 버튼 등)을 적용하기 위해 Input 컴포넌트는 점점 더 복잡해졌습니다.interface InputProps { type: 'text' | 'number' | 'pattern', value: T ..

🎄  A11y Advent Calendar (번역) 24일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 이상적인 세상에서는 접근성을 인간의 권리이자 윤리적 의무로 당연하게 받아들이며, 이를 위해 별도의 설득이 필요하지 않을 것입니다. 그러나 현실에서는 관리자나 고객을 설득하여 처음부터 접근성을 고려하도록 하는 일이 종종 필요합니다. 헤이든 피커링(Heydon Pickering)의 유명한 말이 있습니다.“Accessibility is not about doing more work but about doing the right work.”(접근성은 더 많은 일을 하는 것이 아니라, 올바른 일을 하는 것입니다.) 접근성을 확보한다고 해서 반드시 더 많은 작업이 필요하지는 않습니다. 오히려 이를..

🎄  A11y Advent Calendar (번역) 23일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 웹은 주로 서면 매체로 설계되어 있어 음성 명령을 지원할 여유가 많지 않습니다. 그러나 이미 많은 네이티브 애플리케이션들이 음성 인터페이스를 적극 활용하고 있으며, 앞으로 더 많은 플랫폼이 이 방향으로 발전할 가능성이 높습니다. 음성 인터페이스는 기기와 물리적으로 상호 작용하기 어려운 사용자에게 큰 편의성을 제공할 수 있습니다. Siri, Alexa, Cortana와 같은 음성 비서들은 지난 몇 년간 여러 사용자들이 긴급한 상황을 극복하는 데 도움을 준 사례도 많습니다. 하지만 모든 사용자가 동일한 방식으로 음성 인터페이스를 활용할 수 있는 것은 아닙니다. 예를 들어, 말을 할 수 없는..