피그마로 게임 UI 컴포넌트 시스템을 구축한 사례
모바일 게임 UI를 맡았을 때 피그마로 버튼, 팝업 등 반복되는 요소를 컴포넌트화해서 관리했습니다. 초기에는 화면마다 개별 제작해 색상이나 여백이 조금씩 달라지는 문제가 있었습니다. 컴포넌트로 통일한 뒤에는 수정이 필요할 때 한 곳만 바꾸면 전체에 반영돼 작업 속도가 크게 빨라졌습니다. 개발자에게는 스펙 문서를 별도로 만들어 여백과 폰트 크기를 정확히 전달했습니다.
면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.
모바일 게임 UI를 맡았을 때 피그마로 버튼, 팝업 등 반복되는 요소를 컴포넌트화해서 관리했습니다. 초기에는 화면마다 개별 제작해 색상이나 여백이 조금씩 달라지는 문제가 있었습니다. 컴포넌트로 통일한 뒤에는 수정이 필요할 때 한 곳만 바꾸면 전체에 반영돼 작업 속도가 크게 빨라졌습니다. 개발자에게는 스펙 문서를 별도로 만들어 여백과 폰트 크기를 정확히 전달했습니다.
이전 프로젝트에서는 어도비 XD로 UI를 작업했지만, 팀원이 늘면서 실시간 공동 편집이 어렵다는 한계를 느껴 피그마로 전환을 제안했습니다. 전환 초반에는 팀원들이 새 툴에 적응하는 데 시간이 걸려 간단한 사용 가이드를 만들어 공유했습니다. 이후 여러 명이 동시에 한 파일에서 작업할 수 있게 되면서 리뷰 주기가 짧아졌습니다. 툴 선택이 결과물뿐 아니라 협업 속도에도 영향을 준다는 걸 체감했습니다.
UI 디자인은 스케치로 작업하고, 개발팀 전달은 제플린을 통해 관리했던 프로젝트가 있습니다. 스케치 파일을 제플린에 업로드하면 자동으로 색상 코드와 여백 수치가 추출돼 개발자가 별도 질문 없이 구현할 수 있었습니다. 초반에는 이 과정을 몰라 수치를 일일이 캡처해 전달하다 보니 오류가 잦았습니다. 제플린 도입 이후에는 디자인과 구현 사이의 오차가 눈에 띄게 줄었습니다.
같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.
진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.