Designcember의 연말연시 캘린더 스타일 환경을 구축하는 데 사용되는 프로세스와 도구를 살펴봅니다.
12월을 맞이하여 Google에서는 많은 사람들이 카운트다운과 축하에 사용하는 다양한 캘린더를 통해 커뮤니티와 Chrome팀의 웹 콘텐츠를 집중 조명하고자 합니다. 매일 26개의 새로운 데모 사이트, 도구, 공지, 팟캐스트, 동영상, 기사, 우수사례 등 총 31개의 UI 개발 및 디자인 관련 콘텐츠를 집중 조명했습니다.
designcember.com에서 전체 기능을 확인하세요.
개요
우리의 목표는 가능한 한 적은 바이트로 접근성이 우수하고 기발하며 현대적이며 응답 속도가 빠른 웹 환경을 제공하는 것이었습니다. 컨테이너 쿼리와 같은 새로운 반응형 API를 강조하고, 디자인에 중점을 두고 애셋이 많은 웹사이트에 어두운 모드의 멋진 예를 포함하고자 했습니다. 이를 위해 파일을 압축하고, 여러 형식을 제공하고, 정적 사이트 생성에 최적화된 빌드 도구를 사용하고, 새로운 폴리필을 출시했습니다.
기발한 이야기로 시작하기
Designcember 캘린더 사이트의 디자인은 우리가 12월 한 달간 집중하고자 했던 모든 작업을 보여주는 쇼케이스의 역할을 하면서 데모 사이트처럼 작동하게 하는 것이었습니다. 따라서 창문을 프레임 안에 재배치하여 더 높고 좁게 또는 더 짧아지고 넓어진 반응형 아파트 건물을 만들기로 결정했습니다. 각 창은 하루를 나타냅니다 (따라서 하나의 콘텐츠). Google은 일러스트레이터 앨리스 리와 협력하여 비전을 실현했습니다.
앨리스는 초기 컨셉에서도 흥미진진했던 과정과 스케치를 공유해 영감을 주었습니다. 그녀가 예술 작업을 하는 동안 우리는 아키텍처에 대한 해킹을 했습니다. 초기에는 매크로 레이아웃, 건물, 창문에 대한 논의가 활발히 진행되었습니다. 표시 영역 공간을 더 많이 사용할 수 있게 되면 창이 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 마스킹
일부 창문은 독특한 모양으로 되어 있습니다. Google에서는 마스크 및 aspect-ratio를 사용하여 확장 가능하고 고유한 형태의 적응형 창을 만들었습니다.
8번 창에 대한 마스크와 같은 마스크를 만들려면 고전적인 Photoshop 기술과 웹에서 마스크가 작동하는 방식에 대한 지식이 필요했습니다. 8일 차의 기간을 살펴보겠습니다.
마스크가 되려면 안쪽 네 잎 클로버 유형 도형을 자체 모양으로 분리하고 흰색으로 채워야 합니다. 흰색은 어떤 콘텐츠가 남아 있는지 CSS에 알리고 흰색 바깥의 모든 콘텐츠는 유지하지 않습니다. Photoshop에서 창 내부를 선택하고 앨리어싱 문제를 제거하기 위해 1px로 패더링한 다음 창 프레임과 동일한 높이와 너비로 흰색으로 채우고 내보냅니다. 이렇게 하면 프레임과 마스크가 바로 층층이 되어 프레임 내의 내부 콘텐츠가 예상대로 표시됩니다.
완료되면 창의 콘텐츠를 수정할 수 있으며 항상 맞춤 프레임 내에 머무르는 것처럼 표시됩니다. 다음 이미지는 다른 배경 그라데이션과 조명에 발광 CSS 필터가 적용된 어두운 모드 버전의 창을 보여줍니다.
또한 마스킹은 반응형 컨테이너 쿼리 기반 창도 지원합니다. 창 9에는 창이 더 좁은 크기가 될 때까지 마스크 뒤에 숨겨진 문자가 있습니다. 사용자가 이미지를 프레임 밖으로 조정할 수 없도록 앨리스는 전체 글자를 완성했습니다. 캐릭터는 창 안에서는 마스킹되지만 식물은 마스크가 되지 않으므로 마스크가 적용된 요소를 마스크가 적용되지 않은 레이어로 층층이 쌓고 함께 원활하게 확장되도록 하는 문제도 다뤘습니다.
다음 이미지는 창과 문자에 마스크가 없는 모습을 보여줍니다.
예술의 숨결
삽화의 충실도를 유지하고 고화질 화면에서 사용자 환경이 흐릿하지 않도록 하기 위해 앨리스는 3배 픽셀 비율로 작업했습니다. imgix를 사용해 서버에 최적화된 이미지와 형식을 제공하기로 했지만, Squoosh 도구를 이용해 수동으로 조정하면 50% 이상을 절약할 수 있었습니다.
특히 브러시 획과 윤아가 사용한 투명한 거친 가장자리 스타일 등 압축과 관련된 고유한 문제가 있습니다. 우리는 3x Photoshop에서 내보낸 png 이미지를 각각 더 작은 png, webp 및 avif로 Squoosh하기로 했습니다. 각 파일 형식마다 특수한 압축 기능이 있으며, 몇 가지 일반적인 최적화 설정을 찾기 위해 50개가 넘는 이미지를 압축하는 작업이 필요했습니다.
Squoosh CLI는 200개가 넘는 이미지 최적화에 중요한 역할을 했으며, 이 모든 작업을 수동으로 처리하는 데 며칠이 걸렸을 것입니다. 공통적인 최적화 설정이 있으면 이를 명령줄 명령어로 제공하고 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"를 사용하여 스크린 리더에서 사용할 수 있는 이미지로 이미지를 표시했습니다. 5~12개의 사용자 환경이 깨져서 alt 설명이 제대로 되지 않으면 좋지 않은 경험을 하게 되었습니다. 따라서 이미지를 프레젠테이션용으로 표시하고 전반적인 창 내레이션을 제공했습니다. 스크린 리더의 창 사이를 지나갈 때 내러티브와 같은 느낌을 줄 수 있으며, 사이트에서 공유하고자 하는 기발하고 재미있는 콘텐츠를 전달하는 데 도움이 되기를 바랐습니다.
다음 동영상은 키보드 환경의 데모를 보여줍니다. Tab, Enter, 스페이스바, Esc 키는 모두 창 팝업과 창 간에 포커스를 조정하는 데 사용됩니다.
스크린 리더 환경에는 콘텐츠를 명확하게 표시하는 특별한 ARIA 속성이 있습니다. 예를 들어, 며칠 동안의 링크는 '1일' 또는 '이틀'로만 표시되지만 일부 ARIA가 추가된 경우 '1일 차'와 '둘째 날'로 알려줍니다. 또한 모든 이미지가 하나의 라벨로 요약되므로 각 창에는 설명이 있습니다.
Astro, 정적 중심, 구성요소 기반 사이트 생성기
Astro는 팀이 사이트에서 함께 일하는 일이 수월해졌습니다. 이 구성 요소 모델은 Angular와 React 개발자 모두에게 익숙한 반면, 범위가 지정된 클래스 이름 스타일 시스템은 각 개발자가 창에서의 작업이 다른 누구와도 충돌하지 않을 것임을 알 수 있도록 도왔습니다.
구성요소로서의 일수
각일은 빌드 시간 데이터 저장소에서 상태를 가져오는 구성요소였습니다. 이렇게 하면 HTML이 브라우저에 도달하기 전에 템플릿 로직을 실행할 수 있습니다. 비활성 요일에는 팝업이 표시되지 않으므로 로직에 따라 날짜에 도움말을 표시할지 여부가 결정됩니다.
빌드는 매시간 실행되고 빌드 시간 데이터 스토어는 빌드 서버가 자정을 넘겼을 때 새로운 날을 열어줍니다. 이러한 자체 업데이트 및 자립적인 소규모 시스템은 사이트를 최신 상태로 유지합니다.
범위가 지정된 스타일 및 열린 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에 뛰어난 최신 교차 브라우저 환경을 만들려면 우수한 폴리필이 필요합니다. Google이 팀에 요청을 보냈고 Surma가 새로운 컨테이너 쿼리 폴리필의 빌드를 선보였습니다. 폴리필은 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 그라데이션이므로 색상 값을 더 쉽게 조정할 수 있습니다. 그런 다음 그 위에 예술을 계층화했습니다.
다른 이스터 에그
개인적인 교감
페이지에 개성을 더하여 사이트에 개성을 더했습니다. 첫 번째는 우리 팀으로부터 영감을 받은 캐릭터들을 모았습니다. 또한 활동이 없는 날에는 스로우백 스타일 커서를 사용하여 파비콘 스타일을 실험했습니다.
기능적인 터치
추가적인 기능 중 하나는 건물 꼭대기에 새가 앉는 '오늘로 이동' 기능입니다. 이 새를 클릭하거나 Enter 키를 누르면 페이지에서 해당 월의 오늘 날짜로 이동하므로 최근 출시된 항목을 빠르게 확인할 수 있습니다.
Designcember.com에는 8.5" x 11" 용지에 가장 효과적인 특정 이미지가 기본적으로 제공되는 특별한 인쇄 스타일시트도 있습니다. 캘린더를 직접 인쇄하여 일 년 내내 크리스마스를 보낼 수 있습니다.
12월 한 달 내내 UI 개발을 기념하기 위해 재미있고 기발한 최신 웹 환경을 만드는 데 많은 노력을 기울였습니다. 유익한 시간이었기를 바랍니다.
