[생활코딩] WEB1(HTML_11) 부록 : 코드의 힘

* Windows 운영체제 기준으로 작성되었습니다.

 

§ 부록 : 코드의 힘

 

1. 동영상 삽입 → Click!

먼저 유튜브를 이용해 웹 페이지에 넣고싶은 영상을 골라줍니다. 혹여나 저작권 문제가 발생할까 싶어 관련 법 조항을 찾아보았습니다!

 

 

[유튜브 이용약관 제4조 A항]
A. 귀하(유튜브 서비스 이용자)는 YouTube의 사전 서면 승인 없이는 본 서비스 또는 콘텐츠의 어느 부분이라도 그리고 이를 어떤 매체로도 배포하지 않을 것에 동의합니다. 단, YouTube가 본 서비스에서 제공된 기능(예를 들어, Embeddable Player)을 통하여 그러한 배포를 위한 수단을 제공하는 경우는 제외합니다.

[유튜브 이용약관 제5조 B항]
B. 콘텐츠는 있는 그대로 귀하에게 제공됩니다. 귀하는 본 서비스의 제공된 기능을 통하여 의도한 대로, 그리고 본 약관에 의해 허용된 대로 참고 목적 또는 개인적인 목적에 한하여 콘텐츠에 접속할 수 있습니다. 귀하는 해당 콘텐츠에 대하여 본 서비스에서 YouTube가 표시한 “다운로드” 또는 그와 유사한 링크를 발견하지 않는 한 콘텐츠를 다운로드 하면 안 됩니다.

[유튜브 이용약관 제6조 C항]
C. 귀하는 귀하의 콘텐츠에 대한 소유권 전부를 보유함을 명확히 합니다. 그러나, YouTube에 콘텐츠를 제출함으로써~, ~본 서비스의 모든 이용자에게, 본 서비스를 통하여 귀하의 콘텐츠에 접속하고, 본 약관 및 본 서비스의 기능을 통하여 허용되는, 그 콘텐츠의 이용, 복제, 배포, 전시, 발표, 온라인에 제공하거나 전자적인 방법으로 전송하고, 공연할 수 있는 비독점적 라이센스를 본 서비스의 모든 이용자에게 허여합니다.

 

링크를 공유하는 경우 직접적으로 동영상을 복제하거나 전송하는 것이 아니라 동영상으로 찾아가는 주소를 알려주는 것이기 때문에 저작권 침해에는 해당하지 않는다고 하며, 유튜브에서 제공하는 iframe 소스코드를 게시글에 첨부하여 유튜브 플레이어로 재생할 수 있도록 하는 것 역시 약관상 허용되어 있음을 볼 수 있습니다.

출처) https://www.copyright.or.kr/kcc/counsel/qna/detail.do?queAnsSeq=373&categorySeq=0&subCategorySeq=0&recommendYn=false&queAnsQuestContent=&pageIndex=1

 

그래서 저는 제가 좋아하는 노래를 넣어보려고 합니당~!! iframe 소스코드는 유튜브에서 공유 버튼을 누르면 "< > 퍼가기"라고 되어있는 버튼을 통해 가져올 수 있습니다. 저는 1.html에 <p></p>태그를 이용해 넣어줄게요.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/2YVMusIxisY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

이렇게 영상이 삽입된 것을 볼 수 있습니다.

---

2. 댓글 기능 추가 → Click!

 

웹사이트의 방문자들과 상호작용할 수 있도록, 댓글 기능을 추가해봅시다. 댓글 기능을 직접 구현하려면 html만으로는 힘들고, backend의 기술이 필요합니다. 들어온 댓글이 스팸인지 아닌지를 기계가 판단할 수 있도록 스팸 차단 기능, 사용자의 SNS로 연동, 이미지 업로드 등과 같은 여러 기능들이 있기 때문에 직접 구현하기에는 어려움이 따릅니다. 그래서 DISQUS라는 서비스를 사용해 웹 페이지 하단에 댓글을 추가해보아요! DISQUS 말고도 LiveRe라는 서비스도 좋으니 이용해보실 분들은 이용해보세요!

 

DISQUS 사이트에 접속해 회원가입을 진행해주고나면 이런 화면이 뜹니다. 원래 계정이 있으신 분들은 로그인 하신 후 Home → 톱니바퀴 모양 클릭 → Add Disqus To Site를 클릭하시면 저런 화면이 뜹니다.

여기서 아래 버튼(I want to install Disqus on my site)을 클릭해주시면

이런 화면이 뜨고, 웹사이트 이름을 써주고, 카테고리, 언어를 설정해주면

1번에 코드가 뜹니다. 이 코드를 복사해와서 댓글창을 넣고 싶은 html 문서에 넣으면

안 들어가집니다ㅠ 웹서버를 통하지 않고 그냥 파일 형식으로 열려고 했기 때문입니다. 웹서버를 통해 열어주기 위해 localhost/index.html 로 들어가주면

댓글 창이 잘 뜨는 것을 볼 수 있습니다!

---

3. 채팅 기능 추가 → Click!

 

이번에는 웹사이트에 방문자와 채팅할 수 있는 기능을 넣어보겠습니다. 이 역시 tawk와 같은 서비스를 사용하면 무료로, 코드만 추가해 쉽게 사용할 수 있습니다. 이 사이트 역시 회원가입부터 먼저 해볼게요.

로그인 후 Administration(톱니바퀴 모양)을 클릭한 후 + 모양을 눌러주시면 위와 같은 사진이 뜹니다. property name과 사이트 url을 작성해주면 되고, url의 경우 127.0.0.1로 작성했습니다. 그러면 위젯 코드가 나오는데 나온 이 위젯 코드를 복사해서 </body> 태그 앞에 붙여주면 완성입니다.

저는 오른쪽 위에 채팅이 뜨고, 색 역시 따로 설정을 해 준 경우이고, default 값은 오른쪽 아래 초록색으로 채팅 표시가 뜹니다~!!

---

4. 방문자 분석기 → Click!

 

웹사이트에 방문한 사람의 수, 방문 경로, 어떤 환경에서 웹 사이트를 방문했는지 등의 정보를 알 수 있는 방문자 분석기의 경우 google analysis를 이용해 볼 예정입니다. 계정이 없기 때문에 일단 계정을 생성했습니다. 그 후 추적 정보>추적 코드를 누르면 나오는 범용 사이트 태그 코드를 복사해 html 페이지에 넣어주었습니다. 이 코드는 Head 태그의 안쪽에 넣어주어야 합니다.

다 작성해주면, 이런식으로 어느 지역에서 방문했는지, 어떤 언어를 사용하는지, 어떤 인터넷 환경에서 접속했는지 등의 정보를 얻을 수 있습니다!