안녕하세요. 슬로우 AZ입니다.
오늘은 동영상을 GIF로 변환해서 블로그에 사용하시는
모든 분들에게 아주 유용한 팁이 될 것 같습니다.
제가 왜 이런 팁을 가져오게 되었냐면요...
현재 제 동영상 업로드가 막혀버린 바람에
어쩔 수 없이 찾아보다가 가져온 팁이지요 ;;
이렇다보니,
가지고 있는 mp4 영상을 어떻게 올릴까 고민하게 되고,
생각보다 간단하게 해결이 되었습니다.
아마 이제부터는 영상은 이렇게 올릴 듯 하네요.
방법은 생각보다 간단합니다. (물론 제미나이가 알려줬죠 ^^;)
1단계 : 영상 준비
영상을 준비합니다.
저는 저번에 구글 AI 스튜디오 VEO에서 생성한
" 강아지가 뛰어가는 영상 "을 준비했습니다.
2단계 : 파일 업로드, 링크 주소 복사
파일을 업로드해야 합니다.
왜냐하면 " 파일 주소를 얻기 " 위한 것이죠.
첨부 > 파일을 클릭합니다.
업로드 된 파일 우 클릭 > 링크 복사
이제 메모장에 주소를 저장해 놓습니다.
파일 업로드
3단계 : HTML 코드 작성 및 적용
이제 제미나이의 도움을 받아봅니다.
"HTML에서 비디오 태그를 사용하는 코드를 작성해줘"
간단히 무슨 의미인지 알아보면,
1) autoplay : 자동 재생
2) loop : 무한 반복
3) muted : 음소거
4) playsinline : 모바일에서 전체화면을 띄우지 않고, 글 안에서 바로 재생되게 하는 속성
5) width : 영상의 전체 폭(크기)
이라고 합니다. (4번은 뭔말인지 ㅡ.ㅡ;)
이렇게 설정해두면, gif 처럼 작동하는 거죠.
이제 티스토리 기본모드를 HTML 모드로 변경합니다.
이제 제미나이에서 얻은 코드를 적용하고,
메모장에 저장해둔 파일 주소까지 붙여넣습니다.
이제 다시 기본모드로 돌아오면 적용되어 있는 것을 볼 수 있습니다.
적용된 영상을 보겠습니다.
gif처럼 작용하지만 훨씬 더 부드럽습니다. (이걸 이제야 알다니!!!!)
추가팁
1) 영상을 정렬하기
만약, 영상을 가운데 놓고 싶다면 위에 이런 코드를 추가합니다.
<div style="text-align: center;">
<video autoplay loop muted playsinline width="80%">
<source src="링크_주소" type="video/mp4">
</video>
</div>
오른쪽은 right, 왼쪽은 left겠죠? (안해봄)
2) 영상 바로 옆에 글을 쓰는 방법
<div style="display: flex; align-items: center;"> :
<div style="width: 50%; margin-right: 20px;">
<video autoplay loop muted playsinline style="width: 100%; display: block;">
<source src="영상_링크_주소" type="video/mp4">
</video>
</div>
<div style="width: 50%;">
<p> Flexbox를 사용하면<br> 요소들을 나란히 배치하기가<br> 매우 쉽습니다.<br> <br> 이 방법은 모바일 반응형 처리에도<br> 유리합니다. </p>
</div>
</div>
첫 줄은 상자 안의 내용물 (비디오, 텍스트)을 가로로 나란히 배치하겠다는 코드이고,
마지막은 텍스트 내용입니다.
적용하면 이렇게 됩니다.
여기에 영상 오른쪽에 표시될 글을 작성합니다.
Flexbox를 사용하면 요소들을 나란히 배치하기가 매우 쉽습니다. 이 방법은 모바일 반응형 처리에도 유리합니다.
3) 글자 스타일 바꾸기
오른쪽에 배치된 글자가 너무 심심하죠?
스타일도 추가가 가능합니다.
이런 코드들을 추가하는 거죠.
<p style="font-size: 18px; line-height: 1.6;" data-ke-size="size16"><b>자유롭게 꾸미는 텍스트</b> <br /><br /><span style="color: #555555;"> 이제 <span style="color: #d94844; font-weight: bold;">원하는 곳에서 줄을 바꾸고,</span><br />글자의 <b>색상</b>과 <b>굵기</b>를<br />마음대로 조절할 수 있습니다. </span></p>
적용해보겠습니다.
자유롭게 꾸미는 텍스트
이제 원하는 곳에서 줄을 바꾸고,
글자의 색상과 굵기를
마음대로 조절할 수 있습니다.
사용해보니 코드 몰라도 괜찮습니다.
제미나이가 알아서 해주더라구요 ㅡ.,ㅡ
4) 서식 기능으로 작업효율 높이기
영상을 올리고, 글자를 바꿀 때마다 제미나이나 챗gpt에 물어보는 것은 너무 비효율적입니다.
하지만 서식 기능을 이용하면 간단히 이용할 수 있습니다.
서식 쓰기
블로그 컨텐츠 > 서식관리 > 서식쓰기
여기서 제목을 입력하고 서식을 저장해 놓습니다.
서식 불러오기
상단에 점세개 > 서식 클릭
여기서 불러와서 편히 쓰면 됩니다.
.
.
.
이렇게 영상을 gif처럼 사용하는 법을 알아보았네요.
그런데 느낌인가...타이핑을 치는데 렉이 조금 있는 것 같기도 하고;;
일단 이 방법으로 당분간 영상을 올려보겠습니다.
좋은 하루되세요~
