모바일 본문 타이포그래피 연구
이번에 타이포그래피 디자인 시스템 작업을 하면서 모바일과 데스크탑 환경에서의 가독성을 고민하다 발견한 자료. 2018년 네이버에서 진행한 <모바일 본문 타이포그래피 연구>라는 제목의 동영상이다.
2024년 지금에 보아도 어제 진행한 것 같은 세련된 내용과 진행도 인상적이지만, 전반적인 내용이 유익하여 공유해본다.
네이버 & 디자인 계열의 박사님들이 함께 연구를 진행.
모바일 환경에서, 즉, 스마트폰에서 한글 타이포그라피로 쓰여진 본문을 읽을 때 어떤 셋팅이 가장 가독성을 좋게 만드는가에 대한 연구.
가설 설정과 방법, 통제 등에 대해 서론에서 설명하고, 국어 지문을 읽고 문제를 푸는 방식으로 실험을 진행, 결론을 이야기 해주는 방식으로 진행된 세션이다.
[디지털 타이포그래피, 스마트폰에서는 어떤 셋팅이 가장 가독성이 좋은가?]
1차 연구 결과
고딕, Medium, 17pt, 155%, 왼끝정렬, 단어로 줄바꿈이 우세
2차 연구 결과
1. 폰트
고딕이 명조보다 훨씬 가독성이 우수함.
디지털 환경에서 세리프는 화면 눈부심, 눈아픔 유발 가능
지면에서의 면과 화면에서의 면은 다름. 후자는 발광함.
2. 굵기
Medium과 Regular는 큰 차이가 없으나 Light는 열세
후면이 발광체인 경우, Regular라도 Light로 느껴질 수 있음.
본래의 굵기보다 더 얇게 느껴질 가능성이 있음
3. 폰트 사이즈
모바일 환경의 폰트 사이즈는 17px이 이상적이고 18.5px까지고 괜찮았으나 20px 넘어가면 열세
지면과 다르게 모바일 상에서는 글자를 덩어리로 인식
빠른 시간 안에 덩어리를 긁어내려는 맥락이 있음
그래서 글자들이 조밀하게 보이는게 유리
스마트폰에서 글자 수가 조금만 길어져도 폭이 좁기 때문에 글자가 길어짐.
4. 행간(글줄의 사이)
폰트사이즈 17px일 때 글줄 사이 (행간, Line-Height) 모바일에서 155% 행간이 좋은 결과를 보여줌
155%이하 혹은 이상은 열세
5. 정렬
왼끝 정렬, 단위 단위의 줄바꿈이 가장 유리
단어가 짤려있으면 다시 올라가서 읽어봐야 하는 역행 운동 발생
사람들이 대부분 가운데 영역을 응시함
눈의 위치에 맞게 글을 올리는 것
지면위의 글은 어디를 읽고 있는지 찾기 쉽지만
모바일 환경에서는 시시각각 글의 위치를 잃어 버린다는 뜻.
왼쪽 정렬은 글의 단위들을 더욱 더 덩어리로 인식시키면서 읽고 있는 곳을 파악하기 쉬움
6. 모바일 환경에서 타이포그라피의 한계
지면에서의 글은 디자이너가 보정을 통해 책이나 잡지 등으로 발간하여 가독성에 문제가 없어짐.
그러나 모바일 위의 타이포그라피는 기술적인 이슈로 개별 보정이 어려워, 위의 케이스들을 다 잡아내기가 까다로움.
이에 네이버는 2018년에 이를 세부적으로 보정하고 조정할 수 있는 프리셋 라이브러리를 만들어 배포
네이버는 한국의 대표 검색 엔진으로써 네이버를 통해 다른 웹으로 이동, 다시 네이버로 회귀하는 플랫폼임을 인지, 전반적인 타이포에 대한 가독성 높이는 역할과 책임을 이해하고 있어 해당 프로젝트 수행
환경에 따라 절대적인 수치가 아니겠으나 타이포에 대한 깊이 있는 연구를 알게 된 유익한 세션이었다.
나는 개인적으로 연구나 논문 등에서 따르는 가설, 입증, 결론의 방식을 좋아하는데, 그것이 특히나 실생활로 이어져 개인이나 사회에 긍정적 영향력이 있을 때 더욱 그러하다.
위 연구는 네이버가 자사 서비스의 발전 뿐만 아니라, 한글을 사용하는 전반적인 환경에 대해 좋은 영향력을 제공하는데 큰 의의가 있다고 생각된다. 생각 없이 본 영상이었는데, 오랜만에 대기업이 가질 수 있는 장점에 대해 생각하게 된 영상이다.
충분한 리소스로 깊이 있는 결과를 만들어 낼 수 있고, 거기서 멈추지 않고 그것을 나눌 수 있는 것.
마지막 단계까지 수행할 수 있을 때 비로소 영향력을 잘 인지하고 행사한 것이라 하겠다.
그럼 안녕
https://tv.naver.com/v/4700462
