[정보] 깃허브에 gif 파일 올리기

 

 

깃허브 Repository를 정리하면서 README파일에 프로젝트 설명을 작성하다 보니 뭔가 허전하다는

생각이 들었다.

평소 다른 사람들이 잘 꾸며놓은 깃허브를 많이 구경하는 편인데, 다른 깃허브들을 구경해보니

Repository에 동영상이나 gif파일로 프로젝트를 설명해 두어서 보는 사람이 편리하게 해 둔 사람이 많았다.

내 README 파일에도 적용하기 위해 방법을 찾아보았고, 한번 정리를 해두기 위해서 포스팅해보았다.

 

💎 프로젝트 녹화하기

---

 

1. 동영상 녹화하기 (mp4파일)

이미 여러 가지 동영상 녹화 프로그램들이 존재하지만, 윈도우10에 내장된 기능 중

'게임 녹화'기능을 사용했다.

[win + G ] 키를 누르면 게임모드로 접속되면서 아래와 같은 화면이 뜬다

 

저 화면 중 캡처 기능 박스의 ⚫버튼을 누르면 화면이 녹화된다.

(깃허브에 gif 파일 업로드 시 10mb의 용량 제한이 있으니 동영상을 30초 정도로 녹화하는 것이 좋다.
30초가 힘들다면 30초 단위의 여러 개로 나누어서 올리면 좋다!)

먼저 프로젝트를 개발서버로 구동시키고 → [ win + G ] 키를 눌러 게임모드를 구동한다.

→ ⚫버튼을 누르고 프로젝트가 구현되는 모습을 녹화한다. → 원하는 이름으로 저장한다.

 

2. 편집하기

저장된 파일을 재생하니 기본 프로그램에 편집 도구가 있어 이것으로 길이를 편집했다.

깃허브 용량 제한을 생각하면 30초 정도로 잘라내었다.

 

 

 

 

💎GIF 파일로 변환하기

---

 

3. mp4 → gif로 변환하기

인터넷에 검색하면 여러 가지 사이트들이 나오는데 나는 이 사이트를 이용했다

https://ezgif.com/video-to-gif

Online video to GIF converter

단순히 gif로만 변환되는 것이 아니라 동영상의 길이, 크기, 프레임까지 한 번에 조절되어 정말 간편했다.

이런 식으로 원하는 동영상을 업로드한 후  시작 지점의 시간, 끝 지점의 시간을 입력하고 원하는 사이즈와 프레임을 설정해주면 모든 준비가 마무리된다.

(지난번과 다르게 25초까지만 지원되는 것 같으니 더 긴 동영상이라면 다른 프로그램을 이용해야 할 것 같다.)

모든 설정을 마치고 [ Convert to GIF! ] 버튼을 누르면 아래에 잠깐 시간이 흐른 후 미리보기와 함께 파일이 변환된다.

[ SAVE ]버튼을 누르면 변환된 gif 파일이 내 컴퓨터에 저장된다.

 

 

 

💎 깃허브에 GIF업로드 하기

---

바로 올릴 수는 없고, gif를 markdown문법으로 먼저 변환하여 업로드해야 한다.

먼저 README파일을 수정할 Repository에 들어가서 [ Issue ]탭에 들어간다.

그다음 [ New issue ]버튼을 클릭하면 

아래와 같은 화면이 나온다.

Leave a comment 부분에 gif 파일을 넣으면 (https:// ........ .gif)로 변환되는 데 이 주소를

README.md파일에 넣으면 gif 파일이 보이게 된다.

<p align="center">
<img src="복사한 주소">
</p>

참고로 이 형식으로 넣으면 올린 gif가 가운데 정렬된다.

 

약간 복잡한 것 같지만, 한 번만 해보면 쉽게 할 수 있다

서버에 올리기에는 작은 미니 프로젝트일 경우에 이 방법을 사용하면 아주 유용할 것 같다.

 

➕ 2022.04 조금 더 간단한 방법을 찾아서 포스팅했다. 링크는 아래에 첨부했다.

[정보] Github에 Markdown에 Gif 파일 쉽게 올리는 방법