프론트엔드는 대화가 되어가고 있다
지난 10년 동안 프론트엔드 개발은 도구를 둘러싼 싸움이었습니다. React를 쓸지 Angular를 쓸지 고민했고, Webpack을 쓸지 Vite를 쓸지 선택해야 했습니다. 대부분의 시간은 이러한 변화를 따라잡는 데 소모되었습니다.
그 시대가 끝나가고 있습니다. 초점은 '어떤 라이브러리를 사용할 것인가'에서 '데이터와 AI가 어떻게 협업할 것인가'로 이동하고 있습니다.
현대의 프로덕션 앱은 새로운 패턴을 따릅니다:
- React나 Svelte 같은 프레임워크가 표준이 되었습니다.
- Next.js나 SvelteKit 같은 메타 프레임워크가 복잡한 작업을 처리합니다.
- TypeScript가 기본값이 되었습니다.
- 서버 우선 렌더링(Server-first rendering)이 기본입니다.
무게 중심이 다시 서버로 이동했습니다. 이제 서버는 데이터를 스트리밍하고 네트워크를 효율적으로 관리하는 더 똑똑한 서버가 되었습니다.
AI는 작업량의 양상을 바꾸어 놓았습니다. AI는 작업의 초기 80%를 처리합니다. 단 몇 분 만에 컴포넌트나 레이아웃을 구축할 수 있으며, 이는 수 시간의 수동 작업을 대체합니다.
하지만 AI는 마지막 20%에서 실패합니다. 접근성(accessibility), 엣지 케이스(edge cases), 그리고 복잡한 상태 로직(state logic) 처리에 어려움을 겪습니다. AI는 초안을 제공할 뿐, 완벽한 솔루션을 제공하지는 않습니다.
이제 여러분의 가치는 판단력에 달려 있습니다. 생성된 코드가 언제 잘못되었는지 알아야 합니다. 예를 들어, AI는 가격 컴포넌트를 작성하면서도 다양한 통화나 로케일(locale) 형식을 놓칠 수 있습니다. 이러한 질문을 던지는 것이 여러분의 새로운 업무입니다.
우리는 Generative UI로 나아가고 있습니다.
- Static UI: 모든 화면을 직접 작성합니다.
- Server-driven UI: 백엔드가 클라이언트가 렌더링할 수 있도록 스키마를 보냅니다.
- Generative UI: 모델이 사용자의 의도에 따라 컴포넌트 트리를 구축합니다.
성공적인 팀들은 제약된 접근 방식(constrained approach)을 사용합니다. AI에게 검증된 컴포넌트 세트를 고정적으로 제공하는 것입니다. 디자인 시스템이 AI를 위한 가드레일(guardrail) 역할을 하게 됩니다.
미래를 위한 세 가지 예측:
- 컴포넌트 라이브러리는 가장 가치 있는 자산이 될 것입니다. 인간과 AI 모두 이를 사용하여 무언가를 구축하기 때문입니다.
- 기계가 읽을 수 있는 계약(Machine-readable contracts)이 승리합니다. 명확한 타입(types)과 스키마(schemas)는 AI가 오류 없이 작업할 수 있도록 돕습니다.
- 타이핑 대신 리뷰가 그 자리를 대신합니다. 여러분의 주요 과업은 코드를 작성하는 것에서 코드를 평가하는 것으로 전환됩니다.
프론트엔드 엔지니어링은 사라지지 않습니다. 기계적인 부분은 점점 저렴해지고 있습니다. 대신 아키텍처, 정확성, 그리고 안목(taste)과 같은 어려운 부분들의 가치는 더욱 높아지고 있습니다.
최고의 엔지니어는 타자가 가장 빠른 사람이 아닐 것입니다. 무엇이 '좋은 것'인지 정의하고 실수를 즉각적으로 잡아낼 수 있는 사람이 최고의 엔지니어가 될 것입니다.
Optional learning community: https://t.me/GyaanSetuAi