소개
저는 글을 쓸 때 레퍼런스 삼았던 url 들을 저장해두기 위해 한 탭에 모든 창을 띄워둔 후
글을 우다다 모두 작성하고 마지막에 출처 칸을 남겨두고 띄워뒀던 모든 url 들을 복사해서 붙혀넣는 방식으로 출처를 표기해왔는데요
사실 이 과정이 여간 귀찮은 일이 아니더군요
그래서 사실 비양심적이지만 출처를 남기지 않은 경우가 많았던 거 같습니다. 호호
그렇다보니 내가 썻던 글에서 레퍼런스를 찾고 싶을 때 찾지 못한 경우가 너무 많았습니다.
모든 레퍼런스들을 북마크에 저장해두기에는 북마크에서 나중에 다시 지울 생각하면 귀찮기도 하고요
그 ! 래 ! 서 ! 레퍼런스 목록들을 편하게 저장, 삭제 하고 글을 쓸 때 자동으로 출처를 표기 해주는 확장프로그램을 개발해봤습니다.
2025/01/03 현재 거지같은 저의 디자인 감각과 잦은 버그들이 존재합니다.
그래도 굴러는 가서 우선 포스팅 합니다 포항항
사용법
출처 저장 및 제거
탭을 돌아다니며 포스팅 할 글에서 사용 할 레퍼런스 사이트가 있다면 사이드 패널을 열어 저장해주면 됩니다.
저장하는 공간은 익스텐션에게 할당된 chrome.storage 를 이용하여 직접 제거하지 않는 한 휘발 되지 아니하며 해당 데이터는 구글 크롬 브라우저에서 여러 창, 탭에서 공유 됩니다.
더 이상 사용하지 않는 출처들은 휴지통 아이콘을 클릭하여 개별적으로 제거하거나 목록 초기화를 통해 모든 레퍼런스를 제거 할 수 있습니다.
글 쓰기에서 사용법
출처 변환 기능은 https://velog/write* 주소에서만 사용 가능합니다.
글 쓰기, 임시 저장 글 수정, 글 수정 등에서 사용 가능합니다.
저장하기 위해선 연필 아이콘을 클릭 해 레퍼런스 목록을 글에 첨부된 레퍼런스로 옮겨줘야 합니다.
이후 벨로그에서 글을 작성 할 때 사용할 출처의 레퍼런스의 번호를 다음과 같이 표기 합니다.
출처 표기 예시
치킨의 근본은 아무래도 황금올리브다.[[2]](https://m.blog.naver.com/yuna_1024/222675639014)출처가 전환 되고 난 후 커서는 가장 마지막으로 전환된 텍스트의 마지막으로 이동합니다.
수동 전환
수동 전환은 텍스트 전환 버튼을 클릭하여 전환합니다.
이렇게요
치킨의 근본은 아무리 생각해도 황금 올리브다.[1]
자동 전환
자동 전환 기능은 자동 변환 토글을 on 상태로 만든 경우 사용 가능합니다.
마지막 입력으로부터 500ms 이후 전환이 이뤄집니다. 이렇게요
그런데 요즘 크런치 버터 치킨도 기가 막히긴 하다.[2]
다른 방식으로 출처 표기
출처들을 번호처럼 표기 안하고 내가 원하는 방식으로 표기 하고 싶을 때도 있습니다.
그럴 때는 레퍼런스를 클릭 한 후 버튼을 클릭하여 원하는 방식으로 클립 보드에 복사해 사용할 수 있습니다.
예를 들어 이렇게요
개인적으로 교촌 허니콤보는 별로야
출처 목록 표기
사용 한 출처들은 목록 복사 버튼을 눌러 클립 보드에 복사한 후 다음과 같은 형태로 사용 가능합니다.
1. [페이지 제목](페이지 url)예를 들어 이렇게요 저는 매번 글 말미에 적어주고 있습니다.
사용 된 출처 목록 파싱
위에서 언급한 출처 목록 표기를 해준 경우에만 적용 되는 내용입니다.
위처럼 1. [페이지 제목](페이지 url) 형태로 출처 목록을 저장해뒀다면
해당 글 쓰기 페이지에 접근할 경우 자동으로 출처 목록이 저장 됩니다.
이렇게요
사실 원래는 들어가는 순간 바로 파싱하도록 로직을 짜놨는데
제가 원하는 방식으로 동작하지 않을 때도 있더군요.. 이런 경우에는 새로고침 하면 잘 동작 합니다.
만약 버그가 발생한다면 해결법
이 확장 프로그램은 https://velog.io/write* 페이지에 접근 했을 때 동작하는 script 파일을 브라우저에 삽입하여 동작합니다.
이론상 url 이 위 url 양식에 맞다면 스크립트가 정상적으로 삽입 되어 동작해야 하는데요
저의 부족한 실력으로 인해 해당 url에 접근해도 스크립트가 삽입 되지 않아
위 예시처럼 출처 목록이 파싱되지 않거나, 텍스트 전환 버튼이 비활성화 되어 있거나, 자동 변환 기능을 켜둬도 변환이 일어나지 않는 경우가 있습니다.
이런 경우엔 그지같은 확장프로그램이군 하고 생각해주신 후 새로고침을 한 번만 눌러주세요
새로고침을 누르면 정상적으로 스크립트가 삽입 되고 잘 동작 할 것입니다.
실력을 나눠주세요
저의 거지같은 디자인, 거지같은 아키텍쳐, 거지같은 코드로 만들어진 RefNote 확장 프로그램에 버그가 발생하거나, 추가하고 싶은 기능이 있다면 언제든 이슈와 PR을 남겨 기여해주세요
나중엔 메모기능이나 해보지 않았지만 AI를 이용한 문서 요약 기능 등을 넣으려 합니다.. (여전히 있는 버그들부터 고치고 리팩토링들도 좀 하고.. ㅠㅠ)
소통과 협업에 굶주린 우물 안 개구리에게 도움과 관심을 주세요 캬캬갹
링크
- 확장 그램 다운로드 링크 : RefNote - Chrome 웹 스토어
- 깃허브 링크 : yonghyeun/RefNote
