본문 바로가기

Accessibility

React에서 스크롤 기반 Parallax 효과 구현하기 Parallax는 스크롤에 따라 배경과 콘텐츠의 이동 속도를 다르게 하여 깊이감을 주는 시각 효과입니다. React에서 성능을 고려해 구현하면 랜딩 페이지, 히어로 섹션, 갤러리 등에서 높은 몰입감을 제공할 수 있습니다.1. 핵심 개념과 설계기본 원리는 스크롤 위치에 비례한 오프셋을 계산해 요소의 transform 또는 backgroundPosition을 업데이트하는 것입니다. 성능을 위해 transform: translate3d와 requestAnimationFrame, passive 스크롤 리스너를 사용합니다. iOS에서 background-attachment: fixed가 제한적이므로 엘리먼트 기반 Parallax가 안전합니다.2. CSS 배경 Parallax (간단하지만 모바일 제한)배경 이미지를.. 더보기
React 앱에서 테마 변경 기능 다중 지원하기 라이트/다크를 넘어 세피아, 하이 콘트라스트 등 다중 테마를 지원하면 접근성(가독성), 브랜드 일관성, 사용자 선호 반영을 동시에 달성할 수 있습니다. 이 글은 CSS 변수와 React Context를 활용해 확장 가능한 다중 테마 토글을 구현하고, 초기 깜빡임 방지, 시스템 테마 연동, 대규모 테마 최적화까지 실무 팁을 정리합니다.1. 설계 원칙첫째, CSS 변수 토큰 기반으로 설계합니다. 둘째, DOM 루트에 data-theme 속성으로 테마 상태를 단일 소스로 관리합니다. 셋째, React에서는 테마 이름만 관리하고 스타일은 CSS 변수로 위임해 리렌더 비용을 줄입니다. 넷째, 시스템 테마와 동기화하며 사용자가 선택한 테마는 localStorage로 지속화합니다.2. 토큰 기반 CSS 변수 정의(다.. 더보기
React에서 이미지 드래그 앤 드롭 정렬 기능 구현하기 이미지 갤러리나 상품 썸네일을 사용자가 직접 순서를 바꿀 수 있도록 만드는 것은 UX 개선에 큰 도움이 됩니다. 이 글에서는 React에서 이미지 드래그 앤 드롭 정렬을 두 가지 방식으로 구현하는 방법을 소개합니다: 브라우저 기본 HTML5 Drag and Drop API를 활용한 최소 구현과, 모바일/접근성/성능까지 고려된 dnd-kit 기반 프로덕션 구현입니다.1. 목표와 UX 기준- 마우스/터치로 이미지를 드래그해 순서를 변경합니다.- 키보드로도 순서를 이동할 수 있어야 접근성이 높습니다.- 변경된 순서를 서버에 저장하고 재진입 시 동일한 순서를 유지합니다.- 긴 리스트에서도 부드럽게 동작하고 불필요한 렌더링을 최소화합니다.2. 라이브러리 선택 가이드- HTML5 Drag and Drop: 의존성 .. 더보기
React에서 키보드 단축키 시스템 구축하기 키보드 단축키는 파워 유저의 생산성을 크게 높입니다. 하지만 글로벌/로컬 범위, 플랫폼별 Cmd/Ctrl, 입력 필드 예외 처리, 접근성까지 고려하면 구조적으로 설계해야 합니다. 이 글에서는 실무에서 바로 쓸 수 있는 React 단축키 시스템을 훅과 컨텍스트로 구축하는 방법을 정리합니다.1. 요구사항 정리와 설계 원칙단축키 시스템은 다음을 충족해야 합니다.- 글로벌 단축키와 컴포넌트 범위 단축키를 모두 지원합니다.- Mac과 Windows의 mod 키(Cmd/Meta vs Ctrl)를 통일적으로 처리합니다.- 입력/텍스트 편집 중에는 단축키가 개입하지 않도록 예외 처리합니다.- 중복 충돌을 탐지하고, 우선순위/전파 제어가 가능합니다.- 접근성을 위해 aria-keyshortcuts, 대체 UI(명령어 팔.. 더보기
React에서 JSON Schema 기반 폼 생성하기 JSON Schema를 사용하면 폼 구조, 유효성 규칙, 표시 방식까지 데이터를 중심으로 선언적으로 정의할 수 있습니다. React에서는 라이브러리를 통해 스키마만으로 폼을 자동 생성하고 유지보수를 단순화할 수 있습니다. 실무에서 빠르게 적용하는 방법과 커스터마이즈 포인트를 정리합니다.1. 라이브러리 선택대표 옵션은 RJSF(@rjsf/core), JSON Forms, Uniforms입니다. RJSF는 문서와 생태계가 안정적이며 Ajv 기반 검증을 쉽게 붙일 수 있어 범용적으로 추천합니다. JSON Forms는 복잡한 엔터프라이즈 폼에 강하고, Uniforms는 스키마-UI 어댑터가 다양해 커스터마이징에 유연합니다.2. RJSF 빠른 시작// 설치// npm i @rjsf/core @rjsf/valida.. 더보기
React 컴포넌트를 Storybook에서 문서화하고 테스트하기 Storybook은 컴포넌트를 고립된 환경에서 개발하고, 문서화하고, 상호작용 테스트까지 수행할 수 있는 표준 도구입니다. 실무에서는 UI 변경 리스크를 줄이고, 디자이너와 개발자 간 커뮤니케이션을 개선하며, 회귀를 자동으로 잡아내기 위해 Storybook을 적극적으로 활용합니다.1. 설치와 기본 설정프로젝트 루트에서 Storybook을 설치합니다. Vite 기반 React라면 아래처럼 초기화합니다.npx storybook@latest init --builder vite필수 스크립트를 확인/추가합니다.// package.json (일부){ "scripts": { "storybook": "storybook dev -p 6006", "build-storybook": "storybook build.. 더보기
React 앱에서 Dark Mode 토글 기능 구현하기 다크 모드는 브랜드 일관성, 접근성, 배터리 절약에 도움이 됩니다. 실무에서는 CSS 변수와 html의 dark 클래스 조합이 가장 단순하고 확장성이 좋습니다. 시스템 선호 감지, 로컬 저장, 초기 플래시 방지까지 한 번에 구현해보겠습니다.1. 전략 요약CSS 변수로 색상을 정의하고 html 요소에 dark 클래스를 토글합니다. 사용자의 선택은 localStorage에 저장하고, 선택이 없을 때만 시스템 선호(prefers-color-scheme)를 따릅니다. 초기 로드 시 스크립트로 dark 클래스를 먼저 붙여 FOUC(깜빡임)를 방지합니다.2. CSS 토큰 준비/* index.css 등 */:root { --bg: #ffffff; --fg: #0f172a; color-scheme: light;}.. 더보기

티스토리툴바