RSS Amplifier

FE News · Jan 7, 2026

[FE News] 2026-01

Read inOriginalenesdefrptjaittr
0
Sign in to vote or save

FE News · FE News

GitHub 에서 소식 보기:
https://github.com/naver/fe-news/blob/master/issues/2026-01.md

Dan Abramov가 React Server Components(RSC) 프로토콜을 시각화하는 도구 RSC Explorer를 공개했다. RSC 프로토콜에 대한 관심이 높아지면서 React 트리의 직렬화·역직렬화 포맷을 직접 확인할 필요가 커졌다.

브라우저에서 RSC 스트림을 단계별로 재생하고 분해할 수 있다. 서버·클라이언트·flight·preview 4개 패널로 데이터 흐름을 표시하며, 네트워크 요청 없이 동작한다. React가 제공하는 reader/writer를 그대로 사용하기 때문에 출력 결과는 실제 프로토콜과 동일하다.

스트리밍(Suspense), Client Reference, Server Actions, Router refresh 같은 프레임워크 내부 동작 원리를 이해할 수 있다. RSC 디버깅과 교육 자료로 활용하기 좋은 도구다.

클라이언트 사이드 모델과 에이전트를 주제로 하는 행사다. “웹에서 AI” 흐름이 서버 호출 중심에서 점점 브라우저 실행과 에이전트 상호작용 쪽으로 이동하는 분위기를 보여준다.

세션 목록을 훑어보는 것만으로도 관심 주제를 확인할 수 있다. WebGPU/온디바이스 추론, 에이전트 UX, 브라우저 API 연동 같은 주제를 탐색하기에 적합하며, 흥미롭게 확인할 수 있는 세션들은 다음과 같다.

GitHub이 2,500개 이상의 저장소를 분석하여 효과적인 agents.md 작성 패턴을 정리했다. “You are a helpful coding assistant”와 같은 모호한 지시문은 실패 확률이 높으며, 운영 매뉴얼 수준의 명확한 지시가 필요하다.

핵심 패턴은 다음과 같다. 실행 가능한 명령어를 앞쪽에 배치하고, 설명보다 실제 코드 예시를 제공한다. 수정하면 안 되는 폴더·비밀·설정 같은 경계를 명확히 표시하고, 스택 버전을 명시한다. 테스트·구조·스타일·git 워크플로·경계를 포함하는 6개 영역을 커버하는 패턴이 자주 등장한다.

팀 단위로 에이전트를 운영할 때 좋은 시작점이다. @docs-agent, @test-agent, @lint-agent처럼 역할을 분리하고 반복적으로 개선하는 방식을 추천한다.

Stanford AI Club 스피커 시리즈에서 Jeff Dean이 중요한 AI 트렌드를 연구와 제품 양쪽 관점에서 정리한다.

모델 성능뿐 아니라 시스템·데이터·워크플로 관점의 논의를 포함한다. 프런트엔드 관점에서는 브라우저/클라이언트에서 AI를 적용하는 방법과 제품 UX 변화 지점을 탐색하는 데 힌트를 얻을 수 있다.

AI를 단순한 기능 추가가 아니라 제품 구조 전체를 바꾸는 변화로 보는 시각을 정리하는 데 도움이 된다.

Martin Fowler와 함께 AI가 소프트웨어 엔지니어링을 어떻게 변화시킬지 논의하는 영상이다.

도구 사용법 튜토리얼보다 상위 레벨의 프레임을 정리하는 데 집중한다. 아키텍처, 팀 프로세스, 품질 관리, 교육·리뷰 방식 변화 같은 영역을 다룬다. 프런트엔드 개발에서도 코드 작성 속도 외에 다양한 영향을 고려해야 한다.

리뷰·테스트·배포·관측성 같은 병목 지점이 어디로 이동하는지 점검하는 계기가 된다.

“코딩 속도는 빨라지는데 출시 속도는 정체되는” 역설을 다룬 발표다. AI 네이티브 엔지니어링으로의 전환 과정에서 시니어 개발자와 기술 리더가 직면하는 실무 문제를 정리한다.

3개의 핵심 주제는 다음과 같다.

  • 첫째, “70%의 함정”을 다룬다. AI가 코드를 빠르게 작성하지만 프로덕션 환경에서 문제를 일으키는 이유와 라스트 마일 격차를 해소하는 방법을 설명한다.

  • 둘째, 컨텍스트 엔지니어링을 강조한다. 프롬프트 엔지니어링에 시간을 낭비하지 말고, LLM이 레거시 코드베이스를 실제로 이해할 수 있도록 에이전트 메모리를 설계하는 방법을 제시한다.

  • 셋째, 코드 검토 위기를 다룬다. Google 데이터에 따르면 PR 리뷰 시간이 91% 증가했으며, Trio 프로그래밍(페어 프로그래밍 + AI) 같은 워크플로로 이러한 추세를 역전시키고 기술 부채를 막는 방법을 소개한다.

세계에서 가장 저명한 AI 연구소이자 기업 중 하나인 DeepMind 설립과 여정을 담은 이 영화는 과학자 Demis Hassabis와 그의 팀이 인공 일반 지능(AGI)의 수수께끼를 풀기 위해 끊임없이 탐구하는 과정을 담고 있다.

5년에 걸쳐 촬영된 이 영화는 Hassabis와 그의 팀이 생물학의 50년 난제를 해결한 획기적인 프로그램인 AlphaFold로 역사를 쓰는 순간을 포착한다.

Cursor 스폰서 라이브 이벤트 기록이다. Cursor, Notion, Ramp의 디자이너들이 Cursor를 워크플로에 어떻게 적용하는지, 디자이너와 엔지니어 협업의 경계가 어떻게 변화하는지 다룬다.

주요 테크 기업들의 디자이너들이 Cursor를 워크플로에 어떻게 적용하는지 확인해 볼 수 있어, 개발자들만 아니라 디자이너들도 참고할 수 있는 콘텐츠다.

Linus Torvalds가 출연하여 Linux PC 빌드에 대해 이야기하는 콘텐츠다. 하드웨어 선택 기준과 Linux 개발 환경 선호 지점 같은 “개발자 워크스테이션” 주제를 다룬다.

프런트엔드 개발에서도 로컬 개발 환경은 생산성에 직접적인 영향을 준다. 빌드·테스트·컨테이너·에뮬레이션 등 워크로드가 커진 팀이라면 환경 선택 기준을 재점검할 계기가 된다.

웹 기술과 직접 연결은 약하지만, 개발 환경·성능·도구 경험에 대한 이야기로 가볍게 소비하기 좋다.

우아한테크 채널에서 우아콘 2025 전체 세션을 공개했다. 재생목록에 40개 영상이 구성되어 있다.

백엔드·데이터·플랫폼·AI·제품·조직 등 폭넓은 주제를 포함한다. 프런트엔드 관점에서도 디자인 시스템, 성능 최적화, 실시간 전송, AI 네이티브 조직 같은 세션을 선택할 수 있다.

공식 컴퓨터 과학 교육 없이 프런트엔드 개발을 시작한 개발자를 위한 프로그래밍 원칙 가이드다. 추상적인 법칙보다 코드 작성 순간 바로 적용할 수 있는 실용적 규칙에 집중한다.

핵심은 “세 번의 법칙(Rule of Three)”이다. 같은 코드를 첫 번째는 그냥 작성하고, 두 번째는 복사·붙여넣기하며, 세 번째 작성할 때 비로소 리팩터링한다. YAGNI(You Aren’t Gonna Need It), DRY(Don’t Repeat Yourself), 조기 최적화 경고 같은 원칙을 하나로 통합하는 방식이다. “작동하게 만들고, 올바르게 만들고, 빠르게 만들라(Make it work, make it right, make it fast)” 원칙으로 우선순위를 정하고, 단일 책임 원칙(Single Responsibility Principle)과 단일 추상화 수준(One Level of Abstraction)으로 코드 구조를 개선한다.

추상적 원칙을 실전에서 어떻게 적용할지 모호할 때 유용하다. 리팩터링 타이밍, 함수 분리 기준, 추상화 레벨 판단 같은 순간에 바로 적용할 수 있는 체크리스트를 제공한다.

OpenAI 공동 창업자이자 전 Tesla AI 디렉터 Andrej Karpathy가 X에 올린 글이다. 프로그래머로서 이렇게 뒤처진 느낌을 받은 적이 없다고 말한다. 프로그래머가 기여하는 부분이 점점 희박해지면서 직업 자체가 극적으로 재구성되고 있다는 것이다.

지난 1년간 등장한 도구들을 제대로 조합하면 10배 더 강력해질 수 있다고 본다. 기존 레이어 위에 새로운 프로그래밍 가능한 추상화 레이어가 생겼다. agents, subagents, prompts, contexts, memory, modes, permissions, tools, plugins, skills, hooks, MCP, LSP, slash commands, workflows, IDE 통합 등을 마스터해야 한다. 확률적이고 오류가 있으며 이해하기 어렵고 계속 변화하는 존재들에 대한 멘탈 모델을 구축해야 한다.

매뉴얼 없이 강력한 외계 도구가 주어진 상황에서 규모 9의 지진이 직업을 흔들고 있다. 뒤처지지 않으려면 소매를 걷어붙여야 한다는 메시지를 던진다.

GitHub Copilot이 Agent Skills를 지원하기 시작했다. Agent Skills는 특정 작업을 반복 가능한 방식으로 수행하도록 Copilot에 가르치는 메커니즘이다.

Skills는 지침, 스크립트, 리소스를 포함하는 폴더 형태다. Copilot이 프롬프트와 관련성을 감지하면 자동으로 해당 Skill을 로드하여 지침을 따른다. Copilot 코딩 에이전트, Copilot CLI, Visual Studio Code Insiders의 에이전트 모드에서 작동하며, 2026년 1월 초 VS Code 안정 버전에서도 지원될 예정이다. 직접 Skill을 작성하거나 anthropics/skills, github/awesome-copilot 같은 공유 저장소의 Skill을 사용할 수 있다. Claude Code에서 .claude/skills 디렉터리에 설정한 Skill이 있다면 Copilot이 자동으로 인식한다.

팀 단위 에이전트 운영 시 “반복 작업 자동화”를 표준화하는 출발점이 된다. 테스트 작성, 리팩터링, 문서화 같은 패턴을 Skill로 정의하면 일관된 출력을 기대할 수 있다.

30년간의 웹 개발 여정을 개인 경험으로 풀어낸 회고록이다. 1990년대 중반 <br> 태그와 테이블 레이아웃으로 시작한 이야기를 담고 있으며, 웹 개발이라는 분야가 어떻게 지금의 모습으로 진화했는지 보여준다.

Netscape와 Internet Explorer 시절의 정적 HTML에서 PHP와 MySQL의 등장, Flash와 jQuery 전성기를 거쳐 Node.js와 SPA 프레임워크가 부상하고 현재의 AI 통합 개발 환경까지 이어지는 흐름을 시대별로 정리했다. 각 시대마다 개발자가 직면한 도구·패러다임·생산성 변화를 구체적인 경험으로 연결하며, 기술 선택의 배경과 트레이드오프를 함께 다룬다.

프런트엔드 생태계가 어떻게 진화했는지 궤적을 확인할 수 있으며, 오늘날 당연하게 사용하는 도구와 패턴이 어떤 맥락에서 등장했는지 이해하는 데 도움이 된다. 웹 개발의 역사를 돌아보면서 앞으로의 변화를 전망하는 계기가 될 수 있다.

저자는 단일 HTML 파일로 구성된 도구 150개 이상을 제작하면서 발견한 패턴과 기법을 공유한다. HTML, JavaScript, CSS를 하나의 파일에 담아 배포·공유·실행을 단순화하는 접근법으로, 복잡한 빌드 프로세스 없이도 실용적인 도구를 만들 수 있음을 보여준다.

CDN을 통해 외부 라이브러리를 로드하고 LocalStorage로 상태를 유지하며, Vanilla JS 또는 Preact 같은 경량 프레임워크를 조합하는 것이 핵심 패턴이다. LLM을 프로토타이핑 도구로 활용하여 빠르게 초안을 생성하고, 브라우저 DevTools로 디버깅·수정하는 워크플로를 제안한다. 단일 파일 구조는 버전 관리·빌드 설정·배포 파이프라인 없이도 즉시 동작하는 장점을 제공하며, 특히 공유와 재사용이 간편하다.

내부 도구, 데이터 시각화, 실험용 프로토타입처럼 빠른 제작과 간단한 배포가 중요한 상황에서 유용하다. 복잡한 빌드 환경 없이 브라우저만으로 완결되는 개발 경험을 탐색하려는 개발자에게 실질적인 인사이트를 제공한다.

State of HTML 2025는 현대 웹 플랫폼의 HTML 기능과 트렌드를 조사하는 대규모 연례 설문조사다. Forms, Graphics & Multimedia, Content, Interactivity, Performance, Web Components, System Capabilities, Accessibility 등 8개의 주요 카테고리를 다루며, 개발자들의 기능 사용 경험과 감성(sentiment)을 분석한다.

올해는 개발자들이 자유롭게 작성한 pain point 답변들을 분석하는 데 집중했고, 카테고리별로 분류된 데이터와 응답자의 원본 답변을 검색하고 탐색할 수 있는 기능을 제공한다. 주요 통계로는 Lazy loading이 Newly Available 기능 중 70% 사용률로 가장 높은 채택률을 기록했으며, Content-Security Policy는 전년 대비 10%의 가장 큰 사용률 증가를 보였다. 설문 결과는 Usage, Awareness, Interest, Satisfaction, Appreciation, Positivity 등 6가지 주요 지표로 분석되어 시간에 따른 트렌드를 확인할 수 있다.

HTML의 최신 기능 채택률, 개발자 경험, 그리고 웹 표준의 발전 방향을 이해하는 데 도움이 된다.

Cursor의 디자인 책임자 Ryo Lu가 디자이너가 mock 대신 실제 코드를 배포하는 방식을 45분간 실시간으로 보여주는 튜토리얼이다. AI 코딩 도구의 최전선에서 일하는 디자이너의 실전 워크플로를 직접 확인할 수 있다.

레트로 스타일의 OS(ryOS)를 AI로 구축한 과정을 공유하고, Cursor의 새로운 에이전트 모드를 사용해 실시간으로 새 기능을 추가하는 라이브 데모를 진행한다. AI 디자인 슬롭(slop)을 피하는 방법과 Cursor 팀이 290억 달러 가치 평가를 받게 된 배경도 다룬다. 디자이너가 직접 코딩해야 하는 이유와 디자인→코드 전환의 새로운 패러다임을 제시한다.

디자인 시스템을 유지하면서도 AI 도구로 빠르게 프로토타입을 제작하고 실제 프로덕션 코드로 전환하는 과정을 배울 수 있다. 디자이너와 개발자의 경계가 흐려지는 미래를 고민하는 팀에게 실질적인 인사이트를 제공한다.

Anthropic의 “Code w/ Claude” 세션이다. 프롬프트 기본기를 개발자 실전 관점으로 정리한다.

역할/목표/제약/예시/출력 포맷 같은 구조를 명시하는 방법을 중심으로 다룬다. 단발 질의보다 반복 작업(리팩터링, 테스트 작성, 문서화)에서 일관성을 확보하는 프레임을 제공한다.

팀 단위 프롬프트 템플릿을 만들 때 참고하기 좋다. PR 템플릿, 에이전트 운영 문서, 작업 요청 포맷 표준화로 연결할 수 있다.

서적 “AWS 인프라 구축 입문”의 온라인 버전으로 AWS 아키텍처를 실습 중심의 내용을 배울 수 있다. 서버 운영부터 VPC, RDS, CloudFront, IAM까지 실무에서 자주 사용하는 서비스를 단계별로 다룬다.

EC2 인스턴스와 로드 밸런서로 고가용성 아키텍처를 구성하고, VPC로 네트워크를 설계하며, RDS와 ElastiCache로 데이터베이스 계층을 구축한다. S3 정적 웹사이트 호스팅, CloudFront CDN 설정, Route 53 도메인 연결 같은 프런트엔드 배포에 직접 필요한 내용도 포함되어 있다.

S3+CloudFront 정적 사이트 배포, HTTPS 인증서 설정, CI/CD 파이프라인 구축 같은 작업에 필요한 기초 지식을 쌓기에 적합하다.

Vitest Browser Mode의 개념부터 설정, 실전 사용법까지 다루는 종합 가이드다.

핵심 특징은 다음과 같다. 실제 브라우저(Chrome, Firefox 등)에서 테스트를 실행하면서도 개별 컴포넌트를 격리해서 테스트할 수 있다. jsdom 같은 시뮬레이션 DOM이 아닌 실제 브라우저이므로 localStorage, sessionStorage, IntersectionObserver, clipboard API 같은 Web API를 모킹 없이 테스트할 수 있다. Testing Library와 Playwright을 혼합한 형태의 API를 제공하며, UI 모드로 렌더링된 컴포넌트를 시각적으로 확인할 수 있어 디버깅이 쉽다.

E2E 테스트와 달리 전체 페이지가 아닌 단일 컴포넌트를 테스트한다는 점에서 기존 단위 테스트와 유사하다. 기존 Vitest/Jest 테스트와 병행 사용이 가능하며, 2년 내에 프런트엔드 테스팅의 표준 도구가 될 것이라는 전망을 제시한다.

“2주 안에 AI 연구 프런티어 따라잡기”를 목표로 하는 리소스 모음이다. 바쁜 개발자를 대상으로 한 커리큘럼 형태로 구성되어 있다.

LLM 서베이, 에이전트 서베이, 프롬프트 엔지니어링 서베이 같은 입구를 제공한다. Transformers, Scaling Laws, RLHF, DPO, LLM-as-Judge 같은 핵심 논문의 흐름을 짧게 연결한다.

프런트엔드 개발자에게도 유효하다. 제품에 AI 기능을 추가하기 시작하면 모델·평가·프롬프트·에이전트 같은 기본 개념 이해가 곧 설계 역량으로 이어진다.

프롬프트를 구조화된 형태로 조립하는 빌더다. Task/Tone/Background/Rules/Examples/History/Request/Thinking/Output/Prefill 10단계 프레임을 제공한다.

팀 문서·가이드·정책을 프롬프트 입력으로 옮길 때 유용하다. 특히 규칙/예시/출력 포맷을 분리하도록 강제하여 프롬프트 품질의 흔들림을 줄이기 좋다.

JS 모듈과 더 모던하거나 활발하게 유지보수되는 대체품들의 매니페스트를 제공하는 프로젝트다. 커뮤니티 e18e 노력의 일환으로, 오래되거나 유지보수가 중단된 패키지를 현대적인 대안으로 교체하는 데 도움을 준다.

세 가지 매니페스트를 제공한다. Native replacements는 이제 네이티브 기능으로 대체 가능한 모듈(폴리필 등)을 정리하고, Micro utility replacements는 네이티브 코드나 간단한 구현으로 교체 가능한 소형 유틸리티를 다루며, Preferred replacements는 더 가볍거나 적극적으로 유지보수되는 대안을 제시한다. npm 패키지로 설치 가능하며, eslint-plugin-depend 같은 도구가 이 데이터를 활용한다.

레거시 코드베이스를 현대화하거나 번들 크기를 줄이는 작업에 유용하다. 의존성 관리 전략을 수립할 때 참고할 수 있는 가이드 역할을 한다.

macOS용 “sidebar-first” 미니멀 브라우저다. 수직 탭 중심 UI와 성능·메모리 효율을 강조한다.

Swift/SwiftUI 기반으로 개발되었다. 브라우저 자체를 확장하거나 커스터마이즈하려는 개발자에게 흥미로운 사례다. “웹앱 개발” 바깥에서도 브라우저 UI/아키텍처 구현을 참고할 수 있다.

개인 생산성 도구 관점에서도 볼 만하다. 워크스페이스와 탭 관리 경험이 업무 흐름에 직접 영향을 주는 팀이라면 테스트할 가치가 있다.

React와 tRPC를 위한 현대적 데이터 클라이언트다. Relay와 GraphQL에서 영감을 받아 view composition, normalized caching, data masking, Async React 기능을 tRPC의 타입 안전성과 결합한다.

핵심 특징은 다음과 같다. 컴포넌트가 필요한 데이터를 co-located “view”로 선언하고, 이를 화면 단위로 합성해 단일 요청으로 전송한다. 정규화된 캐시로 데이터 중복과 stale 상태를 방지하고, 데이터 마스킹으로 컴포넌트 간 우발적 결합을 차단한다. Actions, Suspense, use 같은 최신 React 기능과 통합되며, 커넥션 스타일 페이지네이션과 선언적 optimistic update도 지원한다.

export const PostView = view<Post>()({
  author: UserView,
  content: true,
  id: true,
  title: true,
});
export const PostCard = ({ post: postRef }: { post: ViewRef<’Post’> }) => {
  const post = useView(PostView, postRef);
  return (
    <Card>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <UserCard user={post.author} />
    </Card>
  );
};

흥미로운 점은 코드의 80%가 OpenAI Codex로 작성되었고(작업당 4개 버전 생성 후 사람이 큐레이션), 나머지 20%만 인간 개발자가 직접 작성했다는 점이다(문서는 100% 사람이 작성).

재렌더링 없이 반응형 UI 상태를 관리하는 React 라이브러리다. 빌드 타임에 UI 상태를 미리 렌더링하고, data-* 속성을 변경해 업데이트하는 방식으로 동작한다.

핵심 개념은 “Pre-Rendering”이다. 모든 UI 상태가 빌드 타임에 알려져 있다면 왜 재렌더링해야 하는가? Zero UI는 Tailwind 변형 클래스를 AST 분석으로 추출하고, 런타임에는 data-* 속성만 플립한다. useUI로 글로벌 상태를, useScopedUI로 요소 단위 상태를 제어하며, CSS 변수도 지원한다.

const [theme, setTheme] = useUI(’theme’, ‘dark’);
setTheme(’light’); // body에 data-theme=”light” 적용
<div class=”theme-dark:bg-black theme-light:bg-white”>Fast & Reactive</div>

350바이트 미만의 작은 footprint와 zero runtime overhead를 제공한다. 테마 전환, 메뉴 열림/닫힘 같은 단순 UI 상태를 Context나 prop drilling 없이 처리하려는 경우에 적합하다. Vite와 Next.js를 지원하며, Tailwind v4가 필요하다.

셀프호스팅이 가능한 AI Chat 플랫폼이다. 다양한 LLM 연결, RAG, Agents, Web Search, MCP, Deep Research, 커넥터(40개 이상의 데이터 소스) 같은 기능을 제공한다.

엔터프라이즈 기준 기능에도 초점을 맞추고 있다. SSO/RBAC/권한 동기화, 에어갭 환경, 대규모 문서 인덱싱, 관리 UI 같은 요구사항을 다룬다. 사내 지식 기반 챗을 빠르게 구축할 수 있는 베이스다.

프런트엔드 관점에서도 참고할 포인트가 많다. Chat UI 설계, 멀티 에이전트 UX, 검색/출처/권한 표시 같은 패턴 구현을 코드로 확인할 수 있다.

React 공식문서: You Might Not Need an Effect를 근거로 작성된 ESLint 플러그인으로, useEffect의 불필요한 사용을 찾는 검사 규칙을 제공한다.

네이버파이낸셜 디자인시스템과 AI를 활용한 마크업 자동화 작업 경험을 공유한다. Figma로 작성한 디자인시스템을 Code Connect와 instruction을 활용해 AI가 컴포넌트 기반 마크업을 생성하도록 하는 실험을 다룬다.

디자인 토큰과 디자인시스템 컴포넌트 구조를 AI에게 학습시키고, Figma 디자인을 실제 코드로 변환하는 과정을 보여준다. Code Connect로 디자인-코드 매핑을 명시하고, instruction으로 코딩 컨벤션을 전달하여 일관된 마크업 생성을 시도했다. FE 개발 시작 가능한 수준의 마크업이 나왔지만, 복잡한 레이아웃이나 반응형 처리 같은 부분에서는 여전히 사람의 개입이 필요했다.

현실 개발에서는 AI 도구를 보조 수단으로 활용하면서도, 디자인시스템 문서화와 컴포넌트 표준화가 AI 활용 효율을 크게 좌우한다는 인사이트를 제공한다. 디자인시스템을 잘 정비할수록 AI의 도움을 더 효과적으로 받을 수 있다.

Read the original on fenews.substack.com ↗

Comments

Nothing yet. Say the first thing.

    Sign in to join the conversation.