00:00:00정확히 10년 전 오늘, 정말 감회가 새로운데요, 저에게는 아주 중요한
00:00:06날이었습니다. 바로 제 Angular 강의, 당시 Angular 2 강의의 첫 버전을 출시한 날이기 때문이죠.
00:00:12Angular가 그랬듯, 이 강의 역시 지난 10년 동안 많은 변화를 겪었습니다.
00:00:17Angular가 계속 발전했기 때문에 저 역시 수없이 업데이트를 진행했죠.
00:00:23이번 영상에서는 Angular의 과거, 즉 우리가 어디서 시작했는지,
00:00:28현재의 모습은 어떠하며, 미래에는 어떤 모습일지 이야기해 보려 합니다.
00:00:32특히 AI 시대에 Angular 개발자들에게 미래가 어떨지, 여전히 배울 가치가 있는지 등에 대해
00:00:37자세히 살펴보죠. 자, 시작해 봅시다. 우선 Angular, 구체적으로 Angular 2는
00:00:442014년에 발표되어 2015년에 개발되었는데, 당시 꽤나 논란이 많았습니다.
00:00:53왜냐하면 기존의 Angular 1, 즉 AngularJS와는 완전히 달랐기 때문입니다.
00:00:59AngularJS는 당시에 등장한 최초의 주요 프레임워크 중 하나로,
00:01:05기본적으로 jQuery에서 벗어나기 위해, 혹은 다른 관점에서 보자면 더 성능이 좋은
00:01:13웹 애플리케이션, 즉 인터랙티브한 웹 앱을 구축하기 위해 만들어졌습니다. 클라이언트 사이드
00:01:20렌더링과 제어를 더 쉽게 만들어준 게 Angular 1이었죠. 그러다 Angular 2가 발표되었는데
00:01:25이게 완전히 달랐던 겁니다. 그리고 2016년에 Angular 2의
00:01:33첫 안정화 버전이 출시되었습니다. 앞서 말씀드린 것처럼, 저는 2016년 2월에
00:01:40Angular 2 베타 버전에 맞춘 첫 강의를 출시했습니다. 베타 기간은 물론
00:01:45릴리스 후보(RC) 단계에서도 정말 많은 변화가 있었고, 그때 이미 강의를 수차례 업데이트해야 했죠.
00:01:51어쨌든 그렇게 Angular 2가 나왔습니다. 하지만 당시의 Angular는
00:01:58지금의 현대적인 Angular 코드와 비교하면 꽤 달랐습니다. 'ng modules'라는
00:02:05Angular 모듈 개념이 있었는데, 클래스를 만들고 'ng module' 데코레이터를 붙인 뒤
00:02:12사용할 모든 컴포넌트를 명시적으로 선언해야 했죠. 그리고 컴포넌트에는
00:02:19컴포넌트 클래스가 있고, 생성자 기반의 의존성 주입(DI) 방식이었습니다.
00:02:26무언가를 주입해야 한다면, 어떤 면에서는 지금의 컴포넌트와
00:02:32매우 유사하긴 했습니다. 여전히 클래스니까요. 하지만 또 다른 면에선 매우 달랐습니다. 특히 ng modules는
00:02:39Angular를 언제 시작했는지, 어떤 회사의 어떤 버전으로 작업했는지에 따라
00:02:45더 이상 모르는 분들도 계실 겁니다.
00:02:51물론 여전히 예전 버전에 머물러 있는 회사나 프로젝트가 많이 있긴 하지만요.
00:02:55자, 2017년에는 사라진 '버전 3' 사건이 있었습니다. Angular는 지금까지도
00:03:046개월마다 새로운 메이저 버전을 출시하는 일정을 유지하고 있습니다.
00:03:11당시 많은 사람들이 이 정책을 반기지 않았던 기억이 납니다. 6개월마다
00:03:17Angular가 고장 날 것(breaking change)처럼 들렸기 때문이죠. 제 강의에도 Angular가 맨날 바뀐다며
00:03:23불평하는 댓글과 메시지가 쏟아졌던 기억이 나네요. 하지만 실제로 매번 다 뒤엎어진 건 아니었습니다.
00:03:27그저 큰 기능을 도입할 기회를 갖기 위해 그런 출시 일정을 잡은 것뿐이었죠.
00:03:33개발팀은 항상 하위 호환성을 매우 잘 유지하며 기능을 추가했습니다.
00:03:40아무튼 2017년에 왜 버전 3가 건너뛰어졌냐면,
00:03:46당시 Angular 코어 패키지와 Angular 라우터 패키지 사이에 버전 불일치가 있었기 때문입니다.
00:03:51Angular는 여러 패키지로 나뉘어 있는 프레임워크니까요.
00:03:57그래서 버전 번호를 맞추기 위해 버전 3를 건너뛰었습니다. 자, 그다음
00:04:03큰 도약은 아마 2020년 Ivy 컴파일러의 도입이었을 겁니다.
00:04:12물론 그사이인 2018년 등에도 Angular 팀은 수많은 미세 조정과 개선 작업을 병행하며
00:04:19새로운 컴파일러 개발에 매진하고 있었습니다.
00:04:25이 컴파일러의 핵심 아이디어는 Angular의 내부 구조와 컴포넌트가 컴파일되어
00:04:31실제 DOM을 조작하는 명령으로 변환되는 방식을 완전히 재작성하는 것이었습니다.
00:04:38기존 컴파일러는 비효율적인 면이 있었고 번들 크기가 불필요하게 커지는 문제도 있었죠.
00:04:44그래서 내부 컴파일러를 새로 만드는 거대한 프로젝트를 진행한 겁니다. 이게 왜 중요하냐고요?
00:04:52이 시기를 흔히 '지루한 단계'라고 부를 수 있기 때문입니다. 2017년부터
00:05:012020년까지는 겉으로 드러나는 변화가 별로 없었습니다. 내부적으로는 많이 바뀌었지만요.
00:05:10핵심 기능이나 컴포넌트를 만드는 방식 등은 크게 변하지 않았습니다.
00:05:16이게 중요한 이유는 당시 자바스크립트 프레임워크 시장에
00:05:22엄청난 경쟁이 있었기 때문입니다. 2016년에 Vue.js 2가 출시되었고,
00:05:27React 생태계에서도 많은 발전이 있었습니다.
00:05:362018년에는 React hooks가 도입되었죠. 다른 자바스크립트 생태계는
00:05:43급격하게 진화하는 느낌이었고, 모두가 이를 반긴 건 아니었지만
00:05:50Angular는 정체된 것처럼 느껴졌습니다. 하지만 그게 생각만큼 나쁜 것만은 아니었습니다.
00:05:57자바스크립트 생태계가 너무 자주 바뀐다는 불만이 많았기에 많은 이들이 그 안정성을 높게 평가했죠.
00:06:03물론 거의 매일 AI가 진화하고 끊임없이 변화하는 오늘날의 관점에서 보면
00:06:08그런 불만은 농담처럼 들릴 수도 있겠지만요.
00:06:13어쨌든 그게 당시 사람들의 불만이었습니다. 그게 지루한 단계였죠.
00:06:19그러다 2022년경, Angular 14와 함께 '독립형(standalone) 컴포넌트'가
00:06:28개발자 프리뷰로 도입되면서 지루한 단계가 끝났습니다.
00:06:33핵심은 이제 더 이상 Angular 모듈(ng-modules)이 필요 없게 된 것입니다.
00:06:42대신 컴포넌트에 'standalone' 플래그만 추가하면 ng-modules 없이도
00:06:47다른 컴포넌트에서 해당 컴포넌트를 사용할 수 있게 된 거죠. 물론 여전히 ng-modules를 쓸 수도 있었습니다.
00:06:55독립형 컴포넌트와 혼합해서 사용할 수도 있었고요. 하위 호환성과
00:07:00쉬운 마이그레이션 경로는 Angular 팀에게 언제나 중요한 가치였으니까요.
00:07:05이것이 독립형 컴포넌트였고, 뒤이어 2023년 Angular 16에서
00:07:12Signal(시그널)을 비롯한 수많은 기능이 쏟아져 나왔습니다.
00:07:20ng-if 디렉티브 대신 @if를 사용하는 새로운 조건부 렌더링 방식 같은 것들이죠.
00:07:26또한 'zoneless(존리스) Angular'에 대한 첫 번째 실험도 시작되었습니다.
00:07:34모르시는 분들을 위해 설명하자면, Angular 2 출시 당시에는 ng-zone 또는 zone.js라는
00:07:40개념을 사용했습니다. 이는 기본적으로 클릭이나 HTTP 요청 같은 웹사이트의
00:07:46모든 이벤트를 감시하는 라이브러리였습니다.
00:07:54그리고 이벤트가 발생할 때마다 변화 감지(change detection)를 실행해 DOM을 업데이트해야 할지 확인했죠.
00:08:00이 방식의 장점은 DOM 업데이트가 마법처럼 느껴진다는 것이었습니다.
00:08:05React처럼 setState 같은 걸 호출할 필요가 없었으니까요.
00:08:11하지만 단점은 소위 '멍키 패칭(monkey patching)'을 통해 라이브러리가
00:08:17모든 종류의 이벤트에 리스너를 주입한다는 것이었고, 이는 오버헤드와 번들 크기 증가로 이어졌습니다.
00:08:22결과적으로 React의 메커니즘보다 효율성이 떨어지게 되었죠.
00:08:28그래서 zoneless는 또 하나의 큰 진보였으며, 이는 Signal 덕분에 가능해졌습니다.
00:08:35Signal의 아이디어는 이제 상태가 변경되었다는 것을 Angular에 알리는
00:08:40명시적인 방법이 생겼다는 것입니다. Angular는 해당 상태가 DOM의 어디에서 사용되는지
00:08:46기억했다가 딱 필요한 부분만 업데이트할 수 있게 되었습니다.
00:08:52이런 세밀한 반응성(fine-grained reactivity)이 2023년에 도입되었고,
00:09:01사람들은 이를 'Angular의 르네상스'라고 부르기 시작했습니다. 지루한 단계와
00:09:08Angular 1 시절에 비해 혼란스러웠던 초기 단계를 지나, Angular는
00:09:15커뮤니티로부터 다시 많은 사랑을 받게 되었습니다. Angular를 더 가볍고 사용하기 쉽게 만들고,
00:09:23다른 프레임워크들의 장점을 수용하며 미래로 큰 발걸음을 내디뎠기 때문입니다.
00:09:30예를 들어 Signal은 SolidJS가 대중화시켰지만,
00:09:36사실 주요 프레임워크 중 이를 처음 사용한 건 Vue였다고 생각합니다.
00:09:43Signal이라고 부르는 대신 ref라고 불렀을 뿐이죠. 어쨌든 이게 Angular가 나아가는 방향입니다.
00:09:50이제 2026년과 그 이후에는 더 많은 발전이 있을 겁니다.
00:09:59Signal 기반의 폼(form)도 보게 될 것이고, Angular 팀은 CLI에 내장된
00:10:06MCP 서버를 통해 AI 기반 개발을 적극적으로 수용하고 있습니다.
00:10:13AI가 Angular의 모든 기능을 잘 활용할 수 있도록 돕는 것이죠. 따라서 Angular의 역사는
00:10:19한두 번의 대대적인 혁신을 거치면서도 전 생애 주기에 걸쳐
00:10:26상당히 안정적이고 하위 호환성을 잘 유지해 온 프레임워크의 이야기라 할 수 있습니다.
00:10:33그 과정에서 매우 안정적이었죠. Angular 팀이 정말 훌륭한 일을 해냈다고 생각하며,
00:10:39무겁고 배우기 어렵다는 Angular의 이미지를
00:10:46보다 현대적인 프레임워크로 바꾸는 데 성공했습니다.
00:10:54참고로 Angular가 늘 유지해 온 특징 중 하나는 '필요한 모든 것이 포함된(batteries included)'
00:10:59프레임워크라는 점입니다. 폼 처리, 라우팅, HTTP 요청, 의존성 주입,
00:11:06컴포넌트 간 상태 관리 등이 모두 내장되어 있죠.
00:11:12외부 라우터나 상태 관리 라이브러리를 별도로 찾아야 하는 React와 달리
00:11:18추가 라이브러리를 가져올 필요가 없습니다.
00:11:23이 점이 많은 기업들이 가치를 두는 부분이기도 합니다. 그래서 성장 곡선을 보면
00:11:29지난 10년 동안 Angular는 꾸준한 성장을 보여왔습니다. 하지만
00:11:37솔직히 말씀드리면 React의 성장이 훨씬 컸습니다. React의 성장 곡선을 옆에 두면
00:11:45Angular의 곡선은 거의 보이지 않을 정도죠. 특히 2025년 초부터 React가 급상승했는데,
00:11:54그 이유가 AI 때문이라는 건 우리 모두가 잘 알고 있습니다.
00:12:00다른 영상에서도 여러 번 말했듯이, AI가 가장 선호하는 조합은 Angular가 아니라
00:12:06Next.js와 Tailwind를 사용하는 React이기 때문입니다. 그렇다면 Angular는 끝난 걸까요?
00:12:13이제 더 이상 배울 필요가 없을까요? AI 시대에 Angular의 미래는 어떤 모습일까요?
00:12:18여전히 Angular는 수많은 대기업에서 사용되고 있습니다. 특히 그 안정성과
00:12:27말로만 하는 게 아니라 실제로 증명된 하위 호환성 때문이죠.
00:12:34필요한 모든 기능이 내장되어 있다는 점 덕분에 Angular는 많은 대기업에서 인기가 높습니다.
00:12:40물론 React도 많은 대기업에서 인기가 많지만, 단순히 다운로드 숫자만으로는
00:12:46특히 기업들 사이에서 Angular가 가진 실제 활용도나 인기를
00:12:53정확히 반영하지 못하는 면이 있습니다.
00:13:00제 강의만 보더라도 수강생이 85만 명에 달합니다. 이는
00:13:08유데미에 있는 제 React 강의 수강생 수와 비교해도 크게 뒤처지지 않는 수치죠. 물론
00:13:15유데미에는 제 강의 외에도 더 크고 많은 React 강의들이 있긴 합니다만,
00:13:22단순히 통계 차트만으로는 설명할 수 없는 경험을 저는 해왔습니다.
00:13:29특히 비즈니스 고객들이 Angular를 정말 많이 배운다는 걸 확인해 왔죠. 따라서
00:13:36Angular는 오늘날에도 여전히 현대적인 웹 애플리케이션을 구축하기 위한 훌륭한 선택입니다.
00:13:43Angular의 르네상스와 계획된 신기능들 덕분에 매우 현대적이죠. 물론 고려해야 할 점은 AI입니다.
00:13:48AI는 우리가 프로그램을 만들고 코드를 짜는 방식을 바꾸고 있습니다. 우리는 코드를 덜 씁니다.
00:13:57적어도 저는 그렇습니다. 저는 Claude Code나 Cursor 같은 도구를 사용하는데,
00:14:04참고로 이 도구들에 대한 제 강의도 있습니다. 관심 있으시면 영상 아래 링크를 확인해 보세요.
00:14:09우리는 예전과는 다르게 코드를 짜고 프로그램을 만듭니다. 하지만 기술 선택은 여전히 중요합니다.
00:14:14우리는 여전히 유지보수가 잘 되고, 보안 업데이트가 이루어지며, 효율성을 높이거나
00:14:21성능을 개선하고, 외부 라이브러리 없이도 새로운 기능을 구현할 수 있게 해주는
00:14:27기술을 사용하고 싶어 합니다.
00:14:34그런 면에서 Angular는 React와 마찬가지로 여전히 아주 훌륭한 선택지입니다.
00:14:40물론 댓글이 달리기 전에 덧붙이자면,
00:14:45Vue나 Svelte도 정말 멋진 기술입니다. 하지만 제목과 썸네일에서 보셨듯이
00:14:51이 영상은 Angular에 관한 것이니까요. 네, 여전히 탁월한 선택입니다.
00:14:57그리고 적절한 컨텍스트만 제공한다면 AI도 Angular 코드를 아주 잘 짭니다.
00:15:02어떤 기술로 무엇을 만들든 컨텍스트를 제공하는 건 필수니까요.
00:15:08그래서 저는 Angular가 AI 중심의 미래에도 잘 자리 잡고 있다고 생각합니다.
00:15:13만약 3년 안에 아무도 코딩을 하지 않게 될 것이고, 따라서 기술 선택이
00:15:19무의미해질 것이라고 믿으신다면 상황이 다르겠지만요. 하지만 제 생각은 다릅니다.
00:15:25대부분의 코드를 AI로 생성하며 매일 AI를 헤비하게 사용하는 입장에서 말씀드리자면,
00:15:30AI를 제어하고, 이끌고, 기술과 소프트웨어 아키텍처를 선택하는 능력은
00:15:35그 어느 때보다 중요해졌습니다. 그런 면에서 Angular는 여전히 훌륭한 선택이죠.
00:15:41이것으로 Angular에 대한 짧은 역사를 마칩니다. 제 마음속에 항상 특별한 자리를 차지할 프레임워크죠.
00:15:48말씀드렸듯이 이 강의가 제가 유데미에 출시한 첫 번째 대형 강의였기 때문입니다.
00:15:54이 강의는 제게 많은 변화를 주었습니다. 강의 제작을 업으로 삼게 해주었고,
00:16:00수많은 사람의 삶과 경력을 바꾸어 놓았습니다. 정말 멋진 피드백과 메시지를 많이 받았죠.
00:16:07그래서 제게 Angular는 늘 놀라웠고, 앞으로도 특별할 것입니다.
00:16:13of countless people. I got so many awesome messages and feedback. And therefore, yeah,
00:16:19Angular always was amazing. And it's especially amazing for me.