Github의 Readme에 거칠지 않은 gif를 작성부터 붙여넣기까지

이 반년의 성과물을 Github에 주는데 감각적으로 알게 하기 위해 gif를 아무래도 붙이고 싶었다.
거의 다른 쪽의 Post와 내용은 같습니다만, 개인적으로 잊는다고 생각하므로 비망록을 남긴다.
Github에 이미 저장소가 있다고 가정하여 이야기를 진행합니다.

ffmpeg, Image Magic 설치



  • ffmpeg - 무료로 사용할 수 있는 동영상 및 음성 인코더입니다.

  • Image Magick - 스크린샷이나 이미지의 압축이나 변환 등을 해 줍니다.

  • 둘 다 CLI에서 작동할 수 있습니다.

    homebrew로 설치합니다.
    ※ homebrew가 설치가 아직있는 분은 여기에서
    brew install ffmpeg
    brew install imagemagick
    

    .gif로 변환



    Quicktime Player 화면 녹화 만든 .mov 및 .mp4 동영상 파일을 gif로 변환합니다.
    cd 動画のあるディレクトリ
    ffmpeg -i sample.mp4 -an -r 10 %04d.png  // 10frames/secでpng作成
    convert *.png -resize 40% output_%04d.png  // 作成したpngを40%にリサイズ
    convert output_*.png result.gif  //  gifに変換
    

    그러면 out의 폴더에 result.gif가 생성된다.

    리포지토리에 붙여넣기



    Github에 .gif를 주는 몇몇 방법이 있다.
  • 분기를 자르고 거기에 업로드
  • Github 위키에 업로드
  • issue에 업로드 ← 이번에는 이것

  • issue를 새로 만들어 거기에 방금 만든 파일을 드롭.
    상한이 10MB까지이므로 주의!



    그러면 위의 URL이 나오므로 그대로 Readme에 복사.

    완성!





    참고 및 메모


  • ffmpeg와 imageMagick을 사용하여 mp4에서 좋은 느낌으로 gif로 변환
  • mac에서 ffmpeg를 도입하여 mov 파일을 gif 파일로 변환하는 곳까지
  • GitHub의 README에 gif 이미지를 표시하는 가장 쉬운 방법
  • 이해하기 쉬운 README.md 작성
  • EMOJI CHEAT SHEET
  • Markdown 기법 치트 시트
  • 좋은 웹페이지 즐겨찾기