더 나은 읽기 환경을 위한 사파리의 읽기 도구와 CustomReader

2014. 3. 14. 03:39    작성자: ONE™

들어가며

인터넷 상에서 광고를 보는 것이 너무나 당연한 세상에 살고 있습니다. 광고 수익을 통해 뉴스 사이트와 블로그는 운영에 필요한 재원을 조달할 수 있고 콘텐츠 생산에 지속적으로 매진할 수 있습니다. 또 이런 사이트들로부터 정보와 지식을 얻는 방문자도 이제 큰 거부감 없이 광고를 받아들이고 있습니다.

하지만 어떤 사이트는 콘텐츠를 압도하는 광고를 띄우며 방문자의 시선과 클릭을 집요하게 유도합니다. 화면을 둥실둥실 떠다니는 오색찬란한 배너와 어디서부터가 시작이고 어디가 끝인지를 알 수 없는 요상한 레이아웃 탓에 가독성이 좋을리 만무합니다. 그나마 광고가 콘텐츠를 가리지 않으면 다행으로 생각해야할 정도입니다. ▼

그리고 광고가 아니더라도 웹사이트의 가독성을 떨어뜨리는 요소는 많습니다. 글꼴의 크기가 너무 작아 모니터에 얼굴을 바싹 파뭍어야 하거나 페이지의 폭이 너무 넓어 고개를 돌려가며 읽어야 하는 사이트가 널려 있습니다. 또는, 단순히 글읽기에 부적합한 글꼴로 인해 가독성이 심각하게 떨어지기도 합니다.

사이트를 운영하는 쪽에서 이런 불편함을 해결해 주지 않는다면 결국 아쉬운 사람이 우물을 파야합니다. 그냥 계속 무관심하던가 아니면 더 능률적인 읽기 환경을 구축하는 식으로 말이죠.

그런데 최소한 후자에 있어서 제가 아는 가장 효율적인 방법은 사파리의 '읽기 도구'를 사용하는 것입니다.

최적의 읽기 환경 - 사파리 읽기 도구

사파리에 내장된 '읽기 도구'는 웹페이지에서 광고나 메뉴 같은 부차적인 요소를 제거하고 오로지 콘텐츠를 읽기 쉽도록 깔끔하게 정리해 주는 기능입니다. ▼

* 집중력과 가독성에 있어 위 두 이미지가 같은 사이트를 촬영한 것이라고는 믿기지 않을 정도 큰 차이를 보입니다.

사용 방법도 쉬워 주소창 옆에 있는 '읽기 도구' 버튼을 누르거나 command + shift + R 단축키를 눌러주기만 하면 콘텐츠를 읽는데 불필요한 모든 요소가 제거되며 깔끔하고 미려한 레이아웃으로 콘텐츠를 즐길 수 있습니다. 사이트의 원래 글꼴과는 무관하게 콘텐츠를 명조체로 표시하는데 원할 시 좌측 상단에 있는 A | A 텍스트를 눌러 글꼴의 크기를 키우거나 줄일 수 있습니다.

국내 포털 사이트가 제공하는 서비스나 일부 한국형 커뮤니티를 지원하지 않는다는 한계가 있지만, 웹 표준을 지키는 사이트에 접속하면 읽기 도구 버튼이 파랗게 변하며 사용할 준비가 됐다는 것을 유저에게 알려줍니다. ▼

지금 이 글을 맥용 사파리에서 보고 계신다면 주소창 오른쪽으로 시선을 돌려보시기 바랍니다. (iOS용 사파리도 주소창 왼쪽에 같은 버튼이 달려 있습니다.)

읽기 도구에 스팀팩을 먹이자!

읽기 도구는 OS X의 여러 다른 기능과 마찬가지로 "그냥 된다(It just works)" 개념의 기능입니다. 즉 별다른 설정 없이 있는 그대로 활용하도록 디자인된 기능입니다. 하지만 읽기 도구의 글꼴이나 색상, 줄 간격 등이 모든 사용자의 입맛에 맞는 것은 아닐 것입니다. 

이런 분들을 위해 읽기 도구의 면면을 보다 세밀하게 사용자화할 수 있는 'CustomReader'라는 사파리 확장 프로그램이 존재합니다.

링크에서 CustomReader를 내려받아 클릭하면 사파리에 추가되며, 톱니바퀴 모양의 버튼을 누르거나... ▼

사파리 도구막대에 올려둔 전용 버튼을 클릭해 설정 화면으로 들어갈 수 있습니다. ▼

읽기 도구를 어떻게 꾸밀 수 있는 같이 한번 둘러보실까요?

CustomReader 둘러보기

읽기 도구를 사용자 취향에 맞게 꾸밀 수 있는 다양한 기능들이 크게 네 개의 탭으로 나뉘어져 있습니다. 그중 가장 기초적이면서 핵심적인 기능은 기본(Basic) 탭에 자리잡고 있습니다. ▼

위에서 첫 두 설정은 기사의 본문과 제목의 글꼴을 선택하는 난입니다. 그 밑으로 텍스트와 배경의 색상을 RGB 색상코드로 입력할 수 있는 난과 행간을 기준으로 정하는 버튼, 페이지의 폭을 조절하는 슬라이드바, 페이지의 확대 비율을 조정하는 난이 마련돼 있습니다. 설정을 바꾸는 즉시 변경 사항이 적용되고, 또 언제든 기본 상태로 되돌릴 수 있기 때문에 큰 염려 없이 이런저런 설정을 테스트해볼 수 있습니다.

참고로 영문 글꼴은 드롭다운 메뉴에서 곧바로 선택이 가능하지만, 우리말 글꼴은 이름을 '포스트스크립트(PostScript)' 방식으로 직접 입력해야 합니다. 글꼴의 포스트스크립트 이름은 서체 관리자 실행 후 좌측 상단에 있는 정보 버튼을 눌러 확인할 수 있습니다. ▼

대한체라면 'Daehan'을, 나눔고딕체라면 글꼴 입력 난에 'NanumGothic'을 적어넣습니다. 같은 방법으로 함초롱체나 산돌체 등 다양한 글꼴 중 하나를 선택할 수 있습니다. 예시에서는 '대한체'를 적용한 모습입니다. ▼

고급(Advanced) 탭은 그 이름대로 고급 사용자를 위한 영역입니다. 읽기 도구도 알고 보면 HTML과 CSS로 이뤄진 일종의 웹 페이지인데, 각 요소의 속성값을 품고 있는 CSS를 편집해 자신만의 읽기 도구 레이아웃을 만들 수 있습니다. ▼

딱히 건드릴 부분은 없지만 페이지 상하 여백과 줄간격 정도는 글꼴에 따라 살짝 키우는 것도 좋습니다. ▼

CSS 편집 전 ▼

CSS 편집 후 ▼

자동 읽기(Auto-Read) 탭은 특정 사이트를 방문했을 때 곧바로 읽기 도구를 적용하는 일종의 자동화 기능입니다. 다만, '정규표현식'으로 URL 주소를 입력해야 하기 때문에 개발자에겐 사용이 쉬운 반면 일반 사용자에게는 진입장벽이 매우 높은 기능입니다. CustomReader를 사용하는데 필수적인 부분은 아니기 때문에 이런 것도 가능하다 정도로 참고하시면 되겠습니다. ▼

마지막 '기타(Other)' 탭에서 눈여겨 볼 부분은 읽기 도구를 불러내는 단축키를 사용자가 원하는 조합으로 변경하는 난입니다. 신속하게 읽기 도구를 불러낼 수 있도록 단축키를 간단한 조합으로 지정해 두시면 편리합니다. 또는 BTTjiTouch 같은 멀티제스처 프로그램에 이 단축키를 불러낼 수 있는 제스처를 등록하면 무척 편리하게 읽기 도구를 불러올 수 있습니다. ▼

 읽기 도구 내에서 스크롤 속도를 조절할 수 있는 슬라이드바는 사파리 버전에 따라 작동할 때도, 또 그렇지 않을 때도 있으니 참고하시기 바랍니다.

맺으며

요즘 사이트들의 문제가 뭐니.. 광고를 어디에 어떻게 달아야 하니.. 이런 거창한 마무리 멘트보다는 단순한 비교 사진이 읽기 도구와 CustomReader의 장점을 가장 잘 말해줄 것 같습니다. ▼



어떤 레이아웃으로 기사와 게시물을 즐기고 싶으십니까?



참조
CustomReader 공식 홈페이지

관련 글
Yoonjiman - 가독성으로 살펴본 한국의 웹
Back to the Mac 선정 - 추천 사파리 확장 프로그램 30선

    
  1. 이전 댓글 더보기
  2. Blog Icon
    Draupnir

    크게 문제가 될 일은 없겠지만 스크린샷에 로고는 모자이크처리된 반면 주소와 페이지 타이틀이 그대로 있네요~

  3. Blog Icon
    meteos

    저도 무척 애용하는 기능입니다.
    제 경우엔 키보드 단축키나 마우스 버튼 움직이는게 귀찮아서
    BTT 제스처로 보게 해놓았습니다.
    three finger tiptap left 를 cmd+sht+r에 대응시켰습니다.
    글읽다가 트랙패드로 잠깐 손가락 터치만 하면... ^^
    팁으로 해도 되겠죠? ^^

  4. Blog Icon
    duii

    우와 감사합니다.
    안그래도 폰트랑 줄간격때문에 잘 쓰면서도 조금 불편했는데 이런 방법이 있었군요

  5. Blog Icon
    드라고

    와, 좋은 팁이네요^_^

  6. Blog Icon
    realeyed

    제가 맥을 접하고나서부터 항상 맘에 안들었던 사항이 그냥 해결되는 순간이군요.
    좋은 소개, 감사합니다.

  7. Blog Icon
    kcsong

    정말 좋은 기능이군요.
    전 Firefox를 즐겨쓰는데
    이 글보고 필받아서 부가기능을 붙여 봤겠지요?

    결론은 종류는 많고 기능도 비슷한데
    흠...뭐라 그럴까요.
    깔끔 똑 떨어지는 맛은 부족합니다.^^

  8. Blog Icon

    알 사람은 아는 지드래곤넷이네요! ㅋㅋㅋㅋ

  9. Blog Icon
    기사단

    대박 입니다. 읽기도구' 레이아웃이 맘에 안들어서 안썼는데;; 지금 완전 수정해서 너무 맘에 듭니다.
    앞으로는 읽기도구' 애용해야 겠습니다.

  10. Blog Icon
    와룡서생

    유용한 기능인 것 같습니다. 바로 시도해봐야겠어요 :)

  11. Blog Icon
    oyster

    와!!!
    이게 제가 원하던 것이었는데!!
    너무 감사합니다^^

  12. 와.. 끝장이네요.. ^^
    정말 좋은 정보네요~!!

  13. Blog Icon
    하미

    좋은 정보네요. 항상 읽기 도구에 2%부족한 것이 있었는데 채워지는 것 같네요.

  14. Blog Icon
    껌꺼

    읽기도구 옆에 "아래화살표 아이콘"이 있는데 저에게는 아이콘이 보이질 않아요. 전에 다운로드 페이지로 가는? 아이콘이였던거 같은데 지금은 보이질 않아서 혹시 보이게 하는 방법이 있나요?

  15. 사파리 메뉴 > 보기 > '도구 막대 사용자화…'를 클릭하신 후 기본 설정을 도구 막대로 끌어올리시기 바랍니다.

  16. Blog Icon
    브래드칠천피트

    평소 읽기도구의 기능이 뭔지 혹시 사족이 아닌가 의심(?)도 했었는데 one님 설명으로 시원하게 해결됐어요. ^^

  17. Blog Icon
    Junjeong Park

    다른 건 모두 변경되는데 폰트만 변경되지 않습니다. 왜 그런 걸까요? 저도 다른 폰트를 적용해보고 싶어요.

  18. Blog Icon

    한글페이지만 바꿀수 없나요?

  19. Blog Icon
    데니스

    유용한 정보 감사합니다!
    크롬 대신 사파리 쓰고 싶었는데, 글꼴 때문에 고민하고 있었는데 해결했네요!

  20. Blog Icon
    beyond

    safari8 In Yosemite 에서도 잘 되네요.

  21. Blog Icon
    산들바람

    항상 찾던 기능인데 이제야 할게 됬네요. 감사합니다!

  22. Blog Icon
    유장현

    요세미티 업그레이드 하고 읽기도구 설정하려 왔다갑니다....^^