[tip] README에 gif 첨부할 때 사용하면 좋은 유용한 툴/사이트 모음 - 영상 자르기, gif 변환, gif 압축

README에 내가 만든 프로젝트 시연 영상을 올리고 싶은데 영상 촬영부터 편집, gif 변환, gif 용량 압축까지 하려니 막막해서 이것저것 시행착오를 겪은 결과를 공유하려고 한다. 영상 촬영부터 gif 올리는 과정까지 하나의 루틴으로 만들어봤다.

 

나는 고퀄 녹화 필요 없고 그냥 윈도우 기본 녹화를 쓸거다!하는 사람은 2번부터 보면 된다.

1. 화면 녹화 (OBS)

윈도우 기본 녹화를 하고 난 뒤에 원하는 부분만 확대해서 자르면 화질이 떨어져서 깨져보인다.

OBS는 원하는 부분을 애초에 자르거나 확대한 상태에서 녹화하기 때문에 그럴 염려가 없다.

다운은 여기서.

Open Broadcaster Software | OBS

 

플러스 버튼을 눌러 새로운 화면녹화를 만들건데

디스플레이 캡처와 윈도우 캡처 두가지 중 하나를 선택하면 된다.

보이는 화면 그대로를 녹화하는게 필요한지 여부를 고려해서 선택하면 된다.

 

이게 뭔 말이냐면,

• 윈도우 캡처 - 크롬이나 비주얼 스튜디오처럼 지정한 프로그램의 창만 녹화된다. 예를 들어 유튜브를 켜놓은 크롬 탭을 녹화한다고 치면, 그 창을 내려놓거나 위에 다른 창을 포개놔도, 녹화 단위가 윈도우 창이기 때문에 영향받지 않고 그 자체가 잘 녹화된다.
• 디스플레이 캡처 - 우리한테 보이는 화면 그대로 녹화하는게 필요할 때

내가 만약 버튼을 누르면 파일이 다운로드되는 웹사이트를 만들었다고 치자. 그 과정을 녹화하려면 파일 다운로드 표시줄과 파일 탐색기를 여는 등의 모습도 찍혀야 한다. -> 디스플레이 캡처 선택. 윈도우 캡처로는 다른 창과의 상호작용이 찍히지 않으므로 화면 자체를 녹화하는 디스플레이 캡처를 선택하자.

 

+) obs 팁

• 커서 캡쳐 옵션을 통해 마우스 커서를 보일지 말지 설정할 수 있다.
• alt + 마우스로 화면을 자르고 마우스로 확대하거나 위치를 조절할 수도 있다.
• 윈도우 알림소리 (띵 효과음)이 들어가게 하고 싶지 않다면
  -> 시작표시줄의 음량조절 아이콘에 오른쪽버튼 -> 소리 설정 열기 -> [고급 사운드 옵션] 앱 볼륨 및 장치 기본 설정 -> 시스템 소리를 0으로 맞추기

 

2. 영상 클립 자르기 (Microsoft Clipchamp)

+) 윈도우 비디오 편집기 -> Microsoft Clipchamp 로 수정 (2024-01-16)

간단하게 영상 자르는데에는 거창한거 필요없고 윈도우에 기본으로 들어있는 이 프로그램이 짱이다.

 

새 동영상 만들기 -> 미디어 추가 버튼 눌러서 편집할 영상 불러오기 -> 불러온 영상을 아래의 스토리보드에 끌어다놓기 -> 시간축을 움직여 조정한 다음, 가위 버튼을 눌러 클립을 자르면 된다. 스토리보드에 영상을 여러개 갖다놓아 이어붙일 수도 있다.

다 잘랐으면 내보내기 눌러서 화질 선택하면 된다.

 

Clip 자르는 것 말고 화면을 자르고 싶다면

동영상 화면을 눌러 다음과 같이 뜨는 버튼 목록 중 크롭 아이콘을 누르면 된다.

 

3. 화면 자르기 (Video Trimmer)

웬만한 건 Microsoft ClipChamp로 해결할 수 있는데 만약 화면 자르기 사이트가 필요하다면 다음 사이트에서 해결할 수 있다.

동영상의 필요없는 부분을 크롭하거나 영상 자르기(clip), 좌우반전, 회전 등을 할 수 있다. 나는 동영상 옆의 필요없는 까만 부분을 자를 때 주로 애용한다.

 

https://online-video-cutter.com/

Video Trimmer - Cut Video Online for Free - MP4, AVI, MPG, 3GP

 

사이트에 들어가면 Open file 버튼 눌러서 영상을 업로드 하고

crop을 선택해 영상 자르기를 할 수 있다.

 

4. 고화질 gif 변환 (RedKetchup)

https://redketchup.io/gif-converter

GIF Converter | GIF, MP4, WEBP, APNG | RedKetchup

다른 곳에서도 변환할 수 있긴 한데 무료 사이트는 대부분 저화질밖에 지원하지 않는다. 여기서는 고화질 변환을 무료로 할 수 있다.

해상도에 따라 기하급수적으로 용량이 커지므로 1920 해상도보다는 960 사이즈를 선택해서 다운받으면 README에 넣을 용으로는 충분하다.

배속 조절도 되고 너무 용량이 크게 나온다싶으면 퀄리티를 조절하자. 퀄리티를 low로 잡으면 그라디언트나 색이 화려하게 들어간 부분이 좀 자글자글하게 보일 수 있는데, 용량을 위해서 희생할 만 하다.

 

주의!!

변환이 끝난 다음 다운로드 버튼 누르면 최종 결과 화면으로 이동하는데 여기서 꼭 Download 버튼을 눌러줘야 진짜 다운로드가 되는거다. 광고창에서 2초 기다리면 다운로드 되는데 파일이 잘 다운됐는지 확인하고 창을 닫자. 됐는줄 알고 창 껐는데 안돼서 처음부터 다시 했다ㅠㅠ

 

5. gif 압축

gif 용량 압축을 해서 사이즈 최적화를 해주자. 거의 50% 감소한다!

https://ezgif.com/optimize

Animated GIF optimizer (free online tool)

 

6. 마크다운에 gif 첨부하기

README에 다음과 같이 적어준다.