채널톡 iOS26 대응기
채널톡 iOS26 대응기
iOS26의 Safari 주소창 변경으로 채널톡 메신저 하단에 사이트가 노출되는 문제를 대응했습니다. CSS 한계와 스크롤 이슈를 거쳐 동적 커버 방식으로 채팅 경험을 개선했습니다.
#iOS#iPhone
900
프론트엔드 기술 블로그 최신 글
필터 0
채널톡 iOS26 대응기
iOS26에서 Safari 주소창 변경으로 채널톡 메신저 하단에 빈 공간이 보이는 문제를 대응했습니다. CSS 우회와 커버 오버레이 방식을 거쳐 채팅 경험을 해치지 않는 방향으로 적용했습니다.
#iOS#iOS 26
2200
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
Webpack 4 기반 CMS의 OOM 문제를 순환 참조와 구조적 한계 관점에서 분석했습니다. Vite 전환으로 빌드 시간·번들 크기·개발 서버 시작 속도를 크게 개선했습니다.
#Webpack#Vite
200
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite
8400
여기어때 마케팅 파트너 구축기
여기어때 마케팅 파트너 구축기
여기어때 마케팅 파트너 서비스를 수기 운영에서 시스템 기반 운영으로 전환한 구축 사례를 다뤘습니다. 하이브리드 구조와 AI QA로 4주 내 런칭과 운영 효율화를 동시에 달성했습니다.
#자동화#ChatGPT
13500
바비톡 QA 팀 테스트 자동화 구축기
바비톡 QA 팀 테스트 자동화 구축기
바비톡 QA 팀이 stage 통합 테스트 자동화를 구축한 과정을 정리했습니다. 반복적이고 영향도가 큰 케이스를 Appium, Selenium, Robot Framework, Gauge로 자동화했습니다.
#test#자동화
2700
WebGL 활용한 화상회의 배경 블러 처리 개선
WebGL 활용한 화상회의 배경 블러 처리 개선
화상회의 배경 블러의 성능 병목을 JavaScript 픽셀 순회에서 찾고 WebGL로 전환했습니다. GPU 병렬 처리와 하이브리드 구조로 CPU 사용률을 크게 낮췄습니다.
#WebGL#GPU
600
WebGL 활용한 화상회의 배경 블러 처리 개선
화상회의 배경 블러의 느린 성능을 WebGL과 GPU 병렬 처리로 개선했습니다. CPU 병목을 줄여 저사양 기기에서도 부드럽게 동작하도록 만들었습니다.
#WebGL#GPU
2100
안드로이드 앱에서 스크롤 화면 노출 추적하기
안드로이드 앱에서 스크롤 화면 노출 추적하기
안드로이드 앱에서 스크롤 화면의 뷰 노출을 정확히 추적하는 방법을 다뤘습니다. Jetpack Compose와 위치 겹침 판정을 활용해 Visibility Tracker를 만든 과정을 소개했습니다.
#Android#Jetpack Compose
3000
이건 첫 번째 클릭! 히트맵 같이 보기
이건 첫 번째 클릭! 히트맵 같이 보기
네이버 통합검색 클릭 로그를 히트맵과 히스토그램으로 시각화하는 방법을 소개했습니다. 실시간으로 변하는 검색 서비스에 대응하며 얻은 시행착오와 노하우도 공유했습니다.
#검색#데이터 시각화
8200
입사 2일차에 앱 기능 배포하며 만들어가는 임팩트
입사 2일차에 실제 앱 기능을 배포하며 빠르게 실무에 적응한 프론트엔드 인턴 인터뷰입니다. 레거시 정리와 성능 개선, 모니터링 도구 활용을 통해 팀의 생산성과 안정성에 기여한 경험을 전했습니다.
#React#Sentry
3400
암호키의 안전한 사용을 보장하는 Android KeyStore 시스템 소개
안드로이드 KeyStore가 암호키를 하드웨어 영역에 저장해 외부 노출 없이 연산하는 보안 메커니즘을 소개했습니다. StrongBox와 Attestation으로 신뢰성을 검증하며 금융·결제 앱에서 중요하다고 설명했습니다.
#Android#정보보안
5600
지그재그에 “포치의 선물가게”를 오픈하며
지그재그 앱 웹뷰에서 미니게임을 구현하며 Matter.js와 Phaser.js를 조합한 과정을 공유했습니다. 또한 SSR, DPR, 모바일 제스처와 게임오버 판정 문제를 해결한 사례를 정리했습니다.
#React#TypeScript
5500
E2E 자동화 리팩토링으로 만든 QA 시스템 (feat. 하루 30회 배포)
배포 속도가 빠른 환경에서 E2E 자동화를 전면 리팩토링해 품질 시스템을 재구성했습니다. 공통 인증, Locator 중앙화, AI 분석 대시보드로 하루 수십 회 배포에도 대응했습니다.
#Python#Playwright
5100