디지털 제품의 소통 비용을 낮추는 체계적 네이밍 설계 전략
UI 컴포넌트, 코드 클래스, 색상, 디자인 토큰 등 제품 개발 전반에서 발생하는 명명 혼선을 줄이기 위한 체계적 분류법과 실무 지침을 분석합니다.
“프론트엔드” 검색 결과검색 초기화17편
어도비, 빌드 타임 정적 분석 기반 Wasm 모듈 분할 기법 공개
어도비가 런타임 프로파일링 반복 작업 없이 빌드 시점의 정적 호출 그래프와 DWARF 디버그 정보를 활용해 초기 구동 WebAssembly 번들 크기를 줄이는 기법을 공개했다. 아크로뱃 웹 프로덕션 환경에서 초기 다운로드 모듈을 11MB에서 9MB로 약 18% 감축한 사례가 함께 보고됐다.
화면 제어를 넘어 비동기 동시성으로: 당근 동네걷기의 오버레이 아키텍처 전환
당근 동네걷기 서비스는 웹뷰와 네이티브가 뒤섞여 동시다발적으로 발생하는 오버레이 UI의 순서 제어 문제를 해결하기 위해, 추상화 단위를 UI 데이터에서 비동기 함수 실행 단위로 전환하고 자바스크립트 마이크로태스크 스케줄링을 접목했습니다.
어도비 익스프레스, 사내 번역 엔진 직결하는 '번역 커넥터' 공개
어도비가 엔터프라이즈 환경에서 디자인 작업 중 외부 번역 엔진을 직접 연동할 수 있는 '익스프레스 번역 커넥터'를 발표했습니다. 별도의 프론트엔드 개발 없이 선언적 매니페스트와 백엔드 API 규격만으로 네이티브 번역 환경을 구축할 수 있습니다.
대규모 QA 280건 돌파한 프론트엔드 파이프라인, AI 에이전트 협업의 실무 구조
여기어때가 해외투어 서비스 오픈 과정에서 발생한 QA 티켓 280건을 AI 에이전트와 협업해 처리한 기록을 공개했다. 개발자가 문제 원인과 비즈니스 방향성을 판단하고 AI가 재현과 로그 추적을 전담하는 체계를 세워, 대량의 결함을 빠르고 안정적으로 해소한 사례다.
미디어 쿼리의 단순 대체재가 아니다: CSS 컨테이너 쿼리를 대하는 새로운 접근법
CSS 컨테이너 쿼리는 화면 전체 대신 컴포넌트가 놓인 조상 요소의 크기를 읽습니다. 미디어 쿼리와 역할을 나누는 방법, 컨테이너 상대 단위, 크기 격리의 제약을 공식 기술 문서와 함께 살펴봅니다.
대규모 프론트엔드 아키텍처의 현실적 선택: FSD의 이상과 접두어 기반 폴더 격리
여기어때 기술팀이 대규모 항공 예약 화면 구축 과정에서 표준 아키텍처인 FSD 대신 접두어 기반의 단순 폴더 명명 규칙을 적용한 사례를 공개했습니다. 이론적 표준과 실무 일정 사이의 상충 관계, 그리고 실제 도입 시 고려해야 할 기술적 한계를 분석합니다.
전역 저장소 없이 대규모 웹 구축하기: 상태 소유권 분리로 푼 프론트엔드 아키텍처
여기어때 서비스웹개발팀은 단일 코드베이스 기반의 대규모 항공 서비스 프론트엔드를 구축하며 Zustand나 Recoil 같은 범용 전역 상태 저장소를 전면 배제했습니다. 상태를 서버 데이터, URL 쿼리, 화면 UI, 컴포넌트 로컬의 네 영역으로 엄격히 분리하고 React Query와 nuqs를 결합해 컴포넌트 간 불필요한 Props Drilling을 해소했습니다.
웹과 앱 웹뷰의 인증 파편화, 'HttpOnly 쿠키 단일화'로 해결한 프론트엔드 아키텍처
여기어때 개발팀이 웹 브라우저와 네이티브 앱 웹뷰 환경 간의 상이한 토큰 수급 경로를 분석하고, 이를 서버 사이드 중심의 HttpOnly 쿠키 구조로 일원화해 XSS 위협과 화면 깜빡임 문제를 해결한 설계 방식을 공유했습니다.
토스뱅크의 App Router 도입 철회: 기술 표준과 운영 현실의 간극
토스뱅크가 Next.js Pages Router의 유지보수 모드 전환에 대응해 App Router와 서버 컴포넌트(RSC) 도입을 검증했으나, 웹뷰 렌더링 지연과 점진적 마이그레이션 결함, 관측성 부재 등의 비용이 이득을 초과한다고 판단해 기존 체제를 유지하기로 결정했습니다.
토스 박씨와 실록봇 사례…업무 질문의 답과 대화 기록을 문서로 연결한다
토스 프론트엔드 챕터가 문서 기반 답변 챗봇 박씨와 대화를 문서 PR로 바꾸는 실록봇을 소개했다. 문서를 탐색하는 경로를 늘리기보다 업무 도구에서 질문하고 지식을 남기는 흐름이다. 검색 증강 생성의 자료 품질과 대화의 검토 경계를 함께 살펴본다.
스크립트 없는 SVG 모션의 해법: SMIL 싱크베이스와 타이밍 차트 설계 전략
HTML img 태그 환경에서 자바스크립트 없이 복합 벡터 모션을 구현하는 수단으로 SMIL의 가치가 재조명받고 있습니다. W3C의 syncbase 규격과 타이밍 차트 기반 선언형 구조 설계를 통해 코드 비대화와 유지보수 문제를 통제하는 실무 방안을 짚어봅니다.
토스 광고 대시보드, 계정 데이터 상한을 확인하고 연산을 워커로 옮기다
토스가 광고 계정의 전체 목록을 브라우저 워커에 두고 필터·정렬·검색을 처리한 경험을 공개했다. 성과 없는 항목과 계층 검증 문제를 함께 해결했지만 초기 로딩과 장애 복구 비용은 남았다.
.png&w=1200&q=75)
웹뷰의 한계를 넘어선 프레임 렌더링: 당근이 오픈소스 Lynx를 도입한 배경과 전략
당근 프론트엔드 코어 팀이 웹뷰의 초기 로딩 지연을 해결하기 위해 크로스플랫폼 프레임워크 Lynx를 검토 및 도입했습니다. 경량 엔진 PrimJS와 듀얼 스레드 기반 즉각 첫 프레임 렌더링(IFR) 구조를 활용해 점진적 도입 체계를 마련했습니다.
웹뷰 한계 넘으려는 당근, 신생 프레임워크 Lynx 도입 배경과 실무적 득실
당근이 웹뷰의 초기 로딩 병목을 해결하고 네이티브 수준의 UI 렌더링을 구현하기 위해 바이트댄스의 신생 크로스플랫폼 프레임워크 'Lynx'를 검토·도입했다. 기존 네이티브 구조를 유지하면서 점진적으로 적용하는 브라운필드 방식과 독립적인 CDN 배포 체계를 목표로 삼았다.
당근, FE·BE 직군 통합과 AI 활용 실험… 업무 처리량 유지 이면의 계획 예측성 저하와 현실적 한계
당근 광고주플랫폼팀이 프론트엔드와 백엔드 엔지니어를 단일 팀으로 통합하고 AI 도구와 문서화를 결합한 한 분기 운영 실험 결과를 공개했다. 직군 간 대기 시간을 줄이며 스토리 포인트 기준 완료량을 유지했으나, 완료 업무의 3분의 2가 무계획 돌발 작업으로 채워지는 등 부작용과 측정 지표의 한계도 함께 확인됐다.
당근, 천만 MAU 트래픽을 지탱하는 커뮤니티 시스템 아키텍처 공개
당근이 2026년 상반기 기준 월간 활성 사용자 1,000만 명을 돌파한 당근모임 등 커뮤니티 트래픽을 처리하는 시스템 구조를 공개했습니다. 소규모 조직 한계를 극복하기 위해 무리한 마이크로서비스 대신 단일 서버앱 기반 모듈형 구조를 택하고 스트리밍 렌더링을 적용한 과정이 상세히 정리되었습니다.
