3명으로 시작한 작은 불씨, Angular: 세상을 바꾼 프레임워크 이야기
현재 웹 프레임워크는 사실상 “React 독주, Vue 및 Angular 2위, 그 외 나머지” 구조로 볼 수 있습니다. 그 중 특히 Angular 는 주로 백엔드 개발을 하던 저에게 프론트엔드를 쉽게 접할 수 있게 했고 지금도 꾸준히 사용하고 있는 고마운 프레임워크인데요.
최근 Angular 에 대한 다큐멘터리 영상이 있기에 한글 자막 및 관련 내용을 정리해보았습니다.
https://www.youtube.com/watch?v=JEed6jcod4k
👍 영상 댓글
- "현재까지 Angular 팀은 제가 함께 일했던 가장 뛰어난 엔지니어들 중 일부였고, 그 팀에서의 시간을 소중히 여깁니다. 몇 년 전 Angular의 경영진 교체는 프레임워크에 일어날 수 있었던 최고의 일이라고 생각합니다. 엔지니어링 작업을 활성화했고 마침내 Angular가 가야 할 방향으로 이끌었습니다." - _benlesh
- "그 당시 AngularJS를 배우면서 프론트엔드 개발자로 전업하고 싶어졌습니다. 비록 Angular 2로 가는 길이 많은 사람들(저를 포함하여)을 React나 Vue로 돌아서게 만들었지만요. 팀 뒤에 있는 분들께 큰 존경을 표합니다. 이것은 웹 진화의 근본적인 기술이었습니다." - @luizbaldi
- "6개월 전에 Angular를 다시 시작했습니다. 마지막으로 사용했던 건 2020년이었죠. 돌아온 것은 제가 내린 최고의 선택이었고, 바로 Angular 18로 뛰어들었습니다. 제 미래 앱과 커리어는 여기에 달려 있습니다." - @hbfl3x50
- "초창기인 12/13년경 AngularJS를 접했던 것을 시작으로 이 모든 여정을 함께했습니다. 오늘날까지도 저는 Angular 애플리케이션을 출시합니다. 지금보다 더 좋았던 적은 없었습니다." - @nomiscph
- "AngularJS(정말 사랑했던)부터 과거 제가 맹목적으로 '네, Angular 2로 업그레이드합시다'(컨퍼런스 하나도 안 보고)라고 말했던 때, TypeScript라는 벽돌 벽에 부딪혔던 때, 하지만... 프레임워크가 현재 v17+에 이르기까지, 기본 Standalone Components에서 Signals까지, 이 다큐멘터리는 매우 즐겁고, 치유적이며, 향수를 불러일으켰습니다. 동료들에게는 여전히 기술 스택을 옹호하면서 코드로는 그 어려움을 느끼고 기술에 대한 의구심을 내면화했던 것이 이제 더 이해가 됩니다. 계속될 것입니다, 정말로!" - @marklreyes
- "이 다큐멘터리 덕분에 '새로운' Angular 프레임워크로 나아가는 길에 대한 흥미로운 점들을 배웠습니다. 제가 상세히 언급되었으면 했던 몇 가지 사항이 있습니다. 모듈식 프로젝트에서 Standalone Components로의 전환도 (Ivy와 Signals만큼 중요했습니다). 타입 지정 반응형 폼도 큰 이정표였습니다." - @PhaseControlDNB
- "26:40 드디어! 누군가 Angular 생태계에서 null에 대한 집착을 설명해 주었네요 🙂 솔직히, 저는 핵심 팀만큼 흥분되지는 않습니다. 우리 개발자들에게는 또다시 많은 코드를 재작성해야 하는 일입니다. 동시에, 만약 당신이 젊고 최근에 합류했다면, 새로운 Angular로 새롭게 시작하는 것이 좋은 선택일 수 있습니다." - @fetis26
- "모든 Google 서비스가 Angular로 구축되도록 Wiz와 완전히 통합되기를 바랍니다. 그 시점에는 되돌릴 수 없을 것이고 Angular가 가장 중요해질 것입니다. 저는 'Angular는 프레임워크계의 키아누 리브스'라는 문구에 동의합니다." - @masterterricola
😎 영상 내용 요약
1️⃣ 탄생과 초기 성장 (AngularJS)
Angular는 웹 애플리케이션 개발에서 반복되는 데이터 전달(marshaling) 문제를 단순화하려는 아이디어에서 시작되었습니다. 초기 목표는 HTML에 추가적인 어휘를 도입하여 디자이너와 같이 코딩 지식이 부족한 사용자도 쉽게 웹 애플리케이션을 만들 수 있도록 하는 것이었습니다. Misko Hevery는 Adam Abrans와 협력하여 프런트엔드 프레임워크와 데이터베이스 기능을 결합한 'Get Angular'를 개발했습니다.
이후 Misko는 구글 내부 피드백 도구 개발 프로젝트에서 자신이 만들던 AngularJS를 사용하여 몇 달간 어려움을 겪던 개발 기간을 단 3주로 단축시키는 성과를 보였습니다. 이를 계기로 AngularJS는 구글 내부 프로젝트로 발전하게 되었고, 초기 소규모 팀에서 Igor Minar 등 외부 인력을 영입하며 성장했습니다.
AngularJS는 적은 코드로 풍부하고 상호작용적인 UI 구축이 가능하다는 점, 특히 클라이언트 측 렌더링을 통해 동적인 UI 구현이 용이하다는 점에서 개발자들에게 큰 호응을 얻었습니다. 초기 개발은 정해진 계획보다는 팀원들의 열정과 아이디어를 바탕으로 유기적으로 진행되었습니다. 비록 초기에는 구글 내 다른 팀들로부터 충분한 인정을 받지 못하고 자원 확보에 어려움을 겪었지만, 오픈소스 커뮤니티의 활발한 기여로 빠르게 성장했습니다. Angular 1.0 출시 후 폭발적인 관심을 받았고, 커뮤니티 주도로 열린 첫 ng-conf는 티켓 판매 10초 만에 매진될 정도로 인기가 높았습니다. 양방향 데이터 바인딩, 의존성 주입, 디렉티브 등의 기능은 당시 개발자들에게 혁신적인 솔루션으로 다가갔습니다.
2️⃣ 전환기의 도전 (Angular 2와 TypeScript)
Angular 1.3 이후, 구글 광고 조직으로 개편되면서 GWT(Google Web Toolkit)에 익숙했던 기술 리더들의 영향으로 타입 안전성에 대한 요구가 커졌습니다. 이는 Dart 언어 기반으로 차세대 Angular를 개발해야 한다는 결정으로 이어졌고, 팀 내부에 큰 반향을 일으켰습니다. 이 결정은 결과적으로 TypeScript 도입의 중요한 계기가 되었습니다. 초기에는 타입 시스템에 회의적이었으나, Dart 작업을 통해 대규모 애플리케이션 개발에서 타입의 중요성을 인식하게 되었습니다. 'AdScript'라는 자체 타입 시스템을 구상하기도 했으나, Microsoft TypeScript 팀과의 협력을 통해 TypeScript를 표준으로 채택했습니다.
하지만 Angular 2 발표는 큰 논란을 낳았습니다. Angular 1의 핵심 개념을 폐기한다는 발표 방식은 기존 AngularJS 생태계에 투자했던 개발자 커뮤니티의 강한 반발을 샀습니다. 이는 Angular 2로의 전환을 어렵게 만들었고, 'Angular'라는 이름 사용의 혼란(AngularJS vs Angular 2+)은 학습과 정보 검색에 어려움을 가중시켰습니다. 이 시기의 소통 방식은 오랫동안 Angular에 대한 부정적인 인식을 남기는 원인이 되었습니다.
3️⃣ 내부 혁신과 재정비 (Ivy 엔진 개발)
Angular 2 개발 초기에는 Dart와 TypeScript를 동시에 지원하기 위해 코드를 변환하는 방식을 사용했지만, 언어 간 차이로 인한 제약이 많았습니다. 결국 Dart 팀이 Angular Dart를 별도로 관리(포크)하기로 결정하면서, Angular 팀은 TypeScript 생태계에 완전히 집중할 수 있게 되었습니다.
Angular 2 출시 이후, 프레임워크 내부 구조 개선과 성능 향상, 특히 사용하지 않는 코드를 제거하는 트리 쉐이킹 효율성을 높이기 위한 노력이 시작되었습니다. 이 과정에서 프랑스 Amadeus 개발자들이 제안한 새로운 렌더링 엔진 프로토타입 'Ivy'가 채택되었습니다. Ivy는 트리 쉐이킹을 핵심 목표로 설계되었습니다.
그러나 Ivy 프로젝트는 예상보다 훨씬 방대해져 사실상 프레임워크 전체를 재작성하는 작업이 되었고, 약 3.5년(7개 릴리스)이 소요되었습니다. 가장 큰 어려움은 기존 애플리케이션 코드 변경 없이 Ivy로 전환할 수 있도록 완벽한 하위 호환성을 유지하는 것이었습니다. 문서화되지 않은 내부 동작 방식까지 동일하게 구현해야 했기에 개발은 매우 복잡했습니다.
Ivy는 Angular 8에서 옵션으로 제공된 후 9에서 기본 엔진이 되었지만, 구글 내부 시스템과의 호환성 문제 해결 및 약 2,500개 내부 앱 마이그레이션 작업으로 인해 실제 안정화까지는 더 많은 시간이 필요했습니다. 이 기간 동안 외부 커뮤니티에서는 Angular 개발이 더디다는 비판과 함께 프로젝트의 미래에 대한 우려가 제기되기도 했습니다.
4️⃣ 재도약과 미래 (Signals & Wiz 통합)
힘든 과정을 거쳐 Ivy가 안정화되면서 Angular는 새로운 혁신을 위한 발판을 마련했습니다. Ivy는 이전보다 더 빠르고 유연하게 프레임워크를 개선하고 새로운 기능을 도입할 수 있게 했습니다.
이후 팀은 반응성(Reactivity) 시스템 개선에 집중했습니다. 기존 Zone JS 기반 모델의 성능 한계를 인식하고, OnPush 변경 감지 전략과 RxJS 조합의 장점을 분석했습니다. 그러나 근본적인 개선을 위해 새로운 반응성 기본 요소 도입을 결정했고, 여러 프레임워크에서 주목받던 'Signals'를 채택했습니다. Signals는 RxJS보다 단순하면서도 상태 관리에 효과적인 모델을 제공합니다. 이 과정에서 SolidJS 개발자 등 외부 커뮤니티와의 협력도 이루어졌습니다.
최근 Angular는 구글 검색, 포토 등 핵심 서비스에서 사용하는 내부 프레임워크 'Wiz'와의 통합을 발표했습니다. 두 팀 모두 Signals 도입을 검토하면서 협력의 계기를 찾았고, 현재 YouTube 모바일 웹 앱 전체가 공동 개발한 Angular Signals를 사용하고 있습니다. 이 통합은 Angular가 구글의 핵심 기술로 자리매김하고 미래에도 지속적으로 발전할 것이라는 강력한 신호로 해석됩니다. 통합 작업은 Ivy 때와 달리 점진적으로 진행되며, 커뮤니티 피드백과 주요 고객 요구사항을 지속적으로 반영할 계획입니다.
현재 Angular는 'Angular 르네상스' 시대를 맞이하고 있습니다. 새로운 기능 도입, 문서 개선, 학습 경험 향상 등을 통해 개발자 친화적인 프레임워크로 거듭나고 있습니다. 안정적인 팀 운영과 리더십, 그리고 커뮤니티와의 적극적인 소통을 바탕으로 과거의 어려움을 극복하고 다시 한번 웹 개발 생태계에서 주목받고 있습니다.