우문현답
愚 問 賢 答
회사별 면접직군별진행 방식
    홈›회사별›당근마켓›프로덕트 디자이너›질문 상세
    問
    당당근마켓프로덕트 디자이너경험·이력2026년 출제

    디자인 시스템을 활용하여 재사용 가능한 패턴을 정의한 경험에 대해 설명해 주실 수 있나요?

    답변 미리보기

    팀 프로젝트에서 공통 UI 컴포넌트를 정리하는 작업을 맡았습니다. 팀원 4명이 같은 버튼, 같은 입력 폼을 제각각 구현하면서 스타일이 흩어지는 문제가…

    예상 답변 시간
    60~90초
    예상 꼬리질문
    3회
    난이도
    난이도 중상
    출제 빈도
    높음
    INTERVIEWER'S INTENT · 면접관의 의도

    이 질문, 네 갈래로 뜯어봅니다.

    면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.

    問
    01
    재사용 패턴을 정의했는가?
    디자인 시스템을 활용하여 재사용 가능한 패턴을 정의한 경험의 흔적이 답에 있어야 합니다. 없으면 면접관이 '어떤 패턴을 정의했나요?'를 추가로 묻는 경우가 자주 보입니다.
    骨
    02
    디자인 시스템 활용 경험은 어떤가?
    디자인 시스템을 활용한 경험이 답에 포함된 흔적이 있어야 합니다. 없으면 면접관이 '어떤 디자인 시스템을 사용했나요?' 같은 질문을 던지는 자리가 보입니다.
    語
    03
    프로젝트 결과는 어땠나?
    재사용 가능한 패턴을 정의한 후 프로젝트 결과에 대한 언급이 답에 있어야 합니다. 없으면 면접관이 '그 결과 어떻게 되었나요?'를 추가로 묻는 경우가 흔하게 통합니다.
    本
    04
    협업 과정은 어땠는가?
    디자인 시스템 구축에 있어 협업 과정에 대한 설명이 답에 포함된 흔적이 있어야 합니다. 없으면 면접관이 '누구와 협업했나요?'를 자주 묻는 자리가 보입니다.
    말로 해봐야 는다
    읽는 것과 말하는 건 다릅니다.
    이 질문, 소리 내어 답해 볼까요?
    당근마켓 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.
    음성으로 답해보기
    경험 중심 1인칭 답변약 75초토큰 체계 설계 + 문서화 주도약 75초Storybook 도입 + 컴포넌트 공유 문화 형성약 75초
    A
    약 75초

    경험 중심 1인칭 답변

    팀 프로젝트에서 공통 UI 컴포넌트를 정리하는 작업을 맡았습니다. 팀원 4명이 같은 버튼, 같은 입력 폼을 제각각 구현하면서 스타일이 흩어지는 문제가 있었습니다. 저는 먼저 사용 빈도가 높은 컴포넌트 10개를 추려 재사용 가능한 형태로 분리했고, Props 인터페이스를 문서화해 팀원들이 바로 가져다 쓸 수 있게 했습니다. 이 과정에서 가장 신경 쓴 것은 컴포넌트가 너무 범용적이면 쓰기 불편하고, 너무 좁으면 재사용이 안 된다는 균형이었습니다. 실제로 초기 버전은 너무 많은 옵션을 노출해서 팀원들이 헷갈렸고, 주요 케이스 3개로 줄이고 나머지는 확장 방식으로 남기는 방향으로 수정했습니다. 이후 팀원들이 새 화면을 만들 때 컴포넌트를 조합해서 쓰는 비중이 높아졌고, 전체 UI 일관성이 개선됐다는 피드백을 받았습니다. 이 경험에서 좋은 설계는 쓰는 사람이 고민을 덜 하게 만드는 것이라는 기준이 생겼습니다.

    이 결의 특징
    범용성과 실용성의 균형을 '주요 케이스 3개로 축약, 나머지는 확장으로 남기기'로 구체화한 설계 철학이 눈에 띕니다. 초기 시안의 과도한 옵션을 축약한 반복 과정이 사용자 경험을 중심으로 한 사고를 보여줍니다. UI 일관성 개선을 팀 피드백으로 측정한 실증적 접근이 관찰됩니다.
    이 결이 통하는 자리
    좋은 설계가 '사용자의 고민을 덜기'라고 인식하는 조직에서 높이 평가됩니다. 컴포넌트 재사용 비중으로 효과를 추적하는 데이터 기반 팀에서 신뢰를 얻습니다.
    예시 답변 2
    약 75초

    토큰 체계 설계 + 문서화 주도

    디자인 시스템에서 색상, 간격, 타이포그래피를 디자인 토큰으로 정의한 경험이 있습니다. 팀마다 같은 색상을 다른 값으로 쓰는 문제가 있었고, 코드에서 #3a7bd5처럼 하드코딩된 값이 흩어져 있었습니다. 패턴 정의로는 의미 기반 토큰 이름(예: `color.primary.default`)을 정의하고, 코드와 디자인 도구 양쪽에 동일하게 반영하는 방식을 도입했습니다. 색상 값이 바뀔 때 토큰 하나만 수정하면 전체에 반영되는 구조입니다. 디자인 시스템 활용으로는 Figma의 Variables와 코드의 CSS 커스텀 프로퍼티를 동기화하는 방식으로 디자이너와 개발자가 같은 언어를 쓸 수 있게 했습니다. 프로젝트 결과로는 테마 전환 기능을 구현할 때 토큰 구조 덕분에 라이트/다크 모드를 추가할 때 컴포넌트 코드를 거의 수정하지 않아도 됐습니다. 협업으로는 디자이너가 Figma에서 토큰 이름을 맞춰주면, 개발자는 그 이름을 그대로 변수로 사용하는 방식으로 커뮤니케이션 비용이 줄었습니다.

    토큰 설계는 컴포넌트보다 더 근본적인 디자인 시스템의 기반입니다.

    이 결의 특징
    색상·간격·타이포그래피를 '의미 기반 토큰'으로 추상화한 설계 레이어링이 특징입니다. 코드와 디자인 도구의 동기화를 명시적으로 설계한 체계성이 두드러집니다. 라이트/다크 모드 전환을 토큰 구조로 최소화한 실용적 결과가 관찰됩니다.
    이 결이 통하는 자리
    디자이너와 개발자의 언어 통일을 설계 핵심으로 보는 팀에서 주목을 받습니다. 장기적 확장성을 초기 설계에 담으려는 조직에서 높이 평가됩니다.
    예시 답변 3
    약 75초

    Storybook 도입 + 컴포넌트 공유 문화 형성

    팀 프로젝트에서 Storybook을 도입해 공통 컴포넌트를 시각적으로 공유하는 환경을 만든 경험이 있습니다. 컴포넌트가 코드에만 있으면 팀원이 무엇이 있는지 알기 어렵고, 직접 코드를 열어봐야 합니다. 재사용 패턴 정의로는 Button, Input, Modal 등 기본 컴포넌트를 Storybook에 등록하고, 각 컴포넌트의 사용 예시와 Props 설명을 함께 작성했습니다. 새 팀원이 Storybook만 보면 어떤 컴포넌트가 있는지 파악할 수 있도록 했습니다. 디자인 시스템 활용으로는 각 컴포넌트의 변형(variant)을 Storybook에서 시각적으로 비교할 수 있게 했습니다. 버튼의 Primary, Secondary, Disabled 상태를 한눈에 볼 수 있으면 잘못 쓰는 경우가 줄어듭니다. 프로젝트 결과로는 새 화면을 추가할 때 컴포넌트를 새로 만드는 경우가 줄고, Storybook에서 가져다 쓰는 비중이 높아졌습니다. UI 일관성이 자연스럽게 유지됐습니다. 협업으로는 디자이너가 Figma에서 만든 컴포넌트와 Storybook의 구현을 비교하면서 차이가 있는 부분을 피드백하는 방식으로 협업 사이클이 만들어졌습니다.

    디자인 시스템은 문서가 아니라 팀이 실제로 쓰는 공유 언어입니다.

    이 결의 특징
    Storybook을 '시각적 공유 환경'으로 포지셀한 도구 활용이 특징입니다. 컴포넌트 variant를 시각적으로 비교 가능하게 한 설계가 오류 최소화에 연결된 흐름이 관찰됩니다. 새 팀원의 온보딩을 문서보다 도구로 지원하는 실용성이 두드러집니다.
    이 결이 통하는 자리
    팀이 실제로 쓰는 공유 언어를 설계 시스템으로 보는 조직에서 신뢰를 얻습니다. 문서화보다 실행 가능한 예시를 중시하는 팀 문화에서 공감대를 형성합니다.
    !
    위 답변은 여러 풀이 중 한 가지 예시입니다. 정답이 아니며, 외워서 그대로 말하면 면접관이 다음 질문을 그 자리에서 시작하는 경우가 많습니다. 본인의 프로젝트·기준·숫자로 다시 짜는 자리로만 쓰세요.
    ✕자주 빠지는 자리

    같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.

    • ✕떨어뜨린 옵션이 1개라도 있는가? "이게 답이었어요"만으로는 의사결정이 아니라 그냥 선택입니다.
    • ✕선택 기준이 그 프로젝트에 한정되는가? "성능이 좋아서"는 일반론, "우리 트래픽이 X 패턴이라서"가 본인의 답입니다.
    • ✕결과 숫자 1개를 정확히 말할 수 있는가? P95·QPS·적중률 — 무엇이든 1개. 숫자가 없으면 직감으로 한 일처럼 들리기 쉽습니다.
    • ✕지금 다시 한다면 어떻게 할지 답할 수 있는가? "잘했다"보다 "이건 다르게 했을 것 같다"가 더 깊은 인상을 남깁니다.
    ▶이어질 꼬리질문

    진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.

    壹이 패턴을 선택한 이유는 무엇인가요?
    貳이 경험에서 배우신 점은 무엇인가요?
    參다른 디자인 시스템과 어떻게 비교되나요?
    이제, 직접 답해볼 차례예요.
    눈으로 읽은 답은 면접장에서 나오지 않아요. 당근마켓 면접관과 이 질문으로 한 번 대화해 보세요.
    이 질문으로 모의면접 해보기
    또는, 다음 질문으로

    같은 흐름에서 자주 이어지는 질문들이에요.

    iMBC · 모바일
    디자인 패턴을 적용한 경험이 있다면, 어떤 패턴을 사용했는지 구체적으로 설명해 주세요.
    이 질문 보기
    마켓컬리 · UX·프로덕트 디자인 일반
    디자인 시스템을 설계하거나 운영한 경험에 대해 구체적으로 설명해줄 수 있나요?
    이 질문 보기
    라인 · 프로덕트 디자이너
    디자인 시스템을 활용한 UI 설계 경험에 대해 설명해 주실 수 있나요?
    이 질문 보기
    안내 · 이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 실제 출제·회사 공식 입장과는 무관하며, 정정 요청 시 24시간 내 반영합니다. 자세히
    개인정보처리방침이용약관문의
    © 2026 우문현답. All rights reserved.
    이 페이지 목차
    01면접관의 의도02답변의 결03실수·꼬리질문04관련 질문
    말로 해봐야 는다
    이 질문, 당근마켓 면접관과
    음성으로 답해볼까요?
    모의면접 해보기
    첫 회 무료 · 종료 즉시 음성 폐기