[도구] 스팀잇 폰트체인저 - 한글 폰트 최적화로 스팀잇 포스트의 가독성을 향상시켜줍니다

in #kr7 years ago (edited)

스팀잇 사이트의 경우 영문 포스트는 그나마 이쁘게 설정되어있는데, 한글의 경우 폰트 설정도 엉망이고 줄간격, 자간 등이 전혀 한글 읽기에 최적화가 되어있지 않습니다. 특히 윈도우 환경에서 볼때 포스트 본문에 대해 OS 기본 폰트가 로딩되지 않도록 개발이 되어있어서 정말 안타까웠습니다. 그래서 결국 답답한 마음에 크롬 브라우저 사용자들을 위해서 크롬 확장 프로그램을 개발해 보았습니다.

스팀잇 폰트 체인저 소개

"스팀잇 폰트 체인저" 크롬 확장 프로그램을 설치하면 무엇이 바뀌는지는 다음 스크린샷을 참고해주시면 한눈에 이해하실 수 있습니다.

스팀잇 폰트 체인저 적용전/적용 후

조금 더 구체적으로 지원하는 기능들을 나열하면 아래와 같습니다.

  • 한글 읽기에 최적화된 폰트 크기와 자간/줄간격 자동 설정
  • OS 기본 한글 폰트 적용
  • OS 기본 폰트가 마음에 들지 않는다면 나눔고딕/ 나눔명조 무료 웹폰트를 설정해서 사용 가능

스팀잇 폰트 체인저 주요 기능

스팀잇 폰트 체인저 설치 하기

크롬 브라우저를 사용하신다면 아래 링크를 통해서 바로 크롬 웹스토어로 이동하신 후, 설치해서 사용하시면 됩니다. (안타깝게도 인터넷 익스플로러, 파이어폭스, 사파리는 지원하지 않습니다.)

스팀잇 폰트체인저 (크롬확장프로그램) 바로가기

확장 프로그램을 설치하면 자동으로 가독성 향상 모드가 적용되면서 폰트, 자간, 줄간격을 자동으로 설정해줍니다. 설치 후에 다시 스팀잇 페이지를 열어보면 스타일이 바뀌어 있는 것을 확인하실 수 있습니다. (이미 열려있던 창은 닫고 다시 열거나 새로고침 해주세요)

해당 모드를 비활성화 하고싶으시거나 추가로 한글 폰트를 적용하고 싶으시다면 익스텐션 아이콘을 클릭해서 설정 팝업창을 띄운 후 옵션을 변경해주시면 됩니다.

익스텐션을 설치하면 개인 정보가 유출된다거나 하는 보안 문제는 없나요?

"스팀잇 폰트체인저"는 스팀잇 페이지의 폰트 스타일을 강제로 변경해야하기 때문에 크롬익스텐션 설치시에 "방문하는 웹사이트의 전체 데이터 조회 및 변경" 에 대한 권한 확인창이 뜹니다. 문구만 읽어보면 좀 무섭긴 하지만 실제로는 steemit.com 사이트에 대해서 폰트 스타일을 변경하는것 외에는 전혀 하는것이 없으니 안심하시고 설치하셔도 됩니다.

추가로 "인터넷 사용기록 확인" 권한도 요구합니다. 기술적인 이야기를 좀 덧붙이자면 steemit.com의 경우 SPA(Single Page Application) 방식으로 개발되어있어서, 사이트 내에서 링크를 클릭해서 이동할때 전체 페이지가 릴로드 되지 않고 부분적으로 릴로드 한 후 URL만 변경하고 있습니다. 이 시점을 디텍트해서 "스팀잇 폰트체인저"가 스타일을 업데이트해줘야 하다 보니 URL 변경을 모니터링 하게되었고, 이때문에 해당 권한이 필요해졌습니다. 저도 익스텐션이 사용하는 권한을 최소화 하고 싶었지만 어쩔 수 없이 추가하게 되었으니 이해 부탁드립니다.

그래도 보안은 항상 중요하니 돌다리를 두들겨보고 건너보실 분들이 계실것 같아서 본 익스텐션의 소스 코드를 완전히 공개해 두었습니다.

스팀잇 폰트체인저 소스 코드 확인

마무리

크롬 익스텐션을 활용하면 웹사이트의 스타일을 바꾼다거나, 레이아웃을 변경한다거나, UI 컴포넌트를 추가한다거나 하는 일들을 다양하게 할 수 있습니다. 혹시 더 필요하신 기능이나 개선점이 있다면 피드백 주시면 틈나는대로 업데이트 해보도록 하겠습니다.

Sort:  

역시 개발자분들 짱짱맨. 잘 사용하겠습니다. 근데 혹시 웨일도 되나요?

웨일도 크로미움 기반으로 개발된 웹브라우저라 크롬 익스텐션기능이 된다고하네요. http://blog.iroot.kr/84
링크 참조하셔서 한번 테스트해보시고 잘되는지 알려주시면 감사하겠습니다.

오 아주 잘 됩니다. 정말 감사드립니다. 잘 쓰겠습니다.

Cheer Up! 많은 사람들이 이 포스팅에 관심을 갖고 있나봐요!

  • from Clean STEEM activity supporter

세팅이 좀 더 귀찮은 다른 크롬 익스텐션을 스팀잇 폰트를 대체해 사용하고 있었는데 (CSS 구문을 찾아 그 폰트만 직접 변경하는 방식) 이게 다른 사이트에서 그 폰트가 나오면 동시 적용이 되어서 좀 난감했었습니다..

이렇게 좋은 익스텐션이라니 정말 감사합니다. 팔로우 리스팀하고 갑니다!! ^^

지금도 보기 매우 좋지만 조금 바꿔야 한다면 letter spacing은 0.4보다는 0에 가까운것이 영문과 한글의 동시 적용면에서 좀더 좋지 않나 생각합니다. 타이포그래피쪽에서는 스페이스 공백과 글자 자간폭 값이 비슷하게 될 경우 가독성에 좋지 않다는 의견이 많거든요. 공백대비 자간이 좁아야 성인들이 읽기 편하고, 즉 글자 레터하나하나의 판독보다는 단어를 하나로 묶은 chunk 개념으로 글자들이 눈에 들어오게 된다고 합니다.

맘같아서는 -0.4를 추천드리고 싶지만 그렇게 되면 영문의 가독성을 해치니 그게 참 아쉽습니다 ㅠㅠ

카카오 브런치쪽에서 비슷한 letter spacing을 사용중이라서 해당 디자인이 마음에 들어서 따라해 보았습니다. 다국어 웹사이트 개발을 많이 해봤지만 안타깝게도 한글과 영어를 동시에 만족시킬 수 있는 스타일은 없더라구요. CSS에서 언어가 섞여있는 경우 따로 처리가 불가능하다보니. 그래서 차라리 letter spacing을 조정할 수 있는 옵션을 하나 추가하는쪽으로 만들어 보겠습니다. 의견 감사합니다!

써보니 너무 좋습니다. 만들어 주신 것만으로도 너무 편해 감사하다는 말씀드리려던게 괜히 좀 까불었네요. ^^;

능력자시네요!
외람된 부탁이지만... kr 유저분들은 steemkr.com 도 많이 쓰시는데 같이 적용가능할까요???!!!

와우!!!
미약하나마 풀 보팅하고 갑니다~~

Thanks for sharing!!

감사합니다!! 덕분에 스팀잇 생활이 더 편해질 것 같아요>_<)b

우와 유용한 정보 공유해주셔서 감사합니다.

행운을 나누어 주신 모든 분들께 유용한 게시물

와우 개발자분들은 역시 ㄷㄷㄷ 하군요! 최고입니다!