Jekyll 블로그에 이미지 쉽게 넣는 방법: 마크다운부터 HTML, Liquid 필터까지!
블로그 글을 작성할 때, 적절한 이미지 사용은 독자의 이해를 돕고 콘텐츠를 더욱 풍부하게 만들어줍니다. 정적 사이트 생성기인 Jekyll에서도 이미지를 손쉽게 삽입할 수 있는 다양한 방법을 제공합니다. 오늘은 Jekyll에서 이미지를 넣는 주요 방법들과 각 상황에 맞는 최적의 선택은 무엇인지 자세히 알아보겠습니다.
1. 가장 간편한 방법: 마크다운(Markdown) 구문 활용
Jekyll에서 가장 기본적이고 널리 사용되는 이미지 삽입 방식은 마크다운 구문을 이용하는 것입니다. 매우 직관적이고 간단합니다.
기본 구문:
대체 텍스트 (Alt Text): 이미지가 어떤 이유로든 화면에 표시되지 않을 때 나타나는 설명 문구입니다. 웹 접근성 및 검색 엔진 최적화(SEO) 측면에서도 중요한 역할을 합니다.이미지 경로: 삽입하려는 이미지 파일의 위치를 지정합니다. 웹사이트의 루트 디렉토리부터 시작하는 절대 경로 (/assets/images/my-image.jpg)나 현재 마크다운 파일의 위치를 기준으로 하는 상대 경로 (./my-image.jpg)를 사용할 수 있습니다.
예시:
만약 Jekyll 프로젝트 내의 assets/images 폴더에 landscape.jpg라는 이미지가 있다면, 다음과 같이 작성합니다.
장점: 매우 간단하고 빠르게 이미지를 추가할 수 있습니다.
단점: 이미지 크기 조절, 정렬 등 세부적인 스타일 제어가 어렵습니다.
2. 세밀한 제어가 필요할 때: HTML <img> 태그 사용
이미지의 크기, 정렬, 테두리 등 더 많은 제어가 필요하다면 HTML의 <img> 태그를 직접 사용할 수 있습니다. 마크다운 파일 내에서도 HTML 태그는 대부분 그대로 작동합니다.
기본 구문:
<img src="이미지 경로" alt="대체 텍스트">
예시 (크기 조절 및 스타일 적용):
<img src="/assets/images/landscape.jpg" alt="아름다운 풍경" style="width: 700px; border: 1px solid #ccc; display: block; margin: 0 auto;">
위 예시는 이미지 너비를 700px로 설정하고, 회색 테두리를 추가하며, 이미지를 가운데 정렬하는 스타일을 적용한 것입니다. class 속성을 부여하여 CSS 파일에서 스타일을 관리할 수도 있습니다.
장점: 이미지 크기, 스타일 등 다양한 속성을 자유롭게 제어할 수 있습니다.
단점: 마크다운 구문보다 코드가 길어지고 복잡해질 수 있습니다.
Jekyll 방식의 정석: Liquid 필터 (relative_url, absolute_url) 활용 (권장)
Jekyll 프로젝트를 운영하다 보면 _config.yml 파일에 baseurl을 설정하는 경우가 있습니다. 이는 블로그가 특정 하위 경로(예: username.github.io/blog)에서 서비스될 때 필요합니다. 이때 이미지 경로가 깨지지 않도록 Jekyll에서 제공하는 Liquid 필터인 relative_url 또는 absolute_url을 사용하는 것이 좋습니다.
relative_url:baseurl을 포함한 상대적인 경로를 생성합니다. 대부분의 경우 이 필터로 충분합니다.absolute_url:url(도메인)과baseurl을 포함한 전체 URL을 생성합니다. 외부 공유나 RSS 피드 등에 유용합니다.
relative_url 사용 예시 (마크다운 내):
![가이드 이미지]({{ "/assets/images/guide.png" | relative_url }})
relative_url 사용 예시 (HTML 태그 내):
<img src="{{ "/assets/images/guide.png" | relative_url }}" alt="가이드 이미지">
absolute_url 사용 예시 (HTML 태그 내):
<img src="{{ "/assets/images/guide.png" | absolute_url }}" alt="가이드 이미지 (전체 경로)">
이 필터들을 사용하면 baseurl 설정이 변경되어도 이미지 경로를 일일이 수정할 필요 없이 Jekyll이 자동으로 올바른 경로를 생성해주므로 유지보수성이 크게 향상됩니다.
장점: baseurl 설정과 관계없이 항상 올바른 이미지 경로를 보장하여 사이트의 이식성과 유지보수성을 높입니다.
단점: Liquid 문법에 익숙하지 않다면 초반에 약간 어색할 수 있습니다.
어떤 방법을 선택해야 할까요?
- 단순히 이미지만 빠르게 넣고 싶다면: 마크다운 구문
- 이미지 크기, 정렬 등 세부 스타일 조정이 필요하다면: HTML
<img>태그 - Jekyll
baseurl설정을 사용 중이거나, 장기적으로 유지보수가 용이한 코드를 원한다면:relative_url(또는absolute_url) Liquid 필터 사용 (강력 추천!)
팁: 이미지 파일 관리
일반적으로 Jekyll 프로젝트 루트 디렉토리에 assets 폴더를 만들고, 그 안에 images (또는 img) 폴더를 만들어 이미지 파일들을 한 곳에 모아 관리하는 것이 좋습니다. 이렇게 하면 경로 설정이 일관되고 프로젝트 구조가 깔끔해집니다.
예: my-jekyll-blog/assets/images/mypicture.jpg
마무리하며
Jekyll에서 이미지를 삽입하는 것은 어렵지 않습니다. 각 방법의 특징을 이해하고 자신의 상황과 필요에 맞는 방식을 선택하여 활용한다면 더욱 매력적이고 가독성 높은 블로그 포스트를 만들 수 있을 것입니다. 지금 바로 여러분의 Jekyll 블로그에 멋진 이미지를 추가해보세요!