워드프레스 미디어 라이브러리가 깃허브에 호스팅된 이미지를 직접 인식하고 관리하도록 연동하는 방법을 소개합니다. External Media와 같은 플러그인을 사용하여 깃허브 이미지 URL을 미디어 라이브러리에 ‘등록’할 것입니다. 이 방식을 사용하면, 파일 자체는 깃허브에 저장하여 서버 트래픽과 용량을 절약하면서도, 워드프레스의 통합된 미디어 관리 인터페이스의 편리함은 그대로 누릴 수 있습니다.
이 가이드를 완료하면, 당신의 워드프레스 사이트는 최적화된 외부 이미지 호스팅의 이점과 워드프레스 고유의 콘텐츠 관리 편의성을 모두 갖춘 전문가 수준의 시스템을 갖추게 될 것입니다.
사전 준비 사항
본 가이드를 시작하기 전, 아래 항목들이 반드시 완료되어 있어야 합니다.
- 깃허브 이미지 호스팅 설정 완료: 이전 가이드를 통해 다음을 완료해야 합니다.
- 이미지 저장을 위한 공개(Public) 깃허브 저장소 생성
- 깃허브 페이지(GitHub Pages) 활성화
- 이미지 파일 업로드 및 https://[사용자명].github.io/[저장소명]/… 형식의 공개 URL 확보
- 워드프레스 관리자 권한: 플러그인을 설치하고 미디어 라이브러리를 관리할 수 있는 관리자 계정이 필요합니다.
1단계: ‘External Media’ 플러그인 설치 및 활성화
목표: 깃허브와 같은 외부 URL의 미디어를 워드프레스 미디어 라이브러리에 등록할 수 있게 해주는 핵심 플러그인을 설치합니다.
이유: 워드프레스는 기본적으로 서버의 wp-content/uploads 폴더에 파일을 업로드해야만 미디어 라이브러리에서 인식합니다. External Media 플러그인은 이 제약을 우회하여, 파일의 실체는 외부에 둔 채 ‘바로가기’ 또는 ‘참조’와 같은 형태로 미디어 라이브러리에 항목을 추가할 수 있게 해주는 교량 역할을 합니다.
- 워드프레스 관리자 대시보드에서 플러그인 > 새로 추가 메뉴로 이동합니다.
- 오른쪽 상단의 검색창에 External Media를 입력하여 검색합니다.
- External Media 플러그인을 찾아 지금 설치(Install Now) 버튼을 클릭합니다.
- 설치가 완료되면, 활성화(Activate) 버튼을 클릭합니다.
검증: 플러그인 > 설치된 플러그인 목록에 External Media가 활성화된 상태로 표시되면 성공입니다. 이 플러그인은 별도의 설정 페이지 없이, 미디어 추가 기능만 확장합니다.
2단계: 깃허브 이미지를 미디어 라이브러리에 등록
목표: 깃허브 페이지를 통해 확보한 이미지의 공개 URL을 사용하여, 해당 이미지를 워드프레스 미디어 라이브러리에 ‘항목’으로 추가합니다.
이유: 이 과정을 통해 실제 이미지 파일은 서버에 저장하지 않으면서도, 워드프레스는 이 이미지를 라이브러리의 일부로 인식하게 됩니다. 이는 게시물 작성 시 ‘미디어 추가’ 기능을 통해 손쉽게 이미지를 불러오고 관리할 수 있게 합니다.
- 워드프레스 관리자 대시보드에서 미디어 > 새로 추가 메뉴로 이동합니다.
- 파일 업로드 영역 아래에 Import from URL이라는 새로운 탭이 생긴 것을 확인할 수 있습니다. 이 탭을 클릭합니다.
- 미리 준비해 둔 깃허브 페이지 이미지 URL을 입력창에 한 줄에 하나씩 붙여넣습니다.
- URL 예시: https://[YOUR_GITHUB_USERNAME].github.io/[YOUR_REPOSITORY_NAME]/images/sample-image.jpg
- Import 버튼을 클릭합니다. 플러그인이 해당 URL을 분석하여 미디어 라이브러리에 등록 작업을 수행합니다.
검증:
작업이 완료된 후, 미디어 > 라이브러리 메뉴로 이동합니다. 방금 URL로 추가한 깃허브 이미지가 다른 이미지들처럼 썸네일 형태로 표시되는 것을 확인할 수 있습니다. 이것이 핵심적인 성공 지표입니다.
3단계: 등록된 외부 이미지 정보 확인 및 사용
목표: 미디어 라이브러리에 등록된 이미지가 실제로 깃허브 URL을 참조하고 있는지 확인하고, 일반 이미지처럼 게시물에 삽입합니다.
이유: 이 최종 검증 단계는 우리 시스템이 의도한 대로 (1)서버 공간을 차지하지 않고, (2)외부 URL을 통해 이미지를 불러오며, (3)워드프레스 편집기 내에서 완벽하게 작동하는지 확인하기 위함입니다.
- 미디어 라이브러리에서 방금 추가한 이미지를 클릭하여 첨부 파일 상세 정보 창을 엽니다.
- 오른쪽의 상세 정보란을 확인합니다.
- 파일 URL (File URL): 이 값이 워드프레스 서버의 주소(…/wp-content/uploads/…)가 아닌, 우리가 입력한 깃허브 페이지 URL(https://…github.io/…)로 되어 있는지 반드시 확인해야 합니다.
- 주의 문구: “This is a external media file. Changes to the metadata are not possible.” 와 같은 안내 문구가 표시되어, 이 파일이 외부 파일임을 명시해 줍니다.
- 이제 새 글을 작성하거나 기존 글을 편집하는 페이지로 이동합니다.
- 블록 편집기에서 이미지(Image) 블록을 추가하고, 미디어 라이브러리 버튼을 클릭합니다.
- 미디어 라이브러리 창에서 깃허브에서 가져온 이미지를 선택하고 선택(Select) 버튼을 누릅니다.
검증:
게시물을 발행한 후, 실제 페이지에서 이미지가 정상적으로 보이는지 확인합니다. 브라우저에서 이미지 위에서 마우스 오른쪽 버튼을 클릭하고 이미지 주소 복사를 선택했을 때, 복사된 주소가 깃허브 URL이면 모든 과정이 완벽하게 성공한 것입니다. 이로써 워드프레스는 깃허브를 미디어 저장소로 사용하는 시스템이 구축되었습니다.
결론 및 심화 학습
이 가이드를 통해 우리는 External Media 플러그인을 활용하여 깃허브 저장소를 워드프레스 미디어 라이브러리의 실질적인 백엔드 스토리지로 연동하는 데 성공했습니다. 이 구조는 단순 URL 삽입 방식을 넘어, 워드프레스의 강력한 미디어 관리 기능을 유지하면서도 외부 호스팅의 모든 이점을 누릴 수 있는 고도화된 솔루션입니다.
기술적 장점:
- 완벽한 트래픽 오프로드: 이미지 관련 트래픽이 더 이상 워드프레스 호스팅 서버를 경유하지 않아 비용을 획기적으로 절감합니다.
- 서버 저장 공간 0% 사용: 이미지 파일이 서버에 저장되지 않아 호스팅 용량 부담이 사라집니다.
- 통합된 관리 경험: 모든 이미지를 워드프레스 미디어 라이브러리에서 중앙 관리하고 검색할 수 있습니다.
- 콘텐츠 제작 효율성: 게시물 작성 시, URL을 찾을 필요 없이 미디어 라이브러리에서 바로 이미지를 선택하여 사용할 수 있습니다.
고려사항 및 한계:
- 수동 등록 절차: 이미지를 깃허브에 푸시(push)한 후, 미디어 라이브러리에 URL을 수동으로 등록하는 과정은 여전히 필요합니다.
- 플러그인 의존성: 이 시스템은 External Media 플러그인이 활성화되어 있어야 정상 작동합니다. 플러그인 비활성화 시 외부 이미지 링크가 깨질 수 있습니다.
- 깃허브 페이지 제약: 깃허브 페이지는 전문적인 미디어 호스팅 서비스가 아니므로, 월간 트래픽이 수백만 건에 달하는 초대형 사이트에는 적합하지 않을 수 있습니다. 사용량 제한 정책을 숙지할 필요가 있습니다.
이 시스템을 기반으로, 향후에는 깃허브 액션(GitHub Actions)을 활용하여 특정 폴더에 이미지를 푸시하면 자동으로 워드프레스의 미디어 라이브러리에 등록해주는 스크립트를 개발하여 전체 프로세스를 자동화하는 방안도 고려해볼 수 있습니다.