본문 바로가기

UX

React에서 스크롤 위치 저장 및 복원 기능 구현하기 리스트·기사·문서 페이지에서 뒤로가기나 라우팅 후 원래 읽던 위치로 돌아가게 하는 스크롤 저장/복원은 UX 품질을 결정짓는 요소입니다. 실무에서는 라우터, 이미지 로딩, 컨테이너 스크롤 등 다양한 변수 때문에 일관된 동작을 만들기가 쉽지 않습니다. 이 글에서는 React에서 신뢰성 있게 스크롤 위치를 저장하고 복원하는 방법을 단계별로 정리합니다.1. 핵심 아이디어원리는 단순합니다. 스크롤 이벤트로 현재 위치를 저장하고, 화면 진입 시 저장된 위치로 스크롤합니다. 브라우저 기본 복원과 충돌하지 않도록 manual 모드로 바꾸고, 레이아웃/이미지 로딩 후 복원 타이밍을 조절합니다.// 브라우저 기본 복원 끄기 (충돌 방지)useEffect(() => { try { window.history.scrollRe.. 더보기
React 앱에서 Web Share API 사용하여 콘텐츠 공유하기 Web Share API는 사용자의 네이티브 공유 시트(공유 패널)를 호출하여 링크, 텍스트, 파일을 간편하게 공유할 수 있게 해주는 브라우저 API입니다. 모바일 중심의 UX를 구현할 때 클릭 한 번으로 카카오톡/메시지/메일 등으로 공유할 수 있어 이탈을 줄이고 전환을 높이는 데 효과적입니다. 이 글에서는 React 앱에서 Web Share API를 안정적으로 사용하고, 미지원 환경을 위한 폴백까지 실무적으로 구현하는 방법을 정리합니다.1. 지원 범위와 핵심 포인트- navigator.share: 텍스트/제목/URL 공유를 지원합니다.- navigator.canShare 및 files 옵션: 이미지/파일 공유(레벨 2). 일부 브라우저/플랫폼에서만 동작합니다.- 사용자 제스처 필요: 클릭 등 명시적 사.. 더보기
React에서 사용자 프로필 편집 페이지 제작하기 사용자 프로필 편집 페이지는 입력 폼, 파일 업로드, 서버 검증, 접근성까지 골고루 필요한 화면입니다. 이 글에서는 React Hook Form과 Zod를 사용해 빠르고 견고한 프로필 편집 페이지를 만드는 방법을 실무 관점에서 정리합니다.1. 무엇을 만들 것인가디스플레이 이름, 사용자명, 자기소개, 웹사이트, 위치, 아바타 이미지를 수정하는 폼을 만듭니다. 변경 사항이 있을 때만 저장 버튼이 활성화되며, 사용자명 실시간 중복 검사, 아바타 미리보기, 낙관적 업데이트를 적용합니다.2. 패키지 설치와 기본 구조React Hook Form과 Zod를 사용합니다. 프로젝트 구조는 api 유틸, 폼 컴포넌트, 페이지 컨테이너로 나눕니다.// 설치// npm i react-hook-form zod @hookform.. 더보기
React에서 Intersection Observer로 비디오 자동 재생 제어하기 스크롤에 따라 화면에 보이는 비디오만 자동 재생하고, 화면을 벗어나면 일시 정지시키는 UX는 피드·기사·제품 리스트에서 필수입니다. React에서는 Intersection Observer를 이용하면 성능 부담 없이 이를 안정적으로 구현할 수 있습니다.1. 핵심 아이디어와 브라우저 정책Intersection Observer는 특정 DOM이 뷰포트에 얼마나 노출되는지 비동기적으로 알려줍니다. 이 값을 기준으로 비디오를 play/pause 하면 됩니다. 단, 자동 재생은 브라우저 정책상 소리가 꺼진 상태(mutated)와 인라인 재생(playsInline)이 중요합니다. iOS Safari 등 일부 환경에서는 muted + playsInline 없이는 자동 재생이 거부됩니다.2. 단일 비디오 컴포넌트 구현가장.. 더보기
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로 멀티 스텝(Form Wizard) 폼 구현하기 회원가입이나 신청서처럼 입력 항목이 많은 경우, 멀티 스텝(Form Wizard) 폼은 이탈률을 낮추고 전환율을 높이는 데 효과적입니다. 이 글에서는 React로 가벼운 의존성으로 구현하는 실무형 멀티 스텝 폼 패턴을 소개하고, 검증, 진행 표시, 임시 저장, 접근성, 라이브러리 활용까지 단계별로 설명합니다.1. 구현 목표와 설계작게 시작합니다. 핵심은 스텝 정의, 상태 관리, 검증, 내비게이션입니다. 각 스텝은 필요한 필드만 검증하고, 다음으로 진행할 때만 현재 스텝을 통과합니다. 마지막에는 서버로 한번 제출합니다. 다음 요건을 목표로 합니다: 스텝 전환, 단계별 검증, 진행 표시, 임시 저장(localStorage), 접근성 속성, 최종 비동기 제출과 에러 처리.2. 기본 구조와 상태 설계스텝 메타데.. 더보기
React 앱에서 데이터 페칭 시 Skeleton UI 구현하기 데이터 페칭이 필요한 화면에서 비어있는 영역 대신 콘텐츠의 윤곽을 먼저 보여주는 Skeleton UI는 체감 속도를 높이고 레이아웃 시프트를 줄이는 핵심 패턴입니다. 실무에서 바로 적용할 수 있는 컴포넌트 설계, 상태 관리, 접근성, 성능 최적화까지 단계별로 정리했습니다.1. Skeleton UI가 필요한 이유Skeleton은 실제 콘텐츠의 레이아웃을 모사해 사용자에게 "곧 콘텐츠가 로드된다"는 신호를 줍니다. 이는 로딩 스피너 대비 체감 성능을 개선하고 LCP 개선, CLS 방지에 효과적입니다. 리스트/카드/디테일 뷰에 우선 적용하는 것이 ROI가 높습니다.2. 가장 단순한 패턴: isLoading 분기데이터 로딩 여부에 따라 Skeleton을 조건부 렌더링합니다. 아래 예시는 카드 리스트 로딩에 Sk.. 더보기

티스토리툴바