작년 가을부터 제가 거론하던 화두 중 하나는 ‘짧은 줄바꿈’ 이었습니다.
지난 몇 년간 앱스토어(SK, LG)나 웹티비(tving,  MnetTV)등 특수한 형태의 쇼핑몰(?)을 진행하면서
느꼈던 1차적인 (서비스에 대한) 불평이 바로 ‘긴 정보를 누가 읽지?’ 였기 때문이었습니다.

개인적으로도 모니터 상으로 장문을 읽는 것을 아주 불편해 하구요.
사실 애플리케이션이나 방송정보들은 실제로 거의 읽지 않잖아요. 몇번의 UT (user test)를 통해
그것을 증명해 보기도 했습니다.
뭐, 물론 일반화하기엔 무리가 있어요. 애플리케이션이나 TV방송의 경우 이미지(스냅샷)가 많은
말을 해 주는 탓에 텍스트는 그저 애매한 짐작을 명확하게 define하는 역할 밖에는 하지 않지만,
기업 웹사이트나 일반 쇼핑몰 등에서는 추상적인 기업이념이나 상세 제품정보 등 ‘긴 텍스트’여야만
하는 내용이 꼭 필요하니까요.
몇가지 트렌드와 기법 등이 ‘짧은 줄바꿈’에 대한 지지를 보내고 있기도 합니다.
대표적인 것이 960 grid 이지요. 모바일과의 연동(RWD)이 중요해진 시점에 즈음해서 부각된 960 grid는 짧은 문장, 아니 정확하게는 width가 좁은 텍스트영역을 쓰도록 디자이너를 종용하고 있습니다.

(이미지 출처 : 960.gs)

Window 8의 Modern UI도 ‘짧은 줄바꿈, 짧은 글’의 유행에 한 몫 했지요.

(ModernUI는 애초에 단순한 정보나 SNS만 보여주는 구조이다보니…)

또한, 최근에 skeumorphic style에서 flat하게 바꾼 iBooks는, 앱의 너비가 넓어지더라도 최대
(약) 560px 까지만 텍스트의 너비가 넓어지도록 되어 있지요.
이 외에도, (지면에서의 ‘읽기’와 전자화면에서의 ‘읽기’간의 차이에 대한 내용은 좀 더 문서를
뒤져봐야 하겠지만) 편집 디자인에서도 줄바꿈의 주기가 점점 짧아지고 있구요.
이게 단순히 트렌드인지 아니면 현대인들이 좀 더 컴팩트한 독서를 하기 때문인지는 잘 모르겠습니다.
어쨌든, 디자이너의 입장에서는 글이 짧고 폭이 좁은 게 좋습니다.
모든 디자이너가 그렇지는 않겠지만 대개의 디자이너는 글씨 역시 타이포그래피라는 시지각 요소로 이해하기 때문이겠지요. 저 역시 짧은 문단의 작업이 즐거운 편이고, 그것이 잘 ‘읽힌다’ 고 생각하기
때문에 근래의 작업에 유난히 짧은 문단의 레이아웃으로 디자인을 실험하고 있습니다.

다독다독 뉴스레터를 통해 실험해 본 두 개의 극단적인 예입니다. 어떠신가요?
사실 둘 다 잘 읽히지는 않습니다.

하지만, 전체를 구성하는 요소를 한 눈에 본다면, 기존에 쭉 늘여 쓸 때의 행간/단락간(수직여백)이
문단간(수평여백)으로 치환되면서 좀 더 단위별 이해가 쉬워짐을 느낄 수 있습니다.
이건 웹/모바일에서 거슬려 하는 ‘스크롤’과 직접적인 연관이 있기도 하지요.
‘짧은 줄바꿈’은, 요즘 자주 쓰이는 수평스크롤과 함께 ‘한 페이지 안에서의’ hierarchy를 구성하는데
유용하게 쓰이기도 합니다. 아래 이미지의 경우, y값에 따라 컨텐츠 속성을 구별하고 있습니다.
물론 일반 모니터에서 스크롤도 (크게) 생기지 않구요.

(이미지 출처 : BBC_이 내용 좋아요, 참고하세요)

물론, ‘짧은 줄바꿈’은 장점만큼 단점도 많습니다. 이를테면, ‘디자이너가 함께 보는 눈길을 사로잡는
스마트폰 앱 UX&UI 디자인‘ 처럼, 예외적으로 긴 문장이 훅 들어오는 경우라던지,
‘인포메이션 아키텍처’ 처럼 단어 자체가 한 줄을 다 차지할 정도로 긴 경우에는 전체 레이아웃에
지장을 주기도 합니다. 폰트 크기에 다양한 variation이 필요한 경우 큰 폰트는 위와 같은 문제가
생기기도 하지요.
제가 ‘짧은 줄바꿈’에 대한 고민을 한창 했을 때의 프로젝트가 ‘Plan High’였습니다.
디자인에 대한 욕심을 ‘전혀’ 채울 수 없는 대내외 환경이었지만, ‘짧은 줄바꿈’에 대한 실험은 즐겁게 할 수 있었습니다.

플랜하이의 본문은 일정한 길이를 갖고 있습니다. 그리고, 기간/지역/문의처/일정/인원 등의 세부정보는 최대 30자가 넘지 않는다는 데이터도 있었습니다. 그래서, 왼쪽에서 vertical align을 해보았습니다. (파란색 부분) 아래 댓글 영역의 ID 부분도 단문이기에 레이아웃이 좀 정리되어 보였지요.

최종 버전에서는 위와 같이 정리되었지만, 이 역시 단문일 경우 우측 여백을 최대한 활용하도록
그리드를 적용했습니다. 첫번째 버전처럼 한 흐름에 죽 읽는 reading guide를 제시하지는 못했지만,
흥미로왔던 실험이었습니다.
서브컨텐츠 파트에서도 글씨의 양에 따라 컨텐츠를 배치해 보았습니다.

애초에 UI,UX라는 것의 대개는 어떻게 ‘볼 것인가’보다는 어떻게 ‘읽을 것인가’가 더 중요한 작업이
아닌가 합니다. 결론은, 짧던 길던 잘 읽히고 유저 입장에서 정보를 쉽고 빠르게 습득하면 장땡인
거라능… 뭐, 그렇다구요.

감사합니다.

– 가치디자인그룹 BS Kim