디자인 시스템 면접 질문, AI가 구현할 수 있게 정리하는 법을 물을 때

디자인 시스템 면접 질문은 예전에도 자주 나왔어요. 다만 묻는 방향이 달라졌다고 생각합니다. 예전에는 디자인 시스템을 만들어 본 적이 있는지, 컴포넌트를 몇 개나 정리했는지를 물었다면, 요즘은 그 시스템을 누가 읽느냐까지 묻습니다.

사람 동료에게는 깔끔하게, 통일감 있게라는 말이 어느 정도 통해요. 같이 일해 온 맥락이 있으니까요. AI에게는 통하지 않습니다. 이름이 없으면 고르지 못하고, 규칙이 없으면 그럴듯하게 지어냅니다. 그래서 이 질문은 디자인 실력보다 정리하는 힘을 보는 질문에 가깝다고 봐요.

이 글에서는 디자인 시스템 면접 질문이 무엇을 확인하려는지, 어떤 순서로 답하면 좋은지, 경험이 없을 때는 무엇을 준비하면 되는지 정리했어요.

디자인 시스템 면접 질문, 왜 AI 이야기로 바뀌었을까요?

화면을 만드는 사람이 늘었기 때문이에요. 개발자가 AI 코딩 도구로 화면을 바로 만들고, 기획자도 AI로 시안을 뽑습니다. 이때 AI가 참고하는 기준이 디자인 시스템이에요.

기준이 사람 머릿속에만 있으면 AI가 만든 화면은 매번 조금씩 달라져요. 버튼 색이 미묘하게 다르고, 간격이 페이지마다 바뀝니다. 회사 입장에서는 디자이너 한 명이 모든 화면을 직접 그리기보다, AI가 따라 할 수 있는 기준을 만들어 두는 쪽이 훨씬 많은 화면을 지킬 수 있어요.

AI가 구현할 수 있게 정리하라는 질문, 무엇을 보려는 걸까요?

면접관이 이 질문으로 확인하려는 건 크게 세 가지예요.

• 말을 이름으로 바꿀 수 있는지. 파란색, 큰 버튼이 아니라 정해진 이름으로 부를 수 있는지 봐요.
• 예외까지 생각하는지. 기본 상태만 그리는 사람인지, 비활성이나 오류 상태까지 정해두는 사람인지 봐요.
• 하지 말아야 할 것을 적을 수 있는지. AI는 금지 규칙이 없으면 가능한 것을 다 섞어 씁니다. 그래서 무엇을 막을지 적는 능력을 봐요.

세 가지 모두 결국 판단을 남길 수 있느냐는 질문이에요. 툴을 얼마나 잘 쓰는지보다 이 쪽에 답의 무게를 두세요.

디자인 시스템 면접 질문에 답하는 3단계 순서는?

답은 아래 순서로 하면 면접관이 흐름을 따라오기 쉬워요.

1. 토큰 이름. 색, 간격, 글자 크기를 쓰임이 드러나는 이름으로 정해요. #3182F6 대신 color-bg-primary, 16px 대신 space-16처럼요. AI는 숫자보다 이름을 기준으로 골라요.
2. 컴포넌트 상태. 버튼 하나도 기본, 눌림, 비활성, 로딩 상태가 있어요. 상태마다 어떤 토큰을 쓰는지, 언제 그 상태가 되는지를 표로 적어요.
3. 쓰지 말아야 할 규칙. 한 화면에 주요 버튼은 하나만, 버튼 문구는 동사로 끝내기처럼 AI가 지어내기 쉬운 부분을 막는 규칙을 적어요.

수정 후 답에는 무엇을, 어떤 순서로, 왜 하는지가 다 들어 있어요. 면접관이 꼬리 질문을 던질 자리도 자연스럽게 생깁니다.

디자인 시스템 경험이 없다면 어떻게 답할까요?

신입이거나 작은 팀에서 일했다면 디자인 시스템을 처음부터 만든 경험이 없는 게 자연스러워요. 이때는 없다고 끝내지 말고 작게라도 해본 걸 가져가세요.

1. 내 포폴 프로젝트에서 버튼과 입력창 두 개만 골라요.
2. 피그마에서 아무것도 선택하지 않은 상태로 오른쪽 패널의 Local variables를 열고, Create variable로 색과 간격 변수를 만들어 이름을 붙여요.
3. 위의 3단계대로 상태와 금지 규칙을 한 페이지 문서로 적어요.
4. 그 문서를 AI 코딩 도구에 넘겨 화면 하나를 만들게 하고, 처음 결과와 규칙을 고친 뒤 결과를 비교해요.

면접에서는 규모가 작은 걸 걱정할 필요가 없어요. 버튼 두 개짜리라도 AI가 처음에 무엇을 틀렸고, 규칙 한 줄로 어떻게 고쳐졌는지를 말할 수 있으면 질문의 핵심에 답한 거예요.

AI에게 넘긴 디자인 시스템, 면접에서 어떻게 보여줄까요?

말로만 설명하면 길어지니, 포폴이나 발표 자료에 한 장으로 보여주는 걸 추천드려요.

한 장에는 세 가지만 넣어요. 왼쪽에 AI에게 넘긴 규칙 문서 일부, 가운데에 규칙 없이 만든 화면, 오른쪽에 규칙을 넣고 만든 화면이에요. 달라진 부분에 동그라미를 쳐 두면 설명이 짧아집니다.

AI 프로젝트를 포폴에 넣는 방법은 AI 프로젝트, 만들었다보다 판단을 보여주는 법에, 면접에서 화면을 보여주며 시간을 나누는 법은 디자이너 포트폴리오 발표, 면접 15분을 나누는 5단계에 정리해 두었어요.

자주 묻는 질문

디자인 시스템 면접 질문은 어떤 회사에서 많이 나오나요?

자체 서비스가 있고 화면 수가 많은 회사, AI 코딩 도구를 팀에서 쓰기 시작한 회사에서 자주 나와요. 공고에 디자인 시스템 경험이나 AI 협업이 적혀 있다면 준비해 두는 편이 좋아요.

토큰 이름은 어떤 규칙으로 정하나요?

종류, 쓰임, 단계 순서로 붙이면 무난해요. color-text-secondary, space-24처럼요. 회사마다 규칙이 다르니 면접에서는 내가 왜 이 순서로 정했는지를 함께 말하면 돼요.

피그마 Variables를 꼭 써야 하나요?

꼭은 아니에요. 다만 이름 붙은 값을 한곳에서 관리한다는 점을 보여주기 가장 쉬운 방법이라, 면접 준비용으로는 써보는 걸 추천드려요.

AI가 규칙을 무시하고 만들면 어떻게 답하나요?

그 경험이 오히려 좋은 답이 돼요. 어떤 규칙을 무시했는지, 문장을 어떻게 바꿨더니 지켜졌는지를 말하면 됩니다. AI가 틀린 장면을 고친 경험은 면접관이 가장 궁금해하는 부분이에요.