희곡을 위한 스타일 - 인형의 집

연극 대본, 희곡 같은 책이 의외로 많습니다. 셰익스피어, 소포클레스, 인형의 집... 저도 전자책을 편집하거나 뷰어 테스트를 하다보면 심심치 않게 대본형 전자책을 봅니다. 최근에는 인기 드라마 대본을 전자책으로 판매하기도 합니다.

그런데 대본 원고를 편집하는 방식이 제각각이더라구요.

아래 이미지를 보세요. 리디북스 미리보기로 인형의 집 전자책을 열어봤습니다. 리디북스 미리보기는 스타일이 100% 적용되지는 않아요. 그래도 전자책 뷰어로 보면 어떻게 보일지를 짐작해 볼 수 있습니다.

(클릭하면 확대해 볼 수 있습니다)

이 3가지 방식이 대본류를 편집할 때 가장 많이 사용하는 스타일인것 같아요.

어떤 책이 보기 편하세요? 왼쪽이나 오른쪽이 가운데보다 보기 편할거예요. 종이책은 왼쪽 처럼 내어쓰기 편집을 많이 합니다. 개인적인 취향이긴 하지만, 오른쪽 처럼 등장인물 이름이 너무 도드라져 보이면 대본을 보는데 신경이 쓰여서 저는 왼쪽 편집을 좋아합니다.(제가 만들어서 그런건 아니에요 ^^;)

이번엔 인형의 집을 갖고 전자책을 위한 대본 스타일을 정리해 봤습니다. 

 

1. 주요 편집 스타일

1.1 본문

이 두 페이지 안에 오늘 필요한 스타일이 모두 나와 있습니다. 종이책 PDF를 캡쳐한거예요.

먼저 (대본류의 용어를 모르니 먼저 양해를...) 배경 설명을 하는 부분이 있습니다. 들여쓰기를 안했다는 것 빼면 일반적인 '본문' 스타일이 적용됐어요.

1.2 설명

그리고 등장인물의 행동을 설명하는 부분이 있습니다. 괄호로 묶여있고, 등장인물의 대사에도 쓰입니다. 본문보다는 작은 글씨체예요.

1.3 이름

그 다음 등장인물 이름입니다. 굴림/고딕 계열의 글꼴을 사용해 대사와 구분을 합니다.

1.4 대사

끝으로 대사 부분입니다. 이름과 대사는 하나로 묶여 내어쓰기가 되어 있습니다.

2. 전자책 편집 스타일

2.1 본문

{

font-family:"기본글꼴";

text-align:justify;

line-height:1.8em;

font-size:1em;

text-indent : -3em;

padding : 0 0 0 3em;

}

p.noindent {

padding : 0;

text-indent : 0;

}

<p class="noindent">검소한 가구들이지만 품위 있게 꾸며진 아늑한 거실. 뒷벽에는 문 두 개가 있다. 오른쪽 문은 현...</p>

본문 스타일을 잡을 때 고민을 했습니다. 본문은 p 태그에 기본 스타일을 지정하기 때문에 편집할 때 다른 속성을 넣을 필요가 없습니다. 그런데 대본은 한번 더 생각을 해야되요. 

본문이 많이 나오나요? 아니면 대사가 더 많이 나오나요? 당연히 대사가 더 많이 나옵니다. 그렇다면 기본 스타일은 대사가 되야하지 않겠어요? 본문이 나오는건 장과 장이 넘어갈 때 2~3 단락 정도입니다. 

그래서 본문 기본 스타일을 책의 대부분을 차지하는 대사에 맞추고, 본문에는 noindent 속성을 추가했습니다. 

본문 분량이 많다면 div나 blockquote로 블럭을 지정하고 한번에 스타일을 지정할 수도 있습니다. 가족관계 기억 하시지요? blockquote + p { }요.

2.2 설명

sub

{

font-size:0.9em;

vertical-align : baseline;

}

<p class="noindent">_{(현관에서 초인종이 울리고...손에 들고 있던 크리스마스트리와 바구니를 건넨다.)}</p>

...

<p><span class="name">노라</span>헬레나, 크리스마스...보면 안 돼. _{(지갑을 꺼내며 짐꾼에게)} 얼마죠?</p>

설명 항목은 새로운 스타일을 만들지 않았습니다. 이전 글에서 '기본 스타일'로 설명 드린 <sub> 태그를 그대로 사용했습니다.

설명도 몇가지 고민을 했습니다. 반복 횟수는 많은데 대사 중간에 들어가는 경우도 있거든요. p 태그에 클래스를 추가하는 방식이 더 깔끔하긴 하지만, 이렇게 하면 대사 중간에 들어가는 설명은 더 복잡해집니다. span 태그를 쓰거나, 똑같은 스타일을 선택자와 sub 2개로 만들어야 합니다.

그래서 저는 sub 태그로 통일시켰습니다.

스타일을 2개 만들어야 하는 이유 외에도 sub 태그를 쓴 이유가 하나 더 있습니다. 편집 시간 단축을 위해서예요.

설명은 모두 괄호( )로 묶여 있습니다. sub 태그로 통일시키면 찾아바꾸기로 한번에 스타일을 지정할 수 있습니다. 

몇번을 강조해도 부족함이 없지만, 아무리 강조해도 이해하지 못하는 것 중 하나가, 스타일은 '정답'이 없다는 거예요. 코드는 깔끔해야 하지만, 편집 시간을 확 줄일 수 있다면 조금 복잡한 코드는 눈감아 줄 수 있습니다. 경우에 따라서는 편집 시간을 줄일 수 있다 해도 깔끔한 코드를 선택해야 할 때가 있고요.

저는 이번엔 깔끔한 코드 보다는 짧은 편집 시간을 선택했습니다.

찾기 : (   / 바꾸기 : <sub>(

이거 한번으로 417번의 반복 작업을 끝낼 수 있었습니다. 

그리고, 이게 정답은 아닙니다. 제 선택이었을 뿐이에요.

3. 이름

.name {

font-family:"강조글꼴";

margin-right : 1em;

}

<p><span class="name">노라</span>금방 왔어요. ...</p>

이름 스타일은 특별한게 없어요. 본문과 다른 글꼴, 본문과 오른쪽 간격을 벌려주는 속성을 사용했습니다.

그런데 이름 스타일이 1304번 적용됩니다. 스타일 하나 적용하는데 1초씩 잡아도 20분이 넘게 걸려요. 1초에 가능할까요? 2~3초씩은 걸립니다. 그러다 보면 이름에 스타일 지정하는데만 30분~40분은 걸립니다.

이럴 때 패턴을 찾아보세요. 어떤 패턴이 보이세요?

<p>노라

<p>짐꾼

<p>헬미르

...

등장인물은 모두 9명입니다.

<p> 태그 다음에 사람 이름이 나오면 그건 등장인물인거예요. 무조건 그런건 아닙니다. 원고에 따라 다를 수 있어요. 하지만 이 책은 <p> 태그 다음에 이름이 나오면 그건 등장인물 이름입니다.

그럼 찾아바꾸기가 통하겠지요?

찾기 : <p>노라

바꾸기 : <p><span class="name">노라</span>

이렇게 등장인물 이름을 바꿔가며 9번 실행합니다. 5분도 안걸려요.

다른 대본 원고도 90% 이상은 이런 패턴일 거예요. 그럼 100번 중 90번을 수정하는게 편한지, 아니면 10번을 수정하는게 편한지 고민을 해보세요.

2.4 대사

p

{

font-family:"기본글꼴";

text-align:justify;

line-height:1.8em;

font-size:1em;

text-indent : -3em;

padding : 0 0 0 3em;

}

<p><span class="name">노라</span>헬레나, 크리스마스트리를 잘 숨겨둬. 오늘 저녁 장식을 끝낼 때까지 아이들이 보면 안 돼. _{(지갑을 꺼내며 짐꾼에게)} 얼마죠?</p>

마지막으로 대사입니다. [2.1 본문] 설명하면서, 본문보다 대사 분량이 월등히 많기 때문에 기본 스타일을 대사에 맞췄다고 설명했습니다. 기본 스타일로 만드니 대사 부분의 HTML 코드가 깔끔해졌어요. 1400번 반복되는 대사 내어쓰기를 p 태그 하나로 끝냈습니다. 본문에 noindent 클래스를 추가한 이유가 이것 때문이에요.

여기서 눈여겨 보실 부분은 마지막 2줄이에요.

text-indent : -3em;

padding-left : 3em;

padding : 0 0 0 3em;은 padding-left : 3em;과 똑같습니다. 

원리는 이래요.

1. padding-left : 3em; 눈에 보이지는 않지만, 상자를 하나 그리고 상자 안쪽 여백을 3em 만큼 줍니다.

그러면 이렇게 될거예요. 상자 안쪽 여백이 3em 만큼 들어갑니다. 여기서 주의할 점은 절대 margin을 쓰지 말라는거예요. margin을 써도 눈에 보이는 결과는 같습니다. 하지만 margin은 상자 바깥쪽 여백이라 상자를 눈에 보이게 만들면 텍스트가 상자 바깥으로 튀어나가 보입니다.

2. text-indent : -3em; 그 다음 들여쓰기를 -3em 줍니다. 그럼 첫번째 줄만 3칸 앞으로 오게 되요. 들여쓰기의 반대입니다.

그러면 이렇게 될거예요. 상자 안쪽 여백이 3em 만큼 들어갑니다. 여기서 주의할 점은 절대 margin을 쓰지 말라는거예요. margin을 써도 눈에 보이는 결과는 같습니다. 하지만 margin은 상자 바깥쪽 여백이라 상자를 눈에 보이게 만들면 텍스트가 상자 바깥으로 튀어나가 보입니다.

 

이 스타일은 대본 외에도 편집에 많이 사용이 되요. 특히 글머리 숫자나 글머리 기호를 표현할 때 유용합니다. 

 

이제 비교해 보세요. 본문과 등장인물 이름이 구분 없이 편집된 책, 등장인물 이름만 강조한 책, 들여쓰기를 하고 등장인물을 본문 글꼴과 구분시킨 책. 셋 중에 어떤 책을 읽고싶으신가요?