CSS 마스크(Mask)는 특정 그래픽의 알파 채널(투명도)이나 휘도를 기준으로 요소의 표시 영역을 제어하는 속성이다. 마스크는 종이 위에 모양 틀을 대고 원하는 부분만 오려내는 스텐실 공정과 같아서, 사각형 틀을 벗어난 독창적인 외곽선을 웹 요소에 부여할 때 활용된다. 이 문서에서는 벡터(Vector) 형식인 SVG(에스브이지) 그래픽을 마스크 이미지로 지정하여 카드 레이아웃과 비디오 재생 영역에 적용하는 방법을 설명한다.
1. 예제1-이미지
마스크 효과를 적용하기 위해서는 마스크 형태로 사용할 그래픽 자산을 먼저 준비해야 한다. 디자인 도구인 피그마(Figma)에서 벡터 도구를 이용해 원하는 외곽선 형태를 제작하고 파일로 추출한다.
Figma
1. Figma 에서 마스크용 이미지를 그린다.
2. card.svg로 저장한다.
피그마에서 제작한 그래픽은 투명 배경을 유지한 상태로 card.svg 파일로 내보낸다(Export). 마스크 연산은 기본적으로 이미지의 알파 채널을 기준으로 이루어지므로, 화면에 노출될 부분에는 채움 색상을 지정하고 가려질 배경 부분은 완전히 투명하게 비워두어야 한다.
html
카드 목록과 비디오 영역을 구성하는 마크업 구조다. 세 개의 카드를 나열하기 위해 figure 태그와 설명 문구를 담는 figcaption 태그를 사용한다.
<div class="flex">
<figure class="item">
<a href="#">
<img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis
minima veniam vel mollitia reprehenderit velit explicabo impedit
officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.
</figcaption>
</a>
</figure>
<figure class="item">
<a href="#">
<img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis
minima veniam vel mollitia reprehenderit velit explicabo impedit
officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.
</figcaption>
</a>
</figure>
<figure class="item">
<a href="#">
<img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
<figcaption>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis
minima veniam vel mollitia reprehenderit velit explicabo impedit
officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.
</figcaption>
</a>
</figure>
</div>
<div class="video_box">
<video src="./images/video.mp4" autoplay muted loop></video>
</div>부모 컨테이너인 div.flex 내부에 세 개의 figure.item 요소가 배치되어 수평 정렬된다. 각 카드는 링크(a) 요소로 감싸져 클릭이 가능하며, 하단에는 별도의 비디오 재생을 위한 video_box 컨테이너가 정의되어 있다. video 태그에 muted 속성이 누락되면 대부분의 브라우저에서 자동 재생(autoplay)이 제한되므로 음소거 설정을 함께 적용한다.
css
가상 요소(Pseudo-element, 슈도 엘리먼트)인 :before에 마스크 이미지를 지정하여 카드의 배경 모양을 제어하고, 마우스 호버(Hover) 시 배경색이 전환되는 스타일을 정의한다.
body {
background: gray;
}
.flex {
display: flex;
width: 80%;
margin:10rem auto;
column-gap: 5%;
}
.item {
position: relative;
width: 30%;
height: 495px;
background: transparent;
box-sizing: border-box;
padding: 30px;
cursor: pointer;
transition: all 0.4s ease;
}
.item:hover:before {
background: rgba(0, 0, 0, 1);
}
.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mask-image: url('./images/card.svg');
mask-repeat: no-repeat;
mask-size: 100%;
background: rgba(255, 255, 255, 1);
transition: all 0.4s ease;
}
.item:after {
position: absolute;
content: '';
background: rgba(0, 0, 0, 0.15);
height: 100%;
width: 1px;
right: -30px;
top: 0;
}
img,
figcaption {
position: relative;
width: 100%;
top: 0;
}
주요 스타일 속성의 동작 원리는 다음과 같다.
.flex:display: flex와column-gap: 5%를 지정하여 자식 카드들을 균등하게 가로로 배열한다..item:before: 가상 요소에mask-image: url('./images/card.svg')를 선언하여 사각형의 흰색 배경(background: rgba(255, 255, 255, 1))을 SVG 외곽선 형태로 잘라낸다.mask-repeat: no-repeat와mask-size: 100%를 지정하여 마스크가 반복되지 않고 요소 크기에 맞게 채워지도록 설정한다..item:hover:before: 카드에 마우스 포인터가 진입했을 때 가상 요소의 배경색을 검은색(rgba(0, 0, 0, 1))으로 변경한다.transition: all 0.4s ease속성에 의해 0.4초 동안 색상이 부드럽게 전환된다..item:after: 가상 요소를 1px 너비의 세로 선으로 구성하여 카드 간의 구분선 역할을 수행하도록 배치한다.
웹킷(WebKit) 기반 브라우저와의 크로스 브라우징 호환성을 고려할 경우, 표준 속성과 더불어 -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-size 접두사 속성을 함께 선언하는 것이 안전하다. 마스크 이미지 경로가 잘못되면 마스크가 적용되지 않고 흰색 사각형 전체가 그대로 노출되므로 상대 경로 연결을 정확히 확인해야 한다.
2. 예제2-비디오
비디오 요소에 마스크 속성을 적용하여 특정 형태나 복수의 마스크 프레임을 통해 영상이 투과되어 재생되도록 설정한다.
html
반응형 비율 컨테이너 역할을 수행하는 div.video_box 내부에 비디오 요소를 마크업한다.
<div class="video_box">
<video src="./images/video.mp4" autoplay muted loop></video>
</div>비디오 태그에 autoplay, muted, loop 속성을 지정하여 사용자 상호작용 없이도 무한 반복 재생되는 배경 비디오 구조를 만든다.
css
단축 속성(Shorthand Property)인 mask를 사용하여 단일 요소에 여러 개의 마스크 이미지를 동시에 적용하고 각각의 위치와 크기를 제어한다.
.video_box {
position: relative;
padding-bottom: 56.85%;
height: 0;
overflow: hidden;
}
video {
position: absolute;
width: 100%;
height: 100%;
mask: url('./images/card.svg') no-repeat 50px 0, url('./images/card.svg') no-repeat 550px 300px;
mask-size: 260px, 150px;
}스타일 규칙의 동작 원리는 다음과 같다.
.video_box:height: 0과padding-bottom: 56.85%를 지정하여 16:9 비율을 유지하는 반응형 비디오 박스를 형성한다. 부모 너비에 비례해 세로 높이가 자동으로 계산된다.video의mask단축 속성: 쉼표(,)를 기준으로 두 개의 마스크를 다중으로 선언하였다. 첫 번째 마스크는50px 0좌표에 배치되고, 두 번째 마스크는550px 300px좌표에 배치된다.mask-size: 260px, 150px: 첫 번째 마스크의 크기를 가로 260px, 두 번째 마스크의 크기를 가로 150px로 각각 설정한다.
하나의 비디오 재생 화면 위에 서로 다른 크기와 위치를 가진 두 개의 SVG 구멍이 뚫리면서, 마스크가 위치한 영역에서만 비디오 영상이 나타난다. 다중 마스크 선언 시 쉼표로 구분된 속성값의 순서가 서로 일치해야 각 레이어의 위치와 크기가 올바르게 대응된다.