색시리즈 2부 입니다.

컬러시스템 만드는 이유

컬러시스템 기획 및 전략

색상선택

Color Psychology / Color Emotion

Color theme

Color System 만들기

Color Palette

Case study

자세한 내용은 데모를 통해 확인해주세요.

데모로 보기

웹디자인 색 기본
색은 디자인에 매우 중요한 요소입니다.
공부를 깊이 들어가면 끝도 없이 깊은 영역으로 보입니다.

웹디자인에서 꼭 알아야하는 정도로만 색에 대해서 정리해봅니다.

1부 색의 기본입니다.

RGB, 가산혼합, 감산혼합 등 색의 기초부터,
간단한 색이론과 hue, tint, tone, shade 에 대한 기본에 대한 정리입니다.

시각적으로 보이는 부분이 큽니다.
데모를 통해 확인해주세요.

데모로 보기

웹애니메이션 – Layout formation during scroll

Inspired by Codrops

스크롤에 따라 이미지가 하나씩 고정된 위치에 자리잡는 애니메이션입니다.
아래서 위로, 좌우에서 가운데로 다양한 형태로 구성이 가능합니다.

단순히 이미지뿐만 아니고 Card나 Icon Box같은데 적용해서
스크롤에 따라 정해진 위치에 콘텐츠가 올라가서 자리잡게 만들 수 있습니다.

Idea 1. Container 에 이미지 넣기

대략적인 html 구조
Container 안에 이미지 넣고 display: grid

<section class="form1-section">
<div class=".container">
<img class="form1-img" src="">
<img class="form1-img" src="">
<img class="form1-img" src="">
<img class="form1-img" src="">
<img class="form1-img" src="">  
</div>
</section>

Idea 2. 스크롤 하면 이미지 올라가면서 지정된 위치에 가기

1) section을 원하는 위치에 pin 시킵니다.
pin이 되야 section이 고정되고, 아래서 올라오는 이미지들이 제 위치로 자리잡게 됩니다.

ScrollTrigger.create({
    trigger: section,
    start: "top 10%",  
    end: "+=300%",  
    pin: true,
    pinSpacing: true,
    scrub: 1,
 
});

2) 이미지들이 순차적으로 아래서 위로 이동하게

gsap.from(images, {
    y:1200, 
    opacity: 1,
    stagger: 0.5,
    duration: 3,
    ease: "power3.out",
    scrollTrigger: {
        trigger: ".form1-section",
        start: "top 40%",
        end: "+=2600px",
        scrub: 3,
  
    }
});

웹애니메이션 – 3D Mini Robot Scroll Animation

3D Model from Sketchfab

1) 3D 로봇 만들기

3D는 보통 블렌더를 가장 많이 사용합니다.
무료고 다운로드 받아서 설치 후 사용하면 됩니다.
그런데 조금 어렵습니다. 3D쪽으로 나갈게 아니면 너무 시간을 소비하는건 좋지 않은거 같아요.

웹에서 디자인용으로 사용하려면,
Vectary, Spline 같은 좀 더 쉬운 툴을 사용하는게 좋은데,
이건 glb, gltf 파일 export하려면 유료입니다.
저같으면 상업용 프로젝트에 3D를 디자인적 요소나 기능 설명 요소로 넣는다면,
Spline을 사용할거 같습니다.

Skechfab 에서 무료 오브젝트를 가져와서 사용하는 방법도 가능합니다.
( CC BY – 출처 표기 / 상업적 이용 가능 )

2) 3D 오브젝트 올리기

미디어 라이브러리는 glb, gltf 파일 등록이 안됩니다.
MIME 플러그인을 설치해서 glb, gltf파일을 등록합니다.

3) Three.js 불러오기

3D 자바스크립트 라이브러리인 Three.js 를 불러옵니다.

방법1) function.php 파일에 추가 ( 추천 )
방법2) CDN으로 불러오기

4) Canvas 넣기

워드프레스에 html 또는 code 모듈로 canvas를 원하는 위치에 넣습니다.

방법1) canvas 를 렌더링해서 자동으로 넣는 방법

<div id="three-container"> 

const renderer = new THREE.WebGLRenderer();
document.getElementById("three-container").appendChild(renderer.domElement);

방법2) canvas를 코딩으로 직접 넣는 방법

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const renderer = new THREE.WebGLRenderer({ canvas });

5) Three.js 기본설정

Scene 만들고, render 설정해주기

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

scene 만들고, camera 설정
render size 설정하고 원하는 html에 canvas 삽입

6) glb 모델 불러오기

const loader = new THREE.GLTFLoader();

oader.load(
  '/wp-content/uploads/2025/04/model.glb', 
  function (gltf) {
    const model = gltf.scene;
    scene.add(model);
    model.position.set(0, 0, 0);
  }
);

위치가 안맞을 경우에는 div 박스 만들어서 안으로 넣고 위치 맞춰야 합니다.

7) 모델에 애니메이션 주기

gsap.to(model.position, {
      x: 100,             
      duration: 2,      
      ease: "power2.inOut",
      });

이런식으로 애니메이션 주면 됩니다.
원하는 위치에 왔을때 움직이게 하려면 scroll trigger 주고 애니메이션 주면 됩니다.

8) Orbit Control 사용해서 클릭해서 모델 움직임 효과 주기

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enableZoom = false;

카메라 움직임으로 마치 모델이 움직이는 효과를 줄 수 있습니다.

3D 모델을 이용한 다양한 인터랙티브한 디자인이 가능합니다.

Inspired by minhpham.design

마우스 따라다니는 커서,  텍스트에 마우스가 호버할때 커서가 커지게 하는거나
마그네틱 효과 (마우스를 오브젝트에 가져가면 자석에 붙듯이 딸려오는 효과) 구현하는거나 어렵지는 않은데요.
문제는 레퍼런스 사이트를 보면, 커서가 커지면서 커서안의 텍스트가 변경됩니다.
이게 구현이 까다로와서 조금 고생했네요.

Idea 1. 마스크에 변수 주기

.orange {
--x: 0px; 
--y: 0px;
--size: 40px;  
mask-image: url('your-mask.svg');
mask-repeat: no-repeat;
-webkit-mask-position: var(--x) var(--y); 
mask-position: var(--x) var(--y);
}

x : x좌표 / y : y좌표 / z : 크기
마우스가 이동하면 마스크가 해당위치로 이동
마치 커서가 마우스를 따라가는것 같은 효과

Idea 2. GSAP 마우스 위치에 맞춰 x, y 위치 변경

아래는 코드 예입니다.

$(document).on("mousemove", function(e) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  gsap.to('.orange', {
    '--x': `${mouseX}px`,
    '--y': `${mouseY}px`,
    duration: 0.5,
    ease: "power3.out"
  });
});

x, y 위치 마우스 위치에 맞춰 변경되게 하고,
호버하면 사이즈 커지게

가장 중요한 핵심은 텍스트 A와 B가 두개가 겹쳐지게 위치해야합니다.
마우스가 해당 위치에 가면 커서가 커지면서 커서 안쪽으로 텍스트B가 나오는 원리입니다.
원래 해당 위치에 있는데 커서가 가기까지는 마스크 바깥쪽이니 안보이는거죠. <– 이게 핵심!!!!

Idea 3. 마그네틱 효과

코드펜이나 구글, 유튜브 등에서 magnetic effect 라고 하면 많이 나옵니다.
보시고 따라해보세요.

기본 개념은 요소를 중심으로 정해진 거리만큼 영역을 줍니다.
커서가 거리가 가까워지면 요소가 영역까지 딸려옵니다.
커서가 거리가 멀어지면 요소가 영역에서 튕겨 제위치로 돌아갑니다.

예)

See the Pen
Magnetic Cursor by NikhilLadhani (@nikhil-ladhani-nl)
on CodePen.

Inspired by Codrops

텍스트 사이에 이미지 넣고 처음에는 width:0 으로 안보이게,
스크롤 하면 정해진 크기로 이미지가 커지게하는 스크롤 애니메이션입니다.

워드프레스에서는 html 코드 그대로 넣고,
CSS와 GSAP으로 구현하면 됩니다.

Idea 1. 텍스트 사이에 이미지 넣기

HTML 구조

<div class="text-box">
Building <br>
  Stronger Brands<br>
Creating<br>
  Meaningful 
  <span class="ani-box">
    <span class="img-box">
      	<span class="inner-img"></span>
  </span>
  </span>
  <span> Connections.</span>
  
</div>

Idea 2. 스크롤 하면 이미지 나타나서 커지게 하기

<script>
document.addEventListener("DOMContentLoaded", function () {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to(".img-box", {
        width: "450px", 
        height:"220px", 
        duration: 1,
        ease: "power2.out",
        transformOrigin: "top", 
        scrollTrigger: {
            trigger: ".text-box",
            start: "top 35%",
            end: "top top",
            scrub: 1
        }
    });
});
</script>

text-box의 top이 35% 지점에 가면 애니메이션 시작
width, height, radius 등을 조정해서 다양한 모양의 애니메이션을 구현할 수 있습니다.

Inspired by zentry.com

Idea 1. clip-path

clip-path는 요소의 클리핑 범위를 지정하고 지정된 안쪽은 보이고 바깥쪽은 안보입니다.
비디오 배경앞에 clip-path div 를 추가한 후,
clip-path를 한번 변형하고 확대시켜 비디오 배경이 전체 보이게 만듭니다.

간단한 clip-path 도형 만들기 – https://bennettfeely.com/clippy/

.clip-container {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

GSAP

gsap.fromTo(
  ".clip-container",
  { 
    clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)",
    width: "300px", 
    height: "300px",
    rotation: 0 
  },
  { 
    clipPath: "polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)",
    width: "300px",
    height: "300px",
    rotation: 15,
    duration: 0.6,
    ease: "power2.out"
  }
);

gsap.to(".clip-container", {
  clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
  width: "100vw", 
  height: "100vh",
  rotation: 0,
  duration: 0.8,
  delay: 0.6, 
  ease: "power2.out"
});

회전하면서 모양을 변형하고,
이후 전체화면에 꽉차게 커지게 만듭니다.
clip-path 되어서 100% 화면에 꽉 차게되면 비디오 배경이 전부 다 보이게 됩니다.

Idea 2. GSAP Scroll Animation – Scroll Trigger

스크롤하면 모양 변하면서 작아지게 만듭니다.

gsap from to 해서 모양을 변형시킵니다.
스크롤 트리거를 걸어서 특정 위치에 오면 애니메이션이 시작되게 조정할 수 있습니다.

  scrollTrigger: {
      trigger: ".video-section",
      start: "top top",  
      end: "top top-=400",  
      scrub: 1,  
    }

video-section top이 top에 위치하면 애니메이션 시작

clip-path 와 video background 그리고 GSAP 스크롤 애니메이션을 조합하면,
다양한 인터랙티브한 웹사이트를 만들 수 있습니다.

워드프레스로 모든 애니메이션과 디자인 구현이 가능합니다.