
Google에서의 14년, 21가지 교훈 — 2026년 1주 웹 개발
연말연시다운, 커리어와 장인정신의 한 주였습니다. 대표 글은 Addy Osmani의 "21 Lessons From 14 Years at Google"입니다. 성장하는 엔지니어는 코드가 아니라 사람, 정치, 정렬, 모호함을 다루는 법을 배운 사람이라는 주장입니다. Syntax의 2026년 예측… 개발자가 바로 활용할 수 있도록 정리했습니다.


지속적 퍼징의 열기를 버텨낸 버그들
p2의 93% 커버리지와 대조적으로, Morales는 2024년 12월에 29개의 새로운 취약점을 발견했습니다. Poppler는 60%의 커버리지를 갖추고 있었음에도 1-클릭 RCE를 놓쳤습니다. 의존성 라이브러리 DjVuLibre가 libFuzzer로 계측되지 않았고 OSS-Fuzz 빌드에서 완전히 누락되어 있었지만, Evince와 Papers를 통해 수백만 Ubuntu 시스템에 기본 설치되어 있었기 때문입니다. Exiv2는 CVE-2025-26623 등의 취약점을 놓쳤는데, 연구자들이 디코딩 경로에 집중하고 인코딩 경로를 소홀히 하기 때문입니다. 인코딩 취약점은 썸네일 생성 같은 백그라운드 워크플로에서 표면화됩니다. Morales는 코드 준비, 엣지 커버리지(>90% 목표), 컨텍스트 민감 커버리지(AFL++ CmpLog 또는 N-Gram 브랜치 커버리지로 >60% 목표), 값 커버리지(제어 흐름이 아닌 변수 값 범위 추적), 트리아징의 5단계 워크플로를 제안합니다. 2 GB 이상의 입력이나 10 ms 이상의 실행 시간이 필요한 버그는 현재 모든 퍼저를 우회하므로 정적 분석이나 수동 코드 리뷰가 필요합니다.
내가 늘 쓰는 Chrome DevTools 기능들 — 당신도 써야 하는 이유
LCP 병목, INP 지연, CLS를 유발하는 레이아웃 이동을 노출하며, 'Dim 3rd parties' 토글로 애널리틱스·광고 노이즈를 제거합니다. Recorder 패널은 재현 가능한 사용자 플로를 캡처하여 Puppeteer 스크립트나 퍼포먼스 프로파일 시드로 내보낼 수 있습니다. 마지막으로 chrome://inspect를 통한 Android 원격 디버깅은 데스크톱 테스트에서 완전히 부재한 CPU·메모리 제약을 드러냅니다.좋은 프론트엔드 테스트 작성법: 37가지 팁과 요령
test() 호출로 분리하기, React Testing Library의 쿼리 우선순위(getByRole > getByLabelText > getByText > getByTestId는 최후 수단)를 따르기, 모듈에 새로운 익스포트가 추가될 때 테스트가 깨지지 않도록 vi.mock() 전체 대신 vi.spyOn()을 선호하기가 있습니다. AI는 자식 컴포넌트의 동작을 확신하지 못하기 때문에 과도하게 목을 생성하는 경향이 있다고 명시적으로 지적하며, 데이터 페칭과 진짜 외부 의존성만 목으로 처리하고 실제 구현을 렌더링할 것을 권장합니다. 구체적인 안티패턴도 명확한 결과와 함께 제시됩니다. expect(x).toBeDefined()는 null이 반환되어도 통과하고, 대형 직렬화 DOM에 toMatchSnapshot()을 쓰면 개발자가 반사적으로 u를 눌러 스냅샷을 업데이트하면서 버그를 통과시키며, 테스트 내 if/else문은 expect() 호출 자체를 조용히 건너뛸 수 있습니다. 실용적인 권장 사항으로는 단일 파일로 필터링한 vitest --watch로 거의 즉각적인 피드백 얻기, 날짜·타임아웃 관련 코드에 vi.useFakeTimers() 사용하기, 각 테스트에 관련된 속성만 노출하는 createUser(overrides) 픽스처 헬퍼 활용하기가 있습니다.
HTML Invoker Commands로 JavaScript 없이 다이얼로그 여닫기
<dialog> 요소에 남아있던 마지막 JavaScript 요건—다이얼로그 열기—을 두 가지 선언적 버튼 속성으로 제거합니다. commandFor="dialog-id"와 command="show-modal"을 가진 버튼은 브라우저의 최상위 레이어에 대상 다이얼로그를 모달로 열며, 배경막(backdrop) 처리, 포커스 관리, Esc 키 닫기, 접근성 트리 업데이트를 모두 네이티브로 처리합니다. 다이얼로그 내부 버튼의 command="close" 속성은 기존 <form method="dialog"> 우회 방법을 대체합니다. 이 API는 현재 모든 최신 브라우저에서 지원되지만, 프로덕션 사용 여부는 별도로 평가가 필요하며, Keith Cirkel의 폴리필이 필요한 환경에 사용 가능합니다. 이 작은 스크립트 하나를 제거하는 것은 실질적인 효과가 있습니다. 파싱·실행할 JavaScript가 줄어 초기 로딩이 빨라지고, 스크립트 전달이 실패해도 선언적 마크업이 정상 동작합니다. 이 글은 HTML invoker commands를 일반적인 인터랙티브 패턴을 네이티브 선언적으로 처리하는 더 넓은 플랫폼 트렌드의 일부로 자리매김합니다.
OLTP 대 OLAP, 그리고 행/열 저장의 트레이드오프

우리의 2026년 웹 개발 예측
CSS Anchor Positioning, popover, if문, 커스텀 CSS 함수 등 모던 CSS 기능들이 실용적으로 폭넓게 사용되어 UI 프레임워크가 JavaScript 폴리필을 완전히 제거할 수 있을 것이라 봅니다. AI 툴링 측면에서는 기획·코딩·Playwright 기반 브라우저 테스트를 포함한 엔드투엔드 에이전트 통합이 출시 속도를 크게 높이리라 전망하면서도, AI에 전적으로 의존하는 개발자는 역량 저하를 겪을 위험이 있다고 경고합니다. 또한 Temporal.io, Ingest 같은 durable compute 플랫폼이 큐의 주류 대안으로 부상하여 장기 실행 함수 내에서 await 시맨틱으로 일시정지·재개 가능한 워크플로를 구현하게 될 것이라 예측합니다.
Google에서의 14년, 21가지 교훈
OLTP 대 OLAP, 그리고 행/열 저장의 트레이드오프
우리의 2026년 웹 개발 예측
CSS Anchor Positioning, popover, if문, 커스텀 CSS 함수 등 모던 CSS 기능들이 실용적으로 폭넓게 사용되어 UI 프레임워크가 JavaScript 폴리필을 완전히 제거할 수 있을 것이라 봅니다. AI 툴링 측면에서는 기획·코딩·Playwright 기반 브라우저 테스트를 포함한 엔드투엔드 에이전트 통합이 출시 속도를 크게 높이리라 전망하면서도, AI에 전적으로 의존하는 개발자는 역량 저하를 겪을 위험이 있다고 경고합니다. 또한 Temporal.io, Ingest 같은 durable compute 플랫폼이 큐의 주류 대안으로 부상하여 장기 실행 함수 내에서 await 시맨틱으로 일시정지·재개 가능한 워크플로를 구현하게 될 것이라 예측합니다.지속적 퍼징의 열기를 버텨낸 버그들
p2의 93% 커버리지와 대조적으로, Morales는 2024년 12월에 29개의 새로운 취약점을 발견했습니다. Poppler는 60%의 커버리지를 갖추고 있었음에도 1-클릭 RCE를 놓쳤습니다. 의존성 라이브러리 DjVuLibre가 libFuzzer로 계측되지 않았고 OSS-Fuzz 빌드에서 완전히 누락되어 있었지만, Evince와 Papers를 통해 수백만 Ubuntu 시스템에 기본 설치되어 있었기 때문입니다. Exiv2는 CVE-2025-26623 등의 취약점을 놓쳤는데, 연구자들이 디코딩 경로에 집중하고 인코딩 경로를 소홀히 하기 때문입니다. 인코딩 취약점은 썸네일 생성 같은 백그라운드 워크플로에서 표면화됩니다. Morales는 코드 준비, 엣지 커버리지(>90% 목표), 컨텍스트 민감 커버리지(AFL++ CmpLog 또는 N-Gram 브랜치 커버리지로 >60% 목표), 값 커버리지(제어 흐름이 아닌 변수 값 범위 추적), 트리아징의 5단계 워크플로를 제안합니다. 2 GB 이상의 입력이나 10 ms 이상의 실행 시간이 필요한 버그는 현재 모든 퍼저를 우회하므로 정적 분석이나 수동 코드 리뷰가 필요합니다.내가 늘 쓰는 Chrome DevTools 기능들 — 당신도 써야 하는 이유
LCP 병목, INP 지연, CLS를 유발하는 레이아웃 이동을 노출하며, 'Dim 3rd parties' 토글로 애널리틱스·광고 노이즈를 제거합니다. Recorder 패널은 재현 가능한 사용자 플로를 캡처하여 Puppeteer 스크립트나 퍼포먼스 프로파일 시드로 내보낼 수 있습니다. 마지막으로 chrome://inspect를 통한 Android 원격 디버깅은 데스크톱 테스트에서 완전히 부재한 CPU·메모리 제약을 드러냅니다.좋은 프론트엔드 테스트 작성법: 37가지 팁과 요령
test() 호출로 분리하기, React Testing Library의 쿼리 우선순위(getByRole > getByLabelText > getByText > getByTestId는 최후 수단)를 따르기, 모듈에 새로운 익스포트가 추가될 때 테스트가 깨지지 않도록 vi.mock() 전체 대신 vi.spyOn()을 선호하기가 있습니다. AI는 자식 컴포넌트의 동작을 확신하지 못하기 때문에 과도하게 목을 생성하는 경향이 있다고 명시적으로 지적하며, 데이터 페칭과 진짜 외부 의존성만 목으로 처리하고 실제 구현을 렌더링할 것을 권장합니다. 구체적인 안티패턴도 명확한 결과와 함께 제시됩니다. expect(x).toBeDefined()는 null이 반환되어도 통과하고, 대형 직렬화 DOM에 toMatchSnapshot()을 쓰면 개발자가 반사적으로 u를 눌러 스냅샷을 업데이트하면서 버그를 통과시키며, 테스트 내 if/else문은 expect() 호출 자체를 조용히 건너뛸 수 있습니다. 실용적인 권장 사항으로는 단일 파일로 필터링한 vitest --watch로 거의 즉각적인 피드백 얻기, 날짜·타임아웃 관련 코드에 vi.useFakeTimers() 사용하기, 각 테스트에 관련된 속성만 노출하는 createUser(overrides) 픽스처 헬퍼 활용하기가 있습니다.HTML Invoker Commands로 JavaScript 없이 다이얼로그 여닫기
<dialog> 요소에 남아있던 마지막 JavaScript 요건—다이얼로그 열기—을 두 가지 선언적 버튼 속성으로 제거합니다. commandFor="dialog-id"와 command="show-modal"을 가진 버튼은 브라우저의 최상위 레이어에 대상 다이얼로그를 모달로 열며, 배경막(backdrop) 처리, 포커스 관리, Esc 키 닫기, 접근성 트리 업데이트를 모두 네이티브로 처리합니다. 다이얼로그 내부 버튼의 command="close" 속성은 기존 <form method="dialog"> 우회 방법을 대체합니다. 이 API는 현재 모든 최신 브라우저에서 지원되지만, 프로덕션 사용 여부는 별도로 평가가 필요하며, Keith Cirkel의 폴리필이 필요한 환경에 사용 가능합니다. 이 작은 스크립트 하나를 제거하는 것은 실질적인 효과가 있습니다. 파싱·실행할 JavaScript가 줄어 초기 로딩이 빨라지고, 스크립트 전달이 실패해도 선언적 마크업이 정상 동작합니다. 이 글은 HTML invoker commands를 일반적인 인터랙티브 패턴을 네이티브 선언적으로 처리하는 더 넓은 플랫폼 트렌드의 일부로 자리매김합니다.연말연시다운, 커리어와 장인정신의 한 주였습니다. 대표 글은 Addy Osmani의 "21 Lessons From 14 Years at Google"입니다. 성장하는 엔지니어는 코드가 아니라 사람, 정치, 정렬, 모호함을 다루는 법을 배운 사람이라는 주장입니다. Syntax의 2026년 예측 에피소드가 생태계 차원의 짝을 이루고, Ben Dicken의 OLTP 대 OLAP 해설은 행/열 저장 구조의 트레이드오프를 시각적으로 풀어내며 기본기를 지켜 줍니다.
테스트와 툴링 축이 유난히 강한 주였습니다. GitHub Security Lab은 OSS-Fuzz의 1,300개 이상 프로젝트에서 수년간의 지속적 퍼징을 버텨낸 버그들이 왜 살아남는지 해부하고, How To Test Frontend는 6개월 뒤에도 읽히는 테스트를 위한 현장 검증 팁 37가지를 모았으며, Performance Calendar는 매일의 습관으로 만들 가치가 있는 Chrome DevTools 기능들로 시즌을 마감합니다. JavaScript 없이 HTML invoker commands로 <dialog>를 여닫는 2분짜리 글은 이번 주의 가장 빠른 승리입니다.
- 커리어의 지렛대는 코드 품질만이 아니라 모호함과 정렬을 다루는 능력에서 나옵니다.
- 지속적 퍼징은 보증이 아닙니다. 오래 퍼징된 의존성도 여전히 감사할 가치가 있다고 여기세요.
- 다이얼로그에는 HTML invoker commands를 도입하세요. 모든 프로젝트에서 JavaScript 배선 작업이 하나 줄어듭니다.