외부 컨텐츠 메뉴 (1)- 동영상 포스팅 과 편집

[아프로만]

다음(Daum) 게시판의 '글쓰기(편집기)' 기능에는 [외부컨텐츠] 라는 메뉴가 있습니다.

다른 포털에는 없는 다음(Daum)만의 독특한 메뉴인데, 이게 한마디로 '만능 해결사' 노릇하는 아주 탁월하고 유용한 메뉴 입니다.

여기서 '외부'란 다음 플랫폼( 블로그, 카페 등 포털전반) 바깥의 컨텐츠로써, 예를 들면 구글 You Tube /  Vimeo (동영상) / 네이버 동영상 / 엠군 / 판도라 등등을 의미합니다.

※ '다음 팟' 동영상을 다음 게시판에 게시 역시나 '외부' 와 '내부' 구분

* 내부:  게시판 글쓰기 메뉴에서 [동영상] 메뉴 버튼으로 파일을 직접 업로딩 하는 것

* 외부:  다른 게시판의 동영상을 긁어다 복사/ 붙여넣기 하거나, 소스코드 검출해서, 게시판 글쓰기 메뉴 중의 [외부컨텐츠] 메뉴로 '편집' 하여  붙여넣기 포스팅(= 게시) 하는 것

저마다 다른 플랫폼을 통괄해서 포스팅하는 방법은 물론 있습니다. [HTML 코드] 로 작성해서, 게시판을  'HTML 모드' 로 변경 한 후에 포스팅하면 됩니다. 그런데 일반인들이 [HTML 코드] 언어를 모르므로,  '텍스트 모드' 의 [글쓰기] 편집기를 사용하게 되는데, 수년 전부터 문제가 복잡해 졌습니다.

마이크로 소프트 익스플로러 (MS- IE) 이외에도 파이어폭스, 사파리, 구글 크롬 등의 다양한 표준 웹 브라우저들이 대세를 이루고, PC 웹만 아니라 모바일 웹 보기등으로 다양화되는 환경에서, 애당초 비표준 웹 기반의 어도비 플래쉬로 제작된 '텍스트 모드' 글쓰기 편집기' 로는 외부 플랫폼과의 컨텐츠 호환에 문제가 생기기 시작했기 때문입니다.

참고로, 네이버 게시판에서는 아직도 You Tube 동영상을 소스링크 하려면 MS- IE에서만 가능합니다. 기타 국산 플랫폼 게시판 제로보드' 테크노트' 등은 게시판 전체를 'HTML모드' 로 전환시켜서 동영상 소스를 삽입후에, 다시 '텍스트 모드' 로 전체전환해서 삽입된 동영상 위치를 옮겨주어야 합니다. 그누보드' 에서는 [빗자루]메뉴로 HTML태그 스크립트 찌꺼기를 다시 청소해 주어야 합니다.

다음(Daum) 게시판에서는 상기와 같은 번거로움이 전혀 없습니다.

'외부컨텐츠'  이 메뉴로 모든 외부 플랫폼의 컨텐츠 호환장벽을 해소시켰습니다.

'외부컨텐츠' 메뉴 = 간단히 정의하자면 'HTML소스 코드 부분 삽입기능' 입니다.

게시판 전체를 'HTML모드' 로 하지 않고 '일반텍스트 모드' 로 하되, 필요한 '삽입위치' 에서만 HTML코드 삽입용 '별도의 창' 을 열어서 '부분이식' 시키는 기능 입니다.

'외부컨텐츠' - 메뉴로 다음 게시판에 'You Tube' 동영상을 포스팅 삽입하는 법을 설명하겠습니다.

여타 동영상 포맷- Vimeo, 네이버 동영상, 엠군 등도 '링크와 소스' 추출법은 You Tube와 대동소이 하므로'You Tube' 삽입법만 알면 다른 것도 쉽게 응용할 수 있습니다.

※* 판도라, 아프리카, 피아노' 처럼 별도의 추가 'Active-X' 플러그인을 사용하는 포맷은 게시판 포스팅용 동영상으로는 결코 권장하지 않습니다. ('Active-X' 가 한국에서 박멸되는 그날을 위하야~!)

##

다음 블로그나 카페는 공히 같은 '글쓰기(편집기)창' 을 사용합니다.

다음 블로그나 카페에서 글쓰기를 하면 아래 그림과 같은 창이 열립니다.

제목칸 아래에 글쓰기(편집기)메뉴창이 있습니다.

- 오른쪽 [HTML 박스] 에 체크하면 본문쓰기 창이 HTML 전체모드로 전환 됩니다.

- 현재 기본모드는 '일반텍스트 모드' 이며,

- 메뉴줄 가운데 빨간원 표시부분에 '외부컨텐츠' 메뉴가 있습니다.

아래 설명그림에 보여지는 것처럼, 

본문 중 -  곡명: '오직 단하나'  - 텍스트 바로 아래의 정확한 '위치' 에 해당 You Tube 동영상을 삽입 게시 (=포스팅: Posting) 해 보겠습니다 ▼

▲ 상기 설명화면 게시물 

☞ " [곡명] 오직 단하나 - 소향 : http://cafe.daum.net/knowhowup/Dnrx/227  "

아래의 설명 그림은 You Tube 사이트에서 해당곡을 검색하여 동영상을 찾은 모습입니다.

빨간원 표시 [공유]를 클릭하면 > [동영상공유] 네모박스에 나오는게 '링크주소' 입니다.

※ 주의: 이  '링크주소' 가 브라우저 상단 주소창의 'URL주소' 와는 다르다는 점.

추출해야 할 주소는 반드시 [동영상공유] 박스의 '링크주소' 를 복사해야 합니다.

※ 참고로, '링크주소' 만으로도 동영상이 이식되는 게시판 종류

- 다음카페의 댓글 칸, 한줄 코멘트 게시판

- 트위터, 페이스북 등등..

동영상 '링크주소'   http://youtu.be/fDDw3D9Uobo  를 추출하는 방법, 그림 ▼ 

▲ 그림:  [ 동영상 공유] 옆에  빨간 원 표시한 [소스코드] 메뉴를 클릭하면 열리는 [소스코드] 박스창 안에 소스코드가 담겨있습니다. 블로그나 카페의 본문 게시판은 바로 이 [소스코드] 를 추출 복사해서 '붙여넣기' 해야 이식이 되며, 복사'하기전에 먼저 복사할 '크기' 와 '항목' 을 정해야 합니다.

상기 그림 보면서 아래와 같이 복사 항목을 설명합니다 ▼

◆ 크기메뉴: 빨간원 표시- [동영상 크기] 박스>  [ 560 x 315 ▼ ] 중에서 크기 선택

◆ 항목선택 요령은 아래와 같습니다

* 다음동영상으로 시작하는 재생목록 과 함께 공유:  [  ]= 체크 '해제' 권장

* 동영상이 완료되면 추천 동영상 표시: [  ] = 좋을대로

* HTTPS 사용: [  ] = 좋을대로

* 개인정보 강화 모드 사용: [  ] = 좋을대로

* 이전 소스 코드 사용: [  ]  = 이걸 주의 해야 합니다

※ 이전 소스 코드란?  - 기존의 '비표준 웹' 포맷을 의미합니다. 

국산 플랫폼 게시판 전체가 모두 여기에 해당합니다, 제로보드/ 테크노트/ 그누보드 등 대부분의 국산 플랫폼 게시판에 삽입할 때는 '이전소스 코드' 를 선택해서 추출 복사 합니다

단, 이 경우 애플 맥이나 아이폰, 스마트폰' 등에는 호환되지 않는 동영상이 됩니다.

따라서 권장하지 않습니다. 도태되가는 국산 구형 게시판에만 쓰일 뿐 입니다. 

추출한 '이전 소스 코드' 는 아래와 같이 매우 길고 복잡합니다  

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/fDDw3D9Uobo?hl=ko_KR&version=3&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fDDw3D9Uobo?hl=ko_KR&version=3&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

★ 요즘의 신형 게시판 (다음' 이나 네이버' 등 ) 에서는 '이전 소스 코드' 선택체크를 지우고, - 즉. 신형소스를 추출해서 복사합니다 

/ 이러면, 애플과 구글은 물론 MS- IE, 최신의 PC 웹 과 모바일 웹 모두에 호환됩니다.

따라서, 반드시 '신형소스 코드' 를 선택해서 복사해 오길 권장 합니다.

추출된 '신형 소스 코드' 는 아래와 같이 오히려 단출 합니다. 

<iframe width="560" height="315" src="http://www.youtube.com/embed/fDDw3D9Uobo?rel=0" frameborder="0" allowfullscreen></iframe>

※ 에러 주의 !!  2013년7월1일

구글가입 회원이나 유튜브 계정 보유자 경우, 소스코드 박스에서 'http:' 문자 누락되는 상황이 자주 발생합니다

- 즉  

src="http://www.youtube.com/embed/fDDw3D9Uobo?rel=0"  

이어야하는데 

src="//www.youtube.com/embed/fDDw3D9Uobo?rel=0" 이렇게 검출되는 에러발생

번거롭더라도 'http:' 부분을 타이핑으로 기입하여 [완전한 주소 경로]를 외부컨텐츠메뉴 박스에 입력해주어야 합니다.

안그러면, " 첨부할 멀티미디어 주소를 바르게 입력해주세요 " 에러안내가 뜹니다

아래 그림은 [외부컨텐츠] 메뉴창 사용 설명 입니다 ▼

▲ 복사한  상기 '소스코드' 를 [외부콘텐츠 삽입] 창에 '붙여넣기' 하기 전에

1. 먼저 본문 게시판에서, 동영상을 삽입할 '위치' 를 정한 곳에다가 마우스로 한번 '클릭' 해서 '커서 위치' 로 지정 (= 그림의 뒷 배경 화면  "곡명" 줄 아래 위치에 빨간 세로Bar 표식 자리) 해 주면 정확히 그 위치에 동영상이 삽입됩니다

2. 본문의 삽입될 위치를 먼저 정하고 난 다음에,  상기 '소스코드' 를 복사(= ctrl + c 동시 key누름 ) 하여서 새창으로 열려있는 [외부컨텐츠] 메뉴의 [html 소스입력창] 에다가 붙여넣기 (= ctrl + v 동시 key누름 ) 합니다

※ 작업을 위해서 현재 열려있는 창은 모두 3개 입니다 

- You Tube 동영상 공유소스 사이트 창 /  게시판 본문 글쓰기 창 /  '외부컨텐츠' 메뉴창 

3. [외부컨텐츠] 메뉴창 하단의 [확인] 버튼을 클릭하면,  마우스 커서로 지정했던 본문의 위치 (= "곡명" 줄 아래 위치) 에 정확히 동영상이 이식 됩니다.

▣ 실습 예제:  

★ Tip: 동영상 크기 조정

게시판 폭에 맞춰 줄이거나, 또는 여러개의 동영상을 같은 폭으로 정렬하고자, 동영상의 크기를 수정할 수 있습니다. 이때 중요한 것은 '가로x세로' [원래 비율]을 유지하는 것 입니다

예를 들면 560 x 315 원래 크기를  가로 360 폭으로 줄이려 할 때 세로 크기 는 ?

방정식 비율로 계산해 봅니다 

* 560 x 315 = 360 x (?) 

- (원래세로) 315 x (수정 가로) 360 / (나누기 원래 가로) 560 = (수정세로) 202.5

- 고로:  수정 가로 x 수정 세로 = 360 x 202

 ▼ 계산기 위젯 간편사용

◆ 실습: 동영상 크기 조정해서 붙여넣기 포스팅

추출해서 복사 해놓은 '신형 소스 코드'  (크기: 560 x 315 )  ▼

<iframe width=" 560  " height=" 315  " src=" http://www.youtube.com/embed/fDDw3D9Uobo?rel=0 " frameborder=" 0 " allowfullscreen></iframe>

※팁:  HTML코드 언어는 띄어쓰기 간격이나 심지어 줄바꿈 해서 '붙여넣기' 하여도 전혀 지장없습니다만, 단, 인터넷주소 부분  http://www.youtube.com/embed/fDDw3D9Uobo?rel=0  은 반드시 원래대로 유지해야 합니다.

상기 '소스 코드' 를 복사해서 [외부 컨텐츠] 메뉴창 에 '붙여넣기' 로 

포스팅한 동영상  (크기: 560 x 315 ) ▼

같은 소스코드로, 원본과 같은 배율을 유지한 작은 크기 '360 x 202 ' 로 축소▼

<iframe width=" 360   " height=" 202   " src="  http://www.youtube.com/embed/fDDw3D9Uobo?rel=0   " frameborder="  0  " allowfullscreen></iframe>

※팁:  HTML코드 언어는 띄어쓰기 간격이나 심지어 줄바꿈 해서 '붙여넣기' 하여도 전혀 지장없습니다만, 단, 인터넷주소 부분  http://www.youtube.com/embed/fDDw3D9Uobo?rel=0  은 반드시 원래대로 유지해야 합니다.

크기 수정한 상기 '소스 코드' 를 마우스로 긁어다 복사해서 [외부 컨텐츠] 메뉴창 에 '붙여넣기' 로 

포스팅한 동영상  (크기: 360 x 202 ) ▼

★ 동영상 이식한 위치를 옮기고 싶다면?, 

게시판 글쓰기 수정창을 열어서, 본문중에 동영상 을 포함한 위아래 여백 까지 통째로 마우스로 긁어서 영역지정한 후에, 잘라내기 (ctrl + X  동시 key누름) 한후, 원하는 위치에 커서를 지정하고 '붙여넣기 (= ctrl + v 동시 key누름 )' 하면 됩니다

■ by 아프로만 / 2013-02-03

노하우업 카페 / 멀티미디어 -  http://cafe.daum.net/knowhowup/FsQ1/2

◆ 실습: 동영상 '링크주소' 만으로 포스팅 게시되는 곳 

추출한 동영상 '링크주소'☞   http://youtu.be/fDDw3D9Uobo  이것을 마우스로 긁어서 복사한 다음 아래 장소에 '붙여넣기' 해 봅니다. 

* 다음카페의 - 본글 하단의 [댓글 칸] , [한줄 메모장] 게시판

* 트위터 창, 페이스북 담벼락 본문 과 댓글  등등..

상기 장소는 동영상 '소스코드' 가 아니라 '링크주소(=URL)' 만이 동영상으로 작동 됩니다

- You Tube / 다음팟 / 네이버 팟 / Vimeo 등등.. 모두 마찬가지