피드로 돌아가기
직접 만들지 말라 …
GeekNewsGeekNews
Frontend

직접 만들지 말라 …

Native Control 활용과 Custom 구현 사이의 Engineering Trade-off 분석

neo2026년 5월 24일12intermediate

Context

웹 생태계 내에서 Native 기능을 배제하고 Custom UI/Logic을 직접 구현하며 발생하는 성능 저하와 UX 파편화 문제를 다룸. 특히 브라우저 최적화(bfcache, Scrolling)와 보안 표준(Cryptography)을 무시한 구현이 가져오는 시스템 리스크를 분석함.

Technical Solution

  • Browser Native 기능을 우선 채택하여 bfcache 및 탭 로딩 최적화 등 브라우저 내장 가속 엔진 활용
  • CSR(Client Side Routing) 도입 시 태그를 유지하여 브라우저 네이티브 내비게이션 기능과 호환성 확보
  • Date-picker 등 제약이 큰 Native 컨트롤은 Native와 Custom 위젯을 병행 배치하는 Hybrid 구조로 접근성 및 편의성 동시 충족
  • Cryptography 구현 시 직접 작성 대신 검증된 Wrapper 라이브러리를 사용하여 부채널 공격 대응 및 중앙 집중적 패치 구조 설계
  • Context Menu 구현 시 네이티브 메뉴를 완전히 대체하기보다 전용 메뉴바 제공 및 브라우저 기본 메뉴 유지 전략 채택
  • Scrolling 구현 시 Native Scroll 이벤트를 활용하여 플랫폼 간 이벤트 전송 빈도 차이에 따른 방향 계산 오류 방지

- [ ] 폼 입력 요소 설계 시 Native HTML5 컨트롤의 제약 사항을 먼저 확인하고 Hybrid UI 도입 검토 - [ ] CSR 라우팅 구현 시 브라우저 기본 내비게이션 기능(새 탭 열기 등)을 저해하는 요소가 없는지 확인 - [ ] 암호화 로직 필요 시 개별 구현을 배제하고 공개 감사(Audit)를 거친 표준 라이브러리 채택 - [ ] Custom 스크롤 구현 전 브라우저별 Scroll Event 발생 빈도 및 렌더링 파이프라인 영향도 분석

원문 읽기