Performance First UI가 어떤 프레임워크보다도 나에게 더 많은 것을 가르쳐 주었다

Source: Dev.to

Speed Is More Than Numbers

개발자는 속도가 숫자—밀리초, 점수, 그래프—라고 믿으며 자라옵니다.
하지만 사용자는 숫자를 보지 못합니다. 그들은 순간을 느낍니다:

• 클릭 직후의 순간.
• 탭 직후의 순간.
• 인정을 기대하는 순간.

그 순간에 아무 일도 일어나지 않으면, 기술적인 문제가 아니라 감정적인 문제가 발생합니다.

Lighthouse는 유용합니다. 그것은 한 세대 전체에게 성능에 신경 쓰게 만들었습니다.
하지만 2026년 현재, Lighthouse만을 의존하는 것은 빈 트랙에서 가속이 얼마나 빠른지만으로 차를 판단하는 것과 같습니다. 실제 사용자는 교통 속에서 운전합니다:

• 데이터가 로드되는 동안 스크롤한다.
• JavaScript가 실행되는 동안 클릭한다.
• 하이드레이션이 끝나는 동안 타이핑한다.

바로 여기서 성능‑우선 UI가 살아 있습니다. 로드 시점이 아니라 상호작용 중에 말이죠.

Interaction to Next Paint (INP)

페이지 로드는 소개에 불과합니다.
상호작용은 약속입니다.

사용자가 버튼을 클릭할 때, 단순히 데이터를 요청하는 것이 아니라 안심을 요구합니다:

“내 말 들었나요?”
“작동하고 있나요?”
“믿어도 될까요?”

인터페이스가 시각적으로 아무 반응도 보이지 않으면, 그 약속은 깨진 것입니다.

Interaction to Next Paint는 웹 메트릭에서 드물게 현실을 측정합니다.
논리가 끝났는지, 프로미스가 해결됐는지는 신경 쓰지 않고 픽셀이 언제 변하는지에 집중합니다.

이는 UI 코드를 작성하는 방식을 재정의합니다. 페인트 전에 작업을 하는 것이 위험하게 느껴집니다.

Common INP Problems

대부분의 INP 문제는 서버가 느리기 때문이 아니라 좋은 의도 때문에 발생합니다:

• 이벤트 핸들러 안에 로직이 너무 많음
• 상태 업데이트가 너무 많음
• 한 번에 반응하는 컴포넌트가 너무 많음

모든 것이 정상이고, 모든 것이 올바르지만—조금씩 늦을 뿐입니다. 그 약간의 지연이 누적됩니다.

A Simple, Embarrassing Fix

제가 상호작용 성능을 크게 개선한 가장 부끄러울 정도로 간단한 방법은 피드백을 보여주기 전에 실제 작업을 하지 않는 것입니다.

# Before
Click → compute → update UI

# After
Click → update UI → compute

특별한 것이 없습니다. 새로운 라이브러리도 필요 없습니다. 단지 페인트 사이클을 존중하는 것뿐입니다.

Next.js Features That Support Performance‑First UI

Next.js는 이 사고방식과 함께 조용히 진화했습니다:

• Partial Prerendering – 인터페이스가 완전하지 않아도 준비된 것처럼 보입니다.
• Streaming – 콘텐츠가 상호작용을 차단하지 않고 도착합니다.
• Server Actions – UI가 먼저 움직이고 나중에 확인합니다.
• Edge Middleware – 클라이언트에서 전체 의사결정 트리를 제거합니다.

올바르게 사용하면, 브라우저가 응답할 여지를 유지합니다.

Lessons Learned

저는 예전엔 최소주의를 쫓았습니다: 기능을 줄이고, 번들을 작게 만들기.
성능‑우선 UI는 저에게 더 나은 교훈을 주었습니다:

• 많이 하되, 한 번에 전부는 하지 않는다.
• 사용자가 볼 수 없는 것은 미루라.
• 사용자가 아직 신경 쓰지 않는 것은 지연시켜라.
• 사용자가 방금 한 일에 집중하라.

The Cost of Sluggish Interaction

느린 상호작용은 페이지 로드가 느린 것보다 더 큰 비용을 초래합니다. 왜냐하면 지연이 사용자가 이미 몰입한 순간에 발생하기 때문입니다:

• 그들은 클릭했다.
• 그들은 의도했다.
• 그들은 준비돼 있었다.

이 시점에서 그들을 잃는 것은 느린 랜딩 페이지보다 전환율에 훨씬 큰 타격을 줍니다.

AI Can’t Feel Hesitation

2026년 현재, AI는 컴포넌트를 생성하고, 코드를 리팩터링하며, 자산을 최적화할 수 있습니다.
하지만 AI는 주저함을 느낄 수 없습니다. 전환이 어색하거나 피드백이 너무 늦게 도착하는 순간을 감지하지 못합니다. 그 민감함이 이제 개발자의 진정한 가치가 됩니다.

AI는 요구합니다: 인내심을.
대시보드가 아니라 직접 인터페이스를 관찰하라고.
우리 스스로 버튼을 천천히 클릭하고 스스로에게 물으라고:

이것이 존중받는 느낌인가?

인상적이지도, 영리하지도 않다. 다만 존중이다.

Conclusion

성능‑우선 UI는 트렌드가 아니라 교정이다—듣는 소프트웨어를 만드는 복귀이다.

• UI가 즉시 반응한다면, 사용자는 작은 결점을 용서한다.
• 주저한다면, 그들은 기억한다.

결국, 성능은 속도가 아니라 신뢰에 관한 것이다.