GitHub - Image 올리기
GitHub를 사용해서 코드를 관리하다 보면, 가끔 사진(Image) 파일을 올려야할 때가 종종 있다. 예를 들면, 프로젝트의 설명을 작성하는 README.md 파일에 이해를 돕기 위해 프로그램 일부를 캡쳐해서 포함시키거나, 문제를 제기하는 Issue나 문제를 해결했다는 Pull Request를 작성할 때에도 다른사람들이 빠르게 이해할 수 있도록 글 이외에 그림을 넣는 경우들이 있다. 하지만, GitHub는 코드를 관리하기 위한 목적으로 이용되기 때문에, 코드 이외에 사진 파일이나 압축 파일 등의 다른 파일들에 대한 지원을 쉽게 하고 있지 않다. 아래 몇가지 방법으로 Github에서 이미지와 함께 글을 작성하는 방법을 소개한다.
Issue 글을 작성할 때와 Pull Request(PR) 글을 작성할 때 Image 올리기
Issue 글과 PR 글을 작성할 때 Image를 업로드하는 방법은 동일하다. 아래 설명은 Issue 글을 올리는 상황에 대한 설명을 하고 있으나, PR 글을 작성할 때도 동일한 방법으로 글과 Image를 함께 작성하면 된다.
우선, Issue 글 작성하기를 눌렀다면, 아래처럼 글을 쓰는 공간에 이미지를 복사(Ctrl+C) & 붙이기(Ctrl+V)를 하거나 이미지 파일을 드래그(Drag) & 드롭(Drop)을 하면 된다. 붙이기를 하면 아래 캡처한 화면처럼 사진이 바로 삽입되는 것이 아니라, "![Uploading <업로드할 image>]()" 라는 문자열이 잠깐 동안 삽입이 되는 것을 확인할 수 있다. 이 문자열과 동시에 하단에 "Uploading your files..." 라는 표시가 나온다. 업로드 하는 사진의 용량에 따라 시간이 다르게 나오는데, 이 때, 알아두어야할 점은, png 이미지로 변환해서 올려진다는 것이다. 만약에 올리려는 사진의 확장자가 png 가 아닌 jpg, jpeg 등의 다른 확장자라면 png로 올라갈 것이다. 아마도 Github 에서 Issue와 PR에 올리는 사진은 참고용으로만 작성하는 것이기 때문이라고 가정하고 원본 파일을 올리지 않는 것 같다.
약 1~5초 정도가 지나면 화면 문구가 "" 형태로 변환될 것이다. 이때, <업로드된 url>은 실제로 주소창에서 호출하면 해당 이미지가 뜨기 때문에 Github는 특정 공간에 저장시키는 것을 알 수 있다. 주소가 내 Git Repository 주소가 아니기 때문에 아마도 시간이 어느정도 지난후 Image를 포함하는 Issue나 PR이 필요없어질 때 쯤? 아니면 Git Repository가 삭제되면? 등의 특정 시간에 제거되지 않을까 생각된다. 하지만, 일반적으로 Issue나 PR은 오랜시간 동안 유지되는 글이 아니기 때문에, 상관없을 것이다.
만약, 2개 이상의 사진을 추가하고 싶다면, 앞에서 했던 것과 동일하게 간단히 끌어다 놓으면 된다. 추가된 그림도 일반적인 글처럼 인식한다. 다시 말해서, 그림을 추가한다고 해서 자동으로 엔터가 붙지 않는다. 아래 그림은 세로와 가로로 작성 하는 방법을 나눠놨지만, 간혹 첨부된 이미지 이름이 길기 때문에 아래 그림처럼 내가 엔터를 쳤는지, 치지 않았는지 헷가릴 때가 있다. 따라서, 이미지가 세로로 보이기를 원한다면 그림 + 엔터, 이미지가 가로로 보이기를 원한다면 그림 + 스페이스로 작성하면 된다.
너무 큰 이미지를 삽입하거나 너무 작은 이미지를 삽입해서 이미지의 크기를 조정하고 싶은 경우가 있다면, 위 첨부한 그림처럼 HTML 태그의 <img> 태그를 사용하면 된다. 앞 설명에서 이미지를 끌어다 놓은 순가 이미 Github에 이미지는 업로드되며 URL이 출력된다고 하였다. 이를 이용하면 <img src="<업로드된 url>">로 변경할 수 있다. 그리고 <img> 태그에서 제공하는 width 속성을 이용하면 삽입되는 이미지의 크기 또한 조절이 가능하다. 아래 화면은 위의 Issue 글이 작성되었을 때의 모습이다.
README.md 파일에 Image 올리기
리서치 해본 결과, 아래의 4가지 방법들을 사용해서 Image를 업로드하는 방법을 찾을 수 있었다. 개인적으로 [방법1]과 [방법3]이 사용하기에 적당할 것이라고 생각된다. README.md 파일을 빨리 작성해서 누군가 보여줘야 한다면 [방법1]을 사용하고, 누군가에게 프로젝트를 배포해야한다거나 장기간 안정적으로 유지되어야하는 프로젝트에 작성되어야하는 README.md 파일을 만들어야 한다면 [방법3]을 사용하는 것이 적당할 것이라고 생각된다.
[방법1] Issue와 PR을 이용해서 Image를 올린 후, 링크를 거는 방법 (=이미지를 Github가 관리하는 어딘가에 보관 / 언제 없어질지 모름)
1. 위에서 설명했던 것처럼 Issue와 PR을 통해 사진을 삽입한 후, 글 작성을 완료한다.
2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.
[방법2] Issue와 PR을 이용해서 Image를 올린 후, 링크를 거는 방법 (=이미지를 Github가 관리하는 어딘가에 보관 / 언제 없어질지 모름)
1. 위에서 설명했던 것처럼 Issue와 PR을 통해 사진을 삽입한 후, 글 작성을 완료하지 않는다.
2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.
[방법3] Git에 직접 Image를 올린 후, 링크를 거는 방법 (=이미지를 Repository에서 직접 보유하는 방법)
1. Image가 사용될 Git Repository에 directory를 생성하고 Image를 올린다.
2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.
[방법4] Git에 직접 Image를 올린 후, 링크를 거는 방법 (=이미지 전용 Repository 생성하는 방법)
1. Image와 관련없는 Git Repository에 directory를 생성하고 Image를 올린다.
2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.
README.md 파일에 이미지를 삽입할 때는 아래처럼 마크다운 포멧으로 혹은 HTML 포멧으로 작성하면 된다.
마크다운 포멧으로 작성   HTML 포멧으로 작성 <img src="<업로드된 이미지 URL>"> <img src="https://...../sample.png">
