AI 코딩 도구가 일상이 된 지금, 버튼 하나에 onClick 붙이는 일은 누구나 한다. v0.dev에 프롬프트 몇 줄 넣으면 그럴듯한 폼 컴포넌트가 뚝딱 나온다. 그런데 정작 그 버튼이 어떻게 클릭을 감지하는지, 그 클릭이 사용자에게 어떤 감정을 불러일으키는지를 이해하는 개발자는 점점 줄어들고 있다. 역설적이게도, 바로 그 이해가 AI 시대에 더 희귀하고 더 값진 역량이 되고 있다.
React 이벤트 시스템: 우리가 당연하게 쓰는 것의 원리
velog의 uiflux가 정리한 두 편의 글은 React 이벤트 처리 구조를 층위별로 풀어낸다. 핵심은 두 가지다. 첫째, React는 브라우저 이벤트를 그대로 쓰지 않는다. onClick으로 전달받는 event 객체는 브라우저 원본이 아니라 React가 한 겹 감싼 Synthetic Event다. 브라우저마다 다른 이벤트 처리 방식을 숨기고, 개발자에게 일관된 인터페이스를 제공하기 위해서다.
둘째, React는 버튼 100개에 이벤트 리스너 100개를 붙이지 않는다. 이벤트 위임(Event Delegation) 전략을 사용한다. 이벤트 버블링 덕분에 클릭은 어차피 상위 노드로 전파되고, React는 그 흐름을 활용해 루트 하나에서 모든 이벤트를 수집한다. React 17 이전에는 document가 그 수집 지점이었지만, 17부터는 createRoot로 생성한 React Root 영역이 그 역할을 맡는다. 덕분에 한 페이지에 여러 React 앱이 공존하는 마이크로프론트엔드 구조에서도 이벤트 충돌 없이 안정적으로 동작할 수 있게 됐다.
이 구조가 실무에서 왜 중요한가. 동적으로 생성·삭제되는 컴포넌트 리스트를 상상해보자. 아이템마다 이벤트를 직접 붙이고 제거했다면 메모리 누수와 이벤트 등록 누락이 생길 수 있다. 이벤트 위임은 그 관리 복잡도를 루트 하나로 수렴시킨다. AI가 생성한 컴포넌트 코드가 stopPropagation()을 엉뚱한 위치에 삽입했을 때 이벤트 버블링 원리를 모르는 개발자는 버그 원인을 찾지 못한다. 반면 이 구조를 이해하는 개발자는 5분 만에 문제를 짚어낼 수 있다.
감정적 UX: 코드 한 줄이 패닉 어택을 막는다
dev.to의 Klaudia Grzesiak가 쓴 글은 기술 아티클이 아니다. 범불안장애(GAD)를 가진 개발자가 통신사 앱 하나로 공황 직전의 상황을 넘긴 실화다. 낯선 절차, 예측 불가능한 다음 단계, 전문 용어로 가득 찬 폼—이것들은 불안 장애가 없는 사람에게도 불편하지만, 불확실성에 예민한 사람에게는 신체 반응을 일으킬 만큼 압도적인 경험이 된다.
그 앱이 그녀를 붙잡은 건 화려한 애니메이션이 아니었다. "You're doing great! For the next step, prepare your ID." 같은 문장 하나, 다음 단계를 미리 알려주는 상태 메시지 하나였다. 이 UX가 실현한 것은 세 가지다. 불확실성 제거(다음에 무슨 일이 생기는지 먼저 알려주기), 신뢰 구축(인간적인 언어 사용), 진행 신호 제공(내가 올바른 방향으로 가고 있다는 확인). 이 세 가지는 접근성(a11y)의 시각적 대비나 스크린리더 지원과 동일한 층위에 있는 감정적 접근성 설계다.
두 원리가 만나는 지점
얼핏 보면 React 이벤트 내부 구조와 감정적 UX 설계는 전혀 다른 이야기처럼 보인다. 그런데 이 둘은 같은 질문을 공유한다. "사용자가 버튼을 눌렀을 때, 무슨 일이 일어나는가?"
기술 층위에서 이 질문의 답은 Synthetic Event → 이벤트 위임 → 핸들러 실행 → 상태 변경 → 렌더링이다. UX 층위에서 이 질문의 답은 사용자가 느끼는 불안이 줄어드는가, 다음 단계에 대한 신뢰가 생기는가, 중간에 포기하지 않는가다. AI가 컴포넌트 코드를 생성하는 건 전자를 처리한다. 하지만 후자는 여전히 개발자의 판단 영역이다. 버튼 클릭 후 로딩 상태를 얼마나 빠르게 보여줄 것인가, 에러 메시지를 어떤 언어로 쓸 것인가, 완료 확인을 어느 시점에 보낼 것인가—이 결정들은 이벤트 시스템 구조를 알고, 동시에 사용자 감정을 상상할 수 있어야 제대로 내릴 수 있다.
시사점: AI 시대에 더 희귀해지는 두 가지 역량
Cursor나 Claude가 onClick 핸들러를 만들어주는 건 쉽다. 하지만 그 핸들러가 왜 handleClick()이 아니라 handleClick으로 전달되어야 하는지, 그 클릭 이후 사용자가 무엇을 기대하는지를 설계하는 건 여전히 개발자의 몫이다. 전자를 모르면 AI가 생성한 코드의 버그를 잡지 못하고, 후자를 모르면 기술적으로 완벽한 제품이 사용자를 중간에 잃는다.
전망: 코드 생성이 쉬울수록 '이해'의 가치는 올라간다
AI 도구가 성숙할수록 코드 작성의 진입 장벽은 낮아지고, 프로덕트의 품질 격차는 오히려 벌어질 가능성이 높다. React 이벤트 위임 구조를 이해하는 개발자는 AI가 만든 코드의 성능 병목을 찾아낼 수 있고, 감정적 UX를 설계하는 개발자는 이탈률 데이터가 가리키는 지점에서 정확히 개입할 수 있다. 코드를 생성하는 능력은 평준화된다. 남는 경쟁력은 원리를 아는 것과 사용자를 상상하는 것—이 두 가지가 함께 있는 개발자다.