정적인 화면도 충분히 깔끔할 수 있지만, 작은 상호작용이 더해지면 사용자 경험이 한층 좋아집니다. 버튼이나 카드, 태그에 마우스를 올렸을 때 부드럽게 반응하면 사이트가 훨씬 살아 있는 느낌을 줍니다. 이번 글에서는 CSS의 :hover와 transition을 활용해 자연스러운 움직임을 만드는 방법을 차근차근 살펴보겠습니다.
핵심은 과한 효과를 주는 것이 아니라, 사용자가 “여기는 클릭할 수 있구나”라고 직관적으로 인지할 수 있도록 안내하는 것입니다. 이동 거리, 색상 변화, 그림자 강도 같은 요소를 적절하게 조절하면 단순한 UI도 세련된 인상을 줄 수 있습니다.
변경 안내 (이전 글과의 차이)
이전에 발행된 글에서는 버튼 예시를 .btn-main 기준으로 소개한 부분이 있습니다. 이후 코드가 정리되면서 현재 프로젝트는 .btn 공통 클래스와 .btn.primary, .btn.secondary 구조를 사용하고 있습니다.
따라서 이번 글의 Hover/Transition 예시는 최신 코드 기준인 .btn 계열에 맞춰 설명합니다. 이미 발행된 글의 내용이 잘못된 것은 아니며, 시리즈가 진행되면서 클래스 구조가 더 확장 가능한 형태로 정리된 것으로 이해해 주시면 됩니다. 아래의 “이전(초기 예시)” 코드는 차이를 설명하기 위한 비교용 예시이며, 현재 프로젝트 코드에 새로 적용해야 하는 코드는 아닙니다.
수정된 HTML도 함께 보면 차이가 더 분명합니다.
<!-- 이전(초기 예시) -->
<a href="#projects" class="btn-main">프로젝트 보기</a>
<!-- 현재(최종 코드) -->
<div class="btn-group">
<button class="btn primary">프로젝트 보기</button>
<button class="btn secondary">연락하기</button>
</div>
1. 버튼 Hover 효과: 살짝 떠오르는 느낌
버튼은 사용자 상호작용의 중심 요소이기 때문에, Hover 반응을 가장 먼저 적용하기 좋습니다. 마우스를 올렸을 때 버튼이 아주 살짝 위로 올라오도록 만들면 클릭 가능성이 더 명확하게 전달됩니다.
/* style.css */
.btn {
/* 버튼 기본 스타일 */
padding: 12px 30px;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
border: none;
/* 변화가 일어날 때 0.2초 동안 부드럽게 전환 */
transition:
transform 0.2s,
box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-3px);
}
.btn.primary {
background: var(--primary);
color: white;
box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
}
.btn.secondary {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
}
여기서 이동값을 너무 크게 주면 버튼이 튀어 보일 수 있습니다. 보통 -2px에서 -4px 사이가 가장 안정적이며, 현재처럼 -3px 정도면 대부분의 레이아웃에서 무난하게 어울립니다.
2. 프로젝트 카드 Hover 효과
프로젝트 카드 효과는 이전 글의 흐름을 유지해 이번 화에서 이어서 설명합니다. 카드의 transition: transform 0.3s ease;는 기존에 설정되어 있었고, .project-card:hover는 이번 화에서 추가되는 인터랙션입니다. 카드 전체가 약간 위로 이동하면 사용자의 시선이 자연스럽게 해당 항목으로 모이게 됩니다.
.project-card {
/* 카드 기본 스타일 */
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
}
카드의 경우 버튼보다 이동값이 조금 커도 자연스럽습니다. 다만 카드 간 간격이 좁은 레이아웃에서는 움직임이 겹쳐 보일 수 있으니, 필요하면 -6px~-8px처럼 조금 줄여서 적용하셔도 좋습니다.
3. 스킬 태그 Hover 효과
이전 글에서는 이미지와 object-fit에 집중했기 때문에, 스킬 태그 인터랙션은 이번 화에서 본격적으로 적용합니다. 배경색과 텍스트 색상을 함께 전환하면 상태 변화가 또렷해지고, 태그도 클릭 가능한 요소처럼 자연스럽게 인식됩니다.
<!-- index.html About 섹션 -->
<div class="skills-container">
<span class="skill-tag">HTML5</span>
<span class="skill-tag">CSS3</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Node.js</span>
</div>
.skill-tag {
padding: 8px 16px;
background: white;
border: 1px solid var(--secondary);
color: var(--primary);
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
transition: 0.3s;
cursor: default;
}
.skill-tag:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
}
이 패턴은 태그뿐 아니라 배지, 카테고리 라벨, 필터 버튼에도 그대로 응용할 수 있습니다. 같은 전환 속도를 유지하면 페이지 전체의 인터랙션 리듬이 통일되어 더 완성도 있게 보입니다.
4. 내비게이션 링크 Hover
내비게이션 링크 Hover도 기존 스타일에 이미 적용되어 있는 코드입니다. 이번 섹션에서는 새 기능을 추가하기보다, 단순한 색상 변화만으로도 사용자가 현재 포인터 위치를 빠르게 인식할 수 있다는 점을 확인해 보겠습니다.
.menu a:hover {
color: var(--primary);
}
링크 효과는 눈에 띄되 과하지 않게 유지하는 것이 좋습니다. 특히 상단 메뉴는 페이지 전반의 톤을 결정하므로, 지나치게 큰 애니메이션보다 간결한 컬러 전환이 더 안정적입니다.
5. Transition을 쓸 때의 작은 팁
transition이 없으면 상태가 즉시 바뀌기 때문에 UI가 딱딱하게 느껴질 수 있습니다. 반대로 전환 시간이 너무 길면 반응이 느리게 느껴질 수 있으니, 보통 0.2s~0.3s 정도가 가장 자연스럽습니다.
또한 가능한 한 사이트 전반에서 비슷한 전환 속도를 유지해 보세요. 버튼은 0.2s, 카드와 태그는 0.3s처럼 규칙을 정해 두면 사용자가 의식하지 않아도 화면이 정돈된 느낌을 받게 됩니다.
마무리
이번 글에서는 :hover와 transition만으로도 인터페이스 인상을 크게 개선할 수 있다는 점을 살펴보았습니다. 작은 움직임과 색상 변화는 단순한 장식이 아니라, 사용자에게 상호작용 가능성을 전달하는 중요한 신호입니다.
정리하면, 이번 단계의 핵심은 다음과 같습니다. 첫째, 버튼과 카드에 미세한 이동 효과를 주어 클릭 유도를 강화한다는 점. 둘째, 태그와 메뉴 링크에 색상 전환을 적용해 시각적 피드백을 명확히 한다는 점. 셋째, 전환 시간과 강도를 일관되게 맞춰 전체 UI 톤을 안정적으로 유지한다는 점입니다.
다음 글에서는 @keyframes를 활용해 배경이나 요소에 반복 애니메이션을 적용하고, 사이트에 조금 더 생동감 있는 움직임을 더해 보겠습니다.
감사합니다.