[DAN 24] 데이터 기반으로 지속 성장이 가능한 네이버 검색 FE 시스템 구축하기

핵심 내용

• 네이버 검색 FE 시스템의 지속 성장 문제를 해결하기 위해 서버 주도 UI, 디자인 시스템, 데이터 기반 개선, Design To Code를 도입한 사례
• 템플릿 기반과 컴포넌트 기반의 한계를 보완하기 위해 모듈 단위의 Flexible Rendering Engine을 설계
• 디자인과 개발의 간극과 긴 피드백 주기를 줄이기 위해 Figma API, META 분석, 자동화 도구를 활용

구조와 흐름

• 영역별 반복 작업과 UI 중복, 데이터 부족, 긴 피드백 주기라는 초기 문제 제기
• 서버 주도 UI와 디자인 시스템으로 재사용성과 효율성 확보
• META와 Design To Code로 경험을 데이터화하고 자동화 기반의 개발 경험 확장

선택 이유

• 템플릿은 유연성이 부족하고 컴포넌트는 복잡성과 데이터 전송량이 커지는 한계 보완
• 디자인 시스템을 먼저 완성하기보다 서비스 개발에 점진적으로 적용하는 방식 선택
• 적용 비용을 낮추기 위해 초기에는 개발자와 디자이너가 함께 일하고 이후 역할 분리

성능/운영 포인트

• 블록 단위 제어로 복잡성 감소와 성능 최적화 병행
• 사용 데이터 수집으로 자주 쓰는 컴포넌트와 UI 패턴 파악
• Figma 업데이트를 주기적으로 모아 알림하는 도구로 협업 비용 절감