앵귤러 기초 강좌 #1 앵귤러란 무엇인가?

오늘날 가장 견고한 풀패키지 자바스크립트 프레임워크, 앵귤러(Angular). 구글, 마이크로소프트, 삼성, 포브스 같은 대형 조직이 사내 시스템과 엔터프라이즈 제품에 앵귤러를 사용하고 있습니다. 한국의 채용 공고를 보면 리액트만큼 자주 보이지는 않지만, SI,금융,대기업 사내 시스템 쪽으로 들어갈수록 깊이 있게 다루는 곳이 많고, 한 번 도입한 곳은 오래 쓰는 경향이 있습니다.

이 강좌에서는 앵귤러 입문자를 위하여 앵귤러가 무엇인지, 왜 만들어졌으며, 어떤 문제를 해결하는 도구인지에 대해서 공부하도록 하겠습니다.

앵귤러의 탄생 #

앵귤러의 출발은 2009년 구글의 엔지니어 미스코 헤버리(Miško Hevery)가 사내에서 만든 AngularJS입니다. 2010년에 오픈소스로 공개된 AngularJS는 양방향 데이터 바인딩과 의존성 주입을 자바스크립트 세계에 본격적으로 들여놓아 큰 반향을 일으켰습니다.

하지만 자바스크립트 생태계가 빠르게 성숙하면서 AngularJS의 초기 디자인 결정들이 한계를 드러냈습니다. 구글은 2014년에 호환성을 끊고 처음부터 다시 만들겠다고 발표했고, 그 결과물이 2016년에 정식 공개된 Angular 2입니다. 이후로는 메이저 버전을 매년 두 번씩 올리는 빠른 릴리즈 사이클로 발전해왔습니다.

오늘날 “앵귤러"라고 하면 더 이상 1.x 버전(AngularJS)을 가리키지 않고, 2016년 이후의 새로운 앵귤러(Angular 2+)를 가리킵니다. 이 강좌에서 다루는 것도 모두 새 앵귤러입니다.

라이브러리인가 프레임워크인가? #

앵귤러는 명확하게 풀패키지 프레임워크입니다. UI 렌더링은 물론이고 라우팅, 폼 처리, HTTP 통신, 의존성 주입, 테스팅까지 — 웹 앱을 만들 때 필요한 거의 모든 기능을 공식적으로 한 패키지 안에 담고 있습니다.

이 점이 리액트와 가장 크게 다른 부분입니다. 리액트는 UI만 책임지고 나머지는 생태계에서 골라 쓰는 미니멀한 접근이지만, 앵귤러는 “이게 표준이다"라며 한 세트를 들고 옵니다. 자유도는 떨어지지만 어느 팀 어느 프로젝트에서나 코드 모양이 비슷해서 인수인계와 유지보수가 쉽다는 강점이 있습니다.

앵귤러의 특성 #

앵귤러의 핵심 특성을 다섯 가지로 정리해보겠습니다.

1. TypeScript 우선 (TypeScript-first) #

앵귤러는 처음부터 TypeScript로 만들어진 프레임워크입니다. 자바스크립트로 쓸 수도 있지만 실무에서는 거의 아무도 그렇게 하지 않습니다. 컴파일 시점에 타입을 검증하고, 자동 완성과 리팩터링이 강력하게 동작합니다. 큰 코드베이스에서 안정적으로 협업할 수 있는 기반이 됩니다.

2. 컴포넌트와 모듈 (Components & Modules) #

화면을 컴포넌트로 쪼갠다는 점은 리액트, Vue와 같습니다. 다만 앵귤러는 오랫동안 컴포넌트를 모아 **모듈(NgModule)**이라는 단위로 묶어왔습니다. 최근에는 모듈 없이 바로 동작하는 Standalone Components가 기본이 되면서 보일러플레이트가 많이 줄었고, 새 프로젝트는 대부분 standalone 방식으로 시작합니다. 이 강좌에서도 standalone을 기본으로 다룹니다.

3. 의존성 주입 (Dependency Injection) #

앵귤러의 가장 강력한 무기 중 하나입니다. 서비스 클래스를 만들면 컴포넌트는 필요한 서비스를 생성자나 inject() 함수로 “주입받습니다”. 객체를 직접 만들지 않으니 테스트할 때 가짜 구현으로 갈아끼우기 쉽고, 큰 앱에서 서비스 간 의존 관계를 추적하기도 좋습니다. 백엔드의 Spring이나 NestJS를 다뤄본 분들에겐 매우 익숙한 패턴입니다.

4. RxJS와 시그널 (RxJS & Signals) #

앵귤러는 비동기 데이터 흐름을 다룰 때 RxJS의 Observable을 오랫동안 표준 도구로 사용해 왔습니다. HttpClient의 응답도 Observable이고, 라우터의 파라미터 변화도 Observable로 흘러옵니다. 처음에는 낯설지만, 익숙해지면 검색,필터,재시도,취소 같은 흐름을 매우 선언적으로 다룰 수 있습니다.

여기에 더해 최근에는 단순한 반응형 상태에는 더 가벼운 Signals(Angular 16+)가 표준으로 자리 잡았습니다. RxJS와 Signals를 상황에 따라 골라 쓰는 시대로 가고 있습니다.

5. 강력한 CLI와 통일된 구조 #

ng new로 프로젝트를 만들고 ng generate component user로 컴포넌트를 찍어내는 식의 CLI가 처음부터 제공됩니다. 어떤 앵귤러 프로젝트든 폴더 구조와 파일 네이밍이 거의 비슷하고, 빌드,테스트,업그레이드(ng update)까지 CLI가 다 챙겨줍니다. “어디에 무엇을 두지?“라는 결정의 피로가 적습니다.

앵귤러로 무엇을 만들 수 있나? #

앵귤러는 거의 모든 종류의 웹 앱을 만들 수 있지만, 특히 잘 어울리는 영역이 있습니다.

• 엔터프라이즈 시스템과 사내 도구: 인사 관리, ERP, 그룹웨어, 어드민 패널 같은 대형,장수 프로젝트. 통일된 구조와 강한 타입 시스템이 빛을 발합니다.
• 대시보드와 데이터 집약 화면: 차트, 그리드, 실시간 업데이트가 많은 화면. RxJS가 데이터 스트림을 깔끔하게 다뤄줍니다.
• 금융,의료처럼 규제와 장기 유지보수가 중요한 분야: “이렇게 짜는 게 표준"이라는 강제가 오히려 장점이 됩니다.
• PWA(Progressive Web App): Angular CLI에 PWA 지원이 내장되어 있어, 모바일에서 네이티브에 가까운 경험을 제공하는 웹 앱을 만들기 쉽습니다.
• 모바일 앱: Ionic 같은 프레임워크와 결합하면 같은 앵귤러 코드로 iOS, Android 앱을 만들 수 있습니다.

리액트, Vue, 앵귤러… 어떤 차이가 있나? #

같은 그룹의 도구이지만 철학이 꽤 다릅니다.

• 리액트는 가장 미니멀합니다. UI 라이브러리만 두고 나머지는 개발자(혹은 메타 프레임워크)가 골라 씁니다. 자유롭지만 결정해야 할 게 많습니다.
• Vue는 리액트와 앵귤러의 중간입니다. 진입 장벽이 낮고 문서가 친절해서 입문자에게 인기가 많습니다.
• 앵귤러는 가장 풀패키지입니다. 라우팅,폼,통신,DI,테스트까지 한 세트로 들어 있어서 “이 문제는 이걸로 푼다"가 미리 정해져 있습니다. 그래서 큰 팀에서 코드 일관성을 지키기 쉬운 반면, 학습 초반에 외울 게 많아 보일 수 있습니다.

채용 시장 전체 규모는 리액트가 가장 큽니다. 하지만 SI,엔터프라이즈,금융 쪽으로 가면 앵귤러 수요가 의외로 견고하게 살아 있고, 한 번 도입한 곳은 오래 쓰는 경향이 있어 안정적인 커리어 경로를 만들기 좋습니다.

이 강좌가 다룰 범위 #

이 강좌는 앵귤러의 가장 기본적인 핵심을 처음 배우는 분들을 위해 차근차근 다룹니다. 이 강좌를 모두 마치고 나면, 여러분은:

• 앵귤러 컴포넌트와 템플릿을 직접 작성하고 조립할 수 있게 됩니다
• 데이터 바인딩과 이벤트 처리로 동적인 UI를 만들 수 있게 됩니다
• Directive와 Pipe로 템플릿의 표현력을 넓힐 수 있게 됩니다
• Service와 의존성 주입을 활용해 로직을 컴포넌트와 분리할 수 있게 됩니다
• Router로 다중 페이지 앱을 구성할 수 있게 됩니다
• HttpClient로 백엔드 API와 통신할 수 있게 됩니다

좀 더 깊은 주제 — Reactive Forms, RxJS, Signals, Change Detection, NgRx 같은 것들 — 은 별도의 “앵귤러 중급/고급” 시리즈에서 따로 다룰 예정이니, 기초를 마치신 분들은 그쪽도 챙겨보시기 바랍니다.

마무리 #

이번 글에서는 앵귤러가 무엇이고, 왜 만들어졌으며, 어떤 강점을 가지고 있는지 살펴봤습니다. 다음 글인 “앵귤러 기초 강좌 #2 컴포넌트와 템플릿 문법"에서는 Node.js 환경에서 Angular CLI로 첫 앵귤러 프로젝트를 만들고, 컴포넌트의 구조부터 살펴보도록 하겠습니다.