ocean floor/html floor

동영상 삽입, 댓글과 채팅 기능 그리고 구글 애널리스틱

dankthedust 2021. 2. 26. 23:37

생활코딩의 html 수업 중 기본 베이스는 듣고 남은 부록 강의.

동영상 삽입의 경우, 유튜브에서 삽입하고자 하는 영상의 소스를 불러와 해당 코드를 삽입만 하면 불러온다.

이전 대학수업 간 과제로 좋아하는 아티스트의 오피셜 페이지를 제작했었는데, 이때에도 아티스트의 뮤직비디오, live 영상 등을 가져와 삽입했었다.

유튜브 동영상 삽입

그때와 다른 점은 과제로 만든 페이지에서는 뮤직비디오의 사이즈에 맞추어 레이아웃을 설계하여 플레이어의 여백이 발생하지 않았는데, 지금은 초심으로 돌아가 공부하는 입장으로서 천천히 맞추어 나가고 어느정도 수업을 듣고 익숙해지면 하나의 페이지를 만들어 깃허브에 올려보고 싶다.

 

두번째 강의는 댓글기능, 한가지 더 추가하자면 세번째 강의에서의 캡처 기능까지 삽입을 해보았는데, 코딩을 한 것은 아니고 아직은 소스를 제공받는 것에 불과하지만 서버를 다루게 되고 설계에 어느정도 능숙하게 되면 할 수 있지 않을까. 사실 빠르게 해보고 싶은 마음이 들지만, 잠깐은 접어두고 천천히 하나하나 해가자는 생각이다.

DISQUS 의 댓글 기능(좌), TAWK.IO 의 서비스 챗 기능(우)

간단히 소스를 불러와 이용할 수 있었다. 확실히 편리하다는 생각은 들지만 다양하게 활용하기 위해서는 유료로 사용해야 한다는 점. 페이지의 컨셉, 컬러톤 등 어우러지게 만들고 싶은 마음에서 어쩔 수 없지만 괜히 아쉬운 마음이 들었다. 

 

부록 마지막 강의는 웹사이트 방문자 분석기에 대한 내용이었는데, 활용한 프로그램은 google의 analystic이다.

한가지 잠깐 난해하였던것이 있었는데, 구글 어널리스틱에 로그인하여 분석하고자하는 페이지의 주소를 기입하는 과정에서 나에게는 https://로 시작하는 주소가 없는데 하며, 당황했던 점이다. 아무리 쉽다고 생각하고 귀찮다고 생각이 들더라도 강의 영상은 무조건 따라하자라는 생각이 있었는데 단순하게 주소하나에 막혔다는게 좀 당황했지만, 앞전에 깃허브를 통해 서버를 제공받고 주소를 받았던 기억이 있어 깃허브에 로그인을 했다.

여기서 또 등장한 문제는 지금까지 수업하며 코딩한 파일이 깃허브에는 업데이트 되지 않았다는 것인데, 아직 깃허브를 다룬적이 없고 강의 영상을 보고 따라만 한 수준이고 그 수준도 최초 파일 업로드 수준이었다.

다행이 이전에 유튜브에서 깃허브에 대해서 조금은 더 알고자 봤던 영상에서 merge에 대한 내용이 기억이 나서 파일 업로드를 하고 branch를 만들고 merge 하였다. 그때 봤던 영상이 이렇게 도움이 될 지는 몰랐는데 스스로 깃허브를 어느정도 사용했다는게 조금은 뿌듯했다.

google analystic 코드와 사용

그렇게 url을 기입하고 설정을 완료한 후에 코드를 제공받아 사용해 보았다. 페이지를 만들고 나서 실시간으로 분석한다는게 신기하고 정보 제공 범위가 놀라웠다.

언젠가 내가 제작한 사이트에 10명이라도 방문자가 있다면 그 10명에 대한 분석자료를 보는 시간이 흥미로울 것 같다.

 

생활코딩의 html 강의는 모두 들었고 실습도 한번씩 했다. 이제는 css 그리고 js를 들을 차례인데 듣고 나면 한번 페이지 제작을 해봐야겠다. 목표는 3월까지.

4월부터는 잠시동안 노트북을 사용할 수 없기때문에 그 전까지 어느정도 다루어보고 4월에는 잠시 알고리즘과 자료구조, 아니면 <라인개발실록>이라는 유튜브 채널에서 본 라인개발자들이 보았다는 책들을 읽을까 하고 있다.

꿈의 직업은 네이버 계열사이기 때문에 찾아보다가 알게 된 채널인데, 실제 일하고 있는 분들은 기업에서 필요로 하는 인재들일 것이고, 그 분들의 마음가짐이나 공부법, 방식,  그리고 길 등을 엿볼 수 있는 시간이지 않을까 싶어서 가끔씩 시청하고 있다.

 

꿈의 직장을 가지고 계신 분들도, 아직 목표 기업이 없으신 분들도 하나를 선정하고 그 회사에 맞추어 알아보면 유용할 것 같다.