AI 활용 앱 개발 공부 노트: Astro 블로그 만들기 ① 설치부터 기본 구조 알아보기

이번엔 커서AI(Cursor AI)와 Astro를 활용해서 블로그를 만드는 실습을 진행했어요.

Astro는 정적 사이트 생성기인데,

블로그처럼 콘텐츠 중심 사이트에 최적화되어 있다고 해서

궁금했던 프레임워크였습니다.

이번 편은 ① Astro 설치부터 ② 기본 블로그 구조 파악까지만 다루고,

원하는 테마를 가져와서 적용하는 과정은 다음 편에서 이어갈게요!

1. Astro 소개

Astro 공식 사이트(astro.build)에 가면 바로 설치 명령어가 눈에 띄어요.

정적 사이트 생성기답게 "콘텐츠 중심 웹사이트를 위한 프레임워크"라는 문구가 크게 적혀 있었어요.

▲ astro.build 홈페이지, npm create astro@latest 명령어 안내

💡 Tip. 상단 메뉴의 Resources → Themes(astro.build/themes)로 들어가면 무료/유료 테마들을 미리 볼 수 있어요. 왼쪽 필터에서 블로그, 이커머스 등 카테고리별로 원하는 테마만 골라서 볼 수 있고, 하단의 "Discover more themes"를 누르면 더 많은 테마도 확인할 수 있어요. 이건 다음 편에서 직접 적용해볼 예정이에요.

2. Astro 설치하기

작업할 폴더를 만들고, 그 폴더 안에서 커서AI를 실행한 다음 아래 명령어로 설치를 시작했어요.

명령어	`npm create astro@latest`

▲ 필요한 패키지(create-astro) 설치 여부를 묻는 화면. y 입력 후 진행

설치를 시작하면 몇 가지 질문이 순서대로 나와요.

질문	선택
dir (프로젝트를 생성할 위치)	엔터 (기본값으로 폴더 생성)
tmpl (어떤 템플릿으로 시작할지)	베이직 / 블로그용 / 빈 페이지 중 선택
deps (의존성 설치 여부)	Yes
git (git 저장소 초기화 여부)	Yes

▲ dir, tmpl, deps, git 순서로 나오는 설치 질문지 (처음엔 "A basic, helpful starter project" 선택)

나머지 질문은 전부 예스로 진행하면 개발에 필요한 소스까지 한 번에 다 설치돼요.

3. 베이직 → 블로그용 템플릿으로 재선택

처음엔 "베이직" 템플릿으로 진행했는데,

강사님이 보여주는 화면이랑 비슷하게도 안 나오는 거예요.

그래서 블로그용 템플릿으로 다시 설치했어요.

명령어	`npm create astro@latest my-blog -- --template blog`

이번엔 폴더 이름도 my-blog로 직접 지정해서,

블로그용 템플릿이 해당 폴더 안에 새로 설치되도록 했어요.

💡 Tip. 설치 후엔 생성된 폴더로 이동해서 개발 서버를 켜야 해요. cd ./my-blog로 이동한 다음 npm run dev로 시작하고, 종료하고 싶을 땐 Q + 엔터를 누르면 돼요.

4. 로컬 주소로 첫 화면 확인

npm run dev를 실행하면 로컬 주소가 생성돼요.

이 주소를 컨트롤 클릭하면 임의로 설정된 블로그 사이트가 바로 열립니다.

▲ 블로그 템플릿의 기본 홈 화면. 어떤 파일을 수정하면 되는지도 화면에 안내되어 있음

재미있는 건,

첫 화면에 각 요소를 수정하려면

어떤 파일을 건드려야 하는지가

직접 안내되어 있다는 거예요.

예를 들면 이런 식이에요.

홈 페이지 수정 → src/pages/index.astro
사이트 헤더 수정 → src/components/Header.astro
바닥글(푸터) 수정 → src/components/Footer.astro
블로그 게시물 확인 → src/content/blog/
블로그 게시물 레이아웃 수정 → src/layouts/BlogPost.astro

블로그 메뉴로 이동하면 기본으로 들어있는 예시 글들도 카드 형태로 보여요.

▲ 블로그 메뉴에서 보이는 기본 예시 글 목록 (Markdown Style Guide, Using MDX, Third post)

5. 글 파일 구조 파악하기

src/content/blog 폴더에 들어가면

블로그 글 리스트가 md 파일로 하나씩 저장되어 있어요.

(first-post.md, second-post.md 이런 식이에요.)

md 파일을 열어보면 화면 상단 --- 표시 안에 있는 내용이 있는데,

이게 프론트매터(front matter)라고 하는 필수 메타데이터예요.

글 제목, 글 설명, 발행일, 대표 이미지 경로 등을 여기에 작성해요.

▲ first-post.md 파일의 프론트매터(title, description, pubDate, heroImage) 부분

--- 아래부터가 본문 영역이고,

여기에 마크다운 문법으로 글을 작성하면 돼요.

제목은 #, ##, ### 개수로 크기를 조절하는 방식이에요.

💡 Tip. 이미지 경로가 heroImage: '../../assets/sample.png'처럼 상대경로로 되어 있으면 assets 폴더에 이미지를 저장해야 인식돼요. 반대로 절대경로로 쓰고 싶으면 public 폴더에 저장하고 파일명만 적어도 인식이 됩니다.

6. 블로그명 & 푸터 바꾸기

직접 하려면 은근히 복잡해서,

AI에게 요청해서 진행했어요.

블로그 타이틀 변경 → src/consts.ts

💡 Tip. 커서AI에게 수정을 요청할 때, 기존 파일을 고치는 대신 새 파일을 따로 만들어버리는 경우가 있어요. 이럴 땐 폴더를 마우스로 끌어다가 "새로 만든 파일"과 "기존에 수정해야 할 파일"을 같이 링크로 걸어주면 정확하게 인지해서 수정까지 완료해줘요. 그래도 안 되면 두 파일을 화면에 동시에 열어놓고 (오른쪽 상단 창 분할 아이콘 클릭) 직접 비교하면서 수정하면 돼요.

오늘의 정리

Astro는 npm create astro@latest 한 줄로 설치 시작, 질문지에 순서대로 답하면 됨
강사님 화면이랑 다르게 나오면 템플릿 종류(basic/blog 등)를 다시 확인하고 재선택하면 됨
첫 화면에 어떤 파일을 고치면 되는지 직접 안내되어 있어서 구조 파악이 수월함
글은 src/content/blog 폴더의 md 파일로 관리, 상단 프론트매터에 제목/설명/날짜/이미지 경로 작성
이미지 경로는 상대경로면 assets, 절대경로면 public 폴더 기준으로 인식됨
AI에게 파일 수정을 요청할 때 새 파일이 따로 생기면, 폴더를 끌어다 링크 걸어서 명확히 알려주면 해결됨

다음 편에서는 astro.build/themes에서

마음에 드는 테마를 골라 git clone으로 가져오고,

설치 중 만난 의존성 충돌 오류까지 해결하는 과정을 정리해볼게요! 🙌

2026년 8월 24일 월요일

Astro 블로그 만들기 ① 설치부터 기본 구조 알아보기