프론트엔드 시스템 디자인

Frontend System Design은 “이 기능을 프론트에서 어떻게 만들 건가요?”에 답하는 면접 유형입니다

프론트엔드 기능 설계 면접, 화면 아키텍처 설계 면접, 화이트보드 설계 면접 등으로 불리는데, 발견하면 여기 추가해 주세요.

대표 질문

• 검색 자동완성 기능을 설계해보세요.
• 무한 스크롤 피드를 어떻게 구현할 건가요?
• 숙소 검색/예약 화면을 설계해보세요.
• 대용량 테이블을 어떻게 렌더링하고 최적화할 건가요?
• 채팅 UI를 어떻게 설계할 건가요?
• 결제 폼에서 중복 제출을 어떻게 막을 건가요?
• 관리자 페이지의 복잡한 폼 상태를 어떻게 관리할 건가요?
• 이미지가 많은 페이지를 어떻게 최적화할 건가요?
• 권한별 라우팅과 메뉴 노출을 어떻게 설계할 건가요?

면접관이 보는 것

정답 하나를 맞히는 문제라기보다 생각 흐름을 보는 문제에 가까운 것 같습니다.

1. 요구사항을 먼저 쪼개는가
2. component 구조를 나눌 수 있는가
3. 상태를 어디에 둘지 판단하는가
4. 서버 데이터와 클라이언트 상태를 구분하는가
5. API 요청, 캐싱, 에러 처리를 고려하는가
6. 성능 병목을 예상하는가
7. 접근성과 keyboard 조작을 생각하는가
8. 테스트 포인트를 말할 수 있는가
9. 선택 기준과 장단점을 설명하는가

답변 구조

# 문제: 검색 자동완성 기능 설계

## 1. 요구사항

## 2. Component 구조

## 3. 상태 설계

## 4. API / 데이터 흐름

## 5. 성능 고려사항

## 6. 접근성 고려사항

## 7. 에러 / 로딩 / 빈 상태

## 8. 테스트 포인트

## 9. 선택 기준

## 10. 면접 답변 요약

예시: 검색 자동완성

요구사항

• 입력마다 바로 요청할지, debounce를 둘지 확인합니다.
• 결과를 서버에서 가져오는지, 로컬 데이터에서 찾는지 확인합니다.
• 키보드 이동이 필요한지 확인합니다.
• 최근 검색어와 추천 검색어가 필요한지 확인합니다.

Component 구조

SearchBox
 ├─ SearchInput
 ├─ SuggestionList
 │   └─ SuggestionItem
 └─ SearchResultBoundary

상태 설계

• keyword
• debouncedKeyword
• suggestions
• selectedIndex
• loading
• error
• isOpen

데이터 흐름

사용자 입력
  ↓
SearchInput
  ↓ keyword state
useSearchSuggestions
  ↓ debounce + fetch + cache
SuggestionList
  ↓
SuggestionItem

API 전략

• debounce를 적용합니다.
• 이전 request를 취소합니다.
• 같은 keyword 결과를 cache합니다.
• 오래된 응답이 최신 결과를 덮어쓰지 않게 합니다.

접근성

• role="combobox"를 고려합니다.
• aria-expanded로 목록 열림 여부를 알려줍니다.
• aria-activedescendant로 현재 선택 항목을 연결합니다.
• 방향키, Enter, Escape 조작을 지원합니다.

테스트 포인트

• 입력 시 debounce가 동작하는가
• 응답 순서가 꼬여도 최신 결과가 유지되는가
• 키보드 이동이 가능한가
• 로딩, 빈 결과, 에러 상태가 보이는가