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

디지털 경험을설계합니다

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

작업물 보기 랩 둘러보기

Live · 숫자로 보는

지금까지 쌓아온 것들

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

작업물

라이브 데모·섹션·훅

공통 컴포넌트

직접 만든 디자인 시스템

,

누적 방문

자체 트래킹 집계

Showcase

만든 것

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

전체 보기+136

CSS 유틸리티

[Container Style Queries] 클래스 대신 '값'으로 테마를 바꾸는 CSS

자식 요소가 자기 클래스가 아니라 부모에 심어둔 커스텀 속성 값(--tone)을 보고 색과 아이콘을 스스로 바꿉니다. 한 곳의 값 하나만 갈면 그 아래가 전부 따라옵니다.

CSS 유틸리티

[mask-image] 그라데이션과 모양으로 요소를 오려내는 CSS 마스크

CSS 유틸리티

[@property] 애니메이션 안 되던 값을 움직이게 만드는 타입 지정 변수

CSS 유틸리티

[clamp()] 브레이크포인트 없이 매끈하게 커지는 유체 타이포

[scroll-snap] JS 없이 카드가 딱 멈추는 스냅 캐러셀

[offset-path] 요소를 경로 따라 움직이는 CSS 모션 패스

News

프론트엔드 소식

해외 이슈와 커뮤니티 논의를 한글로 추려 전합니다. 옆으로 넘겨 최신 소식을 확인하세요.

Explore

더 둘러볼 것들

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

랩

인사이트

컴포넌트 갤러리

슬랭 사전 / 학습

방문 분석 공개

Component System

직접 만든 디자인 시스템

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

전체 컴포넌트 갤러리