HomeBlogPersonalProject

PROJECT

Wordy - 영어 단어 마우스 툴팁 번역 & 미국/영국 발음 정보

단축키 (맥: Cmd, 윈도우: Ctrl)를 누른 상태에서 영어 단어에 마우스를 올리면 뜻과 발음 정보를 알려줍니다.
단축키 (맥: Cmd, 윈도우: Ctrl)를 누른 상태에서 영어 단어에 마우스를 올리면 뜻과 발음 정보를 알려줍니다.

동기

영어 문서, 블로그를 읽으면서 영어 단어를 검색하는 일이 많아서 비슷한 기능을 가진 크롬 익스텐션을 사용해왔었는데 단축키를 눌렀을 때만 발음 정보와 함께 단어의 의미를 확인하고 싶어서 직접 제작하였습니다.

프로세스

  1. mousemove 이벤트의 헨들러에 debounce를 걸어줍니다.
  2. 헨들러가 동작하면 마우스가 가르키고있는 단어를 가져옵니다.
  3. 크롤링을 통해 영어의 뜻과 발음 정보를 가져옵니다.
  4. 마우스의 위치 및 여유 공간을 계산한 후 툴팁을 통하여 정보를 보여줍니다.

웹 스토어