Github 블로그와 같은 static 블로그를 운영할 때, 불편한 점 중 한 가지는 이미지를 삽입하는 과정이 번거롭다는 것이다.

먼저, 마크다운에서 이미지를 가져오는 문법에 대해서 알아보자.

![image_name](URL or Path)

이미지의 URL 또는 이미지 파일이 저장되어있는 Path 둘 다 사용할 수 있다. 그러다보니, 보여주고 싶은 이미지를 설정하는 방법 또한 두 가지이다.

외부 저장소에 올려서 URL 가져오기

삽입할 이미지를 외부 저장소에 올린 후, 생성된 URL을 사용하는 것이다.

여기서 외부 저장소는 대부분 Github를 사용한다. 특히, 현재 블로그는 Github 리포지토리를 활용하고 있어서 같은 곳에 저장을 하고 있으면 관리하기가 좋다. 무엇보다 무료로 사용할 수 있다는 큰 장점도 있다.

대부분 사용하는 방법은 Issue 탭에 글을 하나 만들어서, 이미지를 붙여넣기하면 이를 저장한 URL을 보여준다. 그 URL을 그대로 마크다운 문법에서 사용하면 된다.

하지만 이 방법은 이미지를 업로드해야하는 번거로운 과정이 필요하다. 그래더 다음 방법을 쓰는 것으로 변경하였다.

프로젝트 내부에 저장해서 Path 가져오기

프로젝트 내부에 이미지 파일을 관리하는 것이다. 이 방법이 관리하기도 더욱 좋고, 이미지를 가져오는 방법도 훨씬 간결하다. 하지만 내부 Path를 가져오기 위해서 설정을 해주거나 맞춰줘야하는 규칙이 있다보니 초기 설정이 번거로울 수 있다.

이 블로그에서 사용하는 규칙은 다음 한 가지이다.

게시글 파일 이름은 index.md 로 반드시 설정해야 한다.

위 규칙만 지켜주면, 마크다운 문법에서 Path 설정만 이미지 파일이 있는 곳으로 잘해주면 된다.

게시글 파일 이름을 index.md 로 통일하다보니, 실제 게시글 이름은 디렉토리에 명시한다. 그리고 이미지 파일 역시 이 게시글 디렉토리 내부에 정의해서 사용하면 관리하기가 좋다.

현재 사용하고 있는 디렉토리 구조는 다음과 같다. (2024-04 기준)

content
    ㄴ post
        ㄴ {게시글 이름 디렉토리}
            ㄴ index.md
            ㄴ images
                ㄴ image1.png
                ㄴ image2.png

이미지 크기 및 정렬

마크다운에서 이미지 크기 및 정렬을 조정하기 위해서는 위에서 보여준 문법으로는 불가능하다. 하지만, 마크다운은 HTML 문법을 지원하므로 img 태그를 활용할 수 있다.

<!-- 이미지 크기 조정 -->
<img src="URL or Path" width="500" height="300">

<!-- 위 width, height 어트리뷰트가 지원하지 않는 경우 -->
<img src="URL or Path" style="width: 350px; height: 500px;">

<!-- 이미지 중앙 정렬 -->
<div style="text-align: center;">
  <img src="URL or Path" style="width: 350px; height: 500px;">
</div>

<!-- 사용 예시 -->
<div style="text-align: center;">
  <img src="images/book_cover.png" style="width: 350px; height: 500px;">
</div>

(위는 hugo 블로그에서 동작하지 않는데, 확인해보고 추가 작성 예정)