면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.
재사용 가능한 그래픽 라이브러리를 구축할 때 개별 디자인 요소를 먼저 컴포넌트 단위로 분리하고 명명 규칙을 통일하는 것에서 시작했습니다. 버튼, 아이콘, 색상 팔레트를 Figma 컴포넌트로 만들어두니 디자이너 간 스타일 차이가 줄고 개발 핸드오프 속도가 빨라졌습니다.
변형 가능한 컴포넌트 구조를 잘 설계하면 새로운 UI를 만들 때 기존 요소를 조합하는 것만으로 빠르게 프로토타이핑이 가능합니다. 라이브러리가 팀에 실제로 쓰이려면 문서화와 업데이트 규칙을 함께 만들어야 방치되지 않는다는 걸 경험했습니다. 좋은 디자인 시스템은 팀이 더 빠르게 일관된 결과물을 만들게 해주는 인프라라고 생각합니다.
재사용 가능한 그래픽 라이브러리 구축에서 제가 직접 주도해서 진행한 과정이 있습니다. 팀 프로젝트에서 각자 다른 방식으로 버튼과 아이콘을 만들고 있었는데, 화면을 합칠 때 스타일이 달라서 통일하는 작업이 반복됐습니다. 그 문제를 해결하기 위해 제가 먼저 기존 화면에서 공통으로 쓰인 요소를 분류하고 컴포넌트로 정리하는 작업을 시작했습니다. 명명 규칙도 제가 제안한 Button/Primary, Button/Secondary 구조를 팀이 따르면서 어느 컴포넌트를 써야 하는지 빠르게 찾을 수 있게 됐습니다.
라이브러리를 만드는 것보다 팀이 그것을 쓰도록 만드는 것이 더 어렵다는 걸 그 과정에서 배웠습니다.
처음에 정리하는 데 시간을 썼지만, 이후 화면 작업 속도가 빨라졌고 스타일 통일 요청이 줄었습니다.
그 결과가 라이브러리를 먼저 만들고 시작하는 방식의 이유입니다.
그래픽 라이브러리 구축 후 결과로 확인한 경험이 있습니다. 컴포넌트 라이브러리를 만들기 전에는 새 화면을 만들 때마다 같은 버튼이나 입력 폼을 다시 만들었는데, 라이브러리 이후에는 기존 컴포넌트를 가져다 조합하는 방식으로 작업 시간이 줄었습니다. 재사용 가능한 컴포넌트가 있으면 새 화면을 추가하는 속도가 빠를 뿐 아니라 스타일이 통일되는 효과도 따라왔습니다. 재현 측면에서는 다른 팀원이 같은 라이브러리를 쓰면서 각자 만든 화면이 같은 기준을 따르게 된 경우를 확인했습니다.
한 번 만든 컴포넌트가 여러 화면과 여러 사람에게 재현되는 방식으로 쓰일 때 라이브러리의 가치가 나타납니다.
재사용 횟수 자체를 측정하기는 어렵지만, 통일 작업 요청이 줄었다는 것이 도입 효과의 신호였습니다.
그 경험이 그래픽 라이브러리 구축의 가치를 직접 확인한 계기입니다.
같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.
진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.