블로그 글 가독성 저하
자체적으로 블로그를 만들고 여기에 글을 작성하고 있지만, 초창기에는 맘에 들지 않은 부분이 많았다. 생각한 기능을 전부 구현하지 못한 부분은 둘째로 하고, 작성한 글을 읽는데 있어서 묘한 ‘불편함’을 느꼈기 때문이다. 같은 글을 읽는데 있어서 뭔지 모를 피로함을 느꼈다. 나중에 알고 보니, 그것을 가독성이 낮다고 표현함을 알았다.
개선하기
기존 페이지 디자인은 notion을 기반으로 css를 구성했고, 실제로 글씨체를 제외한 나머지 부분은 노션의 스타일과 굉장히 유사하다. 그러나 notion에서 긴 글을 작성하여 읽는 경우가 적었고, 그러다 보니 긴 포스트에서 어떻게 보여지는지 제대로 테스트 하지 못했다. 또한 같은 스타일을 적용하더라도 블로그에 적용한 Pretendard 글씨체가 일반적인 고딕 보다 기본적으로 작기 때문에 더욱 오밀 조밀하게 보이는 부분도 있었다.
블로그에 더 많은 사람들이 와서 글을 읽어 보기를 바라고, 그렇게 되기 위해서는 오랫동안 글을 읽더라도 피로함을 느끼지 않아야 한다고 생각하여 이 부분을 해결하는 것을 가장 급한 과제로 삼았다. 따라서 온라인에서 웹 가독성과 관련된 정보들을 검색해 보았다(디자이너가 아니므로 관련 지식이 없었다).
가독성에 영향을 미치는 요소를 개선하자
검색해 본 결과, 가독성에 영향을 미치는 요소는 크게 다음과 같다.
line height(행간)과 letter-spacing(자간)
이 부분이 가독성에서 가장 많이 영향을 미치는 부분이 아닐까 싶다. 출처에 따르면, 행간이 너무 좁으면 눈에 피로를 줄 수 있고, 행간이 너무 넓다면 집중력을 저하시킬 수 있다고 한다. 폰트 크기(Set Solid)와 행간(Double Spacing = 폰트 * 2) 사이의 값 중 적절한 값을 찾는 것이 중요하다고 한다.
이 부분은 사람의 주관이 많이 담긴 부분이지만, 이런 UI적인 부분을 제대로 공부해본 적은 없기 때문에 유명한 포스트 플랫폼을 참고하였다(미디움, 브런치 등등).
medium은 일부러 들어가서 글들을 보진 않지만, 구글 검색을 통해 들어갔을 때 medium의 글이 굉장히 가독성이 좋았던 경험이 있기 때문에 medium의 line-height을 차용하였다.
자간의 경우 글씨가 클 수록 자간을 줄여야 가독성이 높아진다는 결과가 있었다. 현재 블로그에서는 기본 폰트 사이즈(16px)를 사용하고 있고, Pretendard 폰트의 경우 일반적인 다른 글씨체보다 작게 표현되므로 자간 사이즈를 굳이 줄이지 않아도 된다고 생각했지만, 0.003em 정도 줄이기로 했다.
Heading 컴포넌트의 경우 일반 문단보다는 훨씬 큰 폰트 사이즈를 가지고 있기 때문에 0.003em보다는 조금 더 줄여주었다.
문단과 문단간의 간격도 중요하다. 일반적으로 문단의 내용을 요약하는 Heading과 그 아래 본문으로 구성이 되어 있다. 따라서 문단과 문단간의 간격보다 Heading과 문단간의 간격이 훨씬 좁아야 한다고 보았다. 이 역시 medium의 스타일을 참조하여 문단과 문단간은 24px를 주었고, Heading과 문단은 8px로 주었다. 또한 모바일 환경을 고려하여 모바일에서 24px는 다소 멀리 떨어져보일 수 있다고 생각하여 10px의 값을 주었다.
TypeScript JSXp { line-height: 1.75; letter-spacing: -0.003em; } h1, h2, h3 { letter-spacing: -0.01em; & + p { margin-top: 8px; } }
폰트 - 명조체? 고딕체?
폰트 또한 가독성에 영향을 미치는 요소 중 하나이다. Pretendard 글씨체가 마음에 들어서 블로그에도 Pretendard 글씨체를 사용했지만, 처음에는 가독성 측면에서 마이너스가 되는 요인 중에 글씨체도 있지 않을까? 라고 생각하여 다양한 글씨체를 시도해 보았다.
또한 여러 인터넷 문서들을 검색해 보면서, 기존 책에서 사용하는 글씨체는 명조체가 대부분이고, 웹에서 사용하는 글씨체는 고딕체임을 알았다. 그 이유는 명조체는 가독성이 뛰어난 글씨체이고 책에서는 텍스트에 집중할 수 있기 때문에 사람들의 집중력을 끌어올릴 수 있지만, 웹의 환경에서는 텍스트가 다양한 도형(요소)들과 조화를 이루어져야 하며, 낮은 해상도에서는 명조체가 흐릿하게 보이기 때문에 명조체보다는 고딕체를 사용한다고 한다.
Medium의 감성이 맘에 들어서(적어도 영어에 한해) 명조체로 가볼까 했는데, 실제로 적용하고 보니 명조를 적용했을 때 주관적으로 가독성이 더 떨어져 보이는 경향이 있어 실제로 적용하지는 않았다.
한 줄에 보이는 글자 수
출처에 따르면, 한 줄에 보이는 글자수가 40에서 60자 이내가 가장 좋다고 한다. 글씨체의 크기를 키우지 않은 이상 현재의 본문 너비가 다소 넓을 수 있기 때문에 기존에 768px의 너비를 700px로 줄이게 되었다.
사이드바 만들기 → navigator 역할
글을 읽기 전에 제목을 보면서 해당 부분으로 바로 갈 수 있는 인디케이터를 추가하고자 하였다.
인디케이터는 굉장히 간단하게 구현했는데, doument.querySelector를 이용하여 헤딩 태그들을 전부 찾은 뒤 순서대로 정렬하는 방식을 사용했다.
처음에는 PostContent Suspense 외부에 navigator를 두었는데, 그러다 보니 클라이언트 사이드에서만 렌더링을 진행하더라도 초기 로딩시 헤딩 태그를 찾지 못해 빈 태그가 보이는 문제가 있었다. 그래서 Suspense 내부로 함께 묶어주었다.
잘 나오는 것을 확인할 수 있다.
이전과 비교하기
가독성은 주관의 영역일 수 있지만, 이전의 글과 비교했을 때 가독성이 좋아졌음을 느꼈다.
이전
이후
느낀 점
기술은 다른 사람에게 좋은 경험을 선사해 줄 때 그 가치가 올라간다. 이번 블로그를 만들면서, 사용자에게 좋은 경험을 줄 수 있는 개발자가 진짜 개발자가 제공해야 할 가치라는 것을 깨닫게 되었다. 그리고 그 가치를 제공하는 수단으로 기술이 사용된다는 것을 다시한번 명심할 수 있었다.
추가 개선 사항?
우선 데스크톱과 노트북(노트북 성능이 좀 안좋다)으로 테스트한 결과 노트북 쪽의 성능이 다소 낮게 나오는 문제를 확인할 수 있었다. 라이트 하우스 성능 지표를 분석해본 결과, 스크립트와 레이아웃 계산이 노트북 쪽에서 다소 낮게 나오는 것으로 확인되어, css in js를 tailwindcss, css 모듈 기반으로 개편을 진행해보려 한다.