UI·GUI 디자인을 위한 줄바꿈 테스트
Design Story
지금까지 언론사, 방송사 등 “정보를 다루는 프로젝트들”을 진행하면서 가장 고민이 많았던 부분은 텍스트 운용정책이었습니다.
다양한 디바이스 환경과 유저의 층위를 고려하여 가장 적절한 크기와 행간을 운용하는 것은 시각적으로 도드라져 보이지는 않지만, 사용자의 편의에 직접적인 영향을 끼치는 요소이기 때문입니다.
텍스트 운용 정책에는 행간, 자간, 색상대비, 문단너비 등 다양한 요소를 생각할 수 있지만 오늘은 개인적으로 고민했던 – 그리고 KBS(2017), 중앙일보(2015) 프로젝트에서 실험해 본 – “줄바꿈” 실험에 한정하여 이야기하고자 합니다.
* 출처 https://trevellyan.biz/auto-hyphenation-in-photoshop/1. 우연한 발상
위 이미지는 포토샵의 문단 옵션창입니다. 문단을 만들 때 Hyphen을 사용해서 단어를 깰지 아니면 단어를 깨지 않고 띄어쓰기 기준으로 줄바꿈 할지 선택하는 기능이지요.
하이픈을 사용하면 행의 글자 수를 비교적 일정하게 유지할 수 있다는 장점이 있습니다.
많은 텍스트(문단)가 한눈에 보이는 경우 글자의 덩어리를 보다 더 잘 보여줄 수 있죠. 하지만 문단의 너비가 넓을 경우(약 50자 이상), 하이픈으로 끊어진 글자를 연속적으로 읽기 어렵다는 단점도 있습니다.
hyphenation의 장단점이 너무 뚜렷하기에 ‘외국의 웹/앱에서는 얼만큼의 비율로 hyphenation을 사용할까?’ 를 리서치 해 보았습니다.
리서치의 결과로 얻은 결과는 다소 놀라웠습니다.
최소한 제가 리서치한 바로는 hyphenation을 사용하는 웹/앱 서비스는 단 하나도(!) 찾지 못했습니다.
영어권 서비스들은 물론, 단어가 긴 거로 유명한 독일어권 서비스들도 둘러 봤지만 발견할 수 없었습니다. (미처 조사하지 못했던 어디선가 사용되고 있을지도 모르지만)
한글처럼 조합하지 않고 우측으로만 확장하는 라틴 문자들은 한글보다 단어의 길이가 길기 때문에 서구권에서는 아주 오래전부터 ‘문단을 관리하는’ 다양한 타이포 장치들을 개발해 왔는데요. 전자책(킨들)을 제외한 어떤 웹/앱에서도 hyphenation을 발견할 수 없었다는 것은 제게 적잖은 충격을 주었습니다.
기술적으로 어려운 걸까 해서 조금 찾아보니 다음과 같은 글(링크)도 있더군요. 즉, 완전하진 않더라도 어쨌든 구현은 가능한 기술이지만, 디바이스와 브라우저의 영향을 받기 때문에, 또한 영향을 받는 규모가 충분히 유효하기 때문에 사용하지 않는 것 같습니다.
아무튼 리서치를 통해 외국의 거의 모든 웹/앱 서비스들은 hyphenation을 쓰지 않고, 띄어쓰기 기준으로 줄 바꿈 한다는 것을 알게 되었습니다.
그런데 우리나라 서비스들은 – 최소한 네이버와 다음, 네이트 등 국내 주요 포털 사이트들은 – 단어를 그냥 깨서 쓰고 있었습니다.
한글은 자음+모음이 한 글자로 표현되기 때문에 어색하지 않은 걸까요?
아니면 한글은 띄어쓰기 줄 바꿈이 기술적으로 어려운 걸까요?
퍼블리싱 파트에 문의해 보니, 한글은 띄어쓰기와 관계없이 텍스트필드의 너비에 맞게 줄바꿈되는 것이 디폴트라고 하더군요.
2. 모바일웹에서 테스트
띄어쓰기 기준 줄 바꿈에 대해서 퍼블리싱과 개발 파트에 자문을 구해 본 결과, 구현이 가능하다는 것을 알게 되었고 (개발자들은 좀 귀찮아 하셧….),
중앙일보 개편 프로젝트 (링크)를 진행하면서 구현해 보기로 했습니다. 그리고 중앙일보 때의 노하우를 바탕으로 2년 후 KBS 프로젝트 (링크)를 통해 개선안을 제작했습니다.
*중앙일보 모바일 * KBS 모바일가급적 비슷한 기사를 네이버와 다음에서 찾아 보았습니다.
*네이버 모바일 *다음 모바일어떤가요? 보는 사람마다 다르게 느끼실 것 같네요.
낱말을 깨는 (네이버, 다음) 방식은, 한정된 작은 영역 내에 더 많은 글자를 넣을 수 있다는 장점이 있습니다.
행의 길이도 25자 내외여서 아래 행의 머리를 찾기에도 무리가 없어 보입니다.
스마트폰이 많이 커졌다고 해도, 한눈에 전체를 다 담을 수 있을 만큼은 작으니, 굳이 띄어쓰기 기준으로 줄바꿈할 필요가 없어 보입니다.
하지만, 개인적으로는 (다음 모바일에서) “20분부/터, 큰곰자/리” 같은 부분이 제 읽기를 방해하는 느낌입니다.
이에 비해서 중앙일보의 줄 바꿈 방식은, 우측에 많은 여백이 남는다는 단점이 있으나 단어가 온전히 보전되기 때문에 행 전환 시에 불필요하게 생기는 임시기억의 필요가 적습니다.
또한 자연스럽게 화면의 밀도가 낮아지는 효과가 있어서 시각적으로 조금은 편안한 느낌입니다.
단, 이 경우에도 “사분의자리/유성우” 처럼 띄어쓰기로 구분된 단어는 의미상 쪼개지는 느낌이 있습니다.
(이후 KBS에서는, 문단의 응집력을 강화하기 위해 좌우 여백을 좀 더 두고, 글자를 작게 했습니다.
통계적으로 우측여백이 적어지는 효과를 발견했으며, 이때 줄어드는 화면 여백은 좌우 여백의 확대로 벌충했습니다.)
3. PC 웹에서 테스트
PC 웹의 경우, 화면이 충분히 넓기 때문에 모바일처럼 한눈에 문단이 들어오지 않고 책을 읽을 때와 유사한 시각탐색이 있습니다. 그 때문에 행 전환 시 다음 행의 머리를 찾는 행위가 모바일에서보다 더 중요합니다.
다만, 여러 가지 UI 장치들이 배치될 가능성이 많아서 모바일처럼 서체+문단만 오롯이 드러나기는 어려운 상황입니다.
* 중앙일보 PC웹
* KBS PC웹
* 네이버 PC웹
* 다음 PC웹확실히, 네이버/다음에서 문단의 덩어리 감이 잘 보입니다.
문장과 관계없이 위치와 규모를 짐작할 수 있다는 점에서 “그리드”와 유사한 효용이 있습니다.
책과 다르게 ‘다양한 정보요소가 공존하는’ 웹상에서는, 각 영역의 기능과 구획을 분명히 하는 것이
읽기에 도움을 주고 시각적 간섭을 줄여주는 것 같습니다.
하지만 띄어쓰기 별 줄 바꿈은, 모바일에서와 동일한 장점이 있으나,
네이버/다음 PC 웹이 가지는 장점에 대응할 만한 추가적인 효용이 없어 보입니다.
더욱이 주변 요소들의 시각적 간섭에 영향을 받는 단점은 더욱 부각되어 보입니다.
(기술적인 문제로 인해 KBS의 문단 너비가 넓어져 버렸습니다. 하여, 띄어쓰기 별 줄 바꿈의 효용보다는, 한 줄에 너무 많은 글자가 들어간 것이 시각적인 불편을 초래합니다. 완전히 통제할 수 있는 ‘실험’이 아니니까 – 아쉽지만 어쩔 수 없죠.)
4. 정리
프로젝트를 이용하여 두 번의 테스트를 했지만, 뚜렷한 해답을 내릴 수는 없었습니다.
개인적인 취향과 논리로는 “띄어쓰기 기준 줄 바꿈”에 강한 지지를 보내지만 저와 반대편의 견해를 가진 분들의 이유와 생각도 충분히 이해할 만 했습니다.
단순히 이론적으로만 생각하던 것을 실제 데이터를 운용하며 확인해 보니 – 마냥 ‘띄어쓰기 기준 줄 바꿈’이 옳은 것만은 아니더군요.
또한, 이 줄 바꿈 문제는 이전에 고민했었던 ‘짧은 줄 바꿈 (링크)‘ 문제와 긴밀한 연관성을 갖습니다.
오늘의 ‘띄어쓰기 별 줄 바꿈’이나 ‘짧은 줄 바꿈’ 모두 – (편집 디자인 등의) 정적인 타이포그래피 이론에서는 일단락된 주제이지만 UI/GUI 에 적용하면서 다시 고민해야 하는 문제이기 때문입니다.
페이지를 넘기는 대신 스크롤하고, 버튼이 사이에 배치되고, 데이터(텍스트)를 짐작할 수 없는 상황이기 때문이죠.
UI/GUI가 보편적으로 되어갈 수록 다양한 기술이 적용될수록, 타이포그래피는 많은 도전을 받게 될 것입니다. 하지만 지난 20여 년 동안 GUI의 발전은 – 역설적으로 활자(텍스트)가 그래픽으로 치환될 수 없음을 증명해 주었습니다.
AI와 VUX가 고도로 발전하기 전까지는 활자의 힘이 건재할 것이고, 이는 현대의 ‘책’이 가지는 위상과 같을 것입니다.
그리고 만일 ‘그 미래’가 온다면 우리 같은 GUI 디자이너들은 다른 일을 찾아야 하겠죠.
– 라이트브레인 가치디자인그룹
