SEO 키워드: CSS 아이스버그, CSS 애니메이션, 프론트엔드 트릭

---

# 📌 서론 – “HTML 없이 그림을 그릴 수 있을까?”

웹 프론트엔드 개발을 시작한 지 얼마 안 된 초보라면, HTML이 없으면 화면에 아무 것도 표시되지 않을 거라고 생각하기 쉽습니다. 그런데 CSS만을 사용해 복잡한 그래픽을 구현한다면 어떨까요? 최근 개발자 커뮤니티에서 화제가 된 CSS Iceberg 예제는 바로 그런 도전을 성공시킨 작품입니다.

이 글에서는 HTML 없이 순수 CSS만으로 빙산 일러스트를 만드는 방법을 단계별로 풀어보고, 실제 코드와 함께 이해하기 쉬운 설명을 제공합니다.

---

# 🧩 본론

# 1️⃣ 프로젝트 준비 – 기본 파일 구조 만들기

text

project/

│
├─ index.html   ← 비워두거나 최소한 <style> 태그만 포함

└─ style.css    ← 모든 스타일을 여기서 작성

• index.html은 빈 파일이지만 브라우저가 CSS를 로드하도록 <link rel='stylesheet' href='style.css'> 를 한 줄만 넣어 주세요.

• 핵심은 HTML 요소를 전혀 사용하지 않는 것입니다. 모든 시각 요소는 :root, ::before, ::after 등 가상 선택자를 활용해 구현합니다.

# 2️⃣ 가상 요소와 clip-path 로 빙산 형태 만들기

CSS 가상 요소(::before, ::after)는 실제 DOM에 존재하지 않지만, 시각적인 레이어를 추가할 때 유용합니다.

css

/* 기본 배경 */

body {

  margin: 0;

  height: 100vh;

  background: linear-gradient(to bottom, #87ceeb, #fff);

}

/* 빙산 컨테이너 – 실제 요소는 하나뿐 */

.iceberg {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 200px;

  height: 150px;

  transform: translateX(-50%);

  background: #e0f7fa;

}

/* 빙산 위쪽(눈에 보이는 부분) */

.iceberg::before {

  content: '';

  position: absolute;

  top: -80px;

  left: 0;

  width: 100%;

  height: 120px;

  background: #fff;

  clip-path: polygon(0% 100%, 20% 0%, 40% 30%, 60% 0%, 80% 30%, 100% 0%, 100% 100%);

}

/* 빙산 아래쪽(숨은 부분) */

.iceberg::after {

  content: '';

  position: absolute;

  bottom: -70px;

  left: -30px;

  width: 260px;

  height: 100px;

  background: #b2ebf2;

  clip-path: polygon(0% 0%, 30% 100%, 70% 0%, 100% 100%, 100% 0%);

}

• clip-path 를 이용해 다각형 형태를 정의하고, 이를 빙산의 눈에 보이는 부분과 물속에 가라앉은 부분으로 나눕니다.

• ::before 와 ::after 로 각각 위와 아래 레이어를 겹쳐서 입체감을 줍니다.

# 3️⃣ 부드러운 움직임 – @keyframes 로 파도와 빙산 흔들기

시각적인 효과를 더하려면 CSS 애니메이션을 적용합니다. 여기서는 파도가 살짝 움직이고, 빙산이 바람에 흔들리는 모습을 구현합니다.

css

/* 파도 애니메이션 */

@keyframes wave {

  0%   { transform: translateX(0); }

  50%  { transform: translateX(-20px); }

  100% { transform: translateX(0); }

}

/* 빙산 흔들림 */

@keyframes sway {

  0%   { transform: rotate(0deg); }

  50%  { transform: rotate(2deg); }

  100% { transform: rotate(0deg); }

}

/* 적용 */

body::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 30vh;

  background: radial-gradient(circle at 50% 0, #fff, #87ceeb);

  animation: wave 4s infinite ease-in-out;

}

.iceberg {

  animation: sway 6s infinite ease-in-out;

}

• body::after 로 만든 파도는 수평 이동만으로도 충분히 물결 효과를 낼 수 있습니다.

• sway 애니메이션은 작은 회전을 반복해 빙산이 바람에 살짝 흔들리는 듯한 느낌을 줍니다.

# 4️⃣ 반응형 디자인 – 뷰포트에 맞춰 크기 조절

모바일에서도 깨지지 않게 하려면 vw(viewport width) 단위를 활용합니다.

css

.iceberg {

  width: 40vw;          /* 화면 너비의 40% */

  height: 30vh;         /* 화면 높이의 30% */

}

이렇게 하면 데스크톱, 태블릿, 스마트폰 어느 환경에서도 빙산 비율이 자동으로 맞춰집니다.

# 5️⃣ 실전 팁 – 디버깅과 성능 최적화

| 팁 | 내용 |

|---|---|

| 가상 요소 확인 | 브라우저 개발자 도구에서 ::before, ::after 가 적용된 요소를 직접 선택해 색상·크기·위치를 조정합니다. |

| clip-path 지원 | 최신 브라우저는 대부분 지원하지만, 구버전 IE에서는 동작하지 않으니 필요 시 svg 폴리곤 대체를 고려합니다. |

| 애니메이션 최적화 | transform 과 opacity 만 사용하면 GPU 가속이 적용돼 부드러운 렌더링이 가능합니다. |

---

# ✅ 결론 – 이제 당신 차례!

이번 포스팅을 통해 HTML 없이 순수 CSS만으로 복잡한 일러스트와 애니메이션을 구현하는 방법을 배웠습니다. clip-path, ::before/::after, @keyframes 같은 CSS 기본 기능만으로도 충분히 눈에 띄는 UI를 만들 수 있다는 점, 기억해 주세요!

실전 과제: 오늘 배운 내용을 바탕으로 자신만의 아이스버그 혹은 다른 자연 풍경을 만들어 보세요. 만든 작품은 SNS에 #CSSIceberg 해시태그와 함께 공유하면, 다른 개발자들과 아이디어를 교환할 수 있습니다.

궁금한 점이나 추가적인 트릭이 필요하면 댓글로 알려 주세요. 여러분의 멋진 CSS 작품을 기대합니다! 🚀