마크다운 이미지 코드 완벽 해부: 느낌표 하나가 만드는 마법

블로그 글에 사진을 넣을 때 무심코 복사해서 쓰는 코드 한 줄, 과연 그 안에 어떤 약속들이 숨어 있을까요? 오늘은 마크다운 이미지 코드의 구조를 하나씩 해부하며, 왜 이 형식을 지켜야 하는지 그 원리를 알아보겠습니다.

우리가 사용하는 이미지 코드는 크게 세 부분으로 나뉩니다.

---

🔍 마크다운 이미지 코드 분석

![이미지 설명-첫발자국](/assets/img/posts/chirpy-image-path-guide/cover.jpg)

1. ! (느낌표): “이건 사진이야!”

• 의미: 브라우저에게 “지금부터 나오는 것은 일반 글자가 아니라 ‘이미지’다!”라고 선언하는 기호입니다.
• 주의: 이 느낌표를 빼먹으면 사진 대신 링크 주소 글자만 화면에 덩그러니 남게 되니 꼭 확인하세요.-

{: width=”500” }

2. [이미지 설명] (대괄호와 대체 텍스트)

• 의미: 기술 용어로 Alt Text(대체 텍스트)라고 부릅니다.
• 역할:
  • 장애 극복: 인터넷이 느려 사진이 안 뜰 때 대신 보여주는 글자입니다.
  • 접근성: 시각 장애인이 화면 낭독기를 쓸 때 이 글자를 읽어줍니다.
  • SEO: 구글 검색 엔진이 사진의 내용을 파악하는 중요한 단서가 됩니다.
• 팁: “애드센스 설정 화면”, “가이드 커버”처럼 사진 내용을 짧고 명확하게 적어주세요.

3. (/assets/img/posts/.../cover.jpg) (소괄호와 이미지 경로)

• 의미: 사진 파일이 실제로 저장된 ‘진짜 주소’입니다.
• 역할: 느낌표(!)가 선언한 이미지를 실제로 어디서 가져와야 할지 알려주는 구체적인 정보입니다.
• 핵심: 앞서 배운 대로 /assets로 시작하는 절대 경로를 넣어주면 블로그 어느 페이지에서든 사진을 정확히 찾아옵니다.

---

💡 한 줄 요약

이 문장은 브라우저에게 다음과 같이 명령을 내리는 셈입니다.

“지금부터 사진(!) 하나 보여줄 건데, 만약 안 나오면 ‘이미지 설명’([...])이라고 써줘. 그리고 실제 사진 파일은 저기 주소((...))에 가서 가져와!”

---

🐜 실전 적용 팁: 이미지 크기 조절

Chirpy 테마를 사용하신다면, 이미지 코드 바로 뒤에 속성을 붙여 크기까지 조절할 수 있습니다.

```markdown 이제 코드 한 줄이 어떻게 구성되어 있는지 완벽하게 파악하셨습니다. 원리를 알면 실수가 줄어들고, 더 멋진 블로그를 만들 수 있습니다. 지금 바로 여러분의 포스팅에 자신 있게 사진을 넣어보세요! 🚀

---

💡 적용 가이드

1. 파일명: 2026-04-07-markdown-image-syntax-guide.md로 설정하여 _posts 폴더에 올리세요.
2. 경로 확인: 본문에 예시로 든 /assets/posts/chirpy-image-path-guide/cover.jpg 경로가 실제 본인의 저장소 구조와 맞는지 확인해 보세요. (만약 img 폴더를 새로 만드셨다면 경로 중간에 img/를 추가해야 합니다.)

이제 이미지 문법에 대한 완벽한 가이드가 블로그에 게시될 준비가 되었습니다! 🐜✨