복사 방지 기능이 설정되어 있는, 블로그 상의 네이버 동영상의 소스코드를 찾아내는 방법
황 안토
해당 블로그 상에 네이버 동영상이 5개 들어 있다고 가정하자.
크롬 브라우저 상에서 해당 블로그를 띄운 상태에서 F12키를 누른다.
그러면 바로 우측에 개발자 화면이 뜬다.
간단히 개발자 화면 구조에 대해 훑어 보면, 상단에 "elements (요소)", "consol", "Recorder" 태그가 나타난다.
">>"는 "더보기"이다. 클릭하면, 단축메뉴 형태로 "소스","performance insights", "네트워크","성능","메모리","application","보안","Lighthouse","AdBlock"이 나타난다.
제목과 관련하여 밀접하게 관련되는 사항은 "elements (요소)"에 있다.
"elements (요소)" 태그를 클릭하면 HTML이 나타난다.
즉, "<html><head>...<.head><body>..</body></html>"의 구조이다.
그 내용을 살펴보면 당연히 <body> 속의 <iframe>안에 네이버 동영상의 위치를 가리키는 URL주소가 있을 것이다.
그러나, 처음 나타나는 화면에는 1개의 <iframe>만이 보여지는데 네이버 동영상 주소를 갖고 있지 않는다.
전체 내용을 보기 위해서는, "검색"칸이 나타나도록, 키보드 상에서 "CTRL"키와 "F"를 동시에 눌러줘야 한다.
그러면 "</html>" 하단의 "html", "body" 바로 아래에 희미한 글자로 "문자열 선택기 또는 XPath로 찾기"라는 빈 검색칸이 생길 것이다.
그 안에 "inKey"를 입력한다.
그러면 html 내용 중에서 "inKey"이 들어 있는 줄이 나타나기 시작한다. 6개가 존재한다.
예를 들면, "var inkey = "";" 같은 것이 나타날텐데 이는 변수 지정이니 내가 찾는 내용은 아니다.
검색창에는 "inKey 1/6"이라고 자동으로 보이는데 6개중에 1번째의 "inKey"가 찾아졌음을 알 수 있다.
첫번째 inKey는 우리가 찾는 네이버동영상 주소를 가지고 있지 않는다.
계속 내가 찾는 "inkey"가 발견될 때까지 "Enter"키를 두드린다.
검색창에는 "inKey 2/6"이라고 자동으로 보이는데 6개중에 2번째의 "inKey"가 찾아졌음을 알 수 있다.
예를 들면, "<script type="text/data" .... ,inkey....."가 검색되면 잘 찾아낸 것이다.
그 내용에 커서로 파랗게 범위를 정한 후, 마우스 우측을 누르면 short menu(단축 메뉴) 창이 뜰텐데, "복사"를 선택하고 이어서 "요소 복사"를 선택한다.
이때 메모장을 윈도우 창에 띄워주면 좋다.
메모장 창에 CTRL+V 로 붙여넣기를 한다.
"<script type="text/data" class="__se_module_data" data-module="{"type":"v2_video", "id" :"SE-dba6f95d-f761-4e23-81a4-e8ba9d7566de", "data" : { "videoType" : "player", "vid" : "D3AA7C1C17F365823E957F0CCCD89C1657BB", "inkey" : "V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b", "thumbnail": "https://phinf.pstatic.net/image.nmv/blog_2024_03_26_823/a7ee5885-eafb-11ee-b3fa-b4055dce021e_01.jpg", "originalWidth": "1280", "originalHeight": "720", "width": "886", "height": "498", "contentMode": "fit", "format": "normal", "mediaMeta": {"@ctype":"mediaMeta","title":"조조 33회","tags":[],"description":null}, "useServiceData": "false"}}"></script>"가 메모장에 복사되었다고 가정하자.
여기서 """는 따옴표를 의미한다.
우리에게 필요한 것은 "vid"와 "inkey"이다.
"D3AA7C1C17F365823E957F0CCCD89C1657BB"가 "vid"값이고. "V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b"가 inkey값이다.
이 두 값은 네이버 동영상 서버로 보낼 때 약속된 parameter 값이다.
정해진 약속대로 정확하게 보내지 않으면, 해당 네이버 동영상을 보유한 네이버 서버에서 에러 코드를 발생시킨다.
정확한 parameter 값이 전달되어야 해당 동영상을 서버가 송출해줄 수 있는 것이다.
그리고, 2개의 parameter가 들어가는 format은, https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=....&outKey=..."여야 한다.
이 또한 서버와 약속된 형태이므로 정확해야 한다.
동영상 창이 뜰 때 창폭과 높이를 지정하고 싶으면,
"https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=.....&outKey=...&width=500&height=380",이렇게 추가해도 된다.
위에 찾아낸 2개의 parameter로 채우면, 동영상이 있는 url주소는
"https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b&width=500&height=380"가 된다.
https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b
블로그 내에 동영상 화면이 드러나게 끼워넣을 때는,<iframe src=https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?
vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b width=500 height=380>으로 HTML을 작성하면 된다.
또는 클릭할 때 동영상창이 새 창으로 떠오르게 하려면,예를 들어,
<a target=_blank href=https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1260877ff0c265c88af057707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b>조조 33회</a>"로 HTML을 작성하면 된다.
나머지 4개의 네이버 동영상의 위치도 위와 같이 반복하면 찾아낼 수 있다.
그런데, 네이버 동영상이 잘 나오다가 어느날 갑자기
"재생가능 시간이 만료되었습니다. 페이지 새로고침후 다시 실행해 주시기 바랍니다."로 나오는 경우가 있다. F5키 혹은 CTRL+R키를 눌러 새로고침을 해도 마찬가지라면,
vid값이 바뀌었거나 inKey/outKey 값이 바뀌었기 때문이다. 또는 두 값 모두 바뀌었기 때문이다.
주기적으로 vid값과 inKey값이 바뀌는 모양인데, 정확한 이유는 모르겠다.
바뀐 inKey값을 알아내기 위해서는
F12 ---> Element 선택 --> CTRL+F ---> "inKey" 검색 ......과정을 거쳐 알아내면 된다.
예를 들면, 블로그 상의 첫번째 동영상의 inKey값이 다음과 같이 바뀌어 있다고 가정해보자.
"<script type="text/data" class="__se_module_data" data-module="{"type":"v2_video", "id" :"SE-dba6f95d-f761-4e23-81a4-e8ba9d7566de", "data" : { "videoType" : "player", "vid" : "D3AA7C1C17F365823E957F0CCCD89C1657BB", "inkey" : "V1294b9be5e490965e75957707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b", "thumbnail": "https://phinf.pstatic.net/image.nmv/blog_2024_03_26_823/a7ee5885-eafb-11ee-b3fa-b4055dce021e_01.jpg", "originalWidth": "1280", "originalHeight": "720", "width": "886", "height": "498", "contentMode": "fit", "format": "normal", "mediaMeta": {"@ctype":"mediaMeta","title":"조조 33회","tags":[],"description":null}, "useServiceData": "false"}}"></script>"
이 경우, 동영상 주소는
"https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1294b9be5e490965e75957707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b" 가 되므로,
동영상이 새 창으로 떠오르게 하려면,
<a target=_blank href=https://serviceapi.nmv.naver.com/ugc/flash/convertIframeTag?vid=D3AA7C1C17F365823E957F0CCCD89C1657BB&outKey=V1294b9be5e490965e75957707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b>조조 33회</a>"로 HTML을 수정하면 된다.
2025.6.15.일.
p.s. 네이버 동영상을 다운로드 받는 방법:
네이버 동영상 맨하단 오른쪽에 4가지 화질 선택(예: 720p HD/480p/270p/144p)이 가능하다고 가정하자.
위의 F12키를 눌렀을 때의 화면 예에서 상단에 나타난 "elements (요소)", "consol", "Recorder", "Performance insights", "소스", "네트워크", "성능", "메모리", "보안", ">>(더보기)" 태그 줄을 보라.
"네트워크"를 클릭하면 다음과 같이 화질이 다른 동영상 4개의 주소를 얻어낼 수 있는 정보가 나타난다.
CTRL+R (Rsfresh)키를 눌러라고 나오면 "CTRL+R"키 (혹은 F5키) 를 눌러준다.
상단 맨 왼쪽의 검색칸에 자동으로 "?key"가 박히며 검색된 내용이 나타난다.
맨 왼쪽의 검색칸이 있는 줄에 "반전, 테이터 URL숨기기, 전체 , Fetch/XHR, JS, CSS, 이미지.미디어, 글꼴,문서, WS, Wasm, 매미페스트, 기타, 차단된 쿠키 있음, 차단된 요청, 타사요청"이 나타나는데 "전체 (All)"만 회색으로 표시되어 현재 선택된 범주(Catagory)임을 알려주고 있다. 또는 "Fetch/XHR"를 클릭하여 회색으로 표시되게 해도 된다.
그 아래에는 2개 부분으로 나누어지는 내용이 나온다.
즉, "이름", "헤드", "페이로드(Payload)" , "미리보기(Preview)", "응답"' "시작점", "타이밍", "쿠키"가 제목에 해당되겠다.
"이름"은 왼쪽 부분이고, "이름"에 대한 자세한 내용들, 즉 "헤드", "페이로드" , "미리보기", "응답"' "시작점", "타이밍", "쿠키"가 오른쪽 부분에 내용들이 나타난다.
예를 들어 "이름" 밑의 나타나는 내용에는 5가지가 있다고 가정하자.
각각 맨 줄에 checkbox가 있어서 체크표시를 하면 해당 동영상이 선택되어 자세한 정보(Detail)가 오른쪽 부분에 나타난다.
편의상 다음과 같이 checkbox 대신 1,2,3,4,5로 숫자를 붙여 보았다.
1. D3AA7C1C17F365823E957F0CCCD89C1657BB?key=V128a575820507d5b069d57707f7ce007402b199379c36ed70f7cf2ce027fe3a41cc757707f7ce007402b&sid=2&pid=df2b1fcc-38a8-4967-b5ea-37d45c39b231&nonce=1750487276100&devt=html5_mo&prv=N&aup=N&stpb=N&cpl=ko_KR&providerEnv=real&adt=glad&lc=ko_KR
("D3AA7C1C17F365823E957F0CCCD89C1657BB"는 vid값이다.)
2.
E78434384CBE604B7629C2E152E19325A5BF?key=V1249b0e0ddc3559b2e9a5d241b37b14007b5db07f5078f6b187544527c25b77d128b5d241b37b14007b5&sid=2&pid=42fe118f-a8af-42ac-a720-134fc44355ed&nonce=1750487276232&devt=html5_mo&prv=N&aup=N&stpb=N&cpl=ko_KR&providerEnv=real&adt=glad&lc=ko_KR
3. 2F4B4EF259A03A843B19C2986311F896C053?key=V12825ab334c0a574eda7080991efbaa99030e81d0422f1697ab97d48625e30a50ebe080991efbaa99030&sid=2&pid=42a83bd4-27ea-417f-ba00-2ea8f7158f63&nonce=1750487276372&devt=html5_mo&prv=N&aup=N&stpb=N&cpl=ko_KR&providerEnv=real&adt=glad&lc=ko_KR
4. 91532B0799EF4E5C3284F0654876EC3B3639?key=V124135b0c281867f62cde77b8bf50c06662720385716ea919523bb04f3af81195950e77b8bf50c066627&sid=2&pid=afa3b7dc-7e6c-431c-b582-97ba726a1478&nonce=1750487276513&devt=html5_mo&prv=N&aup=N&stpb=N&cpl=ko_KR&providerEnv=real&adt=glad&lc=ko_KR
5. 397E5885AAE62CC9439057B87717F5AF7902?key=V126fa0fa001bd95265ab4304ca058cc3ad52104fdc08a16c6abd1965bb7717d1e68d4304ca058cc3ad52&sid=2&pid=fc5bd555-c7de-428a-8108-6751ae2e6bdc&nonce=1750487276639&devt=html5_mo&prv=N&aup=N&stpb=N&cpl=ko_KR&providerEnv=real&adt=glad&lc=ko_KR
왼쪽 부분에서 1번째 checkbox를 체크해보자. 그러면 우측에 나타나는 이에 해당하는 정보가 나타난다.
"미리보기(Preview)"를 선택한다.
"@{tId: "A1KlHq6B_Zj32tp6MJugrA", transactionCreatedTime: 1750487281472,…}
vid
와 inkey
값을 함께 사용하여 동영상을 표시합니다. 예를 들어, 네이버 블로그의 se-component
나 se-video
컴포넌트에서 스크립트 내의 data-module
속성에 vid
와 inkey
값이 포함됩니다.