메바동 서식지

크롬 확장 프로그램인 '유데미 한글 자막'. 유데미 강의를 보려면 구글 크롬을 항상 실행시켜줘야 했다. 하지만 맥북에서 크롬을 사용하게 되면 배터리 소모량도 더 많고, 뭔가 발열도 더 심한 것 같아 늘 Safari 확장을 만들어 사용하고 싶었다. 찾아보니 쉽게 크롬 확장 프로그램을 Safari용 Web Extension으로 변환하는 방법이 있었다. xcrun safari-web-extension-converter ${확장/경로} 위 명령어를 날리면 크롬 확장이 사파리용 확장 프로젝트로 변환이 된다. 당연한 소리겠지만 Mac OS 환경이어야 하고, Xcode가 깔려있어야 한다. 이렇게 크롬 확장을 만들었던 폴더를 두고 터미널을 이용해 해당 경로로 이동한다. 그 후 위의 명령어를 날리면 Safari용 확장 ..

유데미 한글 자막을 만들고 사용자가 늘어가는 것에 즐거움을 느낀 것도 잠시, 2022년이 시작함과 동시에 너무 나태해져 버린 나는 요청사항이 있어도 수정할 의욕이 생기지 않았었다. 더군다나 핑계로 들릴 수도 있었겠지만 2022년이 된 후 종종 출장을 가게 되어 더욱 의욕이 생기지 않았다. 4월 같은 경우는 회사에서 보낸 평일과 출장지에서 보낸 평일이 거의 비슷비슷했던 것 같다. 아무튼 나태해진 나를 다시 열심히 움직일 수 있도록 하기 위해 지난 2월에 사용자들이 꽤나 많이 (2명 정도?) 요청한 자막 위치 변경 기능을 넣어 업데이트하였다. 그 외에도 대본을 보이지 않게 한 뒤 자막 출력이나 유데미 코리아에서 공식적으로 만든 한글 자막 동시 표시 요청 등이 있었는데, 전자의 경우 대본에서 번역된 내용을 가..

html 안에 html을 넣고 싶었다. html로 문서를 작성 중이었는데 하나의 파일이 너무 지저분해지는 것 같아서 각 세부내용들은 다른 파일에 작성하고 불러오는 것이 목적이었다. 위처럼 contents라는 id를 가진 div 안에 contents.html에 작성된 내용을 넣고 싶었다. Javascript의 fetch를 이용해서 html text를 가져와 innerHtml을 이용하면 손쉽게 해결할 수 있었다. 물론 이 방법은 index.html을 그냥 브라우저에서 여는 형식으로는 동작하지 않는다. fetch를 이용하는 방법이기에 이 글을 읽는 사람이라면 알고 있을 것이다. async function fetchHtmlAsText(url) { return await (await fetch(url)).text..

이전에 기능 추가 게시글을 올릴 때의 유데미 한글 자막의 사용자 수는 243명이었는데 이제는 361명이 되었다! 사실 한 동안 리뷰도 없고 잠잠해서 이제는 그냥 쓰는 사람들만 쓰나 보다~ 생각했는데 host permission 수정 요청도 있었고, (나는 기업체에서 사용하는 유데미가 따로 있는지 이 분 덕분에 알 수 있었다.) 또 하나의 리뷰가 달렸는데 영상을 재생할 때마다 한글 자막 옵션을 선택하는 것이 불편하다는 리뷰가 달렸다. 사실 처음 만들 때 선택한 옵션을 유지하는 기능을 만들까 말까 고민을 했었다. 고민을 했음에도 넣지 않았던 이유는 누군가 이 확장을 사용해 줄지는 생각도 못했다. 나 혼자 사용할 확장으로 생각했었고, 때문에 귀찮은 기능들은 빼버리자!라고 생각을 했던 것 같다. 아무튼 이제는 ..

5월에 제작한 '유데미 한글 자막' 크롬 확장 프로그램의 사용자가 243명이 되었고 리뷰도 14개나 달렸다! 첫 리뷰를 받았을 때도 기분이 매우 좋았는데 그 이후에도 리뷰가 하나씩 달릴 때마다 기쁨과 뿌듯함이 날 만족시켜줬다. 그러다가 이번에 리뷰가 하나 달렸는데 만들 때는 한영 자막을 보는 것이 편해 한영 자막만 표시되도록 했었는데 창모드로 보기에 영상이 너무 작아진다는 의견을 달아주셨다. 라고 다짐을 했지만 너무 오랜만에 보는 코드라서 눈에 들어오지 않았고, 눈에 들어오지 않으니 의욕이 생기지 않았다. 그래도 어찌어찌 어제 완성을 시켜 검토 요청을 하였고 오늘 업데이트가 되었다! 기존에는 이렇게 못생긴 번역 버튼을 만들어 해당 버튼을 눌렀을 때 한영 자막이 나타나도록 했었다. 저 부분이 너무 신경 쓰..

오늘 저번에 제작한 크롬 확장인 '유데미 한글 자막'에 리뷰가 달렸다! 처음 달려보는 리뷰라서 하루 종일 기분이 너무 좋았다. 내용을 보니 2줄 자막부터 영문과 한글이 겹쳐 보이는 현상이 있다는 내용과, 자막을 '동영상 아래 표시' 말고 영상에 겹쳐서 나오는 기능을 추가해 줬으면 좋겠다는 내용이었다. 테스트할 당시에 자막이 한 줄짜리로 되어 있는 영상으로만 테스트해서 두 줄 이상 표시될 시 저렇게 난장판이 되는지 몰랐었다. 그래서 한 줄짜리 자막에는 영문과 한글이 같이 붙어 있는 게 보기 좋다고 margin-top을 음수 값을 줘서 서로 붙게 만들어 놨는데 그 부분이 이런 문제를 일으켰다. margin-top 값이 문제가 되기 때문에 영문 자막의 높이를 가져와 한글 자막의 높이보다 높을 경우 margin..

개발자가 되고 싶은 메바동은 5월 6일 기초를 다지겠다고 Udemy에서 강의를 구매하였고, 20일 정도가 지난 지금 강의를 단 1개도 시청하지 않았다. 물론 공부를 하기 싫은 마음도 있었지만 정말 큰 문제는 그게 아니었다. 정말 정말 공부를 해서 기초를 다지고 싶었고 어서 빨리 심화 과정으로 넘어가 프로젝트도 진행하고 싶었고 개발자다운 모습을 갖추고 싶었다. 정말 큰 문제는... 영어를 모르겠다. 어린 시절 시골에서 자랐던 메바동은 초등학생 시절 영어의 중요성을 느끼지 못하였다. 영어 시간은 단지 외계인이 나오는 프로그램을 보면서 노래를 따라 부르는 시간이었을 뿐. 그렇게 시간이 흘러 중학교에 올라가고 기초가 없던 나는 영어의 중요성을 알지만 아무것도 모르는 상태가 되었고, 아무것도 모르니 흥미가 생기지..

Javascript의 window.open()을 이용하여 팝업창을 열었을 때, 해당 창이 닫힐 때 특정 행동을 수행하고 싶었다. 찾아보니 beforeunload 이벤트를 설정해주면 됐었는데 열린 팝업창의 스크립트에서 설정하는 방법이 있고, 팝업창을 여는 곳에서 직접 설정해주는 방법이 있었다. 열린 팝업창의 스크립트에서 설정하는 경우는 그냥 window.addEventListener('beforeunload', function(event) { // 특정 작업 }); addEventListener를 통해 beforeunload 이벤트를 정의해주면 된다. 하지만 내가 원한 작업은 부모 페이지의 요소를 변경하는 것이기 때문에 팝업창에 이벤트를 정의해주고 opener. ~ 하면서 작업하는 것보다 부모 페이지에서 ..

오늘 이것저것을 하던 중 Ajax의 결괏값을 변수에 대입하려고 하였는데 아무리 변수에 대입을 해도 원하는 결과가 나오지 않았다. var useYn; $.ajax({ url: 'http://localhost:8080/example', dataType: "json", type: "POST", data: { userSeq: $('#userSeq').val() }, success: function (result) { useYn = result; }, }); 이런 식으로 사용자의 시퀀스로 DB에 사용 여부를 조회한 다음 true, false를 useYn에 대입해주려고 하였다. 그런데 계속 원하는 결과가 나오지 않았고 디버그를 해보니 useYn의 값이 계속해서 undefined 였다. 그래서 jQuery.ajax(..

유튜브를 보다 보면 한국인이 올린 영상에 아무리 스크롤을 해도 한글로 작성된 댓글이 나오지 않는 경우가 많았다. 그래서 올해 초부터 '기회가 된다면 한글로 작성된 댓글만 필터링해서 보여주는 크롬 확장을 만들어보자.'라고 생각만 하고 만드는 방법도 제대로 모르겠고 귀찮기도 해서 만들지 않았었다. 이제 회사를 9개월 정도 다니다 보니 대충 어떤 식으로 뭘 찾아서 응용하면 되는지 알 수 있는 능력이 생긴 것 같았고 계속 생각만 했던 한글 댓글만 보여주는 확장 프로그램을 만들기로 하였다. 우선 생각한 게 댓글을 불러오는 ajax가 있을 거라 생각하였고 무작정 유튜브에 들어가 관리자 도구를 열었다. 그런 다음 댓글을 불러온 뒤 네트워크 탭에서 확인을 해보니 알기 쉽게 comment라고 붙어있는 ajax가 바로 보..