[웹 디자인 69] 피그마 - 이미지와 에셋 내보내기 - TheNullPage(널페이지)

피그마에서 내보낸 사진과 아이콘은 CSS와 HTML을 통해 화면에 자리를 잡습니다. 같은 에셋도 어떤 태그와 속성에 얹느냐에 따라 또렷함과 무게가 달라지니, 내보낸 파일을 코드로 심는 길을 짚어 보겠습니다.

69.1 배경 이미지로 깔기

영역을 채우는 사진은 background-image로 깝니다. cover로 영역을 꽉 채우고, position으로 어느 부분을 보여 줄지 정합니다.

.hero {
background-image: url("/img/hero.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 320px;
}

사진 위에 글자를 얹어야 하면 반투명한 막을 겹쳐 대비를 살립니다. 배경은 여러 겹을 쉼표로 쌓을 수 있어, 어두운 막과 사진을 한 속성에 함께 넣습니다.

.hero {
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("/img/hero.webp");
background-size: cover;
color: #fff;
}

cover는 비율을 지키며 영역을 덮어 빈틈을 남기지 않습니다. contain으로 바꾸면 잘림 없이 전체가 들어오지만 여백이 생기니, 배경에는 대개 cover가 어울립니다.

69.2 아이콘은 인라인 SVG로

아이콘은 img로 불러올 수도 있지만, 코드에 직접 심는 인라인 SVG가 더 유연합니다. 파일 요청 없이 뜨고, CSS로 색과 크기를 바로 다룰 수 있습니다.

사진처럼 색이 구워진 그림은 img가 맞지만, 선으로 그려진 아이콘은 인라인 SVG가 제격입니다. 크기를 아무리 키워도 규칙대로 다시 그려져 흐트러지지 않습니다.

69.3 fill을 currentColor로 색 상속

아이콘 색을 못 박아 두면 밝은 화면과 어두운 화면에서 따로 손봐야 합니다. currentColor를 쓰면 아이콘이 놓인 자리의 글자색을 그대로 따라갑니다.

/* 나쁜 예: 색을 못 박음 */
.icon { fill: #1f2937; }

이러면 부모의 색이 바뀌어도 아이콘은 그대로입니다. fill을 currentColor로 두면 부모의 color 한 곳만 바꿔도 아이콘이 함께 따라옵니다.

/* 좋은 예: 글자색을 따라감 */
.icon { fill: currentColor; }
.icon-btn { color: #1f2937; }
.icon-btn:hover { color: #2563eb; }

마우스를 올려 부모 색이 파랑으로 바뀌면 아이콘도 파랑이 됩니다. 색을 하나하나 못 박는 대신 따라가게 두면, 밝고 어두운 화면을 함께 다룰 때 손이 훨씬 덜 갑니다.

69.4 고해상도는 srcset으로 대응

촘촘한 화면에서 또렷하려면 보이는 크기보다 큰 사진이 필요합니다. 피그마에서 1x, 2x, 3x로 내보낸 파일을 srcset에 늘어놓으면 브라우저가 알맞은 것을 고릅니다.

배경 이미지에는 image-set으로 같은 일을 합니다. 화면의 촘촘함에 맞춰 해상도가 갈리니, 낮은 기기가 괜히 큰 파일을 내려받지 않습니다.

.thumb {
background-image: image-set(
url("/img/thumb.webp") 1x,
url("/img/[email protected]") 2x
);
background-size: cover;
}

69.5 picture로 포맷 분기

가벼운 webp를 쓰되, 이를 못 읽는 곳을 위해 png도 함께 둡니다. picture는 위에서부터 읽을 수 있는 첫 소스를 골라 씁니다.

webp를 읽는 브라우저는 가벼운 쪽을, 그러지 못하는 곳은 img의 png를 씁니다. 형식 하나를 잘못 골라 배경이 하얗게 막히는 사고를 이 분기가 막아 줍니다.

69.6 object-fit으로 비율 지키기

img에 폭과 높이를 억지로 정하면 사진이 찌그러집니다. object-fit을 cover로 두면 비율을 지키며 상자를 채우고, 넘치는 부분만 잘립니다.

/* 나쁜 예: 비율이 찌그러짐 */
.avatar {
width: 80px;
height: 80px;
}

가로세로 비율이 다른 사진이 들어오면 눌리거나 늘어납니다. object-fit을 더하면 비율은 지키고 상자만 채웁니다.

/* 좋은 예: 비율 유지 */
.avatar {
width: 80px;
height: 80px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}

여러 상품 카드의 사진 비율이 제각각이어도, object-fit이 같은 상자에 가지런히 맞춰 줍니다. 나란히 놓았을 때 들쭉날쭉하던 목록이 반듯해집니다.

69.7 늦게 뜨는 순간까지 챙기기

사진은 무게가 있어 화면이 뜬 뒤에 조금 늦게 나타납니다. 폭과 높이를 미리 적어 두면 그 자리가 빈 채로 잡혀 있어 화면이 덜컹거리지 않습니다.

.media {
aspect-ratio: 16 / 9; /* 자리를 미리 확보 */
background: #f3f4f6; /* 뜨기 전 바탕색 */
object-fit: cover;
}
img {
loading: lazy;
}

aspect-ratio로 비율만큼 자리를 잡아 두면 사진이 늦게 떠도 레이아웃이 밀리지 않습니다. 뜨기 전에는 은은한 바탕색이 빈자리를 메워 줍니다.

69.8 정리

에셋마다 성격에 맞는 자리가 있습니다. 배경은 background-size cover, 아이콘은 인라인 SVG와 currentColor, 사진은 srcset과 picture, 상자 채움은 object-fit입니다.

<picture>
<source srcset="/img/p.webp" type="image/webp">
<img src="/img/p.png" class="cover"
width="320" height="200" alt="사진">
</picture>

.cover { object-fit: cover; }

내보내기는 파일을 만드는 데서 끝나지 않고, 그 파일이 코드의 어느 태그에 얹히느냐까지 이어집니다. 성격에 맞는 자리에 얹으면 화면은 빠르고 또렷하게 뜹니다.