왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.
#React#CSS#browser
4600
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
태그
CSS 기술 블로그 글
CSS 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 48개최신 20개 표시
관련 태그
최신 게시글
20개 표시
웹뷰 속 무한 CSS 애니메이션의 숨은 비용
Android 웹뷰에서 무한 CSS 애니메이션이 앱 CPU를 크게 올리는 현상을 조사했습니다. transform 최적화만으로는 해결되지 않았고, 지속 애니메이션 자체를 줄이는 방향이 필요했습니다.
#CSS#React Native#Android
7000
웹뷰 속 무한 CSS 애니메이션의 숨은 비용
FE News 26년 6월 소식을 전해드립니다.
2026년 6월 FE 뉴스에서는 AI 개발 트렌드, 최신 웹 UI 기능, npm 공급망 보안 이슈를 함께 다뤘습니다. 또한 폰트 애니메이션 라이브러리와 AI 에이전트 상태 표시 도구도 소개했습니다.
#TypeScript#JavaScript#CSS
8800
FE News 26년 6월 소식을 전해드립니다.
FE News 26년 3월 소식을 전해드립니다!
FE 엔지니어들이 React 재단, CSS Day, Claude Code, TypeScript, Vinext 같은 프런트엔드 관련 소식을 소개했습니다.\nNext.js 대안과 성능 개선 사례를 포함한 월간 기술 큐레이션입니다.
#React#CSS#Claude Code
12400
FE News 26년 3월 소식을 전해드립니다!
FE News 26년 2월 소식을 전해드립니다!
FE 관련 주요 소식을 모아 소개한 큐레이션 글입니다. React 최적화, 합성 컴포넌트 패턴, jQuery 4.0.0 변경점을 함께 다뤘습니다.
#React#Next.js#jQuery
4400
FE News 26년 2월 소식을 전해드립니다!
React랑 Lottie로 게임을 만든다고요?
React와 Lottie만으로 웹뷰 게임을 구현한 사례를 공유했습니다. iOS 깜빡임, 리플로우, 배터리 소모를 줄인 최적화 방법도 함께 정리했습니다.
#React#Lottie#iOS
13800
LLM과 Reveal.js로 슬라이드를 쉽게 만들고 공유하기
블로그 글을 LLM으로 요약해 Reveal.js 슬라이드로 바꾸는 방법을 소개했습니다. GitHub Pages 배포까지 연결해 빠른 제작과 공유 효율을 높였습니다.
#LLM#Reveal.js#GitHub Pages
3500
웹과 다른 세계: 이메일 템플릿 작업에서 겪은 시행착오
이메일 템플릿에서 웹식 반응형이 제대로 동작하지 않는 시행착오를 정리했습니다. table 레이아웃과 인라인 스타일로 클라이언트별 차이를 줄이는 방법을 소개했습니다.
#CSS#HTML#Outlook
8900
웹과 다른 세계: 이메일 템플릿 작업에서 겪은 시행착오
텍스트 접근성을 개선했더니 거래액이 올랐습니다.
기기 글자 크기 설정을 반영해 텍스트 접근성을 개선한 사례를 소개했습니다. SSR, SSG, CSR 모두에서 FOUT를 줄이고 거래액과 탐색성 개선까지 확인했습니다.
#React Native#Next.js#CSS
4700
채널톡 iOS26 대응기
iOS26의 Safari 주소창 변경으로 채널톡 메신저 하단에 사이트가 노출되는 문제를 대응했습니다. CSS 한계와 스크롤 이슈를 거쳐 동적 커버 방식으로 채팅 경험을 개선했습니다.
#iOS#iPhone#Safari
000
채널톡 iOS26 대응기
채널톡 iOS26 대응기
iOS26에서 Safari 주소창 변경으로 채널톡 메신저 하단에 빈 공간이 보이는 문제를 대응했습니다. CSS 우회와 커버 오버레이 방식을 거쳐 채팅 경험을 해치지 않는 방향으로 적용했습니다.
#iOS#iOS 26#Safari
900
2025 카카오뱅크 프론트엔드 채용 Boost의 모든 것
카카오뱅크 프론트엔드 클랜이 전사 채용 Boost를 처음 운영한 과정을 소개했습니다. 서류, 과제, 면접 기준을 정비하고 지원자 경험까지 고려한 채용 설계를 공유했습니다.
#React#채용#면접
4000
2025 카카오뱅크 프론트엔드 채용 Boost의 모든 것
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
Vite와 Vanilla Extract의 빌드 흐름을 추적해 CSS 우선순위가 import 순서에 따라 뒤바뀌는 원인을 파악했습니다. 뱅코멘트 기반 정렬 플러그인으로 청크를 재조합해 일관된 스타일 순서를 보장했습니다.
#Vite#CSS#Vanilla Extract
14700
Vite에서 CSS 우선순위를 지키는 법: 우아한공방의 문제 해결기
수직 중앙 정렬한 텍스트가 치우쳐 보이는 이유
X
#CSS
11800
Shadow Dom : 중요한 건 깨지지 않는 스타일
여러 플랫폼의 이력서를 한 화면에서 안정적으로 보여주기 위해 Shadow DOM 적용 사례를 다뤘습니다. 스타일 충돌 방지, 스크립트 처리, FOUC 대응과 한계까지 정리했습니다.
#Shadow DOM#CSS#DOM
5700
FE News 25년 10월 소식을 전해드립니다!
FE 분야의 주요 소식을 주제별로 큐레이션한 뉴스입니다. React 생태계, styled-components, Apple CSS, AI 코딩 도구 변화가 소개되었습니다.
#React#CSS#GitHub
15700
FE News 25년 10월 소식을 전해드립니다!
FE 최적화, 비즈니스로 시작해서 엔지니어링으로 끝내기
비즈니스 가치가 큰 지면부터 p75 LCP를 기준으로 성능 최적화를 진행했습니다. 이미지 경량화, 번들 분리, Preload, Skeleton 적용으로 체감 속도와 지표를 함께 개선했습니다.
#성능#LCP#CSS
23600
FE News 25년 9월 소식을 전해드립니다!
FE News 25년 9월호에서 프론트엔드와 AI 코딩 도구 관련 주요 소식을 정리했습니다. 코드 품질, 보안, 상호 운용성, 인지 부하 같은 이슈를 함께 다뤘습니다.
#Claude#CSS#VS Code
11200
FE News 25년 9월 소식을 전해드립니다!
프론트엔드 개발자를 위한 FEConf 2025 간단 후기
FEConf 2025에서 스벨트, 웹 접근성, 최신 CSS, Figma MCP와 Cursor 사례를 중심으로 프론트엔드 실무 인사이트를 정리했습니다. 실무에 바로 적용할 수 있는 기술과 자동화 흐름이 특히 인상적이었습니다.
#FEConf#Svelte#웹 접근성
22500
프론트엔드 개발, 바이브코딩 라이브 웹앱 개발 사용 경험기
프론트엔드 개발자가 바이브코딩을 통해 생산성 향상을 체감한 경험을 공유했습니다. 동시에 테스트 코드, 업무 분할, 프롬프트 설계, 도메인 지식의 필요성도 강조했습니다.
#React#LLM#prompt
18400
