2026년은 CSS로 진짜 정신없어질 것 같아. 그리고 솔직히 UI 컴포넌트용 자바스크립트는 점점 사라지는 추세가 돼가고 있네.00:00

이번 영상에서는 자바스크립트 없이도 가능한 일곱 가지 새로운 CSS 기능을 보여드릴 거예요. 이 기능들을 통해 이전에는 불가능했던 UI 패턴을 구현하고, 코드도 훨씬 깔끔하게 만들 수 있습니다.00:07

지금 바로 사용하실 수 있는 것도 있고, 연말쯤 공개될 예정인 것도 있습니다. 자, 바로 시작해볼까요.00:15

자, 우선 제가 지금 모든 주요 브라우저에서 사용할 수 있게 된 두 가지 기능을 보여드릴 건데요. 이제 안심하고 사용하셔도 됩니다. 제가 처음 봤을 때 정말 신났던 게, 앵커 포지셔닝이었어요. 이 물음표를 클릭하면 툴팁이 나타나는데, 자바스크립트 없이도 이 두 가지 기능이 함께 작동하는 방식입니다.00:26

하나 있죠, Popover API는 벌써 몇 달 전에 나온 거긴 한데, 여기서는 불과 며칠 전에 모든 주요 브라우저에서 사용할 수 있게 된 완전히 새로운 기능에 대해 이야기하고 있습니다. 특히 툴팁의 경우에, 물론 드롭다운 메뉴나 자동 완성 기능 같은 것들은 화면 중앙에 기본 Popover처럼 띄우는 것보다 훨씬 더 편리하게 해 줍니다.00:42

하지만 특정 요소 바로 위에 표시되는 겁니다. 예를 들어 이 툴팁을 보세요. 이건 전체 화면에 고정되어 있지 않죠. 새로운 position anchor 속성을 사용하고 있습니다.01:01

이렇게 하면 툴팁과 같은 요소를 다른 요소, 예를 들어 앵커에 연결하고, 그 위치를 정렬할 수 있습니다.01:10

그리고 여기서는 간단하게 'help'라고 지정했어요. 이름을 자유롭게 선택했고, 도움말 표시를 위한 앵커 이름으로 'help'를 지정했죠. 이렇게 하면 두 개의 요소 간의 연결이 설정되는데, 이 요소들은 DOM에서 완전히 다른 위치에 있을 수도 있습니다.01:16

그리고 여기서는 position area라는 속성도 사용하고 있습니다. 이걸 이용해서 앵커에 대한 툴팁의 정확한 위치를 결정할 수 있죠.01:30

우리는 단순히 아래 오른쪽을 선택하고, 그러면 툴팁이 정확히 그 자리에 표시됩니다. 만약 지금 '이게 뭐가 그렇게 좋은가?'라고 생각하신다면, 툴팁을 트리거 요소의 숨겨진 절대 위치 자식 요소로 정의할 수 있습니다.01:38

네, 하지만 그러면 스태킹 컨텍스트 문제가 발생할 수 있어요. 특히 규모가 크고 복잡한 애플리케이션에서는 툴팁이 다른 요소에 가려질 위험이 있죠. 앵커 위치 조정을 통해 해결할 수 있는데, 새로 추가된 `position: try-fallback` 속성이 정말 훌륭한 점은 툴팁에 충분한 공간이 없을 경우, 대체 위치로 자동 이동한다는 거예요.01:50

뷰포트의 오른쪽 하단으로 정의하는 이유는 사용자가 스크롤한 위치가 뷰포트의 끝부분이기 때문입니다. 브라우저는 이후에 다른 위치에 배치하려고 시도할 수 있습니다. 여기서는 'flip block'과 'flip inline'을 지정했는데, 이는 가로 또는 세로로 뒤집혀서 공간을 찾도록 하는 것을 의미합니다. 어떻게 동작하는지 살펴보면…02:09

기본적으로 툴팁은 지정된 위치에 나타나지만, 창 크기가 작아지면 왼쪽으로 이동하거나, 사용자가 스크롤을 내리면 개발자 도구를 위로 드래그하면 툴팁이 위로 뿅! 하고 올라갑니다. 아주 간단하죠. 브라우저 자체의 위치 조정 기능을 활용해서 별도의 리스너를 프로그래밍할 필요가 없어요.02:24

스크롤하거나 창 크기를 조절할 때 반응해서 새로운 위치를 계산하는 기능이 있는데, 툴팁이나 메뉴 드롭다운 같은 것들을 표시할 때 성능 문제 해결책도 제공해요. 앵커 포지셔닝 기능은 정말 대단하다고 생각해요.02:40

저는 웹 개발을 20년 정도 해왔는데, 이 기능은 정말 필요하다고 느꼈어요. 그리고 다음 기능도 마찬가지인데요, 어쩌면 더 중요할지도 모르겠네요. add scope에 대해 계속 얘기해볼게요.02:51

CSS에 중요한 부분을 쓸 때마다 실수를 하고 있는 겁니다. 적어도 많은 경우에, 왜냐하면 CSS를 유지 보수하고 확장하기 어렵게 만들기 때문입니다.03:00

쉬운 방법으로, 지름길로 가는 거죠. 저도 그래요, 다들 그래요. 하지만 이 새로운 CSS 기능, '스코프'를 사용하면, CSS가 그동안 겪어왔던 정말 큰 문제를 해결할 수 있어요. 지금까지는 특정 JS 도구나 css 모듈, 스타일 컴포넌츠 같은 빌드 툴이 꼭 필요했는데, 어떻게 작동하냐고요? 엄청 간단해요.03:08

자, 한번 살펴볼까요? 위에는 간단한 블록과 몇 개의 게시물, 로고, 그리고 저자들과 아바타가 있어요. 이제 게시물에 있는 이미지에 테두리를 주고, 한 픽셀짜리 검은색 테두리, 아니면 좀 더 잘 보이게 두 픽셀 테두리를 만들 수 있죠. 하지만 이제 당연히 맨 위에 있는 로고도 테두리가 생겼어요. 여기에 `add scope`로 CSS 규칙을 감싸면 돼요.03:25

이렇게 하면 게시물 목록에서만 시작하는 범위를 정의할 수 있죠. 로고에는 테두리가 없네요. 좋아요, 좋아요. 이제 프랑츠, 기다려 봐, 예전처럼 중첩만으로는 이걸 할 수 없었어. 게시물 이미지라고 그냥 쓰면 되는데, 잠시만 왜 `scope`가 정말 게임 체인저인지 설명해 줄게.03:46

그런 경우도 있죠. 하지만, 그 전에, scope의 또 다른 중요한 기능은 이전에는 정의할 수 없었던 scope 제한을 설정하는 겁니다. 여기 아바타들도 게시물에 있는 이미지들이잖아요. 하지만 저는 거기에 테두리를 주고 싶지 않아요.04:04

그리고 그걸 달성하기 위해, 이제 간단히 scope에 두 개의 meta를 제한할 수 있습니다. Meta는 사용자 주변의 div 클래스입니다. 그리고 이게 완벽하게 작동합니다. 아바타에는 테두리가 더 이상 없고, 여기 큰 이미지에만 있습니다.04:14

그런데 이게 '도넛 범위(donut scope)'라고 불리는 이유는 CSS 규칙이 적용되어야 하는 영역에 규칙이 더 이상 적용되지 않는 구멍이 있는 것과 같거든요. 이전에는 CSS 규칙에 제한을 둘 수 없었기 때문에 정말 유용한 기능이죠.04:27

이전에 해야 할 일들을 생각해 보면, 왜 스코프가 단순한 중첩보다 더 나은지에 대한 이전 문제를 해결하려면 `posts post image`와 같은 선택자를 작성해야 합니다.04:40

이 경우에는 잘 작동하지만 단점도 있어요. 예를 들어 CSS가 DOM 구조에 너무 강하게 연결되어 있어서 템플릿을 수정하거나 다른 컨테이너를 추가하면 선택자가 더 이상 작동하지 않죠.04:50

더 중요한 건, 이 선택자가 높은 특이성 때문에 덮어쓰기 어렵다는 거예요. 아주 구체적이죠. CSS 알고리즘의 작동 방식이 바로 그렇습니다.05:02

그러다가 문제가 발생하는데, 예를 들어 다크 모드를 적용할 때 그렇습니다. 다크 모드에서는 테두리가 있는 모든 이미지들이 흰색 테두리를 가져야 합니다. 이미지, 테두리 색상, 흰색.05:12

그건 안 되네요. 왜냐하면 CSS 선택자로 단순한 요소 하나만 사용하면 구체도가 너무 낮거든요. 그래서 여기도 똑같이 구체적인 선택자를 써야 하는데 그러면 코드가 지저분하고 장황해지거나, 아니면 !important를 사용해야죠. 그러면 규칙이 강제로 적용되긴 하지만요.05:21

다음 조정에서는 문제가 다시 발생합니다. 스코프를 이용해서는 쉽게 이 규칙을 덮어쓰기 힘들죠. 하지만 지금은 아주 잘 작동합니다. 스코프가 너무 높은 특이성을 가지지 않기 때문입니다. 즉, 스코프를 사용하면, 이게 바로 핵심인데, 의도적으로 약하지만 여전히 공간적인 영향을 미칩니다.05:36

스코프 CSS 규칙을 사용하면 아주 정확하게 요소를 타겟팅할 수 있어서, 지나치게 빡빡한 선택자를 쓸 필요가 없어요. 정말 굉장하고, 가장 좋은 점은 스코프가 이미 몇 주 전부터 기본 기능으로 적용되었기 때문에 주요 브라우저에서 모두 지원하니까 웹 프로젝트에서 안전하게 사용할 수 있다는 거죠.05:52

웹 프로젝트는 어디에 배포하시나요? 혹시 시발라에 배포하세요. 이 영상의 파트너인 시발라는 빠르고 실용적인 플랫폼을 제공합니다. 깃허브나 깃랩으로 쉽게 가입하고 레포지토리를 연결할 수 있죠. 정적 사이트의 경우 완전히 무료입니다. 단순 파일이든, 심지어 정적 앵귤러 앱이든, 시발라는 자동으로 적절한 배포를 감지합니다.06:08

설정 마치고 몇 번 클릭하는 것만으로도 자동 배포까지 포함된 사이트가 바로 구축되는데, 이거 진짜 편하고, 개발자 입장에서 해보면 정말 맘에 드네요. 끊김 없이 아주 훌륭하게 작동해요. 물론 정적인 사이트만 있는 건 아니에요. 더 복잡한 애플리케이션도 호스팅할 수 있고, 오브젝트 스토리지랑 다양한 데이터베이스 종류도 사용 가능하고, 직접 관리할 수도 있죠.06:27

데이터베이스 스튜디오를 통해 스키마와 레코드를 온라인으로 관리할 수 있고, 또 제가 정말 좋아하는 기능은 템플릿입니다. 이걸로 인프라 전체를 자동으로 배포할 수 있죠. 예를 들어 파이썬 MCP 서버, 라로엘, 아니면 제가 여기서 시도했던 것처럼 파이어 크롤처럼 한 번의 클릭으로 레디스, 플레이라이트까지 배포할 수 있습니다.06:47

서비스와 API 사용이 정말 간편하고 말씀드린 것처럼, 정적 콘텐츠는 모두 무료입니다. Sevala는 인공적인 제한 없이 사용량 기반의 투명한 가격 정책을 가지고 있습니다. 예를 들어 무제한의 협업자를 초대해도 좌석당 요금을 부과하지 않고, 실제로 사용한 만큼만 지불하시면 됩니다.07:03

그게 맞는 것 같고, 게다가 20달러의 무료 크레딧도 제공되니까 한번 해보세요. 정말 추천할 만해요. 영상 설명에 링크가 있으니 확인하시고, 그럼 이제 다음 기능들로 넘어가죠. 다음 기능들은 정말 놀라울 정도로 멋진 효과들을 만들어낼 수 있답니다.07:19

크롬, 엣지, 사파리에서 지원되어서 인터넷 사용자 95% 정도를 커버하는데, 파이어폭스는 아직 작업 중이지만 움직임이 있어서 앞으로 몇 주 안에 사용할 수 있을 수도 있겠네요. 정말 기대되요. 예를 들어, 이 스크롤 기반 애니메이션은 정말 굉장하거든요. 스크롤하면서 애니메이션을 하는 건 현대 웹의 중요한 부분이고요.07:34

이런 거라면 보통 JavaScript 이벤트 리스너나 GSM 같은 레이아웃 라이브러리를 다뤄야 하는데, JavaScript 코드를 한 줄도 쓰지 않고, 외부 라이브러리 없이, 애니메이션 타임라인을 이용해서 이 코드 펜을 똑같이 만들어 볼까요.07:53

CSS 애니메이션을 하려면 세 가지가 필요합니다. 목표 대상, 즉 애니메이션을 적용할 요소를 말이죠.08:08

예를 들어, 이 div는 진행 표시줄입니다. 그리고 키프레임이 필요합니다. 애니메이션이 어떻게 진행되어야 할까요? 일반적인 CSS 애니메이션에서 이미 알고 있는 내용이죠. 여기서는 단순히 width를 0%에서 100%로 애니메이션 처리할 뿐입니다.08:12

세 번째로 필요한 건 타임라인입니다. 그리고 이게 바로 큰 혁신이죠. 지금까지 우리가 알고 있던 애니메이션, 즉 스크롤 기반이 아닌 애니메이션에서는 타임라인이 단순히 시간이었어요.08:25

애니메이션의 경우, 예를 들어 5000밀리초라고 지정할 수 있습니다. 그 시간이 지나면 브라우저는 애니메이션을 재생합니다.08:34

하지만 이제 애니메이션 타임라인도 변경할 수 있고, 시간 대신 두 가지 새로운 값을 사용할 수 있습니다. 하나는 스크롤입니다. 그리고 스크롤 가능한 요소의 경우, 제가 웹사이트의 어느 위치에 있는지, 즉 상단인지 하단인지에 따라 스크롤 위치가 애니메이션 진행률에 반영됩니다.08:43

맨 위는 0%, 맨 아래는 100%입니다.08:57

이것이 스크롤될 수 있도록 약간의 내용이 필요하고, 한번 이걸 확인해보세요. 이제 제가 사용자로 얼마나 진행했는지 보여주는 프로그레스 바가 생겼습니다. 그리고 원라인과 애니메이션 타임라인 스크롤 외에도 또 다른 새로운 기능인 ‘뷰(view)’가 있는데, 이건 많은 효과에서 훨씬 더 흥미롭습니다. 뷰를 이용해서 애니메이션을 시작할 수도 있습니다.09:01

특정 요소가 뷰포트에 들어오면, 몇 개의 제목과 단락이 나타납니다. 이들은 모두 'reveal' 클래스를 가지고 있으며, 투명도를 애니메이션하여 페이드인 효과를 주고, 또한 요소를 오른쪽에서 슬라이드인 시킵니다.09:20

이렇게 하면 각 요소가 뷰포트에 들어올 때마다 정말 멋진 애니메이션 효과를 줄 수 있어요.09:34

애니메이션 범위도 여기서 조정했는데, 애니메이션 끝나는 지점을 뷰포트의 30% 지점으로 설정했어요. 즉, 애니메이션이 뷰포트 상단에 도달하는 것이 아니라 뷰포트의 30% 지점에서 끝납니다.09:40

이 방법으로 제가 코드 빈에서 봤던 효과를 거의 완벽하게 재현할 수 있었어요, 자바스크립트 없이요. 예시 코드를 확인해 보세요. 모든 예시는 영상 설명란 아래에 링크해 두었습니다.09:53

자, 이제 형제 수와 형제 인덱스로 계속 진행해 보겠습니다. 과거에 이렇게 계단식 애니메이션을 만들고 싶었다면, 자바스크립트나 점점 커져가는 딜레이를 가진 nth child 선택자를 엄청나게 많이 사용하는 두 가지 방법밖에 없었어요.10:04

이런 식으로 자주 보시겠지만, 정말 깔끔하지 않고, 코드로 쓰기에도 좋지 않아요. 왜냐하면 동적이지 않고, 가능한 모든 경우에 대해 CSS 선택자를 미리 정의해야 하거든요. 하지만 이제 SiblingIndex를 사용해서 이걸 한 줄로 바꿀 수 있습니다.10:17

이 함수는 부모 요소 내에서 해당 요소의 위치를 나타내는 정수를 반환합니다. 즉, 첫 번째 자식은 1, 두 번째 자식은 2, 이런 식으로요.10:30

계산 함수 calc를 이용해서 애니메이션 지연 시간을 정말 쉽게 계산할 수 있어요. 완전히 동적이고, 나중에 요소가 몇 개가 있든 상관없어요.10:37

하지만 때로는 요소의 인덱스뿐만 아니라, 서로 나란히 있는 요소의 총 개수가 중요한 경우도 있어요. 그리고 그게 바로 SiblingCount가 하는 일입니다. 여기 예시를 보여드릴게요.10:46

태그를 추가하고 제거하는 슬라이더가 있습니다. 하지만 요소가 많을수록 더 작게 표시됩니다.10:56

태그 개수에 따라 글꼴 크기와 패딩이 동적으로 계산되고, 재미있게도 sibling index를 이용해서 태그에 동적인 색깔도 주고 있어요.11:03

이 색상 함수들을 좀 더 정확하게 사용하는 방법에 관심이 있으시면, 이 영상에서 좀 더 자세히 다뤘습니다. 한번 확인해 보세요. 형제 요소 개수와 형제 인덱스가 정말 실용적이라고 생각해요.11:11

이 두 가지 유용한 CSS 함수를 얻어서, 이전에는 훨씬 복잡했던 계산을 할 수 있게 되었어요. 이 속성들은 크롬에서 새롭게 추가되었고, 사파리에서는 몇 주 전에부터 사용 가능했죠.11:21

파이어폭스 쪽에서 관련 작업을 진행 중인 것 같아요. 티켓에 최근 파이어폭스 팀 게시글도 있고, 아직 정식 릴리스는 안 됐지만, 조만간 나오면 좋겠네요.11:33

진짜 멋진 기능들이 엄청 많거든, 이미 브라우저에서 바로 쓸 수 있는 것도 있고, 가끔은 실험적으로만 있는 경우도 있지만, 그런 기능들 있으면 특정 기능 코딩하는 거 90% 정도 줄일 수 있어.11:42

영상들인데, 내년쯤에 이 기능들이 출시되기를 바라요. 예를 들어, CSS 캐러셀을 보세요. 여러 영상들 사이를 슬라이딩하는 거죠.11:51

사용자가 단계별로 다양한 입력을 해야 하는 이 온보딩 마법사, 그리고 이 카드를 이동하며 탐색할 수 있는 방식. 이 모든 것이 단 한 줄의 자바스크립트 없이 만들어졌어요.12:00

그 뒤로는 CSS 캐러셀들이 있는데, 기본적으로 스크롤 가능한 영역과 ScrollButton, ScrollMarker라는 두 개의 새로운 가상 요소들을 합쳐 놓은 형태입니다.12:08

스크롤 버튼은 한 요소를 다른 요소로 이동시키는 버튼을 말하며, CSS를 통해 콘텐츠와 스타일을 적용할 수 있습니다.12:18

버튼을 클릭하면 브라우저가 서로 다른 스크롤 스냅포인트 사이를 왔다 갔다 할 수 있다는 걸 이해합니다. 스크롤 스냅포인트는 오래전부터 있었지만, 크롬에서 지원하는 건 네이티브 탐색을 가능하게 하는 버튼을 정의하는 겁니다.12:25

스크롤 마커 의사 클래스는 기본적으로 캐러셀 내 특정 요소에 대한 링크라고 이해할 수 있습니다. 단순한 점(dot)을 사용할 수도 있지만, 단계 번호를 표시하는 텍스트나 제품 갤러리처럼 이미지를 사용하는 것도 가능합니다.12:38

자바스크립트 없이 이 모든 걸 해낸 건 정말 정말 멋진 일이지만, 이건 분명히 해야 해요.12:51

현재는 크롬에서만 가능하고, 파이어폭스나 사파리에서는 아직 관련 계획이 명확하지 않습니다.12:56

다음 기능은 좀 달라요. 다들 이미 작업하고 있는데, CSS Masonry라고 하는 레이아웃 스타일인데, 이게 꽤 오래전부터 있었고 주로 큰 기기, 데스크톱이나 태블릿 같은 곳에서 더 유용하죠. 마손리, 가끔 여기저기 구현해본 기억이 나는데, 보통 자바스크립트가 필요했어요.13:04

요소들의 크기에 따라 다음 요소의 정확한 위치를 동적으로 계산해야 하는 방식이죠. 단순히 아래에 요소들이 나열된 단순한 컬럼 구조가 아니라, 요소들이 번호 매겨져 하나씩 이어지는 방식으로 배치되기 때문에 문제를 해결하기가 쉽지 않죠.13:21

두 번째 행부터는 프로그래밍 없이 이렇게 보입니다. 이건 일반적인 그리드일 때의 모습입니다. 다음 아이템들은 항상 새로운 행에 맞춰 정렬되지만, 마손리(masonry) 방식에서는 아이템들이 위로 올라가면서 자동으로 빈 공간을 채웁니다. 이 기능과 구현 방식에 대해 주요 브라우저들 간에 5년간이나 논쟁이 있었습니다. 크롬은 display masonry를 도입하고 싶어했고, 파이어폭스는 다른 방식을 원했습니다.13:36

그리드 확장과 관련해서, 그리드 표시, 그리드 템플릿 행, 그리고 masonry, apple은 사파리에서 디스플레이 그리드 레인을 도입하고 싶어했습니다. 궁극적으로 CSS 표준을 관리하는 CSS 작업 그룹은 작년에 디스플레이 그리드 레인이 미래의 해결책이 되어야 한다고 결정했습니다.13:57

애플은 이미 이 기능을 구현했으니, 다른 브라우저들도 곧 따라 할 거라고 기대해봐요. 자, 이제 팝오버 API에 멋진 추가 기능인 '관심 끌기 API'를 한번 살펴볼게요. 이전 영상에서 앵커 위치를 활용해서 한 줄 코드도 없이 멋진 툴팁을 만드는 방법을 보여드렸었죠.14:14

자바스크립트만 사용하면 가능하지만, 아직 중요한 부분이 하나 빠져있습니다. 앵커 위치와 Popover API를 함께 사용해서 클릭 시 뭔가를 보여줄 수는 있지만, 불행히도 자바스크립트 없이 호버(마우스 오버) 시에 띄우는 건 불가능합니다. 이게 종종 필요한 경우가 있죠. 곧 개선될 예정입니다.14:29

이 이벤트를 유발하는 API라는 말은 좀 거창하게 들리지만, 간단히 말해서 사용자가 특정 요소에 관심을 보일 때 UI가 반응하도록 하는 방식이라고 할 수 있습니다. 예를 들어, 사용자가 마우스를 요소 위로 가져가거나, 반대로 마우스를 떼어낼 때 UI가 변하는 것을 의미합니다.14:45

VOKA API에 대한 관심은 엄밀히 말하면 CSS만 있는 것이 아니라 브라우저 API가 될 예정이지만, 여전히 미리 보여드리고 싶었어요. 정말 멋질 테니까요. 그런데 이와 함께 새로운 CSS 속성들도 추가될 예정입니다. 지금 바로 전체 동작을 확인해 보세요.14:58

물음표 위에 마우스를 올려보면 이미 도구가 완성된 걸 확인할 수 있습니다.15:10

앵커 포지셔닝의 장점들을 생각하면, CSS 해킹이나 자바스크립트 트릭으로 이 문제를 해결해본 사람은 알겠지만 특히 툴팁 트리거에서 툴팁까지의 마우스 움직임이 어렵다는 걸 잘 알 겁니다.15:14

마우스가 영역 밖으로 나가자마자 툴팁이 바로 숨겨지지 않도록 디바운스 기능이 필요해. 그런데 여기서는 바로 작동하네. CSS를 통해 디바운스 기능과 툴팁이 나타나기 전 대기 시간도 조절할 수 있어.15:27

여기 0을 입력하고 2000밀리세컨드를 넣으면, 마우스로 관심 영역을 클릭하는 순간 0밀리세컨드 후에 툴팁이 바로 나타나지만, 관심이 끊기면 2초 후에 닫힙니다. 물론, 사용하시면서 원하는 대로 조정하실 수 있습니다. 그런데, 여기서는 아직 정확히 언제인지 알 수 없네요.15:40

저희 브라우저에서는 이 기능이 이미 구현되었고, 이제 여러분 차례입니다! 어떤 기능에 가장 기대되시나요, 아니면 브라우저에 바라는 완전히 다른 점이 있으신가요? 댓글로 알려주세요. 그리고 이 영상 좋아요와 구독 부탁드립니다. 이런 영상 계속 만들 수 있도록 큰 도움이 됩니다.15:56

정말 감사합니다. 다음에 또 만나요.16:11