Chirpy 포스트에 이미지 넣는 초보자 방법
Chirpy 블로그 글에 이미지를 넣는 가장 쉬운 방법을 초보자 기준으로 정리했습니다.
블로그 글을 쓰다 보면 텍스트만 있는 것보다
이미지가 함께 들어가야 훨씬 보기 좋습니다.
특히 사용 방법을 설명하는 글이나 화면 캡처가 필요한 글은
이미지를 어떻게 넣느냐에 따라 글의 완성도가 많이 달라집니다.
오늘은 Chirpy 블로그 포스트에 이미지를 넣는 가장 쉬운 방법을
초보자 기준으로 하나씩 정리해보겠습니다. 우린 언제나 초보자였던 적이 있었조!!
먼저 가장 쉬운 방법부터
초보자라면 가장 헷갈리지 않는 방법은 이것입니다.
- 글 파일은
_posts폴더에 넣기 - 이미지 파일은
assets/img/posts/...폴더에 넣기 - 글 본문에서는
/assets/img/...경로로 불러오기
이 구조로 해두면 글과 이미지가 섞이지 않아서 관리하기 훨씬 편합니다.
예를 들면 이런 식입니다.
1
2
_posts/2026-04-06-chirpy-post-image-beginner.md
assets/img/posts/chirpy-image-guide/example.jpg
1. 이미지 파일은 어디에 넣을까?
초보자에게 가장 추천하는 위치는 아래와 같습니다.
1
assets/img/posts/글이름폴더/이미지파일명.jpg
예를 들어 이 글에서 사용할 이미지를 넣는다면 이렇게 만들 수 있습니다.
1
assets/img/posts/chirpy-image-guide/chirpy-post-image-01.jpg
폴더 이름과 파일 이름은 가능하면
영문 소문자 + 하이픈(-) 조합으로 만드는 것이 안전합니다.
예를 들면 좋습니다.
chirpy-image-guidepost-image-01.jpg
반대로 아래처럼 한글, 공백, 특수문자가 많으면 나중에 경로 오류가 날 수 있습니다.
새 폴더내 이미지 1.jpg블로그(최종).png
2. 글 본문에 이미지를 넣는 방법
이미지를 넣는 가장 기본적인 방법은 Markdown 문법을 쓰는 것입니다.
형식은 아주 간단합니다.
1
여기서 중요한 것은
경로 앞에 / 가 들어간다는 점입니다.
즉,
- 맞는 예:
/assets/img/posts/... - 틀릴 수 있는 예:
assets/img/posts/...
앞의 / 를 빼먹으면 현재 글 주소 기준으로 상대경로가 잡혀서
이미지가 안 뜨는 경우가 생길 수 있습니다.
3. 이미지 크기 지정하기
이미지를 그냥 넣어도 되지만,
크기를 함께 지정하면 화면이 더 안정적으로 보일 수 있습니다.
Chirpy에서는 이미지 뒤에 속성을 붙이는 방식도 사용할 수 있습니다.
예시는 아래와 같습니다.
1
{: width="800" height="450" }
이렇게 하면 이미지 크기를 어느 정도 정리해서 보여줄 수 있습니다.
특히 화면 캡처 이미지처럼 가로세로 비율이 정해져 있을 때 유용합니다.
4. 이미지 캡션 넣기
이미지 아래에 설명 문구를 넣고 싶다면
이미지 바로 아래 줄에 기울임꼴 문장을 쓰면 됩니다.
예시는 아래와 같습니다.
1
2
3
{: width="800" height="450" }
_애드센스 설정 화면 예시_
이렇게 하면 이미지 아래에 간단한 설명이 붙어서
독자가 어떤 화면인지 더 쉽게 이해할 수 있습니다.
설명용 포스트를 쓸 때 특히 유용한 방법입니다.
5. 글 맨 위 대표 이미지 넣기
Chirpy에서는 본문 이미지 말고도
글 상단에 보일 대표 이미지를 front matter에서 설정할 수 있습니다.
파일 맨 위 front matter에 아래처럼 넣으면 됩니다.
1
2
3
image:
path: /assets/img/posts/chirpy-image-guide/cover.jpg
alt: Chirpy 포스트 대표 이미지
Chirpy 문서에서는 대표 이미지용으로
가로 1200, 세로 630 비율 이미지를 사용하는 것을 안내합니다.
즉, 썸네일이나 공유 이미지로 쓸 사진은
가급적 너무 정사각형보다는 가로형으로 준비하는 것이 좋습니다.
6. 초보자가 자주 틀리는 부분
이미지를 넣을 때 자주 실수하는 부분도 같이 알아두면 좋습니다.
_posts 폴더 안에 이미지를 같이 넣는 경우
가능은 해도 초보자에게는 관리가 복잡해질 수 있습니다.
그래서 글은 _posts, 이미지는 assets/img 로 나누는 쪽이 더 편합니다.
경로 앞 / 를 빼먹는 경우
아주 흔한 실수입니다.
1
이렇게 쓰면 안 뜰 수 있습니다.
조금 더 안전하게 하려면 아래처럼 쓰는 것이 좋습니다.
1
파일명이 너무 복잡한 경우
한글, 띄어쓰기, 괄호가 많으면 경로를 잘못 적기 쉽습니다.
가능하면 아래처럼 단순하게 정리하세요.
1
chirpy-post-image-01.jpg
7. 바로 복붙해서 쓰는 예시
아래 예시는 포스트 본문에 그대로 붙여 넣어도 됩니다.
1
2
3
4
5
6
7
## 이미지 넣기 예시
Chirpy 포스트에서는 아래처럼 이미지를 쉽게 넣을 수 있습니다.
{: width="900" height="500" }
_이미지는 assets/img 아래에 넣고 절대경로로 불러오면 가장 편합니다._
초보자라면 우선 이 방식만 익혀도
대부분의 포스트 이미지는 무리 없이 넣을 수 있습니다.
마무리
정리하면 Chirpy 포스트에 이미지를 넣는 가장 쉬운 방법은 아래 3가지입니다.
- 이미지는
assets/img/posts/...에 저장하기 - 본문에서는
/assets/img/...경로로 불러오기 - 필요하면 크기와 캡션도 함께 넣기
처음에는 폴더 위치와 경로가 헷갈릴 수 있지만,
한두 번만 해보면 금방 익숙해집니다.
특히 블로그 글을 자주 올릴 예정이라면
처음부터 이미지 폴더 구조를 깔끔하게 정리해 두는 것이 나중에 정말 편합니다.