아래 이미지에서 빨간색 점이 마우스 클릭 위치이다.출처: https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

배경 미디엄 블로그를 보다보면 아래와 같이 예상 읽기 시간이 나온다. 예전에 사람이 글을 읽는 데 걸리는 평균 시간을 알아본 적이 있다. WPM(Words per minute) 라고 부르는 단위도 있어서 이미 연구가 있었던 듯 하다. 아래와 같이 여러 나라에 대해서 WPM을 계산한 연구도 있지만 한글은 빠져있다. 한글을 제외하면 평균적으로 190~200 WPM 정도의 속도이다. TimeToRead | Wolfram Function Repository Function Repository Resource: TimeToRead resources.wolframcloud.com 그래서 한글에 대한 WPM을 찾아보다가 120 정도라는 글을 찾았고 한글과 영문의 분포에 따라 적절히 계산하기로 했다. 영어의 경우에는 ..

눈코입 맞추기 게임 만들기 2편 눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코 blog.joonas.io 문제점 2편에서는 얼굴을 제대로 찾지 못하는 이슈를 고치면서, 사진에 있는 모든 얼굴을 인식해서 퍼즐을 만들도록 변경했다. 하지만 아래와 같이 고개를 갸울인 얼굴 사진은 결과가 원하는 대로 나오지 않았다. 따라서 아래의 빨간 네모처럼 얼굴이 회전한 각도를 새로 구하고, 그에 맞게 다시 face landmark를 찾아야한다. 얼굴 회전시키기 정확한 출처는 모르겠으나 주로 face landmark를 추출할 때 68개의 점을 찾는다. 지금까지의 결과 역시 위 68 fac..

눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임 blog.joonas.io 문제점 1편에서는, 사진에서 얼굴 부분의 비율이 작으면 얼굴을 제대로 찾지 못한다는 문제가 있었다. 1편의 마지막에 얼굴 부분만 잘라낸 이미지에서 face landmark를 찾도록 했더니 결과가 개선되는 것을 확인했으니, 이 작업을 그대로 코드로 작성했다. 해결 먼저 이미지에서 얼굴을 찾는 API로 faceapi.detectAllFaces 를 사용할 수 있다. 한 번의 호출로 이미지에서 찾은 모든 얼굴들의 bounding box 배열을 반환한다. const optio..

예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임을 쉽게 만들 수 있지 않을까했다. 얼굴에서 특징점을 추출하는 솔루션은 꽤 오래 전부터 있었기때문에, 어렵지 않게 찾을수 있을거라 생각했고 실제로도 그랬다. 우선은 이미지를 업로드하고 결과를 바로 보기에 웹이 편할 것 같고, 문제를 만드는 것을 포함해서 게임 UI 까지 구현하는 것도 고려해서 javascript 라이브러리로 찾아보았다. 처음에는 OpenCV-javascript 를 사용해보려고 했는데, 생각만큼 얼굴 사진에서 face landmark 를 잘 찾아내지 못했었다. 얼추 찾기는 하는데 만족스럽지는 못했다. 그래서 ML..

1. 실제로 현재 git config 에 origin 이 없어서 발생하는 오류일 수 있다. 아래 명령어로 remote.origin 주소가 올바르게 설정되어있는 지 확인하고, git remote -v 없다면 아래와 같이 배포하고자 하는 git repository의 주소를 추가한다. git remote set-url origin https://.... 2. origin 설정은 분명 잘 되어있는데 안되는 경우 Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option). npm 과 관련한 모듈과 ..

Context BOJ Extended의 일부 기능을 성능 최적화 하는 중에 생긴 일이다. 확장 프로그램의 특성상, 로드되는 DOM 을 조작하는 일이 많다. 그 중에서 불필요하게 DOM을 조작하느라 속도가 느린 부분이 보여서, 렌더링 단계를 생략할 수 있도록 CSSOM으로 역할을 넘기는 작업을 하고 있었다. 그런데 페이지 로드가 평소보다 심하게 느려져서 확인해보니, 아래와 같은 상황이 발생했다. 해결 무슨 일인지 확인하기 위해서 MDN 문서를 확인했는데, 다음과 같은 문장이 있었다. innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다. 말 그..

예전에 블로그 스킨을 수정한 적이 있다. 블로그 스킨 수정 반응형이면서 심플했던 티스토리 기본형 #2를 사용하고 있었다. 오랫동안 사용했는데, 갑자기 몇 가지 고치고 싶은 부분이 생겼다. 왼쪽에 블로그 제목이 너무 큰 부분을 차지하고 있어서, 글에 blog.joonas.io Version 1.4 - 2023/06/03 - 다크 모드 지원 (오른쪽 상단 스위치로 수동 설정 또는 시스템 설정을 통해 자동으로 반영) Version 1.3 - 2023/01/29 - 글 목록에서도 목차(TOC) 생성을 시도하는 오류 수정 - 코드 블럭에 대한 CSS를 아래와 같이 수정 Version 1.2 - 2023/01/03 grid layout으로 인한 레이아웃 깨지는 버그 수정 Version 1.1 - 2022/06/18..