웹사이트에서 이미지는 정보를 전달하는 동시에 분위기를 만드는 중요한 요소입니다. 다만 이미지 원본의 크기와 비율이 제각각이면 카드 레이아웃이 쉽게 흐트러질 수 있습니다. 이번 글에서는 프로젝트 카드와 프로필 영역에 이미지를 추가하고, 비율이 깨지지 않도록 안정적으로 처리하는 방법을 정리해 보겠습니다.
핵심은 단순합니다. 먼저 HTML에 이미지 태그를 올바르게 배치하고, CSS에서 width, height, object-fit을 함께 설정해 화면이 바뀌어도 일관된 모양을 유지하는 것입니다. 이 원리만 이해해 두시면 이후 썸네일, 배너, 프로필 이미지에도 같은 방식으로 확장해서 적용하실 수 있습니다.
1. Picsum으로 샘플 이미지 빠르게 연결하기
학습 단계에서는 매번 실제 이미지를 준비하기 번거로울 수 있습니다. 이럴 때 picsum.photos를 사용하면 URL만으로 다양한 샘플 이미지를 빠르게 불러올 수 있습니다.
아래처럼 프로젝트 카드 내부에 img 태그를 추가해 보겠습니다. random 파라미터 값을 다르게 주면 카드마다 서로 다른 이미지가 표시됩니다.
<!-- index.html 수정 -->
<div class="project-card">
<!-- 600x400 크기의 샘플 이미지, random 파라미터로 서로 다른 이미지 로드 -->
<img src="https://picsum.photos/600/400?random=1" alt="E-commerce App" class="project-img" />
<div class="project-info">
<h3>E-commerce App</h3>
<p>React와 Node.js로 만든 쇼핑몰</p>
</div>
</div>
<div class="project-card">
<!-- 600x400 크기의 샘플 이미지, random 파라미터로 서로 다른 이미지 로드 -->
<img src="https://picsum.photos/600/400?random=2" alt="Portfolio Site" class="project-img" />
<div class="project-info">
<h3>Portfolio Site</h3>
<p>HTML/CSS만으로 만든 반응형 웹</p>
</div>
</div>
<div class="project-card">
<!-- 600x400 크기의 샘플 이미지, random 파라미터로 서로 다른 이미지 로드 -->
<img src="https://picsum.photos/600/400?random=3" alt="Task Manager" class="project-img" />
<div class="project-info">
<h3>Task Manager</h3>
<p>생산성을 높여주는 투두 리스트</p>
</div>
</div>
실제 운영 단계에서는 프로젝트 성격에 맞는 대표 이미지를 넣어주시면 됩니다. 다만 지금 단계에서는 레이아웃과 스타일을 검증하는 목적이므로 샘플 이미지로 먼저 구조를 완성하는 것이 효율적입니다.
2. object-fit: cover로 비율 깨짐 방지하기
카드 이미지에서 가장 자주 발생하는 문제는 비율 왜곡입니다. 예를 들어 img에 높이를 고정했는데 원본 비율이 다르면 이미지가 찌그러져 보일 수 있습니다.
이때 object-fit: cover를 적용하면, 이미지가 지정된 영역을 비율을 유지한 채 꽉 채우도록 표시됩니다. 일부 영역은 잘릴 수 있지만, 왜곡 없이 깔끔한 썸네일을 유지할 수 있다는 장점이 있습니다.
/* style.css */
.project-img {
width: 100%; /* 부모 너비에 맞춤 */
height: 200px; /* 카드 썸네일 높이 고정 */
object-fit: cover; /* 비율 유지 + 영역 꽉 채우기 */
}
여기서 높이값(200px)은 디자인에 따라 조정 가능합니다. 콘텐츠가 많은 카드라면 조금 낮게, 이미지 비중이 높은 카드라면 조금 높게 설정하시면 균형이 좋아집니다.
3. 프로필 이미지 다듬기 (원형 + 그림자)
About 섹션의 프로필 이미지도 같은 원리로 처리할 수 있습니다. 가로/세로를 동일하게 맞춘 뒤 border-radius: 50%를 적용하면 깔끔한 원형 프로필을 만들 수 있습니다.
<!-- index.html About 섹션 -->
<img src="https://picsum.photos/300/300?grayscale" alt="Profile" class="profile-img" />/* style.css */
.profile-img {
width: 280px;
height: 280px;
border-radius: 50%;
object-fit: cover; /* 원형 안에서도 비율 유지 */
border: 5px solid white;
box-shadow: 20px 20px 0px var(--secondary);
}그림자 값은 사이트 분위기에 맞게 조절하시면 됩니다. 현재처럼 약간 큰 그림자는 포인트를 주기에 좋고, 더 차분한 느낌을 원하시면 blur를 추가하거나 거리값을 줄이는 방식으로 정리할 수 있습니다.
마무리
이번 단계에서는 이미지가 들어간 카드와 프로필 영역을 안정적으로 다듬는 방법을 살펴보았습니다. 특히 `object-fit: cover`는 이미지 비율 문제를 간단하게 해결해 주기 때문에, 카드형 UI를 만들 때 꼭 기억해 두시면 좋습니다.
정리하면, 이번 글의 핵심은 다음과 같습니다. 첫째, 샘플 이미지를 빠르게 연결해 레이아웃을 먼저 검증한다는 점. 둘째, `object-fit`으로 비율 왜곡을 방지한다는 점. 셋째, 카드 이미지와 프로필 이미지를 같은 원리로 안정적으로 관리할 수 있다는 점입니다.
다음 글에서는 카드와 버튼에 Hover/Transition 효과를 적용해 사이트에 움직임을 더하고, 사용자 상호작용이 더 또렷하게 느껴지도록 구성해 보겠습니다.