2026
목록 컨텍스트를 잃지 않는 상세 모달 만들기: URL 동기화부터 뒤로가기까지
무한 스크롤 목록 위에 콘텐츠 상세를 모달로 띄우면서도 공유 가능한 URL, SEO, 뒤로가기 동작을 페이지처럼 유지한 설계 과정을 정리합니다.
목록 컨텍스트를 잃지 않는 상세 모달 만들기: URL 동기화부터 뒤로가기까지무한 스크롤 목록 위에 콘텐츠 상세를 모달로 띄우면서도 공유 가능한 URL, SEO, 뒤로가기 동작을 페이지처럼 유지한 설계 과정을 정리합니다.
WebView 전용 페이지가 외부 브라우저로 열렸을 때의 안내 flow 처리하기
네이티브 인터페이스가 주입되지 않은 환경으로 진입한 사용자의 경험 저하 문제를, 인터페이스 폴링과 BottomSheet 안내, 플랫폼별 분기로 처리한 과정을 다룹니다.
WebView 전용 페이지가 외부 브라우저로 열렸을 때의 안내 flow 처리하기네이티브 인터페이스가 주입되지 않은 환경으로 진입한 사용자의 경험 저하 문제를, 인터페이스 폴링과 BottomSheet 안내, 플랫폼별 분기로 처리한 과정을 다룹니다.
2025
결제 완료 후 뒤로가기 문제 해결하기
결제 완료 후 뒤로가기 시 결제 대행사 페이지로 돌아가는 문제를 해결하며, 브라우저 히스토리 관리와 라우팅 메커니즘을 이해하고 사용자 인터랙션을 활용한 해결 과정을 정리합니다.
결제 완료 후 뒤로가기 문제 해결하기결제 완료 후 뒤로가기 시 결제 대행사 페이지로 돌아가는 문제를 해결하며, 브라우저 히스토리 관리와 라우팅 메커니즘을 이해하고 사용자 인터랙션을 활용한 해결 과정을 정리합니다.
HTML lang 속성: 작은 변경이 가져온 큰 변화
HTML lang 속성 하나를 바꿔 브라우저 번역 오작동을 해결하고 웹 접근성을 개선한 과정을 다룹니다.
HTML lang 속성: 작은 변경이 가져온 큰 변화HTML lang 속성 하나를 바꿔 브라우저 번역 오작동을 해결하고 웹 접근성을 개선한 과정을 다룹니다.
재사용 가능한 드래그 스크롤 컨테이너 만들기
Vue.js로 PC 환경에서 마우스 드래그 스크롤을 지원하는 재사용 가능한 컴포넌트를 개발한 과정을 다룹니다.
재사용 가능한 드래그 스크롤 컨테이너 만들기Vue.js로 PC 환경에서 마우스 드래그 스크롤을 지원하는 재사용 가능한 컴포넌트를 개발한 과정을 다룹니다.
결제 비밀번호 입력을 위한 숫자패드 컴포넌트 개발 과정
React와 Zustand를 사용하여 결제, 등록, 변경 등 다양한 시나리오에 대응하고, 보안까지 강화한 범용 Numpad 컴포넌트의 설계와 구현 과정을 자세히 살펴봅니다.
결제 비밀번호 입력을 위한 숫자패드 컴포넌트 개발 과정React와 Zustand를 사용하여 결제, 등록, 변경 등 다양한 시나리오에 대응하고, 보안까지 강화한 범용 Numpad 컴포넌트의 설계와 구현 과정을 자세히 살펴봅니다.