그러나 이미지 첨부 방법이 너무나도 편리한 것에 비해 동영상을 첨부할 때에는 자신에게 편한 몇몇 방법을 숙지해야 합니다.
결론부터 말하자면 지도나 동영상을 중앙정렬 하기 위해서는 <iframe> 태그 앞 뒷 부분에 다음 태그를 삽입하면 됩니다.
<div align="center"> ~ 퍼 올 코드 내용, 예를 들면 <iframe> 태그 ~ </div>
이 태그를 지도나 동영상 <iframe> 태그 앞에 삽입하면 퍼온 매체의 얼라인을 수정할 수 있습니다.
티스토리 블로그를 운영하면서 내 게시글에 각종 미디어들을 퍼오는 방법과 얼라인 중앙정렬하는 방법까지 함께 순서대로 알아보겠습니다,
1. 이미지 첨부 방법
1-1. 본인의 디바이스에서 업로드 한다
이미지는 본인의 디바이스에 있는 파일을 업로드 할 수도 있고, 웹페이지의 이미지를 우클릭하여 복사, 붙여넣기 하거나 다른 탭에 있는 이미지를 마우스로 클릭 후 드래그하여 편집 기본모드 창 위에 끌어놓는 것만으로도 첨부가 가능합니다.
내 컴퓨터에 있는 파일을 업로드 해도 되고 복사, 붙여넣기 해도 되며, 드래그해서 티스토리 글쓰기 페이지 위에 드랍해도 됩니다.
1-2. 켜져있는 다른 웹페이지 창에서 퍼온다
웹페이지에 있는 이미지 파일 역시 다운로드 할 필요 없이 우클릭 후 '이미지 복사'를 눌러 티스토리 글쓰기 페이지에서 붙여넣기 하면 다운받아서 다시 업로드 할 필요 없이 바로 첨부 가능합니다. 웹페이지상의 이미지 역시 복사, 붙여넣기 할 필요 없이 드래그 앤 드랍으로도 첨부할 수 있습니다.이렇게 인터넷 웹페이지 상에 있는 이미지를 클릭, 드래그하여티스토리 글쓰기 란에 드랍하는 것 만으로도깨끗한 원본 이미지 파일을 첨부할 수 있습니다.
2. 지도 첨부 방법
2-1. 구글 지도 첨부 방법, 지도 HTML 코드 복사하기
구글 지도의 경우 첨부하고 싶은 위치를 클릭하여 마우스로 선택한 뒤 '공유' 버튼을 누릅니다.뜨는 창에서 '지도 퍼가기' 탭을 누릅니다.우측 하단 아이콘을 클릭하면 '위성 이미지 지도 / 지적도 거리 지도'로 전환할 수 있습니다. 너무 가까이 클로즈업 한 경우에는 위성 이미지 지도를 첨부했을 때 이미지가 준비되지 않았다며 위성 이미지가 표시되지 않는 경우가 있습니다. 원하는 축척을 선택한 뒤 오른쪽 위 'HTML 복사' 버튼을 눌러 클립보드에 HTML 첨부 코드를 복사합니다.
2-2. 지도 퍼가기 코드 HTML 블럭에서 붙여넣기
글쓰기 화면 상단 우측의 '···' 버튼을 눌러 '<> HTML블럭' 항목을 선택합니다.복사한 구글 지도 HTML 코드를 붙여넣습니다. 만약 이 곳에서 지도를 화면 가운데 정렬 하고싶다면...<div align="center"> 를 코드 앞에 붙이고, 코드 맨 뒤에도 </div>를 붙여줍니다.이런 식의 '<>HTML 삽입' 창이 뜨며 지도가 삽입됩니다. 그러나 광고서식을 붙여넣는다던가, 다른 동영상과 지도를 여러개 업로드했을 경우 글쓰기 에디터 화면에서는 이게 영상인지 지도인지 분간하기가 힘들어 헷갈리기 십상입니다. 그럼 왜? 굳이 HTML코드 블럭을 사용하는 것일까? 그것은 티스토리 블로그 시스템 특성상 HTML 편집 모드에서 제법 복잡한 특정 코드를 삽입해 서비스를 제공하고자 하면 오류가 나는 경우가 왕왕 있기 때문입니다. 그러나 몇몇 특정 지도 서비스나 동영상 첨부 사이트는 HTML 모드로 첨부해도 별 문제가 없도록 코드가 만들어져 있습니다. 그러나 이런 불편감을 감수하고서라도 기본적으로 HTML 블럭을 이용하는 것이 혹시나 모를 오류에 대비하기 쉽습니다.
2-3. HTML 모드에서 지도를 바로 첨부할 경우
우측 상단 '기본모드' 아이콘을 클릭하면 드랍다운 창이 뜹니다. 'HTML'을 선택합니다.제법 쌈박하게 겁을 주는 안내창 문구가 등장합니다. 실제로 모드를 변경할 경우 이미지에 캡션으로 추가한 특수문자나 외래어 코드, 어디선가 글을 퍼왔을 때 ' '와 같은 띄어쓰기 코드 등이 빠가나며 오류가 생기기도 합니다. 그러나 처음 블로그를 시작할 때는 이런 오류들이 불편하게 느껴질 수 있지만 장기간 블로그 생활에 익숙해지다 보면 오히려 글을 게시하기 이전에 이런 오류를 미리 확인하고 수정할 수 있으니 환영할 일입니다. 확인 버튼을 눌러줍니다.HTML 모드에서 복사한 '지도 HTML 코드'를 붙여넣기 한 상태. 그러나 이 상태로 그냥 두면...이렇게 지도가 자동으로 좌측정렬 된 상태가 됩니다. 만약 이 지도를 가운데 정렬 하고싶다면...
2-4. 퍼온 지도를 중앙정렬 하기
HTML 코드블럭에서 했던 것과 마찬가지로 <iframe> 태그 앞에 <div align="center">를 붙여넣어 줍니다. 원래는 코드 뒷부분에 </div> 태그로 태그 마감을 해주어야 하지만 고마우신 티스토리 블로그 시스템은 이런 자잘한 마감 태그는 알아서 자동으로 삽입해줍니다. 다시 기본모드로 돌아와보면...
지도가 적절히 삽입되어 화면 중앙에 정렬되었습니다.
3. 동영상 퍼가기 코드를 복사해오기
동영상 매체를 퍼올 수 있는 사이트는 정말 다양합니다.
대표적으로 유튜브가 있고, 페이스북이나 인스타그램 등도 있습니다.
유튜브의 경우 제가 사용하는 방법을 포함하여 동영상 퍼오는 방법을 순서대로 알려드리겠습니다.
3-1. 유튜브 제목을 복사한 뒤 하이퍼링크를 걸고 엔터키를 친다
저는 개인적으로 이 방식을 선호합니다.
인용 태그의 두번째 항목을 선택합니다. 이것을 선택하는 이유는 그냥 내가 보기 좋고 어떤 동영상을 어떤 순서대로 퍼왔는지 보기가 용이하기 때문입니다. 인용태그를 사용하지 않아도 상관없습니다.퍼오고 싶은 유튜브 영상의 제목과 채널명까지 복사합니다.인터넷 주소창에 복사한 텍스트를 붙여넣었다가(ctrl + V), 'ctrl + A'를 눌러 모두 선택한 뒤 다시 잘라내기, 혹은 복사합니다.(ctrl + X 혹은 ctrl + C) 이런 귀찮은 짓을 하는 이유는 웹페이지상에 있는 글을 복사할 경우 우리 눈에 보이지 않는 각종 CSS와 태그 코드 등이 딸려서 함께 복사되기 때문입니다. 이런 코드들을 배제하고 텍스트만 따오기 위해서 이런 번거로운 방식을 택했습니다. 근데 손에 익으니까 1초밖에 안 걸리는 작업이 되어버려서 별로 안 힘들더라...인용 태그 위에 복사한 텍스트를 붙여넣는다. 만약 인용태그를 사용하지 않을 경우...기본모드에서는 겉으로 보기에 인용태그를 사용한 상단의 것이나 그냥 일반 텍스트 창에 붙여넣은 하단의 것이나 별 차이가 없어보입니다.그러나 HTML 모드에서 해당 문장을 다시 살펴보면 인용태그를 사용하지 않은 문장의 띄어쓰기가 모두 ' ' 코드로 변경되어 있는 것을 확인할 수 있습니다. 물론 편의성을 갖고있는 티스토리 시스템에서는 한 문장 안에 있는 nbsp 코드를 한개만 지우거나 다시 띄어쓰면 문장 안의 모든 nbsp가 일반 띄어쓰기로 변경되지만, 그짓조자 귀찮기 때문에 인용 태그를 사용하는 것입니다.
귀찮게 인용태그를 사용하면서까지 동영상 제목을 퍼오는 이유는 포털사이트 검색어에 더 많이 잡히기 위해서, SEO를 높이기 위해서입니다.
해당 영상을 이미 알고있는 사람이 그 제목을 검색했을 때, 제 블로그 게시물도 같이 검색되도록 하기 위함입니다.
해당 유튜브 영상의 주소창 주소나영상 하단 '공유' 버튼을 눌러 나온 코드를 '복사' 버튼을 눌러 복사합니다. 어느쪽이든 상관없습니다.먼저 인용태그에 써넣은 영상 제목 텍스트를 드래그하여 선택한 뒤, 글쓰기 에디터 화면 상단 '링크 삽입/수정' 버튼을 클릭하고, 'URL' 입력창에 복사한 영상 주소를 붙여넣은 뒤 '확인' 버튼을 누릅니다. 그러면 해당 텍스트는 해당 영상으로 연결되는 하이퍼링크 텍스트로 변하게 됩니다.파란색 하이퍼링크 텍스트로 변했습니다. 이 게시물을 보는 사람이 이 파란 하이퍼링크 텍스트를 클릭하면 연결된 유튜브 동영상 페이지가 열립니다. 그런데 이것이 끝이 아닙니다.링크 우측 끝에 마우스 커서를 놓고 클릭한 뒤 엔터(Enter) 키를 치면...
그러나 이 방법으로는 내가 원하는 시간부터 시작하는 동영상을 첨부할 수 없다는 단점이 있습니다.
예를들어 10분짜리 동영상의 5분 경에 나오는 장면부터 동영상이 시작되게끔 첨부하고 싶은데, 위 방법으로는 시작시간을 미리 설정한 퍼가기 링크를 퍼온다고 할지라도 게시물에 영상이 표시될 때 설정한 시작시간이 반영되지 않습니다.
3-2. 시작시간을 설정하고 싶을 때는 역시 HTML 블럭을 이용한다
티스토리 블로그 글에 무언가 다른 사이트의 서비스(동영상, 지도 등)을 HTML 첨부 코드로 퍼와서 내 게시물에 삽입하려면 기본은 HTML 코드 블럭을 이용하는 것이 가장 안전합니다.
HTML 코드들은 순서에 따라 서로 간섭하며, 코딩에 대해 잘 모르는 저 같은 사람들이 무턱대고 HTML 모드를 건드리다가 오류가 나면 도대체 어느 부분이 잘못되었는지 찾아내기 힘들기 때문에 매우매우매우 골치가 아파집니다.
물론 HTML 블럭을 사용하면 편집할 때의 가시성은 그다지 좋지 않습니다.
하지만 다른 코드들에 의해 영향을 받는다거나 망가지지 않고 가장 안정적으로 매체를 삽입할 수 있는 방법입니다.
지도를 퍼왔을 때와 마찬가지로 HTML 블럭에 시작시간을 설정한 코드를 적용해줍니다.
게시물이 시작되기를 원하는 시점에서 동영상을 멈추고 화면 우측 하단의 공유 버튼을 누릅니다.좌측 하단의 '시작 시간' 버튼을 클릭해 시작하고 싶은 시간부터 동영상이 재생되도록 설정할 수 있습니다. 그러나 이대로 창 우측의 '복사' 버튼을 눌러 코드를 복사해도 html 코드가 아닌 동영상 주소로 복사한 것이기 때문에 티스토리에 붙여넣으면 영상이 제대로 동작하지 않습니다. 좌측 상단의 초록색으로 표시한 '퍼가기' 버튼을 누르면 HTML 코드로 붙여넣을 수 있도록 <iframe> 태그로 감싸져있는 코드를 퍼가기 할 수 있습니다.퍼가기 버튼을 누르고 별다른 설정을 만질 것이 없다면 원하는 시작시간을 체크하고 코드를 복사합니다. 시작시간을 체크하지 않으면 동영상이 처음부터 재생됩니다.지도 화면을 중앙정렬했을 때와 똑같이 <div align="center"> 태그와 </div> 마감태그로 해당 영상의 <iframe> 태그 코드를 앞뒤로 모두 감싸줍니다. 마감 태그로 감싸주지 않으면 정렬 설정을 하지 않은 영상 이후의 글이나 컨텐츠들도 모두 중앙정렬 되어버립니다.
3-3. 동영상 퍼가기 <iframe> 태그를 HTML 편집 모드에서 삽입하여 중앙정렬 하기
이것 역시 HTML 블럭에 복사한 퍼가기 코드를 붙여넣었을 때 처럼 똑같은 과정으로 진행합니다.
영상을 재생한 사람이 보기를 바라는 시점에서 영상을 정지한 뒤 화면 하단 '공유' 버튼을 누릅니다.공유 창 좌측 상단 '퍼가기' 버튼 클릭.재생이 시작되기를 바라는 시점을 체크한 뒤 <iframe> 태그로 감싸진 퍼가기 코드를 복사합니다.티스토리 글쓰기 에디터 화면 우측 상단 '기본모드' 클릭 후 'HTML' 모드로 변경.이전의 방법들과 똑같이 <div align="center">를 붙여넣은 코드 앞에 써넣어주면 자동으로 영상의 얼라인이 중앙으로 정렬됩니다. 마찬가지로 </div> 마감 코드는 조상님...이 아니라 티스토리가 알아서 써넣어 줍니다. 그러나 이 방법은 언제까지나 HTML 코드를 좀 아는 분들이 사용하는 방법으로, 기본은 HTML 블럭을 이용하는 방법이라는 것을 기억해두는 것이 좋습니다.
완성품.
3-4. 주소를 통째로 복사 붙여넣기 하여 퍼오기
이런거 저런거 모두 귀찮다면, 그냥 퍼오고 싶은 유튜브 영상의 URL 주소를 통째로 복사하여 티스토리 글쓰기 편집 화면에 바로 붙여넣고 엔터 키를 쳐도 간단하게 동영상을 삽입할 수 있기는 합니다.
그냥 유튜브 주소를 바로 퍼오는 방식은 가장 간단하지만, 이 영상이 어떤 정보를 담고 있는지 썸네일로만 판단할 수 밖에 없기 때문에 블로그에서는 이 방법을 이용하기에 적절하지 않습니다. 만약 이 동영상이 어떤 영상인지 설명해주는 제목이나 키워드가 없다면 '제프프'나 '황정민', '밤양갱' 어떤 검색어로 검색해보아도 이 영상이 포함된 게시물은 검색엔진에 잡히지 않을 것이기 때문입니다.
그러나 이 방법은 해당 영상에 대한 설명이 부족하므로 어떤 키워드로 검색했을 때 이 영상이 어떤 내용을 담고 있는지 가독성 좋게 표기되지 않기 때문에, 포털 사이트의 검색엔진에 잡혀 노출되는 것이 목적인 블로그 시스템의 운영 방침 상 너무 성의없는 방법입니다.
4. 유튜브 이외의 매체에서 동영상 퍼오기
유튜브는 동영상을 퍼오는 것이 상대적으로 간단합니다.
그러나 인스타그램이나 페이스북, X(구 트위터), 틱톡 등 다양한 SNS 영상 매체에서 동영상을 퍼오려면 각 SNS마다 퍼가기 버튼이 어디에 있는지 확인해야 합니다.
4-1. 인스타그램
인스타그램은 게시물 우측 상단의 '···' 버튼을 눌러 '퍼가기' 버튼을 찾을 수 있습니다.임베드 태그를 복사하여 위에서 유튜브 영상을 퍼오는 방법을 배운대로 원하는 방식으로 HTML 코드를 삽입합니다.HTML 블럭에 삽입해 보았습니다. 코드 앞부분에는 마찬가지로 <div align="center"> 태그, 코드 뒷부분에는 </div> 태그를 삽입해주었습니다.
페이스북 역시 게시물 우측 상단의 '···' 버튼을 눌러 '</> 퍼가기' 버튼을 찾아낼 수 있습니다.'전체 게시물 포함' 항목에 체크하면 게시물에 쓰여있는 글을 함께 퍼옵니다. 체크하지 않고 '코드 복사'를 누르면 비디오 동영상만 퍼오게 됩니다. 유튜브와 동일하게 '퍼가기 시작 시간'을 체크할 수 있습니다.퍼온 영상은 유튜브 영상을 삽입했던 방법과 동일하게 편한 방법을 선택하면 됩니다. 저는 HTML 모드를 사용해 보았습니다.
동영상 삽입이 잘 되었습니다.
4-3. 구 트위터 X 동영상 퍼오기
이제 슬슬 감이 오실 것입니다.
트위터 X도 게시물을 퍼가는 원리는 다른 SNS와 마찬가지입니다.
원하는 게시물의 우측 상단 '···', '더 보기' 버튼을 누릅니다.다른 SNS와 동일하게, 링크 복사나 공유하기 버튼이 아니라 '</> 게시 담기' 버튼을 눌러 임베드 코드를 복사합니다.만약 우측 하단 공유하기 버튼을 누르면퍼가기, 게시 담기 버튼이 없습니다. 링크 복사하기나 게시물 공유하기로는 블로그에 SNS 게시물을 깔끔하게 담기 힘듭니다.'</>게시 담기' 버튼을 누르면 나오는 화면. 비디오만 퍼올것인지(좌), 포스팅 글도 함께 퍼올 것인지(우) 선택할 수 있습니다. 저는 영상만 퍼오기 위해 왼쪽을 선택하였습니다.어떤 형식으로 퍼갈 것인지 선택하면 임베드 코드를 복사할 수 있습니다. 복사해서 블로그에 퍼옵니다. 하지만 트위터 X의 경우 HTML 모드에 임베드 코드를 그대로 삽입하면 스크립트 오류가 발생합니다. 이런 경우가 왕왕 발생하기에 HTML 블럭을 사용해 스크립트 오류를 방지하는 것입니다.HTML 블럭을 불러와 코드를 삽입하고, 동일하게 코드의 앞 뒤를 <div align="center">, </div> 태그로 감싸줍니다.
