CSS와 브라우저 레이아웃의 도구를 사용하면 웹 콘텐츠를 멋지게 시각화할 수 있습니다. CSS 필터, WebGL, HTML5 동영상, SVG, 캔버스와 같은 웹 기능과 CSS 지역, CSS 도형, CSS 맞춤 필터와 같은 진화하는 미래 기술을 사용하면 광고 소재 환경이 크게 확장될 수 있습니다. Adobe는 레이아웃과 디자인에 열정적인 콘텐츠 제작자와 오랫동안 협력해 왔으며 진화하는 여러 웹 표준에 기여하며 이러한 지식을 웹에 적용하는 데 적극적으로 참여해 왔습니다.
National Geographic의 도움을 받아 저희는 ‘Forest Giant’라는 제목의 콘텐츠를 사용하여 이러한 기능이 어떻게 풍부한 웹 레이아웃과 반응형 기법을 지원할 수 있는지 보여주는 프로토타입을 제작했습니다. 이 도움말은 Google이 사이트에 특히 흥미로운 몇 가지 특성을 구축한 방법을 보여줍니다. 간단한 개요를 보려면 아래 동영상을 참조하세요.크리스티안 캔트렐이 사이트의 다양한 기능을 소개합니다.
레이아웃의 섬세함
훌륭한 레이아웃을 구성하는 요소와 그 뒤에 있는 기능은 미묘할 수 있기 때문에 Google은 더 주목할 만한 기능을 강조하는 '편집자 오버레이'를 만들었습니다. 편집자 표시를 사용 설정하려면 기사 하단의 막대를 클릭합니다.
레이아웃 독립적
오늘날의 웹에서는 콘텐츠가 텍스트에 맞게 세로로 확대되는 콘텐츠로 레이아웃을 결정하는 경우가 많습니다. 복잡한 레이아웃을 만들 때 카피나 다른 콘텐츠를 변경하면 전체 레이아웃에 원치 않는 영향을 미칠 수 있으므로 예기치 않은 변경사항에 따라 콘텐츠를 다시 디자인해야 할 수 있습니다. 영역을 사용하면 요소를 콘텐츠로 정의한 다음 레이아웃에서 콘텐츠가 통과할 부분을 지정하여 콘텐츠를 레이아웃과 확실하게 구분할 수 있습니다.
'Forest Giant'의 예시에서는 스토리가 단일 요소에 포함되어 있습니다. 그런 다음 페이지 전체에 사진과 텍스트 영역으로 구성된 레이아웃 스캐폴딩이 있습니다. CSS를 사용하여 콘텐츠가 전달되도록 할 요소를 정의합니다. 복사가 요소의 끝에 도달하면 DOM 순서의 다음 항목으로 계속 넘어갑니다. 이렇게 하면 텍스트가 엘리먼트의 높이를 초과하는지 여부에 관계없이 열을 상쇄하고 디자인에 따라 높이를 조정해 창의력을 발휘할 수 있습니다. 또한 스토리가 계속 흐르는 동안 전체 너비 이미지와 같은 요소를 레이아웃 내에 포함할 수 있습니다.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
위 CSS에서 "story"라는 이름의 흐름을 만듭니다. 이 이름이 지정된 흐름의 콘텐츠는 ID가 "storyContent"인 요소입니다. 그러면 클래스 이름이 "story"인 모든 요소를 통해 이동합니다. CSS 지역은 대형 화면에서의 리치 레이아웃을 위한 다중 열 및 오프셋 열과 같은 기능을 제공하고 작은 화면에서는 단일 열 레이아웃으로 조정할 수 있는 반응형 디자인을 위한 훌륭한 도구입니다. 지역을 사용하면 vw 또는 vh와 같은 반응형 단위로 지역의 크기를 설정할 수도 있습니다. 이는 열이 레이아웃의 표시 영역 높이를 초과하지 않도록 하는 데 사용할 수 있습니다. 콘텐츠가 잘리는 것을 걱정할 필요 없이 열이 지역 체인의 다음 요소로 자연스럽게 흐르기 때문입니다.
드롭캡
CSS 제외를 사용하면 불규칙한 모양 주위로 또는 불규칙한 모양 안에서 텍스트를 줄바꿈할 수 있습니다. 이는 드롭 캡과 같은 디자인 번창에 유용할 수 있습니다. 드롭 캡은 이야기나 장의 첫 글자를 확대하여 텍스트의 나머지 부분이 캐릭터의 윤곽을 둘러싸는 일반적인 디자인 방식입니다. 이 효과는 인라인 콘텐츠가 플로팅을 둘러싸는 방식과 매우 유사하지만 제외를 사용하면 더 이상 직사각형 상자로 제한되지 않습니다. 플로팅에서 셰이프 바깥쪽을 사용하면 콘텐츠가 캐릭터의 모양을 둘러싸도록 하는 도형을 정의할 수 있습니다.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
이렇게 하면 콘텐츠가 원형 모양을 둘러싸는 타원이 만들어집니다. 또한 도형에는 상대 단위를 사용하고 있으므로 요소의 크기를 변경하면 도형의 크기에 반영됩니다.
도형
제외를 사용하면 드롭 대문자와 함께 도형 내부를 사용하여 도형 내에서 텍스트를 래핑할 수 있습니다. Google은 사이트 전체에서 이 기능을 사용하며, 특히 큰 이미지 캡션을 사용할 때 사진의 네거티브 공간을 활용하여 텍스트를 프레임으로 표시합니다. 또한 이전에는 웹에서 매우 어려웠던 레이아웃을 에뮬레이션하는 다른 이미지와 그래픽의 윤곽을 따라 텍스트를 래핑할 수 있습니다.
상대 단위를 사용하여 도형을 정의함으로써 도형은 반응형 레이아웃과도 호환될 수 있습니다. 이렇게 하면 컨테이너 또는 표시 영역에 따라 늘어나는 도형을 만들 수 있으며, 심지어는 모두 CSS에 정의되므로 미디어 쿼리를 사용하여 형태를 완전히 변경하거나 삭제할 수도 있습니다. 다음은 점을 정의하는 값으로 사이트 내에서 사용되는 다각형 도형 중 하나의 예입니다.
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
균형 있는 텍스트
균형 있는 텍스트는 줄을 래핑할 때 단어 단위로 줄바꿈하지 않고 요소 내의 전체 텍스트 블록을 살펴보는 기능입니다. 요소 내에서 균일한 크기의 행을 만들기 위해 텍스트 줄을 중단함으로써 한 줄에 한두 개의 단어가 있는 상황을 방지합니다. 이러한 수준의 제어를 통해 특히 인용문이나 자막과 같은 짧은 실행에서 미적으로 보기 좋은 텍스트 블록을 쉽게 만들 수 있습니다.
도움말에서 균형 잡힌 텍스트를 사용하는 경우입니다. 이 기능은 Adobe에서 제안하는 표준이므로 Randy Edmunds가 만든 polyfill을 사용하여 동일한 결과를 얻을 수 있습니다. 이 기능은 반응형 케이스에 가장 잘 표시됩니다. 브라우저의 크기를 조절할 때 블록이 텍스트의 균형을 계속 유지하여 거의 같은 너비의 줄이 생성되는 것을 확인할 수 있습니다. 균형 있는 텍스트 폴리필은 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 맞춤 필터를 사용하면 실제 책에서 페이지를 넘기는 것처럼 보이는 페이지 래핑과 같은 흥미로운 효과를 얻을 수 있습니다. 이 API를 사용하면 웹 개발자가 GLSL이라는 언어로 복잡한 효과를 프로그래밍하고 웹 콘텐츠에 적용할 수 있습니다. 맞춤 필터에 대한 세부정보와 모든 매개변수와 사용 방법을 자세히 알아보려면 이 가이드를 참조하세요.
WebGL에서 텍스처 사전 렌더링
이 기사의 보석은 세계에서 두 번째로 큰 나무로 여겨지는 '대통령'의 첫 번째 온전한 이미지였습니다. 이 이미지는 나무 사진 수백 장을 사진으로 연결하여 전체 그림을 보여줍니다. 우리는 이미지를 여러 개의 작은 사진으로 나누어 제자리에 날아가면서 전체 그림을 만들어내는 방식으로 이 과정을 시뮬레이션하고자 했습니다. WebGL, 특히 WebGL 주변의 상위 수준 API 래퍼인 Three.js 라이브러리를 사용하여 구현했습니다.
많은 수의 텍스처를 렌더링하면 새 텍스처가 화면에 그리려고 할 때마다 추가 네트워크 요청은 물론 성능 문제가 빠르게 발생할 수 있습니다. 이를 줄이기 위해 텍스처를 최대한 크게 만들고 각 타일에 대해 오프셋합니다. 이 기법을 스프라이트 매핑이라고 하며 게임 개발에서 흔히 사용됩니다. 그 결과 트리 전체에 큰 텍스처 3개가 생겼습니다. 텍스처 중 하나가 처음 화면에 표시될 때마다 성능 히트를 없애기 위해 애니메이션이 시작되기 전에 각 텍스처가 포함된 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에서 확인할 수 있습니다.
결론
또한 eBook과 함께 이러한 기능이 모바일 애플리케이션 환경에서 어떻게 사용될 수 있는지도 연구했습니다. 이 프로토타입이 진행 중인 모습과 우리가 다양한 상호작용 및 터치 패러다임을 활용하여 태블릿에서 이러한 기능을 선보이는 방식을 확인할 수 있습니다.
웹 브라우저 레이아웃이 끊임없이 진화함에 따라, 우리는 기존의 읽기 콘텐츠를 통해 과거에 익숙해진 제작 가치와 레이아웃 품질을 계속 유지하고자 하는 바람을 목격하고 있습니다. CSS 지역, 제외, 균형 있는 텍스트, 맞춤 필터, WebGL과 같은 기능을 사용하면 콘텐츠 크리에이터가 더 이상 도달범위와 디자인 품질 중 하나를 선택할 필요가 없습니다. 'Forest Giant'는 미래의 웹이 이 두 가지를 모두 허용할 것이라는 분명한 신호입니다.