[TIP] Github 에서 Readme 문서 작성 시 테마 설정에 따라 Markdown 이미지 변경하기.

라이트 모드 (Light Mode) 와 다크 모드 (Dark Mode) 는 웹과 앱 (응용 프로그램) 에서 중요한 사용자 경험 요소입니다. 라이트 모드는 밝은 배경과 어두운 문자를 조합해 전통적으로 많이 사용되어 왔습니다. 반면, 다크 모드는 어두운 배경과 밝은 문자를 사용하여 눈의 피로를 줄여줍니다. 특히 저조도 환경에서 화면을 보는 사용자의 시각적 피로를 줄여줍니다. OLED 화면에서는 각각의 픽셀이 개별적으로 빛을 발하므로 어두운 픽셀은 전혀 발광하지 않으므로 배터리 소모량을 줄일 수 있다는 장점도 존재합니다.

이와 더불어, OLED 화면이 널리 보급되면서 다크 모드 (Dark Mode) 를 지원하는 운영체제와 웹 사이트가 증가하고 있는 추세로, 다크 모드 (Dark Mode) 는 사용자의 눈의 피로를 줄이고 소모되는 전력을 절약할 수 있는 장점 덕분에 많은 분들이 선호하고 있습니다.

이러한 흐름 속에서 GitHub 는 2020 년 즈음부터 라이트 모드 (Light Mode) 와 다크 모드 (Dark Mode) 를 지원하기 시작했습니다. 사용자가 다크모드로 설정된 ReadMe 문서를 읽을 때 갑작스럽게 하얀색 배경의 이미지가 표시되면 이질적인 사용자 경험을 초래할 수 있습니다. 이를 해결하기 위해 두 가지의 다른 이미지를 GitHub 에 업로드하고 사용자의 설정에 따라 동적으로 이미지를 불러오는 방법의 접근법이 필요합니다.

초기에는 Markdown 문법을 사용하여 다크 모드 (Dark Mode) / 라이트 모드 (Light Mode) 설정에 따라 다른 이미지를 불러오는 방식으로 구현되었으나, 해당 방식은 사용자가 테마를 변경할 때마다 모든 이미지를 수동으로 업데이트 해야 하기에 비효율적인 관계로, 사용은 가능하지만 현재 지원이 중단된 (Deprecated) 상태입니다.

아래의 코드로 Markdown 을 사용하여 이미지를 불러올 수 있었습니다 :

![Light Mode](path/to/lightmode-image.png#gh-light-mode-only)
![Dark Mode](path/to/darkmode-image.png#gh-dark-mode-only)

현재 GitHub에서 권장하는 방법은 HTML 태그를 이용하여 이미지를 로딩하는 것입니다. HTML 방식은 더 유연하고, 사용자가 테마를 변경할 때 자동으로 적합한 이미지를 로딩할 수 있는 장점이 존재하며,

다음과 같이 이미지를 로딩할 수 있습니다 :

<picture>
  <source srcset="darkmode-image.png" media="(prefers-color-scheme: dark)">
  <img src="lightmode-image.png" alt="Description of the image">
</picture>

위의 코드를 사용하면 다크 모드 (Dark Mode) 와 라이트 모드 (Light Mode) 에 적합한 이미지를 동적으로 로딩할 수 있습니다.

다크 모드 (Dark Mode) 를 지원하는 웹 사이트는 계속해서 증가하고 있는 추세이며, 다크 모드 (Dark Mode) 의 장점과 OLED 화면의 특성과 결합되면 더욱 효과적인 사용자 경험을 제공합니다. GitHub 에서도 이러한 트렌드를 반영하여 라이트 모드 (Light Mode) 와 다크 모드 (Dark Mode) 를 지원하고 있으며, 보다 나은 사용자 경험을 제공하기 위해 이미지를 동적으로 로딩하는 방법을 적용하고 있습니다. HTML 태그와 Markdown 을 이용한 이미지 변환 방법을 활용하면 ReadMe 문서에서도 일관된 사용자 경험을 제공할 수 있습니다.

고맙습니다.