한 줄 띄어 쓰기

예전에 이야기로 PC통신 할때부터

한줄씩 띄어서 썼습니다.

띄어 쓰기 없이 붙여서 글을 쓰면 답답해 보이고

읽기도 힘들어서

한줄씩 띄어쓰기를 하였습니다.

그뒤로는 계속 한줄씩 띄어 쓰기 하고 있습니다..

자신이 입력할 때 사용한 줄바꿈 형태가 정확히 반영이 되는 환경이라면 (말이 좀 애매한데 아래에 부연설명하겠습니다) 뭐 적당히 알아서 하면 되겠지요.

즉 자신이

안녕하세요[엔터]
저는 홍길동입니다[엔터]
반갑습니다

안녕하세요
저는 홍길동입니다
반갑습니다

라고 나온다면, 그 웹사이트의 줄간격이 어느 정도냐에 따라 한 줄을 띄울 지 말 지 결정하면 될 거란 얘깁니다. (물론 국어책에서야 단락마다 띄우라고 되어 있습니다만 많은 분들 말씀처럼 가독성 문제가 있다보니)

그런데 가끔 가다 보면 도무지 이해할 수 없을 정도로 출력 화면의 폭을 작게 잡은 곳들이 있는데... 이런 데 가면

안녕하세요[엔터]
저는 홍길동입니다[엔터]
반갑습니다

위와 같이 적으면 (실제로는 각 라인이 한 80컬럼쯤 되는 양이라고 칩시다)

안녕하세
요
저는 홍길
동입니다
반갑습니
다

이렇게 보이는 불상사가... :oops: 이 때는 줄 사이를 한 줄 띄우든 말든 관계없이 영 보기 흉하게 되지요.

이런 이유로 저는 웬만하면 웹에서 글을 작성할 때는 한 단락을 줄바꿈없이 이어쓰는 것을 선호합니다.

영문 문서에 맞추어져 있는 줄 간격을 한글 문서에서도 그대로 사용하고 있기
때문입니다. 영문 글꼴의 경우 한글 보다 세로 길이도 약간 짧고 위에 분이
말씀하셨듯이 소문자의 경우 대문자보다 세로 길이가 훨씬 더 짧기 때문에
기본 환경에서도 줄 간격이 꽤 넓어서 한 줄씩 띄우면 오히려 보기가 안 좋습니다.

그런데 우리는 영문에 맞춰져 있는 줄 간격과 같은 간격으로 한글을 사용하고
있습니다. 영문의 경우도 대문자로만 문단을 다 쓸 경우 줄 간격이 좁아서 답답해
보입니다. 그런데 영문 대문자보다도 더 크기가 큰 한글을 같은 간격으로 써
놓으면 답답해 보이는 것이 당연합니다.

게다가 대부분의 사람이 사용하는 굴림체의 경우 각 글자가 그 글자가 차지할
수 있는 네모칸을 빽빽하게 다 채웁니다. 그 결과 기본 환경에서는 한 줄에서의
글자와 글자 사이의 가로 간격과 줄과 줄 사이의 간격이 거의 같아집니다.
다시 말해서 줄과 줄이 구분이 안 되고 문단 전체가 그냥 다 붙어 있는 한 덩어리
처럼 보이게 됩니다.

이렇게 매줄 띄어쓰는 것이 자리잡게 된 것은 일정 부분은 고정폭 글꼴 특히
굴림체의 폐해라고 할 수 있습니다. 결국 두 가지 해결책이 있습니다. 하나는 줄
간격을 늘리는 것이고, 또 하나는 영문처럼 세로 길이가 글자마다 다른 들쑥날쑥한
글꼴을 사용하는 것입니다.

VT 시절의 잔재 아닌가요? 그 당시에는 정말 그렇게라도 안띄워주면 읽기가 정말 안좋았기 때문에... 한줄 띄움을 했었지만 요새는 문단별로 띄어쓰기를 하려고 노력중입니다 :)

web 에서는 오히려 한 줄 띄움이 읽기 더 안좋더군요.

확실히 PC 통신의 잔재라고 생각됩니다.
예전에 VT 모드에서는 한줄 띄어쓰기가 매너였지요.. :)

line-height 가 적절히 설정되어 있는 곳에서는 확실히 한 줄 띄어쓰기는 의미가 없다고 봅니다.

쓰레드를 읽어보고 빨랫줄글꼴이란 놈들을 구해서 사용해보니
굴림체보다는 글읽기가 더 편하네요.

그런 글꼴들에 대해 막연한 거부감이 있었던 것은 사실이지만
실제 글꼴의 세로크기가 변하면서 리듬감이 생긴다고 해야 하나.

여하튼 긴 문장이나 글들을 읽을때 효과적이라고 느꼈습니다.

문제는 모든 사이트들이 공통으로 같은 line-height를 사용하지는 않는다는 거겠죠.

그렇기 때문에 line-height가 잘 setting 되어 있지 않은 사이트에서 글을 쓰다보면, 무의식적으로 한 줄씩 띄어쓰기가 되어 버립니다.

단순하게 CSS를 사용하고 말고가 아니라 표준 비슷한 이야기가 되는 거지요...

에서는 사용자 정의 CSS를 쓰거나 GreaseMonkey를 쓰거나 해서 자기가 편한대로 고칠 수 있는 방법이 많이 있습니다. 그리고, 이도저도 아니면 그 사이트 관리자에게 이러저러하니 좀 바꿔달라고 하는 방법도 있습니다.

아무래도 요청하는 사람이 없었을테니깐요. 글자크기 키워달라는 분은 봤어도 칸 늘려달라는 사람은 본적이 없는 것 같습니다.

비 로마 문자 사용자들만 필요로 하는 특수한 기능이기 때문이 아닐까요?

좀 더 부연설명을 달자면, 사실 줄 간격 조절은 브라우저에서 할 일이 아닙니다. 글꼴 자체에 이미 위, 아래 여백이 설정되어 있기 때문에 line-height 100% 상태에서는 글꼴 자체에 설정되어 있는 줄 간격으로 화면에 표시됩니다. 알파벳을 비롯한 라틴 문자에서는 이 간격이 원래 읽기 편한 간격으로 되어 있기 때문에 따로 줄 간격을 조절할 필요가 거의 없습니다.

그런데 한글의 경우 같은 포인트의 글꼴에서 영문보다 좀 더 큰 데다가 대/소문자가 따로 없기 때문에 영문과 같은 줄 간격이라도 줄과 줄 사이의 여백은 영문에 비해 훨씬 좁습니다. 그럼에도 불구하고 글꼴 자체의 줄 간격은 영문 글꼴과의 혼용을 위해서 영문을 기준으로 설정이 되어 있기 때문에 한글 문서의 경우 매우 답답하게 보입니다.

FireFox 개발자가 비-라틴 문자를 사용하지 않는 이상 줄 간격 조절의 필요성을 못 느끼는 것은 당연합니다.

글꼴 크기 조정하는 방법 (자바스크립트+쿠키)는 구글링 해보면 많이 나오는데, 라인 간격 조절하는 방법은 거의 같은 방법임에도 불구하고 찾지 못하겠네요.

그냥 잘 만들어진 글꼴 크기 조정하는 자바스크립트를 다운받아서, 줄 간격만 설정할 수 있게끔 고쳐보았습니다.

아래 스크립트를 적당한 위치에서 로딩하면 됩니다.
(모니위키용 매크로로 써먹기 위해 만들었습니다 :) )

/*
    based on http://www.onlinetools.org/tools/easydynfont.php
*/

// set default settings
var _defaultHeight="100%"
var _cookie_lineheight='_MY_LINEHEIGHT_';
var _nosave=false;

function drawform() {
    if (!document.layers){
        document.write("<div id=\"lineheightForm\">");
        document.write("[<a href=\"javascript:addHeight(10)\">+</a>|");
        document.write("<a href=\"javascript:addHeight(-10)\">-</a>]");
        document.write("</div>");
    }
}
/*
    function init()
    loads the cookiedata and changes the document accordingly, if there is no
    cookie, sets the standard settings and stores it
*/
function initLineHeight(){
    if (!document.layers){
        val=getCookie(_cookie_lineheight);
        if (val!=null){
            document.getElementsByTagName("body").item(0).style.lineHeight=val;
        } else {
            document.getElementsByTagName("body").item(0).style.lineHeight=_defaultHeight;
            storeHeight()
        }
    }
    // Special setting, if you want to use the "don't save" chekbox
    //_nosave=document.dynform.nosave.checked
}
/*
    function addHeight(add)
    increases the lineheigth of the document by "add", negative values make the
    lineheight smaller.
*/
function addHeight(add){
    if (!document.layers){
        doc = document.getElementsByTagName("body").item(0)
        val=parseInt(doc.style.lineHeight)+add;
        doc.style.lineHeight=val+"%";
        if (_nosave==false) storeHeight()
    }
}
/*
    function SetHeight(add)
    sets the lineheight of the document.
*/
function setHeight(add){
    if (!document.layers){
        document.getElementsByTagName("body").item(0).style.lineHeight=add+"%";
        if (_nosave==false) storeHeight()
    }
}

/*
    function storeHeight()
    saves the current settings of the document in a cookie
*/
function storeHeight(){
    var exp = new Date();
    exp.setTime(exp.getTime() + 24*60*60*90*1000);
    val=document.getElementsByTagName("body").item(0).style.lineHeight;
    setCookie(_cookie_lineheight,val,exp);
}

function setCookie(name, value, expires, path, domain, secure) {
    var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "; path=/") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "")
    document.cookie = curCookie
}

function getCookie(name) {
    var prefix = name + "="
    var cookieStartIndex = document.cookie.indexOf(prefix)
    if (cookieStartIndex == -1)
    return null
    var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex +
    prefix.length)
    if (cookieEndIndex == -1)
    cookieEndIndex = document.cookie.length
    return unescape(document.cookie.substring(cookieStartIndex +
    prefix.length,
    cookieEndIndex))
}

initLineHeight();
drawform();
// vim:et:sts=4:

페이지 맨 상위에 위치시키기 위한 css의 예

#lineheightForm {
  display: block;
  text-align:right;
  position: fixed;
  filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
  top: 0px;
  left: 1px;
  right: 1px;
  height: 1em;
  z-index: 1;
  overflow: hidden;
  background-color: #e0e0e0;

  padding: 2px;
  padding-right:20px;
}

예 아무래도 쭉 붙어 있는 글은 컴퓨터로 보기에는 편하지만은 안더군요.

책이나 프린트물이라면 모를까.

메뉴얼등은 대부분 쭉 붙어 있는데... 보기 힘들어 항상 프린트해서 봅니다.. 그건 보는데 이상하지 않지만 모니터로 보는 글은 붙어 있으면 힘들더군요.

혹시 300dpi나 600dpi 이상의 모니터는 없나요?

그리고 한글 글꼴이 영문소문자와 같이 작게 나오는 것은 있나요?

ps. 300dpi라면.. 대강 17인치모니터에서 4080x3060의 해상도가 나와야된다는 계산..

pc 통신에서의 영향이 꽤 클 것 같군요.
저도 나우누리 쓸 때 글 한 줄 쓰고 엔터 두 번 치고 글 쓰고 했거든요.

그땐 터미널에서 줄 끝 경계를 넘어가면 글자가 깨지곤 했기 때문에 의도적으로 한 것도 있고, 사람들이 그런 방식을 많이 보다보니 서로 그렇게 쳐서 그 방식이 정착하게 된 것 같습니다. 그 방식이 웹으로 와서도 영향을 끼치는 곳이 있더군요. 워드 프로세서를 쓸 때는 문단에 맞춰서 엔터로 구분하는 게 낫지만, 예전처럼 한 줄 마다 엔터를 쳐서 보는 게 편할 때도 있습니다.

네모 글꼴이 아닌 빨랫줄 글꼴이라면 줄을 붙여써도 가독성이 좋을지도 모르겠군요. 적어도 받침이 없는 글자만큼 공백이 생길테니..

pc 통신에서도 가끔 문단마다 글을 나눠서 엔터로 구분하는 사람도 있었습니다. 그런 경우 줄 끝도 정렬해서 깔끔하게 하시는 분도 있더군요. 상당히 고급스럽다.. 는 느낌을 받기도 했습니다. (때로는 딱딱하게 느껴지기도 했지만)

저한테 100% 맞는 말인 것 같습니다.
특히 저한테는 10%수준의 가독성도 안되는 것 같은데요.^^

회사내의 프로그래머 대부분은 프린트물이 아닌, 모니터를 보면서 메뉴얼과 레퍼런스들을 읽고 문제를 해결하려는 편들입니다.
하지만, 유독 저만은 모든 자료들은 프린트해가며 보는 편입니다.
프로그래머로 일하면서 모니터화면을 보면서 해결할 수도 있긴 한데, 저는 꼭 종이로 출력해서 프린트물을 보면서 문제를 해결하려는 성향이 있네요.^^

그 '가독성'이라는 말은 저한테 꼭 맞아떨어지는 표현같군요...

저도 글을 쓸 때 문장 단위로 한 줄씩 띄어 씁니다.

바로 지금처럼...

위의 분들이 말씀하신 대로 역시 가독성 문제죠.

사람의 눈은 반사된 빛을 보는 데에 익숙해 있어서, 발광하는 물체를 보는 것에는 부적당하다고 하는군요. (모니터도 발광하는 물체죠.)

제 경우에는 이런 식으로 여백을 주지 않으면 글을 읽을 때 눈이 쉽게 피로해집니다.

글은 역시 종이로 보는 것이 편해요.

동계올림픽 본다고 밤을 꼬박 새웠내요. 올림픽이 저를 폐인으로 만들어 가고 있습니다. (아우~~ 피곤해.)