크롬 폰트 변경으로 가독성과 심미성을 높여보자

| Updated

오랬동안 익스플로러를 사용하다가 크롬에 새로운 기능들이 많아서 크롬을 사용하기로 했습니다. 크롬을 잘 사용하기 위해서 크롬 폰트 변경으로 인터넷 사용시 미려한 폰트로 가독성과심미성을 높이는 방법을 알아봅니다.

크롬이 좋다고는 하지만 은행 등 이용 문제 그리고 회사 시스템은 마이크로소프트 인터넷 익스플러러만 지원하기 때문에 크롬은 대체적으로 보조적으로 사용하고 있습니다.

브라우저에서 제일 원하는 것 – 웹 폰트 지정

위도우즈 운영체제가 windows10으로 업데이크 되면서 마이크로소프트에서 적극적으로 사용 권장하는 에지(Edge)를 사용해보려고했는데 제가 필요한 기능들은 대부분 사용할 수 없어서 한계가 많더군요.

브라우저에서 가장 원하는 것 중의 하나가 모니터에 보여지는 웹 폰트를 제가 원하는 폰트로 설정해 사용하고 싶은데 마이크로소프트 엣지(Edge)에서는 아직 이런 기능을 지원하지 않아 불편하더군요.

크롬을 사용하면서도 이 폰트를 변하고 하고 싶었습니다. 기본 굴림폰트는 너무 흔하고 아름답지 못하다고 생각이 듭니다. 계속 쳐다보고 있어야한다면 이왕이면 좋은 폰트를 사용하는게 좋겠죠

아래는 굴림폰트로 구글 검색 결과를 보여주는 화면인데요. 아무래도 굴폰트는 갈수 적응하기 힘들어지네요. 더우기 글자를 키울수록 이쁘지 않죠.

크롬 폰트를 굴림체로 변경 시 구글 검색 화면
크롬 폰트를 굴림체로 변경 시 구글 검색 화면

[변경 사항 추가] 초기 크롬에서는 이 포스팅에서 언급한 것처럼 굴림이 기본 폰트로 설정되었습니다.

그러나 윈도우즈 자체가 윈도우즈8, 윈도우즈10 등으로 업그레이드되면서 윈도우즈 기본 폰트 자체가 맑은고딕으로 변경되었고 그러면서 어느 순간 크롬도 기본적으로 맑은고딕을 기본 폰트로 설정됩니다.

그렇기때문에 맑은고딕에 만족하는 경우 그냥 초기 설정 그대로 사용하셔도 됩니다. 요즘에는 개성이 강한 다양한 글꼴들이 많이 등장했기 때문에 취향에 따라 마음에 드는 글꼴을 선택하면 될 듯 합니다.

크롬 폰트 변경 방법

크롬에서 폰트를 변경하는 방법은 여러가지가 있습니다.

가장 간단히 할 수 있는 방법은 설정 – 모양 – 글꼴 맞춤 설정에서 글꼴 크기 및 다양한 글꼴을 설정해 주는 방법입니다.

저는 나눔바른고딕이 모바일에 최적화된 폰트라는 주장에 당분간은 나눔바른고딕을 적용하기로 했습니다. .

그래서 글꼴 맞춤 설정에서 표준 글꼴, Serif, Sans-serif 그리고 고정폭 글꼴의 4가지를 변경할 수 있도록 되었 있는데요. 저는 이러한 글골을 전부 나눔바른고딕(NanumBarunGothic)으로 변경하였습니다.

  • 표준 글꼴 : 웹페이지가 특정한 글꼴을 지정하지 않았을 경우 보여 줄 글꼴
  • Serif : 웹페이지 글꼴을 Serif 계열의 글꼴을 적용 시 보여 줄 글꼴. Serif 글꼴은 획에 삐침이 있는 글꼴로 바탕이나 명조체와 같은 글꼴이 여기에 해당
  • Sans-serif : 웹페이지 글꼴을 Sans-serif 계열의 글꼴을 적용 시 보여 줄 글꼴. Sans-serif 글꼴은 Serif와 달리 글자에 각 획에 삐침이 없는 글꼴로 고딕체가 이에 해당
크롬 폰트 변경, 크롬 설정-모양- 글꼴 맞춤 설정
크롬 폰트 변경, 크롬 설정-모양- 글꼴 맞춤 설정

그러면 아래와 같이 구글 크롬에서도 나눔바른고딕(NanumBarunGothic)로 웹 브라우징을 할 수 있습니다.

위에서 보여준 굴림에 비해서 상당히 가독성도 뛰어나고 보기에도 좋습니다. 한마디로 인터넷 서핑할 만하죠.

크롬 폰트를 나눔바른고딕으로 변경 시 구글 검색 화면
크롬 폰트를 나눔바른고딕으로 변경 시 구글 검색 화면

웹사이트의 웹 스타일을 무시하는 방법

크롬에서 위와 같이 글꼴을 설정해도 그 사이트에서 특정 글꼴을 사용하도록 설정되어 있다면 대부분의 브라우저는 사이트의 웹 스타일을 존중해 줍니다.

이는 크롬도 마찬가지입니다. 그렇기에 웹 사이트에서 웹 스타일을 정의해 놓았다면 크롬은 이를 존중해 크롬 변경 폰트가 아닌 사이트에서 설정한 폰트로 보여줍니다.

이게 싫고 모든 웹 페이지를 브라우저에서 설정한 폰트로 보여주는 방법이 있습니다. 인터넷 익스플러러에서는 브라우저 자체에서 웹 스타일을 무시하라는 옵션이 있죠. 이 옵션을 사용하면 모든 웹 페이지는 특정 폰트로만 보여집니다.

웹 스타일을 무시하는 방법 – 크롬 확장 프로그램 ‘stylus’ 사용

크롬은 자체적으로 웹 스타일을 무시하는 옵션을 제공하지 않습니다. 그렇기 때문에 웹 스타일을 무시하고 브라우저 설정 폰트로만 보고싶다면 크롬 확장 프로그램을 사용해야합니다.

이런 크롬 확장 프로그램으로 ‘stylus’가 있는데요.

크롬 확장 프로그램 stylus 추가

우선 chrome 웹 스토어로 이동해서 ‘stylus’를 검색해 stylus가 나오면 Chrome에 추가 버튼을 눌러 확장 프로그램에 추가합니다.

chrome 웹 스토어에서 크롬 확장 프로그램 'stylus' 검색

크롬 확장 프로그램 stylus 스타일 추가

‘stylus 확장 프로그램을 추가하면 크롬 맨 오른쪽 위에 S모양의 아이콘이 생기고 이곳에서 stylus 확장 프로그램의 스타일을 설정할 수 있습니다.

S모양의 아이콘을 누르면 Manage와 Option 등을 설정할 수 있는 버튼이 보이는 데요. 여기서 Manage를 누릅니다.

크롬 확장 프로그램 'stylus' 설정, Mangee 선택

이제 여기서 새로운 스타일을 추가합니다. 여기서 whrite new style 버튼을 누릅니다.

크롬 확장 프로그램 'stylus' 설정, 새로운 스타일 추가
크롬 확장 프로그램 ‘stylus’ 설정, 새로운 스타일 추가

그러면 Add style 화면이 나오는데요. 원하는 스타일명을 입력합니다. 예를들어 NanumBarunGothic과 같은 이름을 입력합니다.

그리고 오른쪽 코드 입력 화면에 아래에 제시한 코드를 복사해 붙입니다. (만약 나눔바른고득체가 아닌 다름 폰트를 사용하고 싶다면 아래 코드에서 NanumBarunGothic 대신 원하는 폰트 이름으로 대체하면 됩니다.)그리고 저장합니다.

크롬 확장 프로그램 'stylus' 설정, 코드 입력
크롬 확장 프로그램 ‘stylus’ 설정, 코드 입력

아래 코드는 윈도우즈용 코드입니다.

@font-face { font-family: "돋움"; src: local("NanumBarunGothic"); } @font-face { font-family: "Dotum"; src: local("NanumBarunGothic"); } @font-face { font-family: "DotumChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "굴림"; src: local("NanumBarunGothic"); } @font-face { font-family: "Gulim"; src: local("NanumBarunGothic"); } @font-face { font-family: "GulimChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "AppleGothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "맑은 고딕"; src: local("NanumBarunGothic"); } @font-face { font-family: "Malgun Gothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "맑은고딕"; src: local("NanumBarunGothic"); } @font-face { font-family: "MalgunGothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "명조"; src: local("NanumBarunGothic"); } @font-face { font-family: Myeongjo; src: local("NanumBarunGothic"); } @font-face { font-family: "나눔명조"; src: local("NanumBarunGothic"); } @font-face { font-family: NanumMyeongjo; src: local("NanumBarunGothic"); } @font-face { font-family: "바탕"; src: local("NanumBarunGothic"); } @font-face { font-family: "Batang"; src: local("NanumBarunGothic"); } @font-face { font-family: "바탕체"; src: local("NanumBarunGothic"); } @font-face { font-family: "BatangChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "NanumBarunGothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "serif"; src: local("NanumBarunGothic"); } @font-face { font-family: "sans-serif"; src: local("NanumBarunGothic"); } @font-face { font-family: "Helvetica"; src: local("NanumBarunGothic"); } @font-face { font-family: "Tahoma"; src: local("NanumBarunGothic"); } @font-face { font-family: "Geneva"; src: local("NanumBarunGothic"); } @font-face { font-family: "Arial"; src: local("NanumBarunGothic"); } @font-face { font-family: "Apple SD Gothic Neo"; src: local("NanumBarunGothic"); } @font-face { font-family: "AppleSDGothicNeo-Regular"; src: local("NanumBarunGothic"); } @font-face { font-family: "Verdana"; src: local("NanumBarunGothic"); } @font-face { font-family: "Lato"; src: local("NanumBarunGothic"); } @font-face { font-family: "FontAwesome"; src: local("NanumBarunGothic"); } @font-face { font-family: "Helvetica Neue"; src: local("NanumBarunGothic"); }

맥용 코드는 아래를 사용합니다.

@font-face { font-family: "돋움"; src: local("NanumBarunGothic"); } @font-face { font-family: "Dotum"; src: local("NanumBarunGothic"); } @font-face { font-family: "DotumChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "굴림"; src: local("NanumBarunGothic"); } @font-face { font-family: "Gulim"; src: local("NanumBarunGothic"); } @font-face { font-family: "GulimChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "AppleGothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "맑은 고딕"; src: local("NanumBarunGothic"); } @font-face { font-family: "Malgun Gothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "맑은고딕"; src: local("NanumBarunGothic"); } @font-face { font-family: "MalgunGothic"; src: local("NanumBarunGothic"); } @font-face { font-family: "명조"; src: local("NanumBarunGothic"); } @font-face { font-family: Myeongjo; src: local("NanumBarunGothic"); } @font-face { font-family: "나눔명조"; src: local("NanumBarunGothic"); } @font-face { font-family: NanumMyeongjo; src: local("NanumBarunGothic"); } @font-face { font-family: "바탕"; src: local("NanumBarunGothic"); } @font-face { font-family: "Batang"; src: local("NanumBarunGothic"); } @font-face { font-family: "바탕체"; src: local("NanumBarunGothic"); } @font-face { font-family: "BatangChe"; src: local("NanumBarunGothic"); } @font-face { font-family: "나눔고딕"; src: local("NanumBarunGothic"); } @font-face { font-family: "serif"; src: local("NanumBarunGothic"); } @font-face { font-family: "sans-serif"; src: local("NanumBarunGothic"); } @font-face { font-family: "Helvetica"; src: local("NanumBarunGothic"); } @font-face { font-family: "Tahoma"; src: local("NanumBarunGothic"); } @font-face { font-family: "Geneva"; src: local("NanumBarunGothic"); } @font-face { font-family: "Arial"; src: local("NanumBarunGothic"); } @font-face { font-family: "Apple SD Gothic Neo"; src: local("NanumBarunGothic"); } @font-face { font-family: "AppleSDGothicNeo-Regular"; src: local("NanumBarunGothic"); } @font-face { font-family: "Verdana"; src: local("NanumBarunGothic"); } @font-face { font-family: "Lato"; src: local("NanumBarunGothic"); } @font-face { font-family: "FontAwesome"; src: local("NanumBarunGothic"); } @font-face { font-family: "Helvetica Neue"; src: local("NanumBarunGothic"); }

이렇게 크롬 확장 프로그램 stylus를 적용하면 어지간한 웹 페이지 폰트는 전부 설정한 폰트로 보여지는 것 같습니다.

마치며

크롬은 기본에서는 빠르지만 익스텐션 프로그램을 설치할 수록 느려집니다.

글꼴 변경은 기본설정인 ‘글꼴맞춤설정’까지만 건드리고 그 이하부터는 마음을 비우는게 좋을 것 같습니다.

이상하게 나오는 경우는 아주 드물게 있으니 그냥 지나치고 좀 더 가볍게 사용하는 것으로 마음을 정해 롬 고급 폰트설정 확장프로그램을 지우고 말았습니다.

얼음위를 시속330킬로달리는 벤트리축소.jpg

얼음위를 시속330킬로달리는 벤트리처럼 인터넷을 머뭇거림없이 쾌적하게 사용하자구요

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matthew

아.. 한글버전 크롬은 굴림폰크가 기본적용 되나보네요. 생전 처음봅니다. 저는 크롬 처음 나왔을때 부터 크롬만 써왔는데 (대략 10년전쯤) 굴림폰트가 적용되는 경우는 없었거든요.

font-family: arial,sans-serif;

제 경우는 arial, sans-serif 순으로 적용되는데 한글 가독성도 좋고 아무런 불편함도 느끼고 있지 못해서 크롬에서 폰트를 바꾼다는 생각은 해보지도 못했습니다. ㅎㅎㅎ

hobbit

구글 검색창에서 검색시, 글씨체가 굴림으로 나옵니다.. 인코딩 설정을 크롬에서 없앤 듯 하여 확장프로그램도 깔아보고 별 짓을 다했는데 구글 검색창에서만 다른 글씨체(굴림)가 적용 되더라구요. 다른 화면과 주소창에서 검색할 때도 나눔고딕으로 적용이 되는데 구글 검색창만 문제입니다. 예전 포스팅이라 답변을 해주실진 모르겠습니다만 혹시 해결 방법 아시는지 답변 부탁드립니다 ㅠ