왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.
#React#CSS#browser
6600
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
태그
Safari 기술 블로그 글
Safari 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 11개최신 11개 표시
관련 태그
최신 게시글
11개 표시
채널톡 iOS26 대응기
iOS26의 Safari 주소창 변경으로 채널톡 메신저 하단에 사이트가 노출되는 문제를 대응했습니다. CSS 한계와 스크롤 이슈를 거쳐 동적 커버 방식으로 채팅 경험을 개선했습니다.
#iOS#iPhone#Safari
600
채널톡 iOS26 대응기
채널톡 iOS26 대응기
iOS26에서 Safari 주소창 변경으로 채널톡 메신저 하단에 빈 공간이 보이는 문제를 대응했습니다. CSS 우회와 커버 오버레이 방식을 거쳐 채팅 경험을 해치지 않는 방향으로 적용했습니다.
#iOS#iOS 26#Safari
2200
클릭했는데 새 창이 안 열려요? – 실전 팝업 차단 이슈 해결기
iOS Safari에서 일부 새 창 열기 동작이 팝업 차단 정책으로 막힌 원인을 분석하고 해결했습니다. 빈 창을 먼저 열고 이후 URL을 지정하는 방식으로 기능과 사용자 경험을 개선했습니다.
#iOS#Safari#JavaScript
9900
프런트엔드 영역에서 FileReader를 이용해 MP4 파일 내 오디오 존재 여부 확인하기
LINE VOOM 웹에서 MP4 파일의 오디오 존재 여부를 FileReader와 Range 요청으로 판별했습니다.\n브라우저별 API 차이와 iOS 버전별 CORS 이슈를 확인해 단계적 요청 방식으로 해결했습니다.
#FileReader#MP4#HTTP Range
2600
사파리, 모바일 환경에서의 트러블슈팅
Safari와 iOS에서 발생하는 스크롤, 레이어, 터치 이벤트 차이를 사례별로 분석했습니다. 브라우저 식별보다 실제 동작 조건을 기준으로 보정하는 방법을 제안합니다.
#Safari#iOS#스크롤
000
사파리, 모바일 환경에서의 트러블슈팅
사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.
#Safari#mobile#scrollTop
4700
사파리, 모바일 환경에서의 트러블슈팅
홈 화면에 웹 바로가기를 추가하기(A2HS)
웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.
#PWA#Web App Manifest#service worker
3400
홈 화면에 웹 바로가기를 추가하기(A2HS)
지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions
웹폰트 서빙 시 발생하는 지연 시간을 줄이기 위한 방법을 다룹니다. Safari와 Edge Functions를 함께 고려한 서빙 접근을 소개합니다.
#web#Safari#Edge functions
2600
리액트로 만든 게임에 사운드 추가하기
Safari에서 반복 재생되지 않고 지연되던 React 게임 효과음 문제를 다뤘습니다. Web Audio API로 사전 디코딩·재생해 호환성과 반응성을 개선했습니다.
#React#Web Audio API#Safari
000
리액트로 만든 게임에 사운드 추가하기
Safari의 `<audio>` 중복 재생 문제와 효과음 지연을 Web Audio API로 해결했습니다. 사전 디코딩한 오디오 버퍼로 빠르고 안정적인 게임 사운드를 구현했습니다.
#React#Web Audio API#Safari
3600
리액트로 만든 게임에 사운드 추가하기