iamian

framer-motionreact

Motion: React에서 선언적으로 애니메이션하기

Spring physics, AnimatePresence, useScroll, useVelocity — Motion이 텍스트 애니메이션 23개 중 11개를 차지하는 이유를 파헤친다.

2026년 2월 18일

Other featured posts

라이브러리 코드 리딩: vaul의 모바일 최적화 트릭들

프론트엔드 UI/UX 체크리스트 — 실전 가이드

컬러 팔레트 & 타이포그래피 — 업종별 실전 레퍼런스 북

프론트엔드 UI 스타일 카탈로그 — 67개 스타일 실전 가이드

Popular Tags

태그를 클릭하면 관련 포스트를 볼 수 있습니다

#frontend #css #react-bits-deep-dive #ui-ux #design #web #react #vaul #mobile #ios #color #forms #navigation #tmux #terminal #productivity #cli #ai-agent #multi-agent #claude-code #browser #dom #debugging #typography #developer-tools

Recent Posts

최신 포스트를 확인해보세요

UX 가이드라인 심화편 — 내비게이션부터 AI 인터랙션까지

내비게이션, 폼, 검색, 피드백, 온보딩, AI 인터랙션 등 프론트엔드 UX 가이드라인 12개 카테고리를 Do/Don't 코드 예시와 함께 정리했다.

tmux 핵심 사용법 — 터미널 하나로 다 하는 법

tmux 핵심 사용법 — 터미널 하나로 다 하는 법

세션, 윈도우, 팬 — tmux의 3가지 핵심 개념과 실무에서 바로 쓰는 키바인딩을 정리한다.

에이전트 팀 디자인 패턴

ai-agentdesign-patterns

에이전트 팀 디자인 패턴

Pipeline, Fan-out, Expert Pool 등 6가지 멀티 에이전트 아키텍처 패턴을 인터랙티브 데모로 알아보자.

테이블 셀 복사 시 공백이 포함되는 이유

테이블 셀 복사 시 공백이 포함되는 이유

테이블에서 텍스트를 복사할 때 앞에 공백이 붙는 현상의 원인을 Selection API, Range, Clipboard 직렬화 알고리즘으로 추적한 기록

gitgit-worktree

Git의 3가지 분신술 — checkout, clone, worktree 시각 해부

checkout, clone, worktree — Git의 3가지 작업 방식을 인터랙티브 시각화로 비교하고, .git 내부 구조까지 탐험합니다.

도메인을 샀다, 그래서 DNS를 공부했다

도메인을 샀다, 그래서 DNS를 공부했다

개인 도메인 구매를 계기로 정리한 DNS 완전 가이드. 도메인 구조, 레코드 타입, 조회 과정부터 DNSSEC, DoH, Anycast까지.

variable-fontsvg

Variable Font & SVG: 브라우저 내장 기술의 가능성

font-variation-settings로 마우스 근접도에 반응하는 텍스트, SVG textPath로 곡선 위를 흐르는 텍스트를 구현한다.

WebGL & Shader: GPU로 텍스트 렌더링하기

Three.js로 3D 씬을 렌더링하고, Fragment Shader로 픽셀을 ASCII 문자로 변환하는 과정을 단계별로 구현한다.

CSS로 만드는 호버 & 커서 이펙트

CSS custom properties와 마우스 좌표만으로 GlareHover, StarBorder, Magnet 효과를 구현한다. JavaScript 최소화 전략과 CSS의 실제 한계를 탐구한다.

Canvas 2D: 텍스트를 픽셀로 다루기

왜 텍스트를 Canvas에 그리는가? 픽셀 조작으로 Fuzzy 효과를 만들고, Matter.js 물리 엔진으로 글자를 떨어뜨리는 과정을 구현한다.

gsapscroll-trigger

GSAP + ScrollTrigger: 타임라인으로 정밀하게 제어하기

Motion과 GSAP는 어떻게 다른가? timeline, scrub, stagger, SplitText 플러그인으로 스크롤 기반 텍스트 애니메이션을 구현한다.

CSS만으로 글리치 텍스트 만들기

JavaScript 없이 CSS keyframes, pseudo-elements, custom properties만으로 글리치 효과를 구현한다. CSS 애니메이션의 가능성과 한계를 탐구한다.

← 좌우로 스와이프하세요 →

Recent Series

블로그 시리즈와 최신 업데이트를 확인해보세요

📚 프론트엔드 UI/UX 마스터 가이드

총 4개 포스트

최신 포스트

프론트엔드 UI/UX 체크리스트 — 실전 가이드

2026.04.08

전체 보기 계속 읽기

📚 react-bits 파헤치기

총 7개 포스트

최신 포스트

Variable Font & SVG: 브라우저 내장 기술의 가능성

2026.02.23

전체 보기 계속 읽기

← 좌우로 스와이프하세요 →

블로그 통계

지금까지의 블로그 여정을 숫자로 살펴보세요

전체 포스트

📝

0

개의 포스트

→

총 읽기 시간

📚

0

평균 8분

↗

인기 카테고리

💻

0

16개 포스트

→

최근 활동

⚡

0

4개월째 운영

↗

2,240개의 단어로 이야기를 전하고 있어요 ✨