새로운 기회에 열려 있습니다

디지털 경험을설계합니다

안녕하세요. 프론트엔드 개발자 김이현입니다.
단순히 화면을 그리는 것을 넘어, 구조적인 탄탄함과 유려한 인터랙션으로
사용자에게 완벽한 경험을 제공하는 것을 목표로 합니다.프론트엔드 개발자 김이현입니다.
구조와 인터랙션으로
더 나은 사용자 경험을 만듭니다.

작업물 보기 랩 둘러보기

Live · 숫자로 보는

지금까지 쌓아온 것들

데이터는 실시간 집계 — 방문 수치는 이 사이트가 직접 만든 트래킹에서 옵니다.

작업물

라이브 데모·섹션·훅

공통 컴포넌트

직접 만든 디자인 시스템

,

누적 방문

자체 트래킹 집계

Showcase

만든 것

실제 동작하는 인터랙션·섹션·훅 데모를 라이브로 확인할 수 있습니다. 카드에 커서를 올려보세요.

전체 보기+121

[Swipe to Delete] 왼쪽으로 밀면 보관/삭제가 나오는 iOS식 리스트

행을 손가락으로 밀어 숨은 액션을 꺼내고, 끝까지 밀면 바로 삭제. 드래그 중 리렌더 없이 ref로 직접 움직이는 Pointer Events 스와이프 리스트입니다.

[ES2025 Set] union/intersection/difference를 토글로 보는 집합 연산

[React 19 useOptimistic] 서버 응답 전에 화면을 먼저 바꾸는 낙관적 UI

[Temporal] 헷갈리던 Date를 대체하는 날짜 계산 플레이그라운드

[Native Popover] JS 없이 열고 닫는 팝오버 + top-layer

[View Transitions] 레이아웃이 바뀔 때 항목이 부드럽게 이동하는 화면 전환

Explore

더 둘러볼 것들

데모와 글 말고도 — 직접 만든 도구·데이터 글·컴포넌트·학습 콘텐츠가 있습니다.

랩 — 인터랙티브 도구

이미지 합성기 · 모션 그래프(베지어) · 애니메이션 키트. 실무에서 반복해 쓰는 도구를 직접 만들어 모았습니다.

인사이트

npm·GitHub 등 외부 데이터로 본 프론트엔드 동향 + 해석.

컴포넌트 갤러리

직접 만든 31개 공통 컴포넌트를 라이브로.

슬랭 사전 · 학습

프론트 용어를 플래시카드·퀴즈로 익히는 학습 모드.

방문 분석 공개

외부 도구 없이 직접 수집·집계한 이 사이트의 트래픽을 누구나 볼 수 있게 공개합니다.

Component System

직접 만든 디자인 시스템

42개의 공통 컴포넌트로 이 사이트의 모든 화면을 빚었어요. 카드 클릭 시 개별 데모와 실제 소스 코드까지 확인할 수 있습니다.

전체 컴포넌트 갤러리