🎨 웹퍼블리셔 실습 후기 — 눈 내리는 애니메이션과 감성적인 겨울 바다 인터랙션 구현하기

 

이번 웹퍼블리셔 실습에서는 패럴랙스 형태의 배경 확대, 눈 내리는 애니메이션, GNB 호버 반응형 스타일, 오디오 컨트롤러 삽입, 세로 텍스트 등장 효과 등 HTML·CSS만으로 구현할 수 있는 다양한 인터랙션 기능을 익혔습니다. 실무에서도 활용 가능한 퍼블리싱 중심 코드로 정리해 드립니다.

 

<animation 효과 적용된 웹페이지.gif>

 

❄️ 1. 이번 실습 핵심 요약

이번 수업에서는 HTML·CSS만으로 겨울 감성이 담긴 랜딩페이지를 구현하는 방법을 실습했습니다.
아래와 같은 기능들을 직접 퍼블리싱하는 과정을 통해 구조와 원리를 배울 수 있었습니다.

• 헤더 GNB 호버 시 색상 변화
• 눈 내리는 animation keyframes 제작
• 배경 이미지 확대(zoom-in)로 패럴랙스 연출
• 음악 플레이어(audio 태그) 삽입 및 hover 인터랙션
• 단어가 한 글자씩 등장하는 세로 텍스트 애니메이션
• position·z-index·레이아웃 구성 활용

웹퍼블리셔 과정답게 디자인보다는 코드를 통한 화면 구현 방식 이해에 중점을 둔 실습이었습니다.

 

🌊 2. 헤더(GNB) 호버 효과 — 실무에서도 자주 사용하는 퍼블리싱 패턴

GNB 메뉴에 마우스를 올렸을 때 자연스럽게 색이 바뀌는 인터랙션을 적용했습니다.

 

header nav .gnb li:hover a {
    color: lightpink;
    transition: 0.2s;
}

 

작은 요소이지만 사용자 경험을 향상하는 데 매우 중요한 부분이며,
header 전체가 hover 되었을 때 높이가 변경되는 효과도 함께 적용해 반응성을 높였습니다.

 

🎧 3. 오디오 컨트롤러 삽입 — HTML5 태그 실전 활용

이번 실습에서는 배경 음악을 넣기 위해 audio 태그를 사용했습니다.

 

<audio src="music/bgm.mp4" class="bgm" controls></audio>

 

hover 시 플레이어가 확장되는 효과를 CSS로 추가하여 더욱 감성적인 연출이 가능했습니다.
웹퍼블리셔에게 필요한 HTML 태그 + CSS 인터랙션 조합 능력을 확인할 수 있는 예제였습니다.

 

❄️ 4. 눈 내리는 애니메이션 — keyframes의 흐름 이해하기

눈이 흩날리는 효과는 background-position 값을 이용해 움직임을 주는 방식으로 구현했습니다.

 

.snow {
    background: url(../images/snow.png);
    position: absolute;
    animation: snow1 10s linear infinite;
}

 

서로 다른 크기와 속도의 눈 레이어를 2~3개 겹쳐 더욱 자연스러운 눈 효과를 완성했습니다.

 

🌫️ 5. 배경 확대 애니메이션 — 정적인 화면에 깊이감 부여

정적인 배경 이미지에 천천히 확대되는 움직임을 넣어 화면의 몰입감을 높였습니다.

 

@keyframes bgmain {
    0% {transform: scale(1);}
    100% {transform: scale(1.2);}
}

 

특별한 스크립트 없이 CSS transform만으로도 감각적인 화면 연출이 가능하다는 점을 배울 수 있는 실습이었습니다.

 

📝 6. 세로 텍스트 애니메이션 — delay를 활용한 감성 표현

세로로 배치된 문구가 한 글자씩 등장하도록 애니메이션을 설정했습니다.

 

@keyframes wordAni {
    0% {right: 300px; top: 100px; opacity: 0;}
    100% {right: 0; top: 0; opacity: 1;}
}

 

각 span 요소에 서로 다른 delay를 적용하여 자연스럽게 흐르는 듯한 움직임을 표현했습니다.
CSS 애니메이션의 구조와 시간차 연출을 배우기에 좋은 예제였습니다.

 

🧑‍💻 7. 이번 실습을 통해 느낀 점

이번 웹퍼블리셔 실습을 통해
코드만으로도 웹페이지의 분위기를 크게 변화시킬 수 있다는 점을 체감할 수 있었습니다.

특히 눈 내리는 효과와 텍스트 애니메이션은
포트폴리오에서도 충분히 사용할 수 있는 요소라 앞으로도 다양한 프로젝트에 응용해보고 싶다는 생각이 들었습니다.

---

🔎 8. 포트폴리오 활용 가치

이번 실습에서 다룬 기능들은 웹퍼블리셔 포트폴리오에서 다음과 같은 강점을 보여줄 수 있습니다.

• CSS keyframes 애니메이션 구현 능력
• position·z-index·background 등을 이용한 인터랙션 제작
• HTML5 태그(audio 등)의 실전 활용
• 감성 랜딩페이지 퍼블리싱 역량
• 사용자 반응형 인터랙션 설계 능력

특히 계절 또는 감성 캠페인 페이지에 활용하기 좋은 구조입니다.

 

✨ 마무리

이번 실습을 통해 인터랙션과 애니메이션을 적절히 활용하면
웹페이지 전체의 감성과 흐름을 더 풍부하게 만들 수 있다는 점을 배울 수 있었습니다.
앞으로도 다양한 CSS 기법을 활용하여 더 완성도 높은 퍼블리싱 작업을 해보고 싶습니다.