이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
인턴 프로젝트에서 멀티 테넌트 대시보드 프론트엔드 설계를 담당했습니다. 고객사마다 보여주는 위젯 종류와 레이아웃이 달랐고, 처음 구조로는 신규 고객 추가 때마다 코드를 건드려야 하는 문제가 있었습니다. 위젯 레지스트리 패턴을 도입해 각 위젯을 독립 모듈로 등록하고, 고객 설정 JSON만 바꾸면 레이아웃이 조합되는 구조로 변경했습니다. 기존에 3~4일 걸리던 작업이 설정 파일 수정 2시간으로 줄었습니다. 이 과정에서 확장 가능한 구조는 처음부터 완성형으로 만드는 게 아니라, 변경 지점을 미리 분리해두는 것임을 깨달았고, 이후 설계를 시작할 때 변경 지점 식별을 먼저 하는 습관이 생겼습니다.
프론트엔드 확장성 작업에서 기능이 늘어날수록 초기 번들 크기가 커져서 첫 로딩이 느려지는 문제가 생겼습니다. 사용자가 처음 접근할 때 쓰지 않는 페이지의 코드까지 내려받는 구조였는데, 초기 로딩에서 사용자 이탈이 증가하는 것을 지표로 확인했습니다. React.lazy와 dynamic import를 라우트 단위로 적용하니, 초기 번들 크기가 40%가량 줄었습니다.
코드 분할 후에도 자주 쓰이는 공통 모듈은 미리 프리패치하는 방식을 추가해서 사용자가 느끼는 지연을 줄였습니다. 번들 크기는 기능이 늘어날수록 의식적으로 관리하지 않으면 자연스럽게 커진다는 것을 이 경험으로 배웠습니다.
프론트엔드 확장성에서 또 다른 문제는 여러 기능에서 비슷한 UI 컴포넌트가 따로 구현되는 것이었습니다. 버튼이나 입력 필드 같은 기본 요소가 기능마다 다르게 구현돼 있어서, 디자인 시스템이 바뀌면 모든 기능을 찾아다니며 수정해야 하는 상황이었습니다. 공통 컴포넌트를 별도 디렉토리로 분리하고, Storybook으로 문서화해서 팀원들이 어떤 컴포넌트가 있는지 확인하는 것을 쉽게 만들었습니다.
컴포넌트를 가져다 쓰는 것이 직접 만드는 것보다 쉬운 구조가 되니, 자연스럽게 재사용이 늘었습니다. 공통 컴포넌트는 만드는 것보다 팀원이 찾아 쓸 수 있게 문서화하는 것이 더 중요하다는 것을 이 경험으로 배웠습니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 CJ올리브영 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.