1강. Astro란 무엇인가? 설치부터 첫 실행까지

Astro 강의 1강에 오신 것을 환영합니다. 이번 강의에서는 Astro가 무엇인지, 다른 프레임워크와 무엇이 다른지 살펴보고, 직접 설치해서 첫 화면을 띄워 봅니다.

Astro란?

Astro는 콘텐츠 중심 웹사이트를 만들기 위한 웹 프레임워크입니다. 블로그, 회사 소개 사이트, 문서 사이트, 포트폴리오처럼 “보여주는 것”이 주된 목적인 사이트에 특히 잘 맞습니다.

가장 큰 특징은 기본적으로 자바스크립트를 브라우저에 보내지 않는다는 점입니다. Astro는 빌드 시점에 모든 페이지를 순수 HTML로 만들어 두기 때문에, 방문자는 무거운 스크립트를 내려받을 필요 없이 바로 화면을 볼 수 있습니다.

다른 프레임워크와의 차이

구분	React / Next.js	Astro
기본 출력	자바스크립트 앱	순수 HTML
상호작용	페이지 전체가 JS	필요한 부분만 JS (Islands)
적합한 사이트	대시보드, 웹앱	블로그, 소개, 문서
학습 난이도	중간~높음	낮음 (HTML 알면 시작 가능)

Astro 파일(.astro)은 HTML과 거의 똑같이 생겼습니다. HTML을 조금이라도 다뤄 봤다면 바로 시작할 수 있습니다.

Islands 아키텍처

Astro의 핵심 개념은 Islands(섬) 입니다. 페이지 대부분은 정적인 HTML이고, 검색창이나 이미지 슬라이더처럼 실제로 상호작용이 필요한 부분만 “섬”처럼 따로 떼어 자바스크립트를 붙입니다. 그래서 필요한 곳에만 React, Vue, Svelte 같은 UI 라이브러리를 섞어 쓸 수도 있습니다.

설치 준비: Node.js

Astro를 쓰려면 Node.js가 필요합니다. 터미널(윈도우는 명령 프롬프트 또는 PowerShell)을 열고 아래 명령으로 설치 여부를 확인합니다.

node -v

버전이 표시되지 않거나 18 미만이라면 nodejs.org에서 LTS 버전을 내려받아 설치하세요. 설치 후 터미널을 다시 열어야 명령이 인식됩니다.

첫 프로젝트 만들기

Astro는 공식 생성 도구를 제공합니다. 원하는 폴더에서 아래 명령을 실행합니다.

npm create astro@latest

몇 가지 질문이 나옵니다. 처음이라면 다음처럼 답하면 됩니다.

프로젝트 폴더 이름 — 예: my-astro-site
템플릿 선택 — A basic, minimal starter (가장 단순한 시작 템플릿)
의존성 설치 — Yes
Git 저장소 초기화 — Yes (선택)

설치가 끝나면 프로젝트 폴더로 이동해 개발 서버를 실행합니다.

cd my-astro-site
npm run dev

터미널에 http://localhost:4321 주소가 나타납니다. 브라우저에서 이 주소를 열면 Astro의 기본 화면이 보입니다. 축하합니다, 첫 Astro 사이트가 실행되고 있습니다.

자주 쓰는 명령어

명령어	하는 일
`npm run dev`	개발 서버 실행. 파일을 저장하면 브라우저가 자동으로 갱신됩니다
`npm run build`	배포용 정적 파일을 `dist/` 폴더에 생성
`npm run preview`	빌드된 결과물을 로컬에서 미리 확인

정리

Astro는 콘텐츠 중심 사이트에 최적화된 프레임워크로, 기본적으로 순수 HTML을 출력합니다.
상호작용이 필요한 부분만 Islands로 분리해 자바스크립트를 최소화합니다.
npm create astro@latest 한 줄로 프로젝트를 만들고 npm run dev로 실행합니다.

다음 강의에서는 방금 만든 프로젝트의 폴더 구조를 살펴보고, 첫 페이지를 직접 만들어 봅니다.