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

들어가며

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

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

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

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

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

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

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

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

사용 방법도 쉬워 주소창 옆에 있는 '읽기 도구' 버튼을 누르거나 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)' 탭에서 눈여겨 볼 부분은 읽기 도구를 불러내는 단축키를 사용자가 원하는 조합으로 변경하는 난입니다. 신속하게 읽기 도구를 불러낼 수 있도록 단축키를 간단한 조합으로 지정해 두시면 편리합니다. 또는 BTT나 jiTouch 같은 멀티제스처 프로그램에 이 단축키를 불러낼 수 있는 제스처를 등록하면 무척 편리하게 읽기 도구를 불러올 수 있습니다. ▼