Vercel Blog

Google이 사용자 경험 측정 지표를 FID에서 INP로 교체함에 따라, 웹 페이지의 상호작용 반응 속도 최적화가 중요해졌습니다. React 18의 Suspense 기능을 활용한 선택적 하이드레이션은 메인 스레드의 차단을 방지하여 INP와 TBT 등 주요 성능 지표를 효과적으로 개선할 수 있습니다.

Vercel 엔지니어링 팀은 대시보드의 성능을 두 배 이상 향상시키기 위해 사용자가 가장 빈번하게 사용하는 '핫 패스(Hot Path)'를 식별하고 최적화했습니다. 자바스크립트 실행 효율화, 캐싱 활용, 컴포넌트 지연 로딩 등의 전략을 통해 핵심 웹 지표(Core Web Vitals)와 Lighthouse 점수를 대폭 개선하는 성과를 거두었습니다.

Vercel CLI v28은 Edge Functions 대신 Node.js 기반의 Vercel Functions 사용을 권장하며, Git 메타데이터 포함 및 개발 환경 개선을 통해 배포 프로세스를 최적화했습니다. 또한 Node.js 12 지원 종료와 함께 명령어 체계의 일부 변경이 포함되었습니다.

Vercel Edge Functions가 WebAssembly를 지원함에 따라 개발자는 Rust, Go, C 등의 언어로 작성된 기존 라이브러리를 엣지 환경에서 그대로 활용할 수 있습니다. 이를 통해 비트 연산이나 이미지 처리와 같은 고부하 작업의 성능을 JavaScript 대비 최대 2~3배까지 향상시킬 수 있습니다.

Integral Studio는 Vercel과 Next.js를 활용해 SZA, Travis Scott 등 세계적인 아티스트들을 위한 고성능 디지털 경험을 구축해 왔습니다. 이들은 에이전시 모델을 넘어, 독립 아티스트들을 위한 음악 마케팅 플랫폼인 SymphonyOS를 출시하며 기술을 통해 크리에이터 경제의 진입 장점과 확장성을 혁신하고 있습니다.

Vercel은 2022년 10월 25일 제3회 Next.js Conf 개최를 발표하며, 프레임워크의 대규모 업데이트와 새로운 로고를 공개할 예정이라고 밝혔습니다. 이번 컨퍼런스는 더 나은 개발 경험과 빠른 확장을 위한 도구들을 중심으로 진행됩니다.

이 기사는 Next.js와 Vercel의 Edge Middleware를 사용하여 클라이언트 사이드 레이아웃 시프트 문제를 해결하고 효율적인 A/B 테스트를 수행하는 사례를 다룹니다. Vercel은 템플릿 페이지 리디자인 과정에서 에지 단의 리라이트(Rewrite) 기능을 통해 사용자 경험을 해치지 않으면서 단계별 배포 전략을 성공적으로 실행했습니다.

Vercel Analytics의 차트가 데이터 포인트 간의 단순 연결 방식에서 벗어나 곡선 피적(Curve Fitting)을 활용한 부드러운 곡선 형태로 개선되었습니다. 이를 통해 노이즈를 제거하고 데이터의 전체적인 흐름을 더 정확하게 반영하여, 사용자가 왜곡 없는 트렌드와 변화율을 파악할 수 있도록 돕습니다.

Vercel이 다양한 애플리케이션 유형을 한눈에 확인하고 쉽게 시작할 수 있는 '템플릿 마켓플레이스'를 공식 출시했습니다. 이번 업데이트에는 검색 편의성을 높이기 위한 퍼지 검색(fuzzy search)과 필터 기능이 추가되었으며, Next.js와 Tailwind CSS 등 검증된 기술 스택 기반의 템플릿을 제공합니다.

개발자 Benjamin Td는 Next.js와 Vercel, Supabase를 활용해 유럽 기차 노선 시각화 서비스인 Chronotrains를 구축했습니다. 이 프로젝트는 Edge Network 캐싱과 ISR 기술을 통해 급격한 트래픽 증가에도 안정적인 성능을 유지하며 전 세계적인 사회적 담론을 형성하는 데 성공했습니다.

Next.js 12.3은 환경 변수 변경 시 Fast Refresh를 지원하고 이미지 최적화 기능을 강화했습니다. Vercel은 이러한 프레임워크 기능을 확장하여 클라우드 기반의 보안 관리, 전 세계 에지 네트워크를 통한 이미지 캐싱 및 자동 최적화를 제공함으로써 개발자 경험과 서비스 성능을 동시에 개선합니다.

Vercel이 발표한 Next.js 레이아웃 RFC는 `app` 디렉토리를 기반으로 한 새로운 라우팅 시스템을 제안합니다. 중첩 가능한 레이아웃, 자동화된 로딩 및 에러 경계(Boundary), 그리고 URL 구조에 영향을 주지 않는 라우트 그룹 기능을 통해 더욱 체계적인 UI 개발 환경을 제공합니다.

Vercel이 프리뷰 배포 환경 내에서 텍스트, 컴포넌트, 인터랙션 등에 직접 피드백을 남길 수 있는 '미리 가시화된 댓글' 기능을 공개 베타로 출시했습니다. 이 기능은 스크린샷, 알림, Slack 연동을 지원하여 PR 소유자와 팀원 간의 실시간 UI 리뷰 및 협업 효율성을 극대화합니다.

Vercel은 프리뷰 배포(Preview Deployments)에서 직접 UI 요소에 댓글을 달 수 있는 새로운 기능을 도입했습니다. 이를 통해 기획자, 디자이너 등 모든 이해관계자가 실제 동작하는 환경에서 즉각적인 피드백을 주고받으며 개발 프로세스에 참여할 수 있습니다.

이 기사는 세계적인 유튜버 MrBeast의 새로운 스토어프론트를 구축한 basement.studio의 기술적 여정을 다룹니다. Vercel, Shopify, Axiom을 활용해 대규모 트래픽을 안정적으로 처리하면서도, 게임 요소를 결합하여 사용자 참여와 구매를 극대화한 사례를 설명합니다.

Next.js Conf 웹사이트 제작 과정에서 발견된 접근성 문제를 해결하기 위해 클릭 타겟 크기를 키우고 시맨틱 HTML을 강화한 사례를 다룹니다. 피츠의 법칙을 이용한 인터랙션 개선과 ARCA 패턴 적용을 통해 모든 사용자가 차별 없이 웹 서비스를 이용할 수 있는 방법을 제시합니다.

Vercel이 Edge Functions와 WebAssembly를 활용해 동적 OG 이미지를 생성하는 신규 라이브러리 @vercel/og를 출시했습니다. 기존 Puppeteer 기반 방식의 느린 속도와 높은 비용 문제를 해결하여, HTML/CSS만으로 즉각적인 이미지 생성이 가능하도록 설계되었습니다.

Next.js Conf 2022는 웹 개발자들이 Next.js를 통해 어떻게 애플리케이션을 확장하고 뛰어난 UX를 제공할 수 있는지에 대한 다양한 사례와 기술적 방법론을 다룹니다. 특히 에지 컴퓨팅, 풀스택 프레컬워크로서의 활용, 그리고 디자인 시스템 구축 및 성능 최적화에 초점을 맞춘 전문가들의 세션이 예정되어 있습니다.

Vercel은 신규 프로젝트에서 기존 Edge Functions 대신 Node.js 런타임을 사용하는 Vercel Functions와 Fluid compute 사용을 권장하며, 요청 시 라우팅을 위한 Routing Middleware 도입을 안내했습니다. 또한, 이제 Edge Functions를 특정 리전에 배포할 수 있게 되어 데이터베이스와의 물리적 거리를 줄여 네트워크 지연 시간을 최적화할 수 있습니다.

Vercel은 Edge Function이 실행될 특정 리전을 선택할 수 있는 'Regional execution' 기능을 발표했습니다. 이는 데이터베이스와 함수 사이의 물리적 거리가 멀어 발생하는 쿼리 지연(Waterfall) 현상을 방지하고, 전 세계 사용자에게 최적화된 응답 속도를 제공하기 위함입니다.

Vercel 엔지니어들이 Next.js Conf 등록 페이지를 위해 WebGL과 React 기반 라이브러리인 react-three-fiber를 사용하여 구축한 3D 인터랙티브 경험 제작 과정을 다룹니다. DALL-E를 활용한 디자인 구상부터 실제 프로토타입 구현 및 성능 최적화까지의 워크플로우를 상세히 설명합니다.

Vercel이 Splitbee 인수를 통해 자사 Analytics 기능에 페이지 뷰, 유심 경로, 인구통계학적 정보를 추가하며 분석 역량을 대폭 강화했습니다. 이번 인수는 제3자 스크립트 없이도 개인정보를 보호하면서 실시간 사용자 행동을 추적할 수 있는 통합 플랫폼 구축을 목표로 합니다.

Vercel이 JavaScript의 한계를 극복하기 위해 Rust로 구축된 차세대 번들러 Turbopack을 발표했습니다. 이 도구는 증분 메모이제이션 기술을 활용해 대규모 프로젝트에서도 압도적인 빌드 및 업데이트 성능을 제공하여 개발자 경험을 극대화합니다.

Vercel은 Next.js 13 출시와 함께 Preview Deployment 상에서 UI 및 콘텐츠에 직접 댓글을 달 수 있는 기능을 도입했습니다. 이를 통해 개발팀은 별도의 도구 없이도 커뮤니티의 피드백을 정밀한 컨텍스트와 함께 수집하여 제품 개선 속도를 높이고 있습니다.