새로운 기회에 열려 있습니다
디지털 경험을설계합니다
안녕하세요. 프론트엔드 개발자 김이현입니다.
단순히 화면을 그리는 것을 넘어, 구조적인 탄탄함과 유려한 인터랙션으로
사용자에게 완벽한 경험을 제공하는 것을 목표로 합니다.프론트엔드 개발자 김이현입니다.
구조와 인터랙션으로
더 나은 사용자 경험을 만듭니다.
Live · 숫자로 보는
지금까지 쌓아온 것들
데이터는 실시간 집계 — 방문 수치는 이 사이트가 직접 만든 트래킹에서 옵니다.
작업물
라이브 데모·섹션·훅
공통 컴포넌트
직접 만든 디자인 시스템
,
누적 방문
자체 트래킹 집계
Showcase
만든 것
실제 동작하는 인터랙션·섹션·훅 데모를 라이브로 확인할 수 있습니다. 카드에 커서를 올려보세요.
CSS 유틸리티
[CSS :open] details·dialog·select의 열림 상태를 JS 없이 칠하는 가상클래스
열고 닫히는 네이티브 요소들의 지금 열렸는가를 단 하나의 CSS 가상클래스로 통일. 색/회전/백드롭이 전부 :open 으로 그려집니다.
데모 보기
인터랙션
[Swipe to Delete] 왼쪽으로 밀면 보관/삭제가 나오는 iOS식 리스트
데모 보기
인터랙션
[ES2025 Set] union/intersection/difference를 토글로 보는 집합 연산
데모 보기
인터랙션
[React 19 useOptimistic] 서버 응답 전에 화면을 먼저 바꾸는 낙관적 UI
데모 보기
폼·입력
[Temporal] 헷갈리던 Date를 대체하는 날짜 계산 플레이그라운드
데모 보기
패턴
[Native Popover] JS 없이 열고 닫는 팝오버 + top-layer
데모 보기Explore
더 둘러볼 것들
데모와 글 말고도 — 직접 만든 도구·데이터 글·컴포넌트·학습 콘텐츠가 있습니다.
Component System
직접 만든 디자인 시스템
42개의 공통 컴포넌트로 이 사이트의 모든 화면을 빚었어요. 카드 클릭 시 개별 데모와 실제 소스 코드까지 확인할 수 있습니다.
전체 컴포넌트 갤러리