Safari Clipboard API의 'Transient Activation' 문제와 해결 방안

핵심 기술

이 글은 Safari 브라우저에서 Clipboard API의 writeText 메서드가 예상대로 작동하지 않는 특정 버그를 다룹니다. 이는 사용자의 직접적인 상호작용 이후 일정 시간 동안만 유효한 'Transient Activation'이라는 브라우저 보안 메커니즘 때문입니다.

기술적 세부사항

• 문제 상황: iPhone Safari에서 앱 내 모달에서 설정을 업데이트한 후 생성된 링크를 복사하는 기능이 실패함. 로그에는 NotAllowedError가 기록됨.
• 원인 분석: Clipboard API는 사용자 보안을 위해 다양한 브라우저에서 각기 다른 보안 요구사항을 가지며, Safari의 경우 'Transient Activation'이 핵심 원인임.
• 'Transient Activation'이란?: 사용자의 직접적인 상호작용(클릭, 키보드 입력 등) 후 잠시 동안 발생하는 활성화 상태로, navigator.clipboard.writeText()와 같은 특정 API는 이 상태에서만 실행 가능함.
• 지연 발생: 서버 호출 후 비동기적으로 writeText가 호출될 때, 네트워크 지연 등으로 인해 'Transient Activation' 창을 벗어나 실행되어 Safari에서 오류 발생.
• 해결 방안:
  • '저장'과 '복사' 동작을 분리.
  • 설정 저장 중에는 '링크 복사' 버튼을 비활성화.
  • 설정 저장 완료 후 '링크 복사' 버튼을 다시 활성화하여 사용자가 명시적으로 클릭하도록 유도.

개발 임팩트

• 브라우저별 API 동작 방식의 미묘한 차이를 이해하고, 특히 보안 관련 메커니즘이 실제 개발에 미치는 영향을 파악할 수 있음.
• 크로스 브라우저 테스트의 중요성을 강조하며, 이를 간과했을 때 발생할 수 있는 사용자 경험 저하 및 개발 시간 소모를 예방하는 방법을 제시함.
• 견고한 E2E 테스트 환경 구축의 필요성을 시사함.

커뮤니티 반응

원문에는 직접적인 커뮤니티 반응 언급은 없으나, 글쓴이가 '개발자 커뮤니티에 공유하고 싶다'는 의사를 밝히고 있어 유사한 경험을 공유하려는 독자들의 참여를 유도하고 있습니다.