블로그스팟(blogspot)에서 가독성 향상을 위한 본문 폰트 및 색상 변경하기

블로그스팟에서 포스팅을 하면 본문의 글꼴과 색상이 회색계열이라서 선명하지가 않아 가독성이 떨어집니다. 여기서는 가독성 향상을 위해 테마를 수정하여 글자가 선명하게 보이도록 본문 폰트와 색상을 변경하는 방법을 알아보도록 하겠습니다.

블로그스팟이 제공하는 테마를 사용할 경우 본문의 폰트와 색상이 가독성을 떨어뜨리는 경우가 있습니다. 여기서는 본문 폰트와 색상을 변경하여 가독성을 높일 수 있도록 테마를 변경하는 방법을 알아 보도록 하겠습니다.

1. 본문 폰트 및 색상 변경 전/후 비교

2. 구글폰트 사이트에서 폰트 선택

3. 본문 폰트 및 색상 변경

블로그스팟의Essential 테마를 적용하여 사용하는 것을 예로 들어 설명하도록 하겠습니다.

아래 화면은 본문의 폰트와 색상의 변경 전/후를 PC에서 볼 경우 차이입니다.

왼쪽은 폰트와 색상을 변경하기 전이고 오른쪽은 변경한 후 입니다. 어느쪽이 더 보기 편하신가요?

다음화면은 모바일 미리보기에서 봤을 때의 차이입니다.

왼쪽보다는 오른쪽이 글꼴과 선명도가 높아 보기 편하실 겁니다. 이렇듯 폰트와 색상이 가독성을 향상시키는데 매우 중요한 역할을 합니다.

우선 구글폰트 사이트에 들어갑니다. 아래 버튼을 클릭하면 접속하실 수 있습니다.

구글폰트 사이트에 들어가서 아래와 같이 Language 를 Korean으로 선택합니다.

조회된 폰트중에서 마음에 드시는 폰트를 클릭합니다. 저는 Noto Sans Korean를 선택했습니다.

위와 같이 원하는 폰트에서 + 를 클릭합니다.

위의 빨간색 부분을 클릭하여 복사한 코드를 아래를 참조하여 수정하세요.

만약 저와 같이 Noto Sans Korean 폰트를 선택하셨다면 아래 내용을 그대로 복사해서 사용하시면 됩니다.

이제 블로그스팟 테마 수정을 위한 준비가 되었습니다.

가독성 향상을 위한 본문 폰트 및 색상 변경을 위해서는 테마를 수정해야 합니다. 다음의 과정을 따라 하시면 쉽게 수정하실 수 있습니다.

위와 같이 ① ~ ② 을 클릭한후 나온 화면에서 HTML 편집을 클릭합니다.

이후 나온 화면에서<head> 부분에 아래와 같이 위에서 복사한 링크를 추가합니다.

그리고 조금 밑에 보면 아래와 같은 코드가 있습니다.

윗부분을 찾으셨다면 아래와 같이 수정 후 코드를 복사하여 해당 부분에 붙여넣기 하거나 아래 노란색 부분과 같이 수정합니다.

변경 전	변경 후
<Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif" /> <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575" /> </Group>	<Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Noto Sans KR, sans-serif" /> <Variable name="body.text.color" description="Color" type="color" default="#000000" value="#000000" /> </Group>

여기까지 하셨다면 본문 폰트와 색상 변경 작업이 완료되었습니다.

이제 아래 화면에서 빨간색 테두리 부분을 클릭하여 저장하면 본문의 폰트와 색상이 변경됩니다.

이번 편에서는 블로그스팟에서 가독성을 향상시키기 위해 본문 폰트와 색상 변경에 대해서 알아봤습니다. 기존의 테마를 그대로 쓰더라도 큰 문제는 없지만 포스팅한 글을 읽는 분들을 배려한다면 더 좋은 효과가 있지 않을까 생각됩니다.