Designcember의 휴일 캘린더 스타일 환경을 빌드하는 데 사용된 프로세스와 도구를 살펴봅니다.
12월과 사람들이 카운트다운하고 축하하는 데 사용하는 다양한 캘린더를 기념하여 커뮤니티와 Chrome팀의 웹 콘텐츠를 소개하고자 합니다. 매일 UI 개발 및 디자인 관련 콘텐츠를 하나씩 강조 표시하여 총 31개의 하이라이트를 선보였습니다. 이 중에는 26개의 새로운 데모 사이트, 도구, 공지사항, 팟캐스트, 동영상, 도움말, 사례 연구가 포함되어 있습니다.
designcember.web.app에서 전체 환경을 확인하세요.
개요
Google의 목표는 가능한 한 적은 바이트로 접근성, 기발함, 현대성, 반응성을 갖춘 웹 환경을 제공하는 것이었습니다. Google은 컨테이너 쿼리와 같은 새로운 반응형 API를 강조하고 디자인 중심의 애셋이 많은 웹사이트에 다크 모드의 아름다운 예를 포함하고자 했습니다. 이를 위해 파일을 압축하고, 여러 형식을 제공하고, 정적 사이트 생성에 최적화된 빌드 도구를 사용하고, 새로운 폴리필을 제공하는 등 다양한 작업을 진행했습니다.
기발함으로 시작
Designcember 캘린더 사이트는 12월 한 달 동안 집중 조명하고 싶은 모든 작업을 선보이는 쇼케이스 역할을 하면서 데모 사이트처럼 작동하도록 설계되었습니다. 프레임 내에서 창이 재배열되는 방식으로 더 높고 좁거나 더 낮고 넓어질 수 있는 반응형 아파트 건물을 짓기로 했습니다. 각 창은 하루 (즉, 하나의 콘텐츠)를 나타냅니다. 일러스트레이터 앨리스 리와 협력하여 비전을 실현했습니다.
앨리스는 초기 개념 단계에서도 흥미로운 프로세스와 스케치를 공유하며 영감을 주었습니다. 그녀가 아트를 작업하는 동안 우리는 아키텍처를 해킹했습니다. 초기 논의는 매크로 레이아웃, 건물, 창에 관한 내용이었습니다. 뷰포트 공간이 더 많이 제공되면 창이 1개, 2개 또는 3개 열에 어떻게 적응할까요? 얼마나 줄어들거나 늘어날 수 있을까요? 건물의 최대 크기는 얼마인가요? 창이 얼마나 이동하나요?
grid-auto-flow: dense을 사용하여 반응형 프로토타입을 미리 본 결과, 그리드 알고리즘에 의해 창이 자동으로 배치될 수 있는 것으로 나타났습니다. 가로세로 비율 그리드는 아트를 멋지게 보여주지만, 창이 균일하지 않은 사용 가능한 공간으로 확장 및 축소되어 컨테이너 쿼리의 기능을 보여줄 기회를 제공하지 않는다는 것을 금방 깨달았습니다.
일반 그리드가 비교적 안정적이고 건물의 반응성과 창의 방향을 전달할 수 있게 되면 단일 창에 집중할 수 있었습니다. 일부 창은 그리드에서 다른 창보다 더 많이 늘어나고, 줄어들고, 압축되고, 커지고, 재구성되었습니다.
각 창은 특정 양의 크기 조절 난류를 처리해야 합니다. 아래는 난기류에 대한 반응성을 보여주는 창의 프로토타입으로, 각 대화형 창이 얼마나 조정될 수 있는지 보여줍니다.
스프라이트 시트가 있는 창 애니메이션
일부 창에는 환경에 추가 상호작용을 제공하는 애니메이션이 있습니다. 애니메이션은 Photoshop에서 프레임별로 손으로 그렸습니다. 각 프레임은 내보내지고 이 스프라이트 시트 생성기를 사용하여 스프라이트 시트로 변환된 후 Squoosh로 최적화됩니다. 그러면 CSS 애니메이션에서 다음 예와 같이 background-position-x 및 animation-timing-function를 사용합니다.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
6일차 돼지 저금통과 같은 일부 애니메이션은 단계 기반 CSS 애니메이션이었습니다.
steps()를 사용하여 비슷한 기법으로 이 효과를 구현했습니다. 단, 키프레임이 배경 위치가 아닌 CSS 변환 위치라는 점이 다릅니다.
CSS 마스크
일부 창은 고유한 모양을 가지고 있었습니다. 확장 가능하고 고유한 모양의 적응형 창을 만들기 위해 마스크와 aspect-ratio를 사용했습니다.
창 8의 마스크와 같은 마스크를 만들려면 기존 Photoshop 기술과 웹의 마스크 작동 방식에 관한 약간의 지식이 필요했습니다. 8일차 기간을 살펴보겠습니다.
마스크가 되려면 내부 네잎클로버 유형 모양이 자체 모양으로 분리되고 흰색으로 채워져야 합니다. 흰색은 CSS에 유지할 콘텐츠를 알려주고 흰색 바깥에 있는 모든 콘텐츠는 유지되지 않습니다. Photoshop에서 창 내부를 선택하고 1px 페더링한 다음 (앨리어싱 문제 삭제) 흰색으로 채우고 창 프레임과 동일한 높이와 너비로 내보냈습니다. 이렇게 하면 프레임과 마스크가 서로 바로 위에 레이어링되어 프레임 내의 내부 콘텐츠가 예상대로 표시됩니다.
완료되면 창의 콘텐츠가 수정될 수 있으며 항상 맞춤 프레임 내에 표시됩니다. 다음 이미지는 어두운 모드 버전의 창을 보여줍니다. 배경 그라데이션이 다르고 빛에 글로우 CSS 필터가 적용되어 있습니다.
마스크는 반응형 컨테이너 쿼리 기반 창도 지원합니다. 창 9에는 창이 더 좁은 크기가 될 때까지 마스크 뒤에 숨겨진 캐릭터가 있습니다. 사용자가 프레임에서 이미지를 조정할 수 없도록 Alice가 전체 캐릭터를 완성했습니다. 캐릭터는 창 내에서 마스크 처리되지만 식물은 그렇지 않으므로 마스크 처리된 요소를 마스크 처리되지 않은 레이어와 함께 레이어링하고 모두 함께 잘 확장되도록 하는 것도 해결해야 할 문제였습니다.
다음 이미지는 창과 캐릭터에 마스크가 없는 모습을 보여줍니다.
아트 스쿼싱
앨리스는 그림의 충실도를 유지하고 고화질 화면에서 흐릿한 사용자 환경이 발생하지 않도록 3배 픽셀 비율로 작업했습니다. imgix를 사용하여 서버에서 최적화된 이미지와 형식을 제공할 계획이었지만 Squoosh 도구를 사용하여 수동으로 조정하면 50% 이상 절약할 수 있다는 것을 알게 되었습니다.
일러스트레이션에는 압축과 관련해 고유한 문제가 있습니다. 특히 앨리스가 사용한 브러시 스트로크와 투명한 거친 테두리 스타일이 그렇습니다. 3배 Photoshop 내보내기 png 이미지를 더 작은 png, webp, avif로 Squoosh했습니다. 각 파일 유형에는 고유한 특수 압축 기능이 있으며, 일반적인 최적화 설정을 찾기 위해서는 50개가 넘는 이미지를 압축해야 했습니다.
최적화할 이미지가 200개가 넘었기 때문에 Squoosh CLI가 매우 중요해졌습니다. 이 모든 작업을 수동으로 수행하려면 며칠이 걸렸을 것입니다. 일반적인 최적화 설정이 완료되면 명령줄 안내로 제공하고 PNG 이미지의 전체 폴더를 WebP 및 AVIF 압축 버전으로 일괄 처리했습니다.
사용된 AVIF CLI squoosh 명령어의 예는 다음과 같습니다.
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
최적화된 아트워크가 저장소에 체크인되었으므로 HTML에서 로드할 수 있습니다.
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
사진 소스 코드를 반복적으로 작성하는 것은 번거로웠으므로 코드 한 줄로 이미지를 삽입할 수 있는 Astro 컴포넌트를 만들었습니다.
<Pic filename="day1/inner-frame" role="presentation" />
스크린 리더 및 키보드 사용자
Designcember의 대부분은 예술과 대화형 창을 통해 경험할 수 있습니다. 키보드 사용자가 사이트를 사용하고 창을 엿볼 수 있으며 스크린 리더 사용자가 멋진 내레이션 환경을 경험할 수 있도록 하는 것이 중요했습니다.
예를 들어 이미지를 삽입할 때 role="presentation"를 사용하여 스크린 리더에 이미지가 표시되도록 했습니다. alt 설명이 5~12개로 나뉘면 사용자 경험이 좋지 않을 것이라고 생각했습니다. 따라서 이미지를 설명용으로 표시하고 전체 창 내레이션을 제공했습니다. 스크린 리더에서 창을 이동하면 멋진 내러티브 느낌이 들기 때문에 사이트에서 공유하려는 기발함과 재미를 전달하는 데 도움이 될 것으로 기대했습니다.
다음 동영상은 키보드 환경 데모를 보여줍니다. 탭, Enter, 스페이스바, Esc 키는 모두 창 팝업과 창 간에 포커스를 조정하는 데 사용됩니다.
스크린 리더 환경에는 콘텐츠를 명확하게 표시하는 특수 ARIA 속성이 있습니다. 예를 들어 날짜 링크에는 '1' 또는 '2'라고만 표시되지만 ARIA를 추가하면 '1일차' 및 '2일차'로 발표됩니다. 또한 모든 이미지가 단일 라벨로 요약되므로 각 창에 설명이 있습니다.
Astro, 정적 우선, 구성요소 기반 사이트 생성기
Astro를 사용하면 팀이 사이트에서 쉽게 공동작업할 수 있습니다. 구성요소 모델은 Angular 및 React 개발자 모두에게 친숙했으며 범위가 지정된 클래스 이름 스타일 시스템을 통해 각 개발자는 창에서 작업이 다른 사람과 충돌하지 않는다는 것을 알 수 있었습니다.
일(구성요소)
각 날짜는 빌드 시간 데이터 저장소에서 상태를 가져오는 구성요소였습니다. 이를 통해 HTML이 브라우저에 도달하기 전에 템플릿 로직을 실행할 수 있습니다. 이 로직은 비활성 날짜에는 팝업이 없으므로 날짜에 도움말을 표시해야 하는지 여부를 결정합니다.
빌드는 매시간 실행되며 빌드 서버가 자정을 지나면 빌드 시간 데이터 저장소가 새 날짜로 잠금 해제됩니다. 이러한 자동 업데이트 및 자급자족형 소규모 시스템은 사이트를 최신 상태로 유지합니다.
범위가 지정된 스타일 및 Open Props
Astro는 구성요소 모델 내에 작성된 스타일을 범위 지정하여 여러 팀 구성원 간에 워크로드를 더 쉽게 분산할 수 있었고 Open Props를 재미있게 사용할 수 있었습니다. Open Props normalize.css 스타일은 적응형 (밝은 테마 및 어두운 테마) 테마에 유용했으며 단락 및 헤더와 같은 콘텐츠를 관리하는 데도 도움이 되었습니다.
Astro를 조기에 도입하면서 PostCSS에 몇 가지 문제가 발생했습니다. 예를 들어 빌드 문제가 너무 많아 최신 Astro 버전으로 업데이트할 수 없었습니다. 여기에서 빌드 및 개발자 워크플로를 최적화하는 데 더 많은 시간을 할애할 수 있습니다.
유연한 컨테이너
일부 창은 가로세로 비율을 유지하면서 늘어나거나 줄어들어 아트가 보존됩니다. 컨테이너 쿼리를 사용한 구성요소 기반 아키텍처의 강력한 기능을 보여주기 위해 다른 창을 사용했습니다. 컨테이너 쿼리는 창이 개별 반응형 스타일 정보의 소유권을 갖고 자체 크기에 따라 재조정할 수 있음을 의미합니다. 일부 창이 좁은 창에서 넓은 창으로 변경되어 창 내 미디어의 크기와 미디어의 배치도 조정해야 했습니다.
창에 더 많은 공간이 제공되면 창의 크기나 하위 요소를 적절하게 조정할 수 있습니다. 적응형 창을 구현하려면 컨테이너 쿼리가 재미있는 데모를 보여주는 것뿐만 아니라 특정 레이아웃의 오케스트레이션을 크게 단순화하는 데 필요하다는 사실이 밝혀졌습니다.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
이 방법은 가로세로 비율을 유지하는 것과는 다릅니다. 더 많은 제어 기능과 기회를 제공합니다. 일정 크기에 도달하면 많은 어린이가 새로운 레이아웃에 적응하기 위해 자세를 바꿉니다.
컨테이너 쿼리를 사용하면 블록 방향 (세로) 포함도 지원할 수 있으므로 창의 길이가 늘어날 때 적절하게 맞도록 스타일을 조정할 수 있습니다. 이는 독립형으로 사용한 높이 기반 쿼리와 너비 기반 쿼리에서 확인할 수 있습니다.
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
또한 컨테이너 쿼리를 사용하여 크기가 작아질수록 아트가 점점 더 복잡해지고 크기가 커질수록 아트가 더 비어지므로 세부정보를 표시하거나 숨겼습니다. 이러한 기능이 적용된 좋은 예는 9번 창입니다.
교차 브라우저 지원
특히 컨테이너 쿼리와 같은 실험용 API를 위해 멋진 최신 교차 브라우저 환경을 만들려면 멋진 폴리필이 필요합니다. 팀에 연락을 취했고 Surma가 새로운 컨테이너 쿼리 폴리필 빌드를 주도했습니다. polyfill은 ResizeObserver, MutationObserver, CSS :is() 함수를 사용합니다. 따라서 모든 최신 브라우저가 폴리필을 지원합니다. 구체적으로는 Chrome 및 Edge(버전 88 이상), Firefox(버전 78 이상), Safari(버전 14 이상)가 지원됩니다. 폴리필을 사용하면 다음 구문을 사용할 수 있습니다.
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
어두운 모드
Designcember 웹사이트에 필수적인 마지막 터치는 아름다운 어두운 테마였습니다. 아트를 사용하여 어두운 모드 환경을 만드는 데 적극적으로 참여하는 방법을 보여드리고자 했습니다. 이를 위해 각 창의 배경 스타일을 프로그래매틱 방식으로 조정하고 창 아트를 만들 때 적절한 CSS를 최대한 많이 사용했습니다. 배경 대부분은 CSS 그라데이션이므로 색상 값을 쉽게 조정할 수 있습니다. 그런 다음 이 위에 아트를 레이어링했습니다.
기타 이스터 에그
개인적인 느낌
사이트에 개성을 더하기 위해 페이지에 몇 가지 개인적인 요소를 추가했습니다. 첫 번째는 YouTube 팀에서 영감을 얻은 등장인물입니다. 비활성 상태인 날에는 복고풍 스타일의 커서를 포함하고 파비콘 스타일을 다양하게 적용했습니다.
기능적 터치
추가된 기능 중 하나는 건물 위에 앉아 있는 새와 함께 '오늘로 이동' 기능입니다. 이 새를 클릭하거나 Enter 키를 누르면 페이지에서 현재 날짜로 이동하여 최신 출시를 빠르게 확인할 수 있습니다.
Designcember 웹사이트에는 8.5인치 x 11인치 용지에 가장 적합한 특정 이미지를 제공하는 특별한 인쇄 스타일시트도 있어 직접 캘린더를 인쇄하고 일 년 내내 축제 분위기를 유지할 수 있습니다.
전반적으로 12월 한 달 동안 UI 개발을 기념하기 위해 재미있고 기발한 최신 웹 환경을 만드는 데 많은 노력이 들어갔습니다. 유익한 시간이었기를 바랍니다.
