반응형 eBook 디자인

EBook 은 판짜기 방식에 따라 비정형(Reflowable Layout)과 고정형(Fixed Layout)으로 나눌 수 있습니다. 고정형 판짜기는 화면의 크기가 미리 정해지기 때문에 인쇄물과 같은 수준의 디자인 작업이 가능합니다. 때문에 어린이 책이나 잡지 등에 적합하다고 여겨집니다. 하지만 다양한 크기의 화면에서 동일한 수준의 사용자 경험을 제공하기에는 곤란한 점이 많습니다. 반면에 비정형 판짜기는 구성요소들의 위치가 미리 지정되지 않고 화면의 크기에 따라 흘러 다니는 방식으로, 글 위주의 콘텐트로 구성된 소설류에 적합합니다. 현재 판매되고 있는 eBook 의 대부분이 비정형인 이유중의 하나는 제작의 간편함입니다. 고정형 판짜기의 단점을 감수한다는 뜻은 상당한 수준의 디자인을 도입한다는 뜻이 되고 이는 항상 제작 비용의 증가로 이어집니다. 그렇지만 비용의 증가가 늘 심각한 문제가 되는 것은 아닙니다. 오히려 비용보다도 고정형 판짜기가 모바일 환경에 적합하지 않기 때문입니다. 최근 웹 디자인에서 모바일을 우선시하는 경향은, 높은 수준의 디자인을 도입하면서도 고정형 판짜기의 단점을 회피하려는 사조를 낳았습니다. 바로 반응형 웹 디자인(Responsive Web Design)입니다. 이 사조는 몇 가지 단순한 원칙과 기법을 통해 다양한 화면의 크기 변화에 능동적으로 반응하여 각각의 경우 고정형에 근접하는 판짜기를 실현합니다. 사실 이 사이트도 간단하지만 이 기법을 사용하고 있습니다. 스마트폰이나 태블릿으로도 읽어보세요. 고정형 판짜기의 자세한 내용은 다음에 따로 살피기로 하고, 오늘은 반응형 웹 디자인의 기법을 eBook 디자인에 적용해보기로 하겠습니다. EPUB3 는 반응형 디자인이 필요로 하는 모든 기법을 지원하고 있습니다. 반응형 디자인의 도구상자는 CSS 에 적용되는 세가지 기법으로 구성됩니다.

매체 질의(Media Queries)
유동 격자(Fluid Grids)
유동 이미지(Fluid Images)

이 세가지를 사용하여 꾸민 오늘의 예제는 하나의 XHTML 과 하나의 이미지로 구성됩니다. flowdas.xhtml

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>반응형 판짜기 예제</title>
        <style type="text/css">
            img {
                max-width: 100%;
                height: auto;
            }
            .box {
                width: 25%;
                line-height: 10em;
                margin: 0 auto;
                float: left;
                text-align: center;
            }
            @media (min-width: 481px) and (max-width: 1024px) {
                .box {
                    width: 33.3333%;
                }
            }
            @media (min-width: 321px) and (max-width: 480px) {
                .box {
                    width: 50%;
                }
            }
            @media (max-width: 320px) {
                .box {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="banner">
            <a href="http://www.flowdas.com/" title="flowdas.com"><    img src="flowdas.png" /></a>
        </div>
        <div class="box">
            <p style="background: #f00; color: #fff">1</p>
        </div>
        <div class="box">
            <p style="background: #b00; color: #fff">2</p>
        </div>
        <div class="box">
            <p style="background: #700; color: #fff">3</p>
        </div>
        <div class="box">
            <p style="background: #300; color: #fff">4</p>
        </div>
        <div class="box">
            <p style="background: #0f0; color: #fff">5</p>
        </div>
        <div class="box">
            <p style="background: #0b0; color: #fff">6</p>
        </div>
        <div class="box">
            <p style="background: #070; color: #fff">7</p>
        </div>
        <div class="box">
            <p style="background: #030; color: #fff">8</p>
        </div>
        <div class="box">
            <p style="background: #00f; color: #fff">9</p>
        </div>
        <div class="box">
            <p style="background: #00b; color: #fff">10</p>
        </div>
        <div class="box">
            <p style="background: #007; color: #fff">11</p>
        </div>
        <div class="box">
            <p style="background: #003; color: #fff">12</p>
        </div>
    </body>
</html>

화면 상단에 이미지 배너를 놓고, 그 아래로 12개의 사각형을 바둑판처럼 배치합니다. 각 사각형은 배경색과 일련번호로 구분합니다.

매체 질의

EPUB3 는 비록 전부는 아닐지라도 CSS 3 에서 도입된 새로운 기능들을 몇 가지 포함합니다. 그중 Media Query 라는 것이 있는데 매체, 그러니까 화면의 특성에 따라 CSS 를 달리 적용할 수 있는 기능입니다. 예를 보면 `@media` 로 시작하고 `min-width` 와 `max-width` 를 지정하는 단락들이 여기에 해당합니다. 우리의 목적은 화면이 작아질 수록 바둑판의 열 수를 줄이는 것입니다. 가장 큰 화면에서는 4개의 열을 유지하고, 점차 줄어 최후에는 1개의 열만이 나오도록 하는 것입니다. 항상 폭을 최대한 활용하도록 하는 것도 목표중의 하나입니다. 각 사각형에 `float` 를 지정하고, `width` 를 화면 종류마다 달리하는 것으로 목적한 바를 달성합니다. 즉 n개의 열을 표현하려면 각 상자의 폭이 화면의 1/n 이 되도록 하면 됩니다. 위의 예에서는 기본 설정을 포함해서 총 4가지 화면에 대한 스타일을 제공합니다.

유동 격자

매체 질의를 사용하여 몇 가지 클래스로 구분된 화면들에 대해 판짜기를 디자인 했습니다. 이제는 각 클래스 내에서 비교적 작게 변화하는 화면 크기 변화에 대응할 차례입니다. 이 작업이 없다면 각 클래스에 정확히 들어맞지 않는 화면들에서는 화면에 공백이 발생하거나 조금씩 뒤틀리게 됩니다. 이런 일이 생기는 이유는 각 클래스 별로 고정형 판짜기와 같은 방식으로 디자인을 진행하기 때문입니다. 이에 대한 대안으로 반응형 디자인에서는 유동 격자의 사용을 권고합니다. 격자는 디자인 요소들의 상대적 위치를 가늠할 수 있도록 모눈 종이처럼 가로, 세로로 그어진 줄들을 의미합니다. 모눈 종이처럼 촘촘하지는 않지만 적절한 간격으로 들여쓰기 하고, 줄 맞춤 할 수 있도록 고민해서 만들어진 것들도 있습니다. 이런 격자 판 위에서의 디자인도 격자 판 전체의 크기가 고정되어 있기 때문에 고정형 판짜기로 이어집니다. 유동 격자는 각 격자 선들을 절대위치가 아닌 상대위치로 기술하는 것입니다. 가령 격자 판의 크기가 1140px 이고, 570px 위치에 있는 격자 선에 뭔가를 배치한다면, 570px 대신에 50% 라는 표현을 사용한다는 뜻입니다. 앞의 예에서는 `width` 에 사용한 % 표현이 이에 해당합니다. 원리 자체는 "절대좌표 대신 % 를 써라"라는 간단한 것인데, 모든 숫자를 기계적으로 바꾸기만 해서는 뜻한 결과가 나오지 않습니다. 경계선 폭이나 마진 같은 값들이 꼭 화면의 크기에 정확히 비례해서 늘거나 줄어야 하는 것은 아니기 때문에 그렇습니다. 이 때문에 격자기반의 디자인을 수행하고, 적절한 격자 선들을 상대좌표로 변환하는 것을 권하는 것입니다.

유동 이미지

주요 디자인 요소들의 위치마저 상대 좌표로 기술했다면, 화면이 커지고 줄어듦에 따라 적절하게 판짜기 측면에서는 대략 정리가 됩니다. 하지만 헤드라인과 같은 글자들의 크기나 이미지들도 적절히 조절되어야만 합니다. 글꼴의 크기를 각 화면 클래스마다 정의하고, 글꼴과 관련된 크기도 `em` 같은 상대적인 표현을 사용하면 글자에 관한 문제는 해결됩니다. 이미지의 경우는 할당된 공간 보다 원본 이미지가 작다면 그대로 표현하거나 확대하면 됩니다. 문제가 되는 것은 이미지가 너무 커서 작은 화면에서 할당된 영역을 벗어나는 것입니다. 앞의 예에서는 `<img>` 엘리먼트에 적용된 `max-width` 스타일로 넘치지 않도록 방지합니다. 아주 간단한 테크닉이지만 이 기법을 유동 이미지라고 부릅니다. `<img>` 뿐만 아니라 비슷한 성격을 갖는 `<embed>`, `<object>`, `<video>` 에도 동일하게 사용 가능합니다. 지금까지의 내용을 `responsive.epub`에 담았습니다. 전에 알려드린 Readium 으로 열어서 화면의 크기를 바꿔보시면 변화하는 모습을 관찰하실 수 있을 겁니다. 혹시 아이폰이 있으신 분들은 iBooks 앱에 넣어서 보셔도 됩니다. 이 경우 화면 크기를 이리저리 바꿀 수는 없습니다만, 세로 모드와 가로 모드에 따른 변화를 보실 수 있을 겁니다. 앞으로 비정형 판짜기 중에서 반응형 디자인의 원리를 적용한 판짜기를 논할 때는, 간단히 “반응형 판짜기(Responsible Layout)” 라고 부르겠습니다.