Astro 이미지 관리, public과 src/assets는 언제 나눠야 할까

Astro 블로그에 이미지를 넣기 시작하면 금방 헷갈린다.

public에 넣어야 하나?
src/assets에 넣어야 하나?
markdown에서는 어떤 경로를 써야 하나?
빌드가 느려지는 건 아닌가?

처음에는 아무 데나 넣어도 되는 것처럼 보인다.
하지만 글이 늘고 이미지가 많아지면 기준이 필요하다.

Astro 이미지 public assets 전략 삽화

public은 그대로 복사되는 공간이다

public 폴더의 파일은 빌드할 때 거의 그대로 배포 결과물로 복사된다.

예를 들어:

public/images/illustrations/astro-image-assets.webp

이 파일은 사이트에서 이렇게 접근할 수 있다.

![설명](/images/illustrations/astro-image-assets.webp)

경로가 단순하고 예측 가능하다.

블로그 본문에서 직접 참조할 이미지라면 public이 편하다.

src/assets에 둔 이미지는 Astro나 번들러의 처리 대상이 된다.

컴포넌트에서 import해서 쓰거나,
이미지 최적화 파이프라인을 활용할 때 적합하다.

---
import hero from "@/assets/hero.png";
---

<Image src={hero} alt="hero" />

장점은 빌드 도구가 파일을 더 적극적으로 관리할 수 있다는 점이다.

하지만 markdown 글에서 매번 간단히 쓰기에는 public보다 번거로울 수 있다.

글마다 들어가는 삽화는 보통 이런 특징이 있다.

이 경우는 public/images/illustrations 같은 폴더가 관리하기 쉽다.

public/images/illustrations/
  astro-pagefind-search.webp
  astro-category-roadmap.webp
  doip-roadmap.webp
  lwip-roadmap.webp

파일명도 글 slug와 맞춰두면 나중에 찾기 쉽다.

OG 이미지는 조금 다르다.

글마다 자동 생성되는 OG 이미지는 빌드 산출물에 가깝다.
반면 직접 만든 대표 이미지는 콘텐츠 자산에 가깝다.

그래서 나눠 생각하는 편이 좋다.

직접 만든 삽화:
public/images/illustrations

자동 생성 OG:
캐시 폴더 또는 빌드 중 생성

자동 생성 이미지를 매번 Git에 넣으면 저장소가 무거워질 수 있다.
반대로 직접 만든 대표 삽화는 소스와 함께 관리하는 편이 낫다.

블로그 삽화는 대개 사진처럼 아주 높은 품질이 필요하지 않다.

그래서 PNG 원본을 그대로 넣기보다 WebP로 줄이는 편이 좋다.

예를 들어:

원본 PNG: 3MB
WebP: 150KB ~ 250KB

글이 10개만 늘어도 차이가 꽤 커진다.

특히 GitHub Pages처럼 정적 파일을 그대로 내려주는 구조에서는 이미지 용량이 곧 체감 속도로 이어진다.

이미지 파일명도 운영 데이터다.

나중에 파일이 많아지면 이런 이름은 찾기 어렵다.

image1.webp
hero-final-final.webp
blog-main.webp

대신 글 slug에 맞추면 관리가 쉽다.

astro-pagefind-search.webp
astro-image-public-assets-strategy.webp
astro-github-actions-cache.webp

이미지와 글의 관계가 바로 보인다.

public 아래 파일은 사이트 루트 기준 경로로 쓰면 된다.

![Astro 이미지 관리 삽화](/images/illustrations/astro-image-assets.webp)

이 방식은 글 파일이 어느 폴더에 있든 동일하게 동작한다.

상대 경로를 쓰면 파일 위치를 옮길 때 깨질 수 있다.

Astro 이미지 관리는 파일을 어디에 두느냐보다 역할을 나누는 게 먼저다.

Astro 블로그 삽화처럼 본문에서 직접 참조하는 이미지는 public에 두고, 컴포넌트 최적화 대상은 src/assets로 나누는 편이 관리하기 쉽다.