[블로그 글쓰기 실험] 티스토리 블로그 모바일 가독성 : 글씨 크기 및 정렬 변경

'탈' Project

 

[블로그 글쓰기 실험]

티스토리 블로그 모바일 가독성 :

글씨 크기 및 정렬 변경

 

 

 

<티스토리 블로그 글쓰기 - 모바일 가독성을 위한 실험 : 글씨 크기 및 정렬 등>

 

 

 

2017. 08. 09.

 

 

 

 어느덧, 블로그 운영 2년 차에 접어들면서 매일같이 확인하는 방문자 수보다 더 신경 쓰이는 게 있다면 바로 매번 작성하는 나의 '글(포스팅)'을 꼽을 수 있다. '블로그 글쓰기'는 정말이지, 쉬우면서도 어려운데 이번 기회에 큰 마음 먹고 그 '스타일'을 조금 바꿔볼까 싶더라.

 

 

 

<2017. 07. 19. 'TAL Fashion' 데일리룩 코디로 선보였던 포스팅 (PC버전)

- 기존의 블로그 글쓰기 스타일>

 

 

 

 예전부터, 소위 '변화'에 대한 갈망은 존재했다. 하지만 '글쓰기'도 하다보면 정형화되고 또 습관화되기에 어떻게, 하루 아침에 그 '스타일'을 바꾸는 것도 결코 쉬운 일이 아니었다. 위 스크린샷 속 내용은 어쩌면 지난 2년간 내가 써왔던 글(포스팅)들의 전체적인 스타일을 대변하는 사진이 아닐까 싶은데, '돋움' 글씨체에 글씨 크기는 '11포인트(pt)' 그리고 '가운데 정렬'과 줄간격 '150%'로 완성된 모습이다. 

 

 

 

 

 

 

 물론, 그간 블로그를 운영해오면서 초창기 시절에 비하여 보다 더 '효율적(?)'으로 글을 쓰는 방향으로 발전해오기는 했다. (적어도, 난 그렇게 생각한다.) 그러던 중, 올 초에 '공무원 시험'을 준비하면서 '국어' 문법 및 맞춤법에 대하여 공부할 기회가 있었는데 그때부터 본격적으로 내 '글'에 대하여 스스로 평가해보는 시간을 가졌고, 내가 작성한 대다수의 글에서 사소한 '맞춤법 실수'부터 '문법적 오류'와 잘못 사용된 '비표준어'까지 꽤나 심심찮게 눈에 띄는 것이 아닌가. (아는 만큼 보인다더니, 딱 그 말이 맞았다.)

 

 

 

<2017. 07. 19.  'TAL Fashion' 데일리룩 코디 포스팅 - 모바일 버전 :

블로그 모바일 가독성에 대한 고찰>

 

 

 

 그렇게 내가 쓰는 글의 문법적인 '옳고 그름'이 보인 후로, 자연스럽게 전체적인 글의 흐름(문맥)과 더불어 내 글이 얼마나 쉽게 읽히는가 하는 이른바 '가독성'에 대해서도 절로 관심을 갖게 되더라. 특히, 그 중에서도 '모바일 가독성'과 관련하여 꽤나 깊이있는 고민을 해보았는데, 결국에는 대대적인 '변화'가 필요하다는 판단을 내릴 수밖에 없었다.

 

 

 

 

 

 

 위 스크린샷(모바일 버전의 포스팅 내용)을 한번 보라. PC버전일 때 적용했던 '가운데 정렬'로 인하여 모바일에서는 원본과 전혀 다른 구성의 글로 보이는 모습이다. 덧붙여, 글씨 크기 '11포인트(pt)'도 모바일 화면에서 보기에 조금은 작은 것 같기도 하고 말이다.

 

 

 

<[9급 공무원 준비기간 3개월] 2017 국가직 9급 공무원 시험 후기 (일반행정직)

- 왼쪽 정렬을 적용한 블로그 글쓰기 형태>

 

 

 

 지난 4월 작성한 위 포스팅은 다른 때와 비교해 글의 소재(공무원 시험 후기)부터 달랐지만, 글쓰기 스타일에서 기존의 '가운데 정렬(X)' 대신 '왼쪽 정렬(O)'을 그대로 활용한 부분이 특징으로 눈에 띈다. (처음 왼쪽 정렬로 글을 작성할 때, '본문의 내용을 어떻게 채우지?' 하는 걱정이 있었는데 막상 글을 써내려가다 보니 또 술술 잘 써지더라.)  

 

 

 

<왼쪽 정렬로 작성 시, 사진과 사진 사이의 글은 3~4줄이 적당하다?!>

 

 

 

 사실, 독자의 입장에서 읽어야 할 '글'이 너무 많아도 살짝 지루할 수 있다. 그 점에 유의하여 블로거들은 해당 포스팅과 관련된 '사진'을 직접 촬영하거나 구해 내용 중간에 삽입하는 것인데, 위와 같이 사진과 사진 사이에 글은 3~4줄 정도 작성하는 것이 (개인적으로 느끼기에) 읽기 적당하지 않나 싶다.

 그렇다면 이쯤에서, PC버전 상의 이러한 '변화(왼쪽 정렬)'가 반영된 모바일 버전의 글은 어떤 모습일지 궁금하지 않은가?

 

 

 

<PC버전 글 작성 시, 왼쪽 정렬을 적용한 포스팅 - 모바일 버전 모습>

 

 

 

 PC버전에서 몇 줄 안 되어 보이던 글이 '모바일 버전'에서는 약 2배 정도 늘어난 것처럼 보인다. 그도 그럴 수밖에 없는 것이 일단 모바일 화면이 작지 않나. 그런 의미에서, 앞서 언급했던 사진과 사진 사이에 들어가는 '3~4줄' 정도의 내용이 PC 및 모바일에서 나름 읽을 만한 글의 길이가 아닐까 생각한다.

 

 

 

 

<2017. 07. 28. 'TAL Fashion' 데일리룩 코디 스타일링 포스팅 (PC버전)

- 본문 글씨 크기 12포인트(pt) 적용>

 

 

 

 변화의 순서가 살짝 바뀌었는지는 모르겠지만, 위에서 본 '왼쪽 정렬'과는 별개로 기존의 글씨 크기 11포인트(pt)에서 1포인트 크기를 키워 '12포인트(pt)'에서 글을 작성한 모습이다. 이 역시 블로그 글쓰기 실험으로서 볼 수 있는데, 고작 1포인트 커진 것이 전체적인 가독성은 물론, 한 줄에 쓸 수 있는 글자 수에도 큰 영향을 미치더라. (참고로, 이때 줄간격이 기존의 150%에서 30% 올린 '180%'이다.)

 

 

 

 

 

 

 12포인트에서의 '글씨체(돋움체)'는 전보다 크기도 커졌지만 선 또한 진해져 눈에 더 잘 띄는 면이 생겼고 한 줄에 쓸 수 있는 글자 수가 적어지니, 덩달아 독자들이 한 줄에 읽어야 할 글자 수가 줄어 어떻게든 부담을 던 부분도 있다고 본다. (왜, 옛날부터 사람들이 책 읽을 때 보면, 글씨 크기가 작은 것은 괜히 읽기 싫고 그랬지 않나.)

 

 

 

<PC 버전 글 작성 시, 글씨 크기를 12포인트(pt)로 적용한 포스팅 - 모바일 버전>

 

 

 

 제일 처음 소개한 기존의 포스팅(가운데 정렬 & 11포인트)과 비교했을 때, 글씨 크기만 1포인트 커졌을 뿐인데 확실히 뭔가 눈에 더 잘 들어오는 느낌이다. 또 왠지 모르게, '12포인트(pt)'로 된 글을 보다가 기존의 11포인트(pt) 글을 보면 글자도 작아 보이고 내용도 더 긴 것처럼 보인다. 실제로 그렇기도 하고 또 한편으로 내 착각이기도 하겠지만, 분명한 것은 1포인트 커진 '글씨 크기'가 읽기에 더 편하고 좋다는 것이다.

 

 

 

 

 

 

 여기서 한 가지 더 변화를 준 부분이 있다면, 위 스크린샷 속 '글자 배경색'을 가진 글이 바로 그것이며 그러한 컬러 배경을 통해 해당 글에는 따로 '링크'가 걸려있음을 알리는 모습이다. 이 또한 독자들의 '가독성'을 위한 하나의 장치라고나 할까.

 

 

 

<[20대 남자 시계 추천] 캐주얼 브랜드 [FCUK 프렌치 커넥션] 시계 - 포스팅 (PC버전)

글씨 크기 12포인트(pt) & 왼쪽 정렬 & 줄간격 180% 적용>

 

 

 

 '그래, 이 정도면 됐어.' 하며 앞서 살펴본 두 가지 큰 변화('글씨 크기' 및 '정렬')를 하나의 '글'에 접목한 것이 바로 위 포스팅이다. 분명, 아직까지 조금은 어색한 부분이 있다. 하지만 나도 그렇고 독자분들도 그렇고, 곧 적응할 거라 믿는다. 그런 의미에서, 비슷하게 아까 봤지만 또 궁금하다. 위와 같이 작성된 글이 실제 모바일 화면에서는 과연 어떻게 보여질까?

 

 

 

<PC버전 글 작성 시, 글씨 크기 12포인트(pt) 및 왼쪽 정렬을 적용한 포스팅 - 모바일 버전> 

 

 

 

 비록 그 결과물이 완벽하지는 않을지라도, 솔직히 꽤나 만족스러운 것은 사실이다. 지금까지 '티스토리 블로그'를 운영하면서 소위, 반응형 스킨이 아닌 '일반' 스킨 이용자로서 어찌 됐든 다소 불리할 수 있는 '모바일 가독성'에 대한 나름대로 애써 한 고찰의 결과이기에, 이번 계기를 통해 '블로그 글쓰기'와 관련된 방향성과 더불어 그 발전 가능성을 엿볼 수 있었다고나 할까.

 

 

 

 

 

 

 언젠가는 나도 '반응형' 스킨을 이용하는 날이 올 것이다. 그리고 그때는 또 지금과 다른 새로운 '도전'을 하고 있을지도 모른다. 같은 맥락에서 이번에 반영한 작은 변화를 시작으로 난 계속해서 변화를 추구할 것이며 점점 더 나아지는 방향으로 이 블로그를 꾸려나가고자 한다. 벌써부터, 미래의 '탈 프로젝트'가 어떤 모습일지 기대되고 또 설렌다.

 

 

 

Adam's Tal Project : 탈 프로젝트