차세대 웹 레이아웃 - 내셔널 지오그래픽 Forest Giant

Christopher Gammon
Christopher Gammon

CSS 및 브라우저 레이아웃의 도구를 사용하면 웹 콘텐츠에 멋진 시각화를 적용할 수 있습니다. CSS 필터, WebGL, HTML5 동영상, SVG, 캔버스와 같은 웹 기능과 CSS 영역, CSS 도형, CSS 맞춤 필터와 같은 진화하는 미래 기술을 사용하면 창의적인 환경이 크게 확장될 것입니다. Adobe는 레이아웃과 디자인에 열정적인 콘텐츠 크리에이터와 오랜 기간 협력해 왔으며, 이러한 지식을 웹에 적용하기 위해 노력해 왔습니다. 그 결과, 진화하는 여러 웹 표준에 기여하고 있습니다.

National Geographic의 도움을 받아 'Forest Giant'라는 특집의 콘텐츠를 사용하여 이러한 기능을 통해 풍부한 웹 레이아웃과 반응형 기법을 사용할 수 있는 방법을 보여주는 프로토타입을 제작했습니다. 이 도움말에서는 사이트의 특히 흥미로운 특성을 구축한 방법을 보여줍니다. 간단한 개요를 확인하려면 아래 동영상을 시청하세요. 크리스티안 캔트렐이 사이트의 다양한 기능을 안내합니다.

레이아웃의 미묘한 차이

훌륭한 레이아웃과 그 이면의 기능은 미묘할 수 있으므로 주목할 만한 기능을 강조 표시하는 '편집기 오버레이'를 만들었습니다. 편집자의 마크를 사용 설정하려면 도움말 하단의 막대를 클릭합니다.

편집자 마크 이미지

레이아웃 독립형

오늘날 웹에서는 텍스트에 맞게 세로로 확장되는 컨테이너를 사용하여 콘텐츠에 따라 레이아웃이 결정되는 경우가 많습니다. 복잡한 레이아웃을 만들 때 문구나 기타 콘텐츠를 변경하면 전체 레이아웃에 원치 않는 영향을 미칠 수 있으므로 예상치 못한 변경사항에 따라 콘텐츠를 다시 디자인해야 할 수 있습니다. 영역을 사용하면 요소를 콘텐츠로 정의한 다음 콘텐츠가 흐르게 할 레이아웃 부분을 지정하여 콘텐츠를 레이아웃에서 완전히 분리할 수 있습니다.

'숲의 거인'의 예시에서는 스토리가 단일 요소에 포함되어 있습니다. 그런 다음 페이지 전체에 사진과 텍스트 영역으로 구성된 레이아웃 스캐폴딩이 있습니다. CSS를 사용하여 콘텐츠가 흐르게 할 요소를 정의합니다. 복사가 요소의 끝에 도달하면 DOM 순서에 따라 다음 요소로 계속 진행됩니다. 이렇게 하면 텍스트가 요소의 높이에 맞는지 또는 요소의 높이를 초과하는지 걱정하지 않고 열을 매우 창의적으로 처리하여 열을 오프셋하고 디자인에 따라 높이를 조정할 수 있습니다. 또한 스토리가 계속 흐르는 동안 전체 너비 이미지와 같은 요소를 레이아웃 내에 포함할 수 있습니다.

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

위의 CSS에서는 '스토리'라는 이름의 흐름을 만들고 있습니다. 이 이름이 지정된 흐름의 콘텐츠는 ID가 'storyContent'인 요소입니다. 그런 다음 클래스 이름이 'story'인 모든 요소를 통해 흐릅니다. CSS 영역은 대형 화면에서 다중 열 및 열 오프셋과 같은 기능을 사용하여 풍부한 레이아웃을 제공하는 동시에 소형 화면에서는 단일 열 레이아웃으로 조정하는 반응형 디자인에 유용한 도구입니다. 지역을 사용하면 vw 또는 vh와 같은 반응형 단위로 지역의 크기를 설정할 수도 있습니다. 이렇게 하면 콘텐츠가 잘리는 것을 걱정하지 않고도 열이 레이아웃의 뷰포트 높이를 초과하지 않도록 할 수 있습니다. 콘텐츠가 영역 체인의 다음 요소로 자연스럽게 이어지기 때문입니다.

대문자 첫 자

CSS 제외를 사용하면 불규칙한 도형 주위 또는 내부에서 텍스트를 줄바꿈할 수 있습니다. 이 기능은 대문자와 같은 디자인 장식에 유용할 수 있습니다. 대문자 캡은 스토리 또는 챕터의 첫 글자를 확대하여 나머지 텍스트가 문자의 윤곽선을 따라 래핑되도록 하는 일반적인 디자인 관행입니다. 이 효과는 인라인 콘텐츠가 플로팅 요소를 둘러싸는 방식과 매우 유사하지만 제외를 사용하면 더 이상 직사각형 상자로 제한되지 않습니다. 플로트에 shape-outside를 사용하면 콘텐츠가 문자의 도형을 꽉 감싸도록 도형을 정의할 수 있습니다.

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

이렇게 하면 콘텐츠가 원형 도형을 중심으로 래핑되는 타원이 만들어집니다. 또한 도형에 상대 단위를 사용하고 있으므로 요소의 크기를 변경하면 도형의 크기에 반영됩니다.

대문자 이미지

도형

제외는 대문자와 함께 shape-inside를 사용하여 도형 내에서 텍스트를 줄바꿈하는 기능을 제공합니다. Google에서는 사이트 전반에서 이 기능을 사용하며, 특히 큰 이미지 캡션의 경우 사진의 여백을 활용하여 텍스트를 프레이밍합니다. 또한 이전에는 웹에서 구현하기가 매우 어려웠던 레이아웃을 에뮬레이션하는 다른 이미지 및 그래픽의 윤곽선을 따라 텍스트를 래핑할 수 있습니다.

도형은 상대 단위를 사용하여 도형을 정의하여 반응형 레이아웃과도 호환될 수 있습니다. 이렇게 하면 컨테이너 또는 표시 영역을 기반으로 늘어나는 도형을 만들 수 있으며, 미디어 쿼리를 사용하여 도형을 완전히 변경하거나 삭제할 수도 있습니다. 모두 CSS에 정의되어 있기 때문입니다. 다음은 사이트 내에서 사용되는 다각형 도형 중 하나와 점을 정의하는 값의 예입니다.

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
CSS 도형 이미지

균형 잡힌 텍스트

균형 텍스트는 단어 단위로 줄바꿈하는 대신 요소 내의 전체 텍스트 블록을 보고 줄바꿈하는 기능입니다. 텍스트 줄을 나누어 요소 내에서 크기가 균일한 줄을 만들면 한 줄에 단어 하나나 두 개만 있는 상황을 방지할 수 있습니다. 이러한 수준의 제어를 통해 특히 발췌문이나 자막과 같이 짧은 텍스트 블록을 시각적으로 만족스럽게 쉽게 만들 수 있습니다.

이 부분에서 균형 잡힌 텍스트가 사용됩니다. 이 기능은 Adobe에서 제안하는 표준이므로 동일한 결과를 얻기 위해 랜디 에드먼즈가 만든 폴리필을 사용합니다. 이 기능은 반응형 케이스에서 가장 잘 보입니다. 브라우저 크기를 조절하면 블록이 계속해서 텍스트의 균형을 맞춰 거의 동일한 너비의 줄을 생성합니다. 균형 잡힌 텍스트 폴리필을 사용하는 것은 쉽습니다. jQuery 플러그인이기 때문에 레이아웃이 변경될 때 선택기에 'balanceText()'를 적용하기만 하면 됩니다. 그러면 다음과 같이 균형 잡힌 텍스트가 표시됩니다.

$('.balance').balanceText();
균형 잡힌 텍스트 이미지

전환 필터링

전환은 사용자의 주의를 유도하고 사이트 내의 상태를 전달하는 중요한 방법입니다. 불투명도와 최근에는 3D 변환을 사용하여 사용자가 스크롤하거나 사이트의 일부와 상호작용할 때 자연스러운 전환과 애니메이션을 만드는 데 사용되고 있습니다. 이제 동일한 목적으로 사용할 수 있는 필터가 있습니다.

'Forest Giant'에서는 필터를 사용하여 일부 이미지가 표시될 때 그레이 스케일에서 컬러로 페이드 처리합니다. 이러한 필터를 불투명도 또는 다른 필터와 결합하여 복잡한 이미지 효과와 전환을 만들 수 있습니다. 맞춤 필터의 기능을 사용하여 더욱 극적인 효과를 추가할 수 있습니다.

맞춤 필터는 WebGL과 동일한 셰이딩 언어인 GLSL을 사용하여 작성됩니다. 이를 통해 CSS를 통해 이러한 셰이더를 DOM 요소에 적용하여 복잡한 혼합 효과와 3D 왜곡을 사용할 수 있습니다. 사이트 하단에서 '대통령 가계도 살펴보기'를 클릭하면 페이지가 위로 스크롤되어 아래에 다른 섹션이 표시됩니다. 이는 맞춤 필터를 사용하여 콘텐츠 간에 풍부한 전환을 허용하는 방법의 한 가지 예에 불과합니다. CSS 전환을 사용하여 애니메이션을 만들 수 있습니다. 그러나 전환으로 허용하는 것보다 더 강력한 애니메이션이나 상호작용을 사용하려면 아래와 같이 JavaScript로 스타일을 설정하여 셰이더에 값을 전달할 수 있습니다. 이렇게 하면 이중화를 더 세부적으로 제어하거나 사용자 입력 메서드로 셰이더를 조작할 수도 있습니다.

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

필터는 GPU에서 콘텐츠를 텍스처로 래스터화하여 효과를 적용합니다. 따라서 완료되면 꼭 삭제해야 합니다. 그렇지 않으면 콘텐츠가 흐리게 보일 수 있습니다.

$("#map").css("webkitFilter", "none");

CSS 맞춤 필터를 사용하면 실제 책에서 페이지를 넘기는 것처럼 보이는 페이지 래핑과 같은 흥미로운 효과를 사용할 수 있습니다. 이를 통해 웹 개발자는 GLSL이라는 언어로 복잡한 효과를 프로그래밍하고 웹 콘텐츠에 적용할 수 있습니다. 맞춤 필터의 세부정보, 모든 매개변수, 사용 방법에 관한 자세한 내용은 이 유용한 튜토리얼을 참고하세요.

페이지 전환 이미지

WebGL에서 텍스처 사전 렌더링

이 기사의 하이라이트는 부피 기준으로 세계에서 두 번째로 큰 나무로 추정되는 'The President'의 첫 번째 전체 이미지였습니다. 이 이미지는 나무의 수백 장의 사진을 스티칭하여 전체 사진을 만들었습니다. Google은 이미지를 여러 개의 작은 사진으로 나눈 후 이 사진들이 제자리로 날아가 전체 이미지를 만드는 방식으로 이 과정을 시뮬레이션하고자 했습니다. 이는 WebGL을 사용하여, 특히 WebGL을 둘러싼 상위 수준 API 래퍼인 Three.js 라이브러리를 사용하여 달성되었습니다.

거대한 나무 이미지

다수의 텍스처를 렌더링하면 새 텍스처가 화면에 그려질 때마다 성능 문제가 발생할 수 있으며, 추가 네트워크 요청은 말할 것도 없습니다. 이를 줄이기 위해 텍스처를 최대한 크게 만들고 각 타일마다 텍스처를 오프셋했습니다. 이 기법을 스프라이트 매핑이라고 하며 게임 개발에서 흔히 사용됩니다. 그 결과 전체 나무에 세 개의 큰 텍스처가 생성되었습니다. 텍스처 중 하나가 화면에 처음 표시될 때마다 발생하는 성능 저하를 없애기 위해 애니메이션이 시작되기 전에 각 텍스처로 1픽셀 정사각형을 렌더링하여 성능 저하를 시작 부분으로 이동합니다. 이렇게 하면 태블릿에서도 트리의 전체 높이를 부드럽게 통과하고 애니메이션할 수 있습니다.

텍스처를 오프셋하려면 텍스처를 도형에 매핑하는 UV를 변경합니다. Three.js에서는 다음과 같이 표시됩니다.

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

여기에서 텍스처의 x 및 y 오프셋에 변수를 사용하고 있음을 확인할 수 있습니다. 도형에서 그려진 좌표를 오프셋하는 맞춤 GLSL 셰이더 재료로 동일한 효과를 얻을 수 있습니다.

실험용 기능

데모에서 사용하는 일부 기능은 아직 실험용 기능이므로 Chrome Canary에서 도움말을 확인하고 이 웹사이트에서 Chrome Canary에 언급된 모든 플래그를 사용 설정해야 합니다.

Chrome Canary를 설치하고 올바르게 구성한 후 데모를 확인합니다. 전체 프로젝트는 오픈소스이며 GitHub에서 사용할 수 있습니다.

결론

또한 이러한 기능을 모바일 애플리케이션 컨텍스트에서 어떻게 사용할 수 있을지, 특히 전자책과 같은 방식으로 사용할 수 있을지 모색하고 있습니다. 이 프로토타입의 진행 상황과 다양한 상호작용 및 터치 패러다임을 활용하여 태블릿에서 이러한 기능을 보여주는 방법을 확인할 수 있습니다.

웹브라우저 레이아웃이 지속적으로 진화함에 따라 기존 독서 콘텐츠에서 익숙해진 제작 가치와 레이아웃 품질을 계속 유지하고자 하는 요구가 있습니다. CSS 영역, 제외, 균형 잡힌 텍스트, 맞춤 필터, WebGL과 같은 기능을 사용하면 콘텐츠 크리에이터가 더 이상 도달범위와 디자인 품질 중에서 선택하지 않아도 됩니다. 'Forest Giant'는 미래의 웹에서 이 두 가지를 모두 허용할 것이라는 분명한 신호입니다.