SCSS를 활용하여 스타일링 작업을 진행한 경험이 있다면, 어떤 방식으로 모듈화를 구현했는지 구체적으로 말씀해 주세요. | incross 프론트엔드 면접 질문

Q: 본인이 가장 깊이 본 결은 어디였나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

Q: 모듈 결을 어떻게 잡으셨나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

Q: 결과를 어떤 결로 측정하시나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

iincross프론트엔드직무 역량2026년 출제

답변 미리보기

졸업 프로젝트에서 CSS를 한 파일에 쌓았다가, 팀원이 같은 클래스명을 다른 컴포넌트에 사용하면서 스타일이 충돌하는 문제가 발생했습니다. 그때부터 SCSS와

예상 답변 시간

60~90초

예상 꼬리질문

3회

난이도

난이도 중상

출제 빈도

높음

INTERVIEWER'S INTENT · 면접관의 의도

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

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

본인 손에 잡은 결이 또렷한가?

구조·재사용·합의 결 중 본인이 직접 한 자리가 답에 보입니다. 일반론으로만 답하면 깊이가 옅은 자리입니다.

모듈 결을 또렷이 짚는가?

변수·믹스인·합의 결로 본인이 가른 흔적이 답에서 드러나는 결이 통합니다. 매끈하게만 끝나는 답은 외워 온 결로 들립니다.

본인 사례로 닫는가?

추상 다짐이 아니라 본인이 실제로 한 결을 짚는 답이 자주 등장합니다. 매끈하게만 끝나는 답은 외워 온 결로 들립니다.

측정 가능한 결과로 닫는가?

재사용·재작업·시간 결로 본인이 결과를 본 흔적이 답에 보입니다. 수치 없이 좋아진다는 답은 검증이 옅은 결입니다.

말로 해봐야 는다

읽는 것과 말하는 건 다릅니다.
이 질문, 소리 내어 답해 볼까요?

incross 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.

음성으로 답해보기

BEM 방식 SCSS 모듈화 경험약 86초 SCSS 변수와 믹스인으로 일관성 확보약 88초 CSS Modules와 비교 후 SCSS 선택 이유 설명약 85초

예시 답변 1

약 86초

BEM 방식 SCSS 모듈화 경험

졸업 프로젝트에서 CSS를 한 파일에 쌓았다가, 팀원이 같은 클래스명을 다른 컴포넌트에 사용하면서 스타일이 충돌하는 문제가 발생했습니다. 그때부터 SCSS와 BEM 네이밍 규칙을 도입했습니다. .card__title, .card__body--highlight처럼 블록·요소·수정자를 명확히 나누니 어느 클래스가 어디에 사용되는지 바로 알 수 있었습니다. SCSS에서는 중첩 선택자로 BEM을 깔끔하게 표현할 수 있어 좋았으나, 처음에는 중첩을 4단계까지 사용하여 컴파일된 CSS가 너무 길어지는 문제가 있었습니다. 이후 2단계로 제한하는 팀 규칙을 만들었습니다. 컴포넌트별로 파일을 나누니 새 기능을 추가할 때 기존 스타일이 망가지는 일이 없어졌습니다.

이 결의 특징

구체적인 수치와 상황에 대한 다층적인 설명이 함께 나타나는 흔적이 있습니다.

이 결이 통하는 자리

개인의 경험을 팀 협업과 연결한 부분에서 리더십과 소통 능력이 드러나는 자리로 통합니다.

예시 답변 2

약 88초

SCSS 변수와 믹스인으로 일관성 확보

사이드 프로젝트에서 디자인 시스템 없이 작업하다 보니 버튼 색상이 페이지마다 조금씩 달라지는 문제가 있었어요. 색상값을 하드코딩했기 때문이었어요. SCSS 변수($primary-color, $text-muted)로 디자인 토큰을 정의하고, `_variables.scss` 파일 하나에서 전체 관리하도록 바꿨습니다. 반응형 브레이크포인트도 믹스인으로 추출했어요.

@include respond-to('mobile') 형태로 쓰니까 미디어 쿼리 값을 직접 기억하지 않아도됐고, 나중에 값을 바꿀 때 한 곳만 수정하면 됐습니다. 팀원에게 넘겨줄 때 "변수 파일 먼저 보면 전체 색상 체계가 보인다"는 피드백을 받았어요.

일관성은 코드에서 강제하는 것이라는 걸 배웠습니다.

이 결의 특징

경험에서 얻은 통찰을 자신의 언어로 체계적으로 표현한 흔적이 보입니다.

이 결이 통하는 자리

개인의 경험을 팀 협업과 연결한 부분에서 리더십과 소통 능력이 드러나는 자리로 통합니다.

예시 답변 3

약 85초

CSS Modules와 비교 후 SCSS 선택 이유 설명

Vue 프로젝트에서 scoped style을 쓰다가 SCSS로 전환한 경험이 있어요. scoped가 충돌은 막아줬지만, 공통 스타일을 컴포넌트 간에 공유하기가 번거로웠습니다. SCSS의 @use와 partial 파일 구조로 전환하면서 공통 변수와 믹스인을 src/styles/ 폴더에 모았어요. 처음엔 @import와 @use의 차이를 몰라서 변수가 전역으로 퍼지는 문제가 있었습니다.

@use는 네임스페이스로 접근해야 해서 기존 @import 방식보다 명시적이더라고요. 전환 후 스타일 파일이 어디 있는지 찾기 쉬워졌고, 새 컴포넌트 추가 시 기존 스타일을 import만 하면되는 구조가 됐습니다.

이 결의 특징

경험에서 얻은 통찰을 자신의 언어로 체계적으로 표현한 흔적이 보입니다.

이 결이 통하는 자리

구체적인 상황 설정과 자신의 관점이 명확할 때 면접에서 설득력 있게 통하는 결이 보입니다.

위 답변은 여러 풀이 중 한 가지 예시입니다. 정답이 아니며, 외워서 그대로 말하면 면접관이 다음 질문을 그 자리에서 시작하는 경우가 많습니다. 본인의 프로젝트·기준·숫자로 다시 짜는 자리로만 쓰세요.

자주 빠지는 자리

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

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

이어질 꼬리질문

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

壹본인이 가장 깊이 본 결은 어디였나요?

貳모듈 결을 어떻게 잡으셨나요?

參결과를 어떤 결로 측정하시나요?

이제, 직접 답해볼 차례예요.

눈으로 읽은 답은 면접장에서 나오지 않아요. incross 면접관과 이 질문으로 한 번 대화해 보세요.

이 질문으로 모의면접 해보기

안내 · 이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 실제 출제·회사 공식 입장과는 무관하며, 정정 요청 시 24시간 내 반영합니다. 자세히

개인정보처리방침 이용약관 문의

iincross프론트엔드직무 역량2026년 출제

답변 미리보기

예상 답변 시간

60~90초

예상 꼬리질문

3회

난이도

난이도 중상

출제 빈도

높음

INTERVIEWER'S INTENT · 면접관의 의도

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

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

본인 손에 잡은 결이 또렷한가?

구조·재사용·합의 결 중 본인이 직접 한 자리가 답에 보입니다. 일반론으로만 답하면 깊이가 옅은 자리입니다.

모듈 결을 또렷이 짚는가?

변수·믹스인·합의 결로 본인이 가른 흔적이 답에서 드러나는 결이 통합니다. 매끈하게만 끝나는 답은 외워 온 결로 들립니다.

본인 사례로 닫는가?

추상 다짐이 아니라 본인이 실제로 한 결을 짚는 답이 자주 등장합니다. 매끈하게만 끝나는 답은 외워 온 결로 들립니다.

측정 가능한 결과로 닫는가?

재사용·재작업·시간 결로 본인이 결과를 본 흔적이 답에 보입니다. 수치 없이 좋아진다는 답은 검증이 옅은 결입니다.

말로 해봐야 는다

읽는 것과 말하는 건 다릅니다.
이 질문, 소리 내어 답해 볼까요?

incross 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.

음성으로 답해보기

BEM 방식 SCSS 모듈화 경험약 86초 SCSS 변수와 믹스인으로 일관성 확보약 88초 CSS Modules와 비교 후 SCSS 선택 이유 설명약 85초

예시 답변 1

약 86초

BEM 방식 SCSS 모듈화 경험

이 결의 특징

구체적인 수치와 상황에 대한 다층적인 설명이 함께 나타나는 흔적이 있습니다.

이 결이 통하는 자리

개인의 경험을 팀 협업과 연결한 부분에서 리더십과 소통 능력이 드러나는 자리로 통합니다.

예시 답변 2

약 88초

SCSS 변수와 믹스인으로 일관성 확보

일관성은 코드에서 강제하는 것이라는 걸 배웠습니다.

이 결의 특징

경험에서 얻은 통찰을 자신의 언어로 체계적으로 표현한 흔적이 보입니다.

이 결이 통하는 자리

개인의 경험을 팀 협업과 연결한 부분에서 리더십과 소통 능력이 드러나는 자리로 통합니다.

예시 답변 3

약 85초

CSS Modules와 비교 후 SCSS 선택 이유 설명

이 결의 특징

경험에서 얻은 통찰을 자신의 언어로 체계적으로 표현한 흔적이 보입니다.

이 결이 통하는 자리

구체적인 상황 설정과 자신의 관점이 명확할 때 면접에서 설득력 있게 통하는 결이 보입니다.

자주 빠지는 자리

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

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

이어질 꼬리질문

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

壹본인이 가장 깊이 본 결은 어디였나요?

貳모듈 결을 어떻게 잡으셨나요?

參결과를 어떤 결로 측정하시나요?

이제, 직접 답해볼 차례예요.

눈으로 읽은 답은 면접장에서 나오지 않아요. incross 면접관과 이 질문으로 한 번 대화해 보세요.

이 질문으로 모의면접 해보기

개인정보처리방침 이용약관 문의