들어가며: CSS, 이제는 '그냥 스타일링'이 아니다
최근 몇 주간 Chrome, Safari, Firefox 모두 새로운 기능을 출시하지는 않았지만, 웹 개발 교육계에서 정말 알찬 콘텐츠들이 쏟아져 나왔습니다. 이번 글에서는 그중에서도 실무에 바로 적용하거나 앞으로 대비해야 할 핵심 CSS 트렌드 3가지를 엄선해 정리했습니다.
- CSS 뷰 트랜지션(View Transitions)으로 비디오 상태 유지하기
- CSS 매이슨리 레이아웃(Masonry)의 현재와 미래
- CSS 커스텀 미디어 쿼리를 '이름'으로 관리하는 꿀팁
각각의 기술이 왜 필요한지, 어떻게 구현하는지, 그리고 국내 개발 환경에서 주의할 점은 무엇인지 함께 살펴보겠습니다.
이 글은 해외 개발자 커뮤니티의 최신 논의를 바탕으로 재구성했습니다. (근거자료: CSS-Tricks What's Important #4)
1. CSS 뷰 트랜지션으로 비디오 상태 유지하기
문제 상황
사용자가 동영상을 보다가 다른 페이지로 이동했다가 돌아오면, 영상이 처음부터 다시 시작되는 경험, 다들 해보셨죠? 특히 강의 사이트나 미디어 플랫폼에서 이는 사용자 경험(UX)을 크게 떨어뜨립니다.
해결책: pageswap과 pagereveal 이벤트 활용
Chris Coyier가 제안한 방법은 멀티 페이지 뷰 트랜지션(MPA View Transitions) 을 활용하는 것입니다. 같은 페이지 내에서는 쉽지만, 페이지 간 이동 시에는 sessionStorage를 이용해 상태를 저장하고 복원해야 합니다.
// 페이지를 떠날 때 비디오 상태 저장
window.addEventListener('pageswap', (event) => {
const video = document.querySelector('video');
if (video) {
const videoState = {
currentTime: video.currentTime,
paused: video.paused,
playbackRate: video.playbackRate
};
sessionStorage.setItem('videoState', JSON.stringify(videoState));
}
});
// 새 페이지에 도착했을 때 비디오 상태 복원
window.addEventListener('pagereveal', (event) => {
const savedState = sessionStorage.getItem('videoState');
if (savedState) {
const video = document.querySelector('video');
if (video) {
const { currentTime, paused, playbackRate } = JSON.parse(savedState);
video.currentTime = currentTime;
video.playbackRate = playbackRate;
if (!paused) {
video.play();
}
}
// 복원 후 세션 정리 (선택사항)
sessionStorage.removeItem('videoState');
}
});
참고: 이 방법은 약간의 오디오 끊김이 있을 수 있지만(사실상 '가짜' 전환), 사용자 경험은 훨씬 개선됩니다.
audio나iframe에도 동일하게 적용 가능합니다.
실무 적용 팁
- CodePen 2.0이 비공개 베타를 시작하면서 다중 파일 프로젝트를 지원하게 되어, CodePen 안에서도 뷰 트랜지션을 테스트할 수 있게 되었습니다. 관심 있으신 분은 베타 신청을 해보세요.
- 국내 SI 환경에서는 SPA(Single Page Application)가 주류지만, 전자정부 프레임워크 등 MPA 환경에서도 이 기법을 적용하면 사용자 경험을 크게 개선할 수 있습니다.
2. CSS 매이슨리 레이아웃: 드디어 브라우저가 지원할까?
현재 상황
CSS 매이슨리(Masonry) 레이아웃, 즉 display: grid-lanes는 아직 어떤 브라우저도 정식 지원하지 않습니다. 하지만 Firefox, Safari, Chrome/Edge 모두 시험 중(trialing) 이라서 생각보다 빠르게 현실화될 수 있습니다.
Jen Simmons가 밝힌 바에 따르면, 현재로서는 폴리필(polyfill)을 사용해야 합니다. Sunkanmi Fafowora가 display: grid-lanes에 대한 상세 가이드를 제공하고 있으니 참고하세요.
왜 중요할까?
Pinterest, Dribbble 같은 핀터레스트 스타일 레이아웃을 구현할 때, 기존에는 JavaScript 라이브러리(Masonry.js 등)에 의존해야 했습니다. CSS 네이티브로 지원되면 성능과 접근성 측면에서 큰 이점이 생깁니다.
| 구분 | 현재 방법 (JS 라이브러리) | CSS 네이티브 (예정) |
|---|---|---|
| 성능 | 레이아웃 계산에 JS 필요 | 브라우저가 직접 계산, 더 빠름 |
| 접근성 | 추가 처리 필요 | 시맨틱 HTML과 자연스럽게 통합 |
| 유지보수 | 외부 라이브러리 의존 | CSS만으로 관리, 종속성 감소 |
| 학습 곡선 | 라이브러리 API 학습 필요 | CSS Grid 지식만으로 가능 |
주의사항
- 아직 표준이 확정되지 않았으므로, 프로덕션에 사용하려면 폴리필과 함께 점진적 향상(progressive enhancement) 전략을 취하세요.
@supports쿼리를 사용해 네이티브 지원 여부를 감지하는 것이 좋습니다.
3. CSS 미디어 쿼리에 '이름' 붙이기 (feat. 캐스케이드 레이어)
Kevin Powell의 트릭
Kevin Powell이 소개한 방법은 CSS 캐스케이드 레이어(Cascade Layers) 를 활용해 미디어 쿼리에 사실상 '이름'을 부여하는 것입니다. @custom-media가 모든 브라우저에서 지원될 때까지 유용한 대안입니다.
/* 캐스케이드 레이어를 이용한 미디어 쿼리 '이름' 짓기 */
@layer base, layout, theme;
@layer base {
body {
font-size: 16px;
}
}
@layer layout {
/* '모바일 우선' 레이아웃 */
.container {
display: block;
}
}
@layer layout {
/* 데스크톱 레이아웃 - 레이어 순서로 제어 */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
}
더 나은 방법: @custom-media
Adam Argyle에 따르면 @custom-media가 Firefox Nightly에서 시험 중입니다. 이 기능이 정착되면 아래와 같이 더 직관적으로 사용할 수 있습니다.
/* 미래의 방법 (아직 모든 브라우저 미지원) */
@custom-media --tablet (min-width: 768px);
@custom-media --desktop (min-width: 1024px);
@media (--tablet) {
.container { ... }
}
함께 보면 좋은 글
- 마이크로소프트 Maia 200, AI 추론을 위해 태어난 초고성능 가속기 심층 분석
- NVIDIA DLSS 4.5 공개 초해상도 강화와 동적 멀티 프레임 생성으로 게임 그래픽의 다음 지평을 열다
마무리
이 외에도 Vale의 CSS 리셋(svg:not([fill]) { fill: currentColor; } 같은 유용한 스니펫), 브라우저 동작 원리 인터랙티브 가이드, 상대 색상 문법(Relative Color Syntax)을 이용한 애니메이션 테마, 모달 vs 페이지 vs 오버레이 결정 프레임워크 등 정말 많은 내용이 있었습니다. 특히 OS 수준의 텍스트 스케일링을 웹에서도 존중하는 메타 태그가 Chrome Canary에서 시험 중이라는 소식은 접근성 측면에서 매우 고무적입니다.
CSS는 이제 단순한 '스타일링 언어'를 넘어, 복잡한 UI 상태 관리와 레이아웃을 브라우저 네이티브로 처리할 수 있는 강력한 도구로 진화하고 있습니다. 새로운 기능을 미리 경험하고, 폴리필이나 트릭으로 대비하는 것이 실무 경쟁력의 차이를 만듭니다.
다음 단계 학습 방향:
- CSS 캐스케이드 레이어 완벽 이해하기
@custom-media및 컨테이너 쿼리(Container Queries) 실습- 뷰 트랜지션 API를 SPA/MPA 환경에서 각각 테스트해보기