우문현답
愚 問 賢 答
회사별 면접직군별진행 방식
    홈›회사별›토스›프론트엔드›질문 상세
    問
    토토스프론트엔드직무 역량2026년 출제

    모바일 제품과 데스크탑 제품의 스타일링을 위해 각각 emotion과 vanilla-extract를 어떻게 활용하셨나요?

    답변 미리보기

    졸업 프로젝트로 리액트 네이티브 기반 모바일 앱을 3개월 동안 만들었는데, 그때 처음 emotion을 사용해 보았습니다. 처음에는 CSS-in-JS라 익숙해지는…

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

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

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

    問
    01
    emotion 활용 경험이 있는가?
    emotion을 사용한 경험에 대한 흔적이 답에 있어야 합니다. 없으면 면접관이 '어떤 방식으로 활용했나요?'를 추가로 묻는 경우가 자주 보입니다.
    骨
    02
    vanilla-extract 경험이 있는가?
    vanilla-extract를 사용한 경험이 답에 포함된 흔적이 있어야 합니다. 없으면 면접관이 '어떻게 적용했나요?'라는 질문을 던지는 자리가 자주 보입니다.
    語
    03
    모바일 스타일링 접근법은 무엇인가?
    모바일 제품의 스타일링 접근법에 대한 설명이 답에 있어야 합니다. 없으면 면접관이 '어떤 요소를 고려했나요?'를 추가로 묻는 경우가 흔하게 통합니다.
    本
    04
    데스크탑 스타일링 접근법은 무엇인가?
    데스크탑 제품의 스타일링 접근법에 대한 흔적이 답에 있어야 합니다. 없으면 면접관이 '차별화된 점은 무엇인가요?'를 묻는 자리에서 자주 보입니다.
    말로 해봐야 는다
    읽는 것과 말하는 건 다릅니다.
    이 질문, 소리 내어 답해 볼까요?
    토스 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.
    음성으로 답해보기
    모바일 앱에서 emotion 도입 후 실제 어려웠던 점 중심약 90초데스크탑 대시보드 프로젝트에서 vanilla-extract를 선택한 이유와 배운 점약 85초모바일/데스크탑 스타일링 도구 선택 기준을 경험으로 설명약 80초
    emotion 직접 사용 경험
    약 90초

    모바일 앱에서 emotion 도입 후 실제 어려웠던 점 중심

    졸업 프로젝트로 리액트 네이티브 기반 모바일 앱을 3개월 동안 만들었는데, 그때 처음 emotion을 사용해 보았습니다. 처음에는 CSS-in-JS라 익숙해지는 데 2주 정도 걸렸고, styled 컴포넌트에 props를 넘겨서 조건부 스타일링을 하는 패턴이 처음에는 복잡하게 느껴졌습니다. 화면이 15개 정도 되었는데 테마 색상을 전역으로 관리하려다가 프로바이더 계층이 꼬이는 실수를 한 번 경험했습니다. 그 이후로는 테마 토큰을 하나의 파일에 모아두고 각 컴포넌트에서 임포트하는 방식으로 바꿨더니 훨씬 관리가 편해졌습니다. vanilla-extract는 사이드 프로젝트로 데스크탑 대시보드를 만들 때 사용해 보았는데, 빌드 타임에 CSS가 생성된다는 점이 모바일 대비 체감 속도 차이로 나타났습니다. 두 라이브러리를 함께 사용하다 보니 런타임 vs 정적 생성의 트레이드오프를 직접 느낄 수 있었던 경험이었습니다.

    이 결의 특징
    CSS-in-JS 도입의 구체적 난점과 해결 과정을 설명합니다. Prop drilling이 5단계가 된 문제에서 Context로 전환한 경험이 상태 관리 성장을 보여줍니다.
    이 결이 통하는 자리
    모바일 앱 개발 경험이 있는 지원자로 인식됩니다. 테마 관리가 꼬인 초기 실패를 극복한 경험은 앞으로 유사 문제에서 빠른 해결을 가능하게 합니다.
    데스크탑에서 vanilla-extract 도입
    약 85초

    데스크탑 대시보드 프로젝트에서 vanilla-extract를 선택한 이유와 배운 점

    4학년 팀 프로젝트에서 데이터 시각화 대시보드 웹앱을 만들었는데, 팀원 4명이 스타일 충돌을 줄이려고 vanilla-extract를 썼어요. 타입스크립트와 함께 쓰면 클래스 이름 오타가 컴파일 에러로 잡힌다는 점이 좋았어요. 처음엔 설정이 복잡해서 웹팩 설정을 이틀 동안 만졌는데, 플러그인 버전 충돌로 빌드가 깨진 적도 있었어요. 그 실패 덕분에 프로젝트 초기 도구 버전 고정의 중요성을 몸으로 배웠어요. 이후 개인 프로젝트에서 emotion을 써봤는데, 동적 스타일 변경이 많은 인터랙티브 UI에선 emotion이 더 편했고, vanilla-extract는 변경이 적은 레이아웃 중심 화면에 잘 맞는다는 걸 느꼈어요. 상황에 따라 도구를 골라 쓰는 게 중요하다고 생각하게 됐어요.

    이 결의 특징
    vanilla-extract를 선택한 이유가 타입 안정성에 있음을 보여줍니다. 빌드 설정 어려움을 겪었지만, 버전 고정의 중요성을 배운 경험이 있습니다.
    이 결이 통하는 자리
    정적 스타일이 필요한 프로젝트에서 지원자의 선택이 의존할 만함을 보여줍니다. 도구 설정의 어려움을 견딘 경험이 강점입니다.
    두 도구 비교 적용
    약 80초

    모바일/데스크탑 스타일링 도구 선택 기준을 경험으로 설명

    인턴십에서 하나의 서비스에 모바일 뷰와 데스크탑 뷰를 동시에 구현하는 작업을 2주 동안 맡았어요. 당시 팀 코드베이스가 emotion 기반이었는데, 모바일에서 버튼 크기나 여백을 화면 크기에 따라 동적으로 바꾸는 부분에서 css() 함수 안에 미디어 쿼리를 바로 쓸 수 있어서 편했어요. 반면 데스크탑 레이아웃은 변화가 거의 없는 그리드 구조라 정적 스타일이 더 적합했어요. 제가 개인적으로 vanilla-extract를 공부해서 빌드 타임에 클래스가 확정되어 런타임 오버헤드가 없다는 점을 팀에 공유했는데, 도입은 못 했어요. 다음 화면부터는 적용해보고 싶다고 제안했지만 일정 문제로 보류됐는데, 그게 아쉬웠어요.

    도구 도입을 제안할 때 일정과 팀 맥락을 함께 고려해야 한다는 점을 배웠어요.

    이 결의 특징
    emotion과 vanilla-extract의 사용 사례를 명확히 구분합니다. 동적 변경이 많으면 emotion, 정적이면 vanilla-extract라는 판단이 성숙한 기술 선택입니다.
    이 결이 통하는 자리
    상황별 도구 선택을 할 수 있는 지원자입니다. 레이아웃 중심 화면과 인터랙티브 UI를 구분하는 감각은 성능 최적화에도 도움이 됩니다.
    !
    위 답변은 여러 풀이 중 한 가지 예시입니다. 정답이 아니며, 외워서 그대로 말하면 면접관이 다음 질문을 그 자리에서 시작하는 경우가 많습니다. 본인의 프로젝트·기준·숫자로 다시 짜는 자리로만 쓰세요.
    ✕자주 빠지는 자리

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

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

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

    壹emotion과 vanilla-extract를 선택한 이유는 무엇인가요?
    貳이 외에 고려했던 다른 도구는 없었나요?
    參만약 emotion이나 vanilla-extract를 사용하지 않았다면 어떤 방식으로 접근했을까요?
    이제, 직접 답해볼 차례예요.
    눈으로 읽은 답은 면접장에서 나오지 않아요. 토스 면접관과 이 질문으로 한 번 대화해 보세요.
    이 질문으로 모의면접 해보기
    또는, 다음 질문으로

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

    토스 · 프론트엔드
    모바일 제품과 데스크탑 제품에서 사용하는 스타일링 기술의 차이점에 대해 설명해 주세요.
    이 질문 보기
    배달의민족(우아한형제들) · 콘텐츠 일반
    푸드 스타일링을 할 때, 브랜드와 제품의 특성을 어떻게 분석하고 적용하나요?
    이 질문 보기
    안내 · 이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 실제 출제·회사 공식 입장과는 무관하며, 정정 요청 시 24시간 내 반영합니다. 자세히
    개인정보처리방침이용약관문의
    © 2026 우문현답. All rights reserved.
    이 페이지 목차
    01면접관의 의도02답변의 결03실수·꼬리질문04관련 질문
    말로 해봐야 는다
    이 질문, 토스 면접관과
    음성으로 답해볼까요?
    모의면접 해보기
    첫 회 무료 · 종료 즉시 음성 폐기