Angular.dev
Google · 코딩
Angular.dev는 Angular 공식 사이트다. 구글이 만든 무료 오픈소스 웹 프레임워크로, TypeScript와 시그널, 내장 인공지능 도구를 이용해 빠르고 확장성 높은 웹 앱을 만들 수 있다.
Angular.dev 소개
About
Angular.dev란
Angular.dev는 Angular의 공식 문서 겸 학습 사이트다. 이 웹 프레임워크는 구글 내부의 전담 팀이 관리한다. 가이드와 튜토리얼, API 레퍼런스, 대화형 플레이그라운드를 한곳에 모아 두었기에 흩어진 출처를 오가지 않고도 프레임워크를 익히고 궁금한 점을 풀 수 있다.
Angular는 흔한 문제 하나를 해결한다. 코드와 팀이 동시에 커져도 웹 앱을 빠르고 정돈된 상태로 유지하는 일이다. 컴포넌트 구조, 의존성 주입, 탄탄한 빌드 과정까지 폭넓은 도구와 라이브러리, API를 갖췄고, 모두 하나의 npm 패키지로 쓸 수 있다.
가장 큰 걸림돌은 학습 곡선이다. Angular는 구조에 뚜렷한 입장을 취하므로, 가벼운 라이브러리에 익숙한 사람은 처음 마주하는 개념이 더 많다. 절차를 최소로 줄이고 싶은 팀에는 필요 이상으로 무겁게 느껴질 수 있다.
시작하기
- Node.js를 설치한 뒤
npm install -g @angular/cli를 실행해 명령줄 도구를 추가한다. ng new my-app으로 프로젝트를 만들고 라우팅과 스타일 형식을 쓸지 고른다.ng serve로 로컬 서버를 띄우고 브라우저에서 앱을 열면 편집 내용이 곧바로 반영된다.ng generate로 컴포넌트와 서비스 같은 구성 요소를 만들고 페이지에 연결한다.ng build로 배포용으로 빌드하고 결과물을 정적 호스트나 서버 환경에 올린다.
제품 정보
Angular.dev의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프런트엔드 개발자
- 풀스택 엔지니어
- 성장하는 기업의 기술 리드
- 기초가 있는 입문자
작업
- 싱글 페이지 앱 만들기
- 인공지능이 움직이는 동적 화면 만들기
- 오래된 코드 마이그레이션
- 현대적인 프런트엔드 패턴 익히기
활용 상황
- 새 웹 제품을 처음부터 띄우기
- 기존 앱에 인공지능 기능 더하기
- 큰 팀을 같은 방향으로 묶기
- 첫 로딩이 빨라야 하는 사이트 내보내기
주요 기능
시그널 기반 반응성
시그널을 쓰면 상태 변화를 추적하고 필요한 곳만 화면에 반영한다. 페이지 전체를 다시 훑을 필요가 없다. Angular는 핵심 시그널 API를 안정 버전으로 올렸고, 이제 데이터와 반응성을 다루는 표준 방식이 됐다. 갱신이 매끄러워지고 변화를 손으로 추적하는 코드도 줄어든다.
zone.js 없이 동작하는 변경 감지
존리스 모드는 zone.js를 번들에 넣지 않고 앱을 돌려 불필요한 부담을 덜고 디버깅을 더 분명하게 만든다. Angular v20.2에서 안정화됐고, 이제 새 프로젝트의 기본 방향이다. 결과적으로 번들이 작아지고 동작을 따져 보기도 쉬워진다.
내장 제어 흐름과 지연 로딩
템플릿은 @if와 @for, @switch 블록을 지원하고, @defer를 쓰면 사용자가 필요로 할 때만 페이지 일부를 불러온다. 이는 예전 구조 지시자를 대체하고 큰 목록을 그리는 비용을 낮췄다. 지연 블록은 점진적 하이드레이션도 떠받쳐, 페이지가 부분별로 조작 가능해진다.
서버 사이드 렌더링과 점진적 하이드레이션
Angular는 페이지를 서버에서 그리고, 브라우저에서는 다시 만들지 않고 기존 DOM을 재사용한다. 팀은 실제 앱에서 Core Web Vitals가 꾸준히 좋아졌고 Largest Contentful Paint도 빨라졌다고 보고한다. 검색 순위와 첫 로딩 속도가 중요한 사이트라면 이 점이 의미 있다.
인공지능 통합 공식 가이드
Angular.dev는 앱에 인공지능을 넣는 방법에 한 챕터를 할애해 Genkit과 Firebase AI Logic, Gemini API를 스타터 키트와 예제 저장소와 함께 다룬다. get_best_practices와 find_examples 같은 도구를 담은 MCP 서버도 제공한다. 통합을 맨손으로 더듬지 않고 문서화된 길을 따라갈 수 있다.
충실한 CLI와 빌드 도구
명령줄 도구 하나가 프로젝트 생성과 코드 생성, 테스트, 배포용 빌드를 맡는다. 빌드 과정은 Vite와 esbuild로 돌아가고, ng update가 버전 마이그레이션을 자동화한다. Angular v21부터 기본 테스트 러너는 Vitest다.
장단점
장점
- 구글 전담 팀이 관리하며 공개된 로드맵과 주요 버전당 24개월 지원을 갖춘다.
- MIT 라이선스의 무료 오픈소스로, 핵심 기능을 풀려고 돈을 낼 필요가 없다.
- 시그널과 zone.js 없는 변경 감지, 서버 사이드 렌더링이 프레임워크에 들어 있어 따로 라이브러리를 꿰맬 필요가 없다.
- 공식 문서와 튜토리얼, 실시간 플레이그라운드가 충실해 혼자서도 익힐 수 있다.
- 꾸준한 릴리스 주기가 새 기능을 전하면서도 매년의 주요 변경을 예측 가능하게 유지한다.
단점
- 입문자에게 학습 곡선이 가파르다. 성과를 내기 전에 프레임워크가 정한 구조를 먼저 받아들여야 한다.
- 핵심이 나름의 입장을 지킨 채 매년 나아가므로 주요 버전 업데이트에 시간을 확보해야 하고, 한 번에 한 버전씩만 옮길 수 있다.
- 최소한의 라이브러리보다 개념과 반복 코드가 많아, 프레임워크 전체가 필요 없는 작은 프로젝트에는 무겁게 느껴질 수 있다.
자주 묻는 질문
무료다. Angular 자체가 MIT 라이선스의 무료 오픈소스이고, Angular.dev도 문서와 튜토리얼을 비용 없이 제공한다. 돈이 드는 건 자기 호스팅과 도구, 연결한 서드파티 서비스뿐이다.
관련 콘텐츠
Angular.dev와 관련된 도구, 스킬, 아티클을 살펴보세요.
Angular.dev 대안
Base Code
Base44 (Wix) · 코딩 · 생산성Base Code는 Base44가 만든 공유 클라우드 개발 환경이다. 팀은 기존 GitHub 저장소에 대한 변경을 채팅으로 설명하고, 미리보기로 확인한 뒤 풀 리퀘스트로 돌려보낸다.
Google EmbeddingGemma 2
Google DeepMind · 글쓰기 · 이미지 · 코딩Google EmbeddingGemma 2는 7억 4000만 파라미터의 오픈 모델로, 텍스트와 코드, 이미지, 오디오, 영상 프레임을 하나의 768차원 공간에 벡터로 바꿔 스마트폰과 노트북에서 실행한다.
GitGlow
GitGlow · 코딩 · 생산성GitGlow는 내 코드와 AI 에이전트의 변경을 한 리뷰에 모으는 데스크톱 Git 클라이언트다. 배포 전에 내 기계에서 무엇이 나가는지 확인할 수 있다.