Claude Code를 활용한 식당 추천 PWA 'RestauRoulette' 개발기

실용적 조언

iOS 흔들기 기능을 구현할 때는 반드시 버튼 클릭 등의 사용자 액션 시점에 권한 요청을 수행해야 한다.
PWA 애니메이션 구현 시 setTimeout 대신 사전 연산 방식을 사용하여 스로틀링 영향을 최소화하라.

섹션별 상세

iOS 브라우저의 보안 정책으로 인해 흔들기 감지 기능 구현에 어려움이 있었다. DeviceMotionEvent.requestPermission() API는 반드시 사용자의 직접적인 클릭 제스처를 통해서만 호출되어야 권한 팝업이 활성화된다. 작성자는 lockedRef를 도입해 중복 트리거를 방지하고 8초의 쿨다운 시간을 설정하여 안정적인 흔들기 감지 로직을 구현했다.

iOS PWA의 스탠드얼론 모드에서 발생하는 타이머 스로틀링 현상이 애니메이션 성능을 저하시켰다. 시스템이 setTimeout의 최소 간격을 약 50ms로 강제 제한하면서 부드러운 스핀 애니메이션이 깨지는 문제가 발생했다. 이를 해결하기 위해 애니메이션 시작 전 당첨 식당을 미리 선정하고, 애니메이션 로직을 식당 데이터 풀에서 완전히 분리하는 구조로 변경했다.

프레임워크 없이 경량화된 i18n 시스템을 구축하여 5개 국어를 지원하도록 설계했다. lib/i18n.ts 파일에 5개 언어 딕셔너리를 포함하고 navigator.language를 통해 사용자의 언어를 자동 감지하는 방식을 채택했다. 이를 통해 외부 라이브러리 의존성을 줄이면서도 다국어 대응이 가능한 구조를 확보했다.

용어 해설

클로드 코드(Claude Code): — Anthropic에서 개발한 자율 코딩 에이전트로, 터미널 환경에서 개발자의 의도를 파악하여 실제 코드를 작성, 수정 및 디버깅하는 도구이다. 이 프로젝트에서는 iOS의 센서 권한 요청이나 타이머 스로틀링 같은 복잡한 브라우저 API 문제를 해결하는 데 활용됐다.
점진적 웹 앱(PWA): — 웹 기술을 사용하여 앱 스토어 설치 없이 모바일 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션이다. 오프라인 작동, 푸시 알림, 홈 화면 추가 기능을 지원하며 이 프로젝트에서는 iOS와 안드로이드 설치를 위해 사용됐다.
장치 모션 이벤트(DeviceMotionEvent): — 가속도계와 자이로스코프를 포함한 장치의 물리적 움직임 변화를 감지하는 웹 API이다. iOS 환경에서는 보안을 위해 반드시 사용자 제스처를 통한 명시적 권한 승인이 있어야만 활성화된다.

언급된 도구

Claude Code추천

iOS 센서 권한 및 타이머 버그 해결을 위한 코딩 보조

Next.js 14중립

App Router 기반 웹 프레임워크

Tailwind CSS v4추천

CSS-first 설정을 활용한 스타일링

Google Places API중립

주변 식당 정보 검색 및 필터링

언급된 리소스

DemoRestauRoulette Live