프런트엔드 시스템 설계 면접

시니어 프런트엔드 면접에서는 뉴스 피드, 자동 완성, 이미지 갤러리, 무한 스크롤 대시보드처럼 단순하지 않은 사용자 인터페이스 기능을 처음부터 끝까지 설계하도록 요구합니다. 평가 대상은 프레임워크 지식의 암기가 아니라 아키텍처, 절충점에 대한 인식, 성능 감각, 소통 능력입니다.

대부분의 45~60분 면접은 다음 순서로 진행됩니다. 1) 요구 사항 명확히 하기(5분). 2) 상위 수준 아키텍처 구상(10분). 3) 구성 요소 분해(10분). 4) 데이터 가져오기와 상태(10분). 5) 성능과 접근성(10분). 6) 한 영역을 깊이 있게 살펴보기(면접관이 선택).

코딩부터 시작하지 마세요. 다음을 질문하세요. 대상 기기는 무엇인가요? 로그인 사용자인가요, 익명 사용자인가요? 오프라인을 지원하나요? 실시간 업데이트가 필요한가요? 예상 규모는 어느 정도인가요(사용자 10명인가요, 1,000만 명인가요)? 접근성 요구 사항은 무엇인가요? 어떤 브라우저를 지원하나요? 이런 결정은 전체 설계에 연쇄적으로 영향을 줍니다.

상자를 그리세요. 클라이언트(SPA 또는 SSR인가요?), API 게이트웨이, 서비스, 캐시, CDN을 표시합니다. 사용자 동작과 데이터 흐름을 표시하세요. 예외 상황은 초기에 언급하세요. 실제 서비스를 만들어 본 경험이 드러납니다.

구성 요소 계층 구조를 구상합니다. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. 어떤 구성 요소를 재사용할 수 있고 어떤 구성 요소가 기능에 특화되어 있는지 식별합니다.

각 상태 조각은 어디에 저장하나요? 로컬(useState), URL(라우터), 서버 상태(React Query), 클라이언트 상태(Zustand) 중 어디인가요? 데이터를 가져오는 전략도 논의하세요. 초기 SSR, 무한 스크롤, 실시간 WebSocket 업데이트, 낙관적 사용자 인터페이스 등을 다룹니다.

라우트 경계에서 코드를 분할합니다. 긴 피드에는 가상화 목록을 사용합니다. 이미지를 최적화합니다(지연 로드 + AVIF/WebP). 주 스레드를 차단하지 마세요. 번들 예산을 설정하세요. 재방문을 위해 캐시 우선 SW를 사용하세요.

의미가 있는 HTML을 사용합니다. 키보드 탐색을 지원합니다. ARIA 역할과 라이브 영역을 사용합니다. 색상 대비를 확인합니다. 화면 낭독기로 테스트합니다. 추가 점수를 얻으려면 라우트 변경 시 초점 관리도 언급하세요.

다음 내용을 논의하세요. IntersectionObserver를 사용한 무한 스크롤, 메모리 절약을 위한 가상화, 낙관적 좋아요 처리, 새 게시물 실시간 표시, 흐림 자리 표시자를 사용한 이미지 지연 로드, SEO를 위한 SSR, 인기 타임라인을 위한 ISR/엣지 캐싱.

다음 내용을 논의하세요. 디바운스된 입력, 오래된 요청을 취소하는 AbortController, 요청 중복 제거, 응답 캐싱(LRU), 키보드 탐색(위/아래/Enter/Escape), ARIA 콤보 상자 역할, 모바일 가상 키보드 처리.

다음 내용을 논의하세요. 메이슨리와 그리드 레이아웃 비교, 레티나 화면을 위한 반응형 srcset, 교차 감지 기반 지연 로드, 다음 이미지 사전 가져오기, 초점 가두기를 적용한 라이트박스/모달, 모바일 스와이프 제스처, 키보드 화살표 탐색, 딥 링킹.

모든 선택에 대해 대안을 언급하고 그중 하나를 선택한 이유를 설명하세요. '지연 로드에는 IntersectionObserver를 사용하겠습니다. 네이티브 기능이고 효율적이기 때문입니다. 대안은 스로틀을 적용한 스크롤 리스너입니다. 더 간단하지만 느린 CPU에서는 끊김이 더 발생합니다.' 시니어 면접관은 바로 이런 점을 높이 평가합니다.

1) 명확히 확인하기 전에 코드부터 작성하는 경우. 2) 접근성을 무시하는 경우. 3) 오류 상태(네트워크 실패, 결과 없음)를 잊는 경우. 4) 로딩 상태를 고려하지 않는 경우. 5) 모호하게 답하는 경우(“React를 사용하겠습니다” — 어떤 아키텍처인가요?).

시스템 설계 면접에서 자동 완성 검색 상자를 설계하라는 요청을 받았습니다. 가장 먼저 무엇을 해야 하나요?

먼저 범위를 명확히 하세요. 상위 수준 아키텍처(클라이언트, API, 캐시, CDN)를 구성하세요. 구성 요소 트리를 작성하세요. 상태 위치(로컬, URL, 서버 캐시, 전역)를 결정하세요. 데이터 가져오기 전략을 세우세요. 성능(코드 분할, 가상화, 이미지 최적화)을 고려하세요. 접근성(키보드, ARIA, 대비)을 확보하세요. 절충점을 설명하세요. 곧바로 코드 작성부터 시작하지 마세요. 피드, 자동 완성, 갤러리, 대시보드 같은 전형적인 패턴을 연습하세요.