이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
팀 프로젝트에서 같은 버튼인데 페이지마다 색깔과 크기가 조금씩 달랐습니다. 각자 만들다 보니 생긴 일이었고, 디자이너 피드백에서도 일관성이 없다는 말이 나왔습니다.
공통 버튼, 인풋, 카드 컴포넌트를 만들고 variant와 size props로 변형을 제어하는 기본 디자인 시스템을 구성하였습니다. 처음에는 컴포넌트가 너무 유연하게 만들어져서 오히려 어떤 props를 써야 하는지 헷갈린다는 팀원 피드백이 있었으나, 자주 쓰는 패턴은 preset을 만들어서 단순하게 쓸 수 있게 하였습니다.
그 이후 디자인 변경이 생겨도 한 컴포넌트만 수정하면 되었습니다. 일관성이 생산성을 만든다는 것을 직접 경험하였습니다. 그 경험이 UI 설계에서 공통 기반을 먼저 생각하는 습관을 만들어주었습니다.
인턴 때 내부 디자인 시스템 컴포넌트를 쓰는 프로젝트에 들어갔는데, 처음엔 어떤 컴포넌트가 있는지 파악하는 것부터 시간이 걸렸어요.
문서를 먼저 읽고 자주 쓰는 컴포넌트 목록을 따로 정리해둔 다음 개발을 시작했어요. 이미 있는 컴포넌트를 쓰면 됐는데 처음엔 외부에서 직접 만들다가 같은 게 이미 있다는 걸 나중에 발견하는 실수도 했습니다. 그 이후론 UI 작업 전에 디자인 시스템 문서를 먼저 확인하는 걸 습관으로 들였어요.
디자인 시스템을 활용하면 일관성은 자동으로 따라오고 직접 만드는 시간도 줄어든다는 걸 배웠어요. 다만 시스템에 없는 케이스를 만날 때 어떻게 처리할지 판단하는 게 실력이라는 것도요. 그 경험이 기존 도구를 잘 쓰는 것도 중요한 역량이라는 걸 알게 해줬어요.
프로젝트를 진행하면서 처음엔 일관된 버튼 컴포넌트를 만들었는데, 각 페이지 담당자가 예외 케이스를 계속 추가하다 보니 Props가 20개가 넘어갔어요. 오히려 어떤 Props를 쓸지 모르는 상태가 됐습니다.
컴포넌트를 변형 단위로 고정하고 그 외는 합성 패턴으로 해결하는 방식으로 정리했어요. 기본 버튼은 단순하게 유지하고 특수한 상황은 기본 버튼을 감싸는 래퍼 컴포넌트를 만드는 방식이었습니다. 처음엔 거부감이 있었는데 실제로 써보니 각 컴포넌트의 역할이 명확해졌어요.
컴포넌트가 너무 많은 역할을 하면 디자인 시스템이 오히려 복잡성을 만든다는 걸 그 경험에서 배웠어요. 단순함을 유지하는 것도 설계의 일부입니다. 그 경험이 컴포넌트 설계에서 단순성을 우선으로 생각하게 해줬어요.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 토스 모바일 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.