이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
재사용 가능한 컴포넌트를 설계할 때 가장 먼저 하는 것은 어떤 부분이 진짜 공통이고 어떤 부분이 특정 화면에 종속되는지를 분리하는 것입니다. 처음에 너무 일반화된 컴포넌트를 만들다 보니 props가 지나치게 많아져 사용하는 쪽에서 오히려 불편해지는 경우가 있었습니다.
최소 두 곳 이상에서 실제로 쓰이는 경우에만 추상화하는 방식을 원칙으로 정했고, 이후 미리 추상화해서 쓰지 않는 컴포넌트가 줄었습니다. Storybook으로 컴포넌트를 독립적으로 문서화했는데, 어떤 props를 넣으면 어떻게 보이는지를 시각적으로 확인할 수 있어 팀원이 쓰기 쉬워졌습니다.
접근성 고려도 재사용 컴포넌트에서 중요한데, 버튼이나 입력 컴포넌트에 aria 속성을 처음부터 넣으면 모든 사용 지점에서 자동으로 적용됩니다. 재사용 컴포넌트는 얼마나 단순하게 쓸 수 있느냐가 좋은 추상화의 결임을 배웠습니다.
초기 프로젝트에서 최대한 범용적인 컴포넌트를 만들겠다는 의도로 설계했는데, 오히려 prop 조합이 너무 복잡해져 사용하는 팀원들이 API를 제대로 이해하지 못하는 문제가 생겼습니다. 이 경험에서 재사용성의 기준을 실제 중복이 3회 이상 발생한 뒤 추출로 바꿨습니다. 추출 시에는 명확한 단일 책임 원칙을 기준으로 삼고, 컴포넌트 경계를 UI 렌더링과 데이터 처리로 분리했습니다. 이후 컴포넌트당 평균 prop 수가 절반으로 줄었고, 신규 팀원의 온보딩 시간도 단축됐습니다. 지금은 재사용 가능성을 설계 초기에 예측하기보다 실제 반복이 확인된 뒤 리팩토링하는 방식을 더 신뢰합니다.
여러 팀이 동시에 같은 UI 패턴을 각자 구현하면서 브랜드 일관성이 깨지는 문제가 발생했습니다. 저는 디자이너와 협업해 디자인 시스템 컴포넌트 라이브러리를 별도 패키지로 분리하는 작업을 주도했습니다. 컴포넌트 설계 시 변경되는 부분과 고정되는 부분을 명확히 분리하고, variant prop 패턴을 채택해 UI 변형을 예측 가능하게 제한했습니다. 각 컴포넌트에는 스토리북(Storybook) 문서화를 의무화해, 사용법을 코드 없이 확인할 수 있게 했습니다. 라이브러리 도입 이후 중복 구현 건수가 80% 감소했고, 디자인 변경 시 한 곳만 수정하면 전체에 반영되는 유지보수 이점이 생겼습니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 SPC그룹 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.