스팀잇 사이트의 경우 영문 포스트는 그나마 이쁘게 설정되어있는데, 한글의 경우 폰트 설정도 엉망이고 줄간격, 자간 등이 전혀 한글 읽기에 최적화가 되어있지 않습니다. 특히 윈도우 환경에서 볼때 포스트 본문에 대해 OS 기본 폰트가 로딩되지 않도록 개발이 되어있어서 정말 안타까웠습니다. 그래서 결국 답답한 마음에 크롬 브라우저 사용자들을 위해서 크롬 확장 프로그램을 개발해 보았습니다.
스팀잇 폰트 체인저 소개
"스팀잇 폰트 체인저" 크롬 확장 프로그램을 설치하면 무엇이 바뀌는지는 다음 스크린샷을 참고해주시면 한눈에 이해하실 수 있습니다.
조금 더 구체적으로 지원하는 기능들을 나열하면 아래와 같습니다.
- 한글 읽기에 최적화된 폰트 크기와 자간/줄간격 자동 설정
- OS 기본 한글 폰트 적용
- OS 기본 폰트가 마음에 들지 않는다면 나눔고딕/ 나눔명조 무료 웹폰트를 설정해서 사용 가능
스팀잇 폰트 체인저 설치 하기
크롬 브라우저를 사용하신다면 아래 링크를 통해서 바로 크롬 웹스토어로 이동하신 후, 설치해서 사용하시면 됩니다. (안타깝게도 인터넷 익스플로러, 파이어폭스, 사파리는 지원하지 않습니다.)
확장 프로그램을 설치하면 자동으로 가독성 향상 모드가 적용되면서 폰트, 자간, 줄간격을 자동으로 설정해줍니다. 설치 후에 다시 스팀잇 페이지를 열어보면 스타일이 바뀌어 있는 것을 확인하실 수 있습니다. (이미 열려있던 창은 닫고 다시 열거나 새로고침 해주세요)
해당 모드를 비활성화 하고싶으시거나 추가로 한글 폰트를 적용하고 싶으시다면 익스텐션 아이콘을 클릭해서 설정 팝업창을 띄운 후 옵션을 변경해주시면 됩니다.
익스텐션을 설치하면 개인 정보가 유출된다거나 하는 보안 문제는 없나요?
"스팀잇 폰트체인저"는 스팀잇 페이지의 폰트 스타일을 강제로 변경해야하기 때문에 크롬익스텐션 설치시에 "방문하는 웹사이트의 전체 데이터 조회 및 변경" 에 대한 권한 확인창이 뜹니다. 문구만 읽어보면 좀 무섭긴 하지만 실제로는 steemit.com 사이트에 대해서 폰트 스타일을 변경하는것 외에는 전혀 하는것이 없으니 안심하시고 설치하셔도 됩니다.
추가로 "인터넷 사용기록 확인" 권한도 요구합니다. 기술적인 이야기를 좀 덧붙이자면 steemit.com의 경우 SPA(Single Page Application) 방식으로 개발되어있어서, 사이트 내에서 링크를 클릭해서 이동할때 전체 페이지가 릴로드 되지 않고 부분적으로 릴로드 한 후 URL만 변경하고 있습니다. 이 시점을 디텍트해서 "스팀잇 폰트체인저"가 스타일을 업데이트해줘야 하다 보니 URL 변경을 모니터링 하게되었고, 이때문에 해당 권한이 필요해졌습니다. 저도 익스텐션이 사용하는 권한을 최소화 하고 싶었지만 어쩔 수 없이 추가하게 되었으니 이해 부탁드립니다.
그래도 보안은 항상 중요하니 돌다리를 두들겨보고 건너보실 분들이 계실것 같아서 본 익스텐션의 소스 코드를 완전히 공개해 두었습니다.
마무리
크롬 익스텐션을 활용하면 웹사이트의 스타일을 바꾼다거나, 레이아웃을 변경한다거나, UI 컴포넌트를 추가한다거나 하는 일들을 다양하게 할 수 있습니다. 혹시 더 필요하신 기능이나 개선점이 있다면 피드백 주시면 틈나는대로 업데이트 해보도록 하겠습니다.
역시 개발자분들 짱짱맨. 잘 사용하겠습니다. 근데 혹시 웨일도 되나요?
웨일도 크로미움 기반으로 개발된 웹브라우저라 크롬 익스텐션기능이 된다고하네요. http://blog.iroot.kr/84
링크 참조하셔서 한번 테스트해보시고 잘되는지 알려주시면 감사하겠습니다.
오 아주 잘 됩니다. 정말 감사드립니다. 잘 쓰겠습니다.
Cheer Up! 많은 사람들이 이 포스팅에 관심을 갖고 있나봐요!
세팅이 좀 더 귀찮은 다른 크롬 익스텐션을 스팀잇 폰트를 대체해 사용하고 있었는데 (CSS 구문을 찾아 그 폰트만 직접 변경하는 방식) 이게 다른 사이트에서 그 폰트가 나오면 동시 적용이 되어서 좀 난감했었습니다..
이렇게 좋은 익스텐션이라니 정말 감사합니다. 팔로우 리스팀하고 갑니다!! ^^
지금도 보기 매우 좋지만 조금 바꿔야 한다면 letter spacing은 0.4보다는 0에 가까운것이 영문과 한글의 동시 적용면에서 좀더 좋지 않나 생각합니다. 타이포그래피쪽에서는 스페이스 공백과 글자 자간폭 값이 비슷하게 될 경우 가독성에 좋지 않다는 의견이 많거든요. 공백대비 자간이 좁아야 성인들이 읽기 편하고, 즉 글자 레터하나하나의 판독보다는 단어를 하나로 묶은 chunk 개념으로 글자들이 눈에 들어오게 된다고 합니다.
맘같아서는 -0.4를 추천드리고 싶지만 그렇게 되면 영문의 가독성을 해치니 그게 참 아쉽습니다 ㅠㅠ
카카오 브런치쪽에서 비슷한 letter spacing을 사용중이라서 해당 디자인이 마음에 들어서 따라해 보았습니다. 다국어 웹사이트 개발을 많이 해봤지만 안타깝게도 한글과 영어를 동시에 만족시킬 수 있는 스타일은 없더라구요. CSS에서 언어가 섞여있는 경우 따로 처리가 불가능하다보니. 그래서 차라리 letter spacing을 조정할 수 있는 옵션을 하나 추가하는쪽으로 만들어 보겠습니다. 의견 감사합니다!
써보니 너무 좋습니다. 만들어 주신 것만으로도 너무 편해 감사하다는 말씀드리려던게 괜히 좀 까불었네요. ^^;
능력자시네요!
외람된 부탁이지만... kr 유저분들은 steemkr.com 도 많이 쓰시는데 같이 적용가능할까요???!!!
우와 유용한 정보 공유해주셔서 감사합니다.
대박대박대박! 제 노트북은 신명조처럼 나와서
정말....... 힘들었어요 ㅠㅠ!!
ㅎㅎ 리스팀합니다! 널리 퍼뜨릴게요-
행운을 나누어 주신 모든 분들께 유용한 게시물
Awesome:)
와, 정말 좋은 기능입니다!
Thanks for sharing!!
감사합니다!! 덕분에 스팀잇 생활이 더 편해질 것 같아요>_<)b
와우 개발자분들은 역시 ㄷㄷㄷ 하군요! 최고입니다!
우와 이거 대박이네요!! +_+ 능력자이십니다.
다들 이 체인저를 사용하게 된다면 steemit 으로 봤을 때 내 글이 촌스러워 보이진 않을까 걱정할 필요가 없어지겟네용 @.@
감사합니다
훌륭합니다.리스팀합니다.
넘나도 필요했던 기능을 손수 만들어 공유해 주시다니 감동입니다. 스팀잇 능력자분들 대단하세요 +_+
미약하지만 응원 꾹 누르고 갑니다. 감사해요! :)
좋은 익스텐션 감사합니다!!!
어후 안그래도 한글 폰트에 실망했는데, 제가 좋아 하는 나눔고딕으로 볼수 있어서 너무나 다행이네요 좋은 프로그램 감사합니다.
크롬익스텐션에 폰트변경하는 것도 있군요 좋은정보 감사합니다.
큰 도움 받고 갑니다. 감사합니다.
나눔폰트 애호가로서 엄청난 소식이네요! busy에도 구현이되었으면 하는 바람이 있는데... 봇/댓/팔/리 4종세트 날려드리고 설치하겠습니다~!!
오, 항상 폰트가 맘에 안들어서 고민했는데
저같은 뉴비에겐 정말 짱짱맨이세요!!
팔로우도 하고 갈께요~~
잘쓰겠습니다 감사합니다!
리스팀해갑니다~~
Congratulations @yjiq150! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
To support your work, I also upvoted your post!
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP멋있습니다. 저도 개발자이지만 이렇게 개발하시는 것 정말 대단하다고 생각하고 있습니다.
감사합니다.
오 좋은 정보네요~ 감사합니다.
잘쓰도록 하겠습니다.
팔로 꾸욱~❤
와 스팀잇에서 해야할 일을!!
좋은 글 감사합니다. 리스팀 합니다^^
와우 정말 좋아요!
와우!!!
미약하나마 풀 보팅하고 갑니다~~
스팀잇 익스텐션중에 스팀 모어인포라고 있는데 기능이 아주 좋던데 kr 버전으로 나오면 좋을것 같다는 생각이 듭니다 ㅎㅎ
좋은 아이디어를 실제로 구현하셨네요~ 감사합니다.
와ㅠㅠㅠㅠㅠ 진짜 고맙습니다 ㅠㅠㅠㅠ 스팀잇 한글 보는 거 너무 불편했는데!!!
대단하십니다. 덕분에 스팀잇이 더욱 즐거워질것 같습니다 감사합니다 ^^
정말 유용한 크롬 익스텐션 감사합니다. 한가지 건의하고 싶은 것은 steemkr.com 으로 접속시는 현재 작동을 안하는 것 같습니다. 저만 그런지 모르겠지만요. 감사합니다.
steemkr의 경우 한국분이 만드신것으로 알고있고, 이미 스포카 산스라는 한글 폰트가 잘 적용이 되어있길래 따로 작업하진 않았습니다.
아 그렇습니까? 그런데 만들어 주신 크롬 익스텐션 적용 전에 steemit 이나 steemkr 이나 똑같이 못생긴 폰트였었고 이제는 steemit 은 예뻐졌는데 steemkr 은 여전히 못난 글꼴이네요. 한번 다시 연구해봐야겠습니다. 그런데 만들어 주신 익스텐션 덕분에 이제는 steemit 에 계속 머물게 될 것 같습니다.
엄밀히 말하면 폰트(글꼴)가 못난 것은 아니고 자간과 행간 값을 별도로 수정하지 않은 겁니다. 국문과 달리 영문 은 행간이 좁아도 그렇게 못나지는 않기 때문에 폰트만 괜찮은 폰트로 변경하지 않았나 추측해봅니다.
저도 새 한글폰트로 바꿀수있겠다 싶어 기뻐하다가 Firefox는 지원이 안된다는 말에서 실망하게 되네요. 조만간 파이어폭스에도 쓰일수 있는 기능이 빨리 나오기를 바랍니다.
제가 싫어하는 것중하나가 굴림체인데 이렇게 해결해주시다니... 정말 감사합니다ㅠㅠ
며칠동안 글쓰면서 진짜 불편했는데
이런 방법~~
와....
정말 좋습니다.
감사합니다.
우와와아!!! 감격!! ^^* 눈이 훨씬 편해졌어요!!! ^^* 감사합니다~보팅하고 리스팀해가용^^
꿀익스텐션이네요 ~ 좋은툴 개발 감사합니다 !!
와 능력자 분들 많네요!! 잘 쓰겠습니다!
정말 좋네요!!
안그래도 글씨체가 좀 그랬는데 ㅎㅎ..
감사합니다
넘 유용해서 일단 리스팀합니다. 보팅도 하구요 감사합니다.
아,,, 스팀잇 전용이 따로 있군요.
저는 Change Font Family Style 2.6를 사용하고 있어서..
스팀잇 외에도 모든 웹사이트의 글씨가 이뻐보이거든요.
유능하신 분들이 많아 참 좋습니다. 고맙습니다. 잘 쓸께요.^^
설치해서 잘 쓰고 있어요
감사합니다^^
와 멋집니다. 짱짱맨이십니다!
가독성 면에서 꽝이여서 저는 다른 서비스를 이용하는데 이걸로 갈아타봐야겠네요!
좋은 정보 감사합니다. 팔로우 신청하고 갑니다~^^