interview-questionnaire

name	interview-questionnaire
description	프론트엔드 3년차 면접 질문지를 생성합니다. JavaScript/TypeScript, 프레임워크, CSS, 웹 성능, 브라우저/네트워크/보안, 협업 질문을 이력서 기반으로 맞춤 생성합니다. /create-questionnaire 커맨드에서 참조됩니다.

면접 질문 생성 스킬

역할

프론트엔드 개발자 3년차 이직 면접을 위한 맞춤형 질문지를 생성합니다.

질문 구성 원칙

연계형 질문 구조

하나의 주제에 대해 깊이 파고들 수 있도록 설계합니다.

기본 질문 → 심화 질문 → 경험 연결 질문 → 상황 대응 질문

예시:

1. 기본 — "React의 Virtual DOM이 무엇인가요?"
2. 심화 — "실제 DOM 업데이트 과정을 설명해주세요"
3. 경험 연결 — "Virtual DOM으로 인한 성능 이슈를 경험한 적 있나요?"
4. 상황 대응 — "대량의 리스트 렌더링 시 어떻게 최적화하시겠어요?"

이 4단계는 출력 템플릿의 모든 질문은행 질문 블록에 그대로 반영합니다 (성능/최적화, 브라우저/네트워크/보안, 협업 섹션 포함). 이력서 기반 질문은 4카테고리가 이미 이 역할을 하므로 제외합니다. 실제 기술면접의 당락은 첫 답변보다 꼬리질문에서 갈리므로, 모든 실행에서 꼬리질문 대비가 보장되어야 합니다.

난이도 2단계 라벨

모든 질문 헤더에 난이도 라벨을 부착합니다:

라벨	검증 대상	활용 시점
[스크리닝]	개념 정의·동작 원리 (정확성)	1차 화상면접 대비
[본선]	본인 경험·트레이드오프·수치 (깊이)	최종 기술면접 대비

기본 난이도 비율(스크리닝:본선)은 아래 '정량 규칙 (단일 기준)' 섹션에 정의되어 있습니다 (연차별 조정은 /create-questionnaire 커맨드의 예외 처리 규칙을 따릅니다).

질문 4카테고리 매핑 (경험 검증용)

이력서 기반 개별 질문은 면접관이 실제로 쓰는 4가지 검증 카테고리로 설계합니다. 연계형 구조의 각 단계와 아래처럼 대응됩니다:

카테고리	목적	연계형 구조 대응	질문 형태
앵커링	이력서에서 추론한 정보 검증	기본 질문	"~로 이해했는데, 맞나요?"
정량	성과 수치의 실체 확인	경험 연결 질문	"개선 전후 수치가 어떻게 되나요?"
의사결정·트레이드오프	선택의 근거 확인	심화 질문	"다른 대안 대신 이걸 고른 이유는?"
실패	문제 해결 과정과 학습 확인	상황 대응 질문	"시도했다가 실패한 접근은?"

이력서 항목(핵심 프로젝트 단위)마다 정량 카테고리 질문을 최소 1개 포함합니다 — 정량 답변이 준비되지 않은 성과 서술은 면접에서 가장 먼저 무너지는 지점입니다.

---

정량 규칙 (단일 기준)

문항 수·구성·난이도 비율의 **단일 진실 공급원(SSOT)**입니다. 이 수치를 바꿀 곳은 이 표 하나이며, questionnaire-designer 에이전트의 생성 절차와 /create-questionnaire 커맨드는 각자 수치를 정의하지 않고 이 표를 그대로 참조합니다.

항목	값	비고
총 문항 수	20~25문항	역질문 3개 포함
공통 질문은행	10~12개	JS/TS · 프레임워크 · CSS/성능 · 브라우저/네트워크/보안
이력서 기반	핵심 프로젝트 2~3개 × 4카테고리(각 1개)	프로젝트당 4문항
협업/소프트스킬	2~3개	코드 리뷰 · 협업 갈등 · 온보딩 등
역질문	3개	유형별 각 1개 (아래 '역질문 생성 규칙')
난이도 비율 (기본)	[스크리닝] 40% : [본선] 60%	연차 예외는 아래 참조

• 합계 조정: 합계가 25문항을 넘으면 공통 질문은행에서 줄여 맞춥니다 (이력서 기반 질문은 차별화 핵심이므로 줄이지 않습니다).
• 연차별 조정: 기본 난이도 비율의 연차 예외(1~2년차 · 5년차 이상)는 /create-questionnaire 커맨드의 예외 처리 규칙(사용자 고지 게이트와 결합)을 따릅니다.

---

1. 기술 질문 (JavaScript/TypeScript)

필수 질문

1. 클로저(Closure)

   • 클로저가 무엇인지 설명해주세요
   • 클로저를 활용한 실제 코드 예시를 들어주세요
   • 클로저로 인한 메모리 누수 경험이 있나요?

2. 이벤트 루프

   • JavaScript 이벤트 루프를 설명해주세요
   • microtask와 macrotask의 차이점은?
   • 비동기 처리 시 우선순위 문제를 겪은 적 있나요?

3. 비동기 처리

   • Promise와 async/await의 차이점
   • Promise.all vs Promise.allSettled vs Promise.race
   • 에러 처리 전략은 어떻게 하시나요?

4. TypeScript

   • TypeScript를 사용하는 이유는?
   • Generic을 활용한 경험을 설명해주세요
   • Type과 Interface의 차이와 선택 기준

---

2. 프레임워크 질문 (React/Vue 중심)

React 질문

1. 상태 관리

   • useState vs useReducer 선택 기준
   • 전역 상태 관리 도구 선택 경험
   • 상태 정규화(normalization) 경험

2. 성능 최적화

   • useMemo, useCallback, React.memo 사용 기준
   • 리렌더링 최적화 경험
   • Suspense와 lazy loading 활용

3. Hooks 심화

   • 커스텀 훅을 만든 경험
   • useEffect 의존성 배열 관리
   • useRef 활용 사례

Vue 질문

1. 반응성 시스템

   • Vue 3 Composition API vs Options API
   • ref와 reactive의 차이
   • computed vs watch vs watchEffect

2. 상태 관리

   • Pinia/Vuex 사용 경험
   • provide/inject 활용

---

3. CSS/스타일링 질문

1. 레이아웃

   • Flexbox vs Grid 선택 기준
   • 반응형 디자인 구현 전략

2. 성능

   • 리플로우(Reflow)와 리페인트(Repaint)
   • CSS-in-JS vs CSS Modules 선택 이유
   • Critical CSS 최적화 경험

3. 실무

   • 디자인 시스템 구축 경험
   • 다크모드 구현 방법
   • 애니메이션 최적화 (GPU 가속)

---

4. 웹 성능 질문

1. 측정 및 분석

   • Core Web Vitals (LCP, INP, CLS) 설명 — INP가 2024년 FID를 대체한 배경 포함
   • 심화 포인트: FID→INP 교체 이유(첫 입력 지연만 측정 vs 상호작용 전체 지연 측정)를 설명할 수 있는가 — 교체 배경까지 설명하면 3년차 차별화 포인트
   • 성능 측정 도구 사용 경험
   • 실제 성능 개선 사례

2. 최적화 기법

   • 번들 사이즈 최적화 방법
   • 이미지 최적화 전략
   • 코드 스플리팅 적용 경험

---

5. 협업/커뮤니케이션 질문

1. 코드 리뷰

   • 코드 리뷰 시 중점적으로 보는 부분
   • 리뷰에서 의견 충돌 시 해결 방법

2. 협업 경험

   • 백엔드/디자이너와 협업 시 갈등 해결 사례
   • API 스펙 변경 대응 경험

3. 성장

   • 최근 학습한 기술과 이유
   • 주니어 온보딩/멘토링 경험

---

6. 브라우저/네트워크/보안 질문

이력서에 관련 언급이 없어도 반드시 질문지에 포함합니다 — 3년차 기술면접 본선에서 프레임워크 밖 CS 기초는 이력서와 무관하게 빈출되는 영역이라, 이력서 기반 생성만으로는 보완되지 않는 준비 사각지대입니다.

1. 브라우저 동작 원리

   • URL 입력부터 화면 렌더링까지의 과정
   • 크리티컬 렌더링 패스 (리플로우/리페인트와의 관계 포함)
   • 이벤트 버블링/캡처링과 이벤트 위임 활용 경험

2. 네트워크

   • HTTP 캐싱 전략 (Cache-Control과 ETag의 차이·조합)
   • CORS가 발생하는 원인과 해결 방법
   • HTTP/1.1 vs HTTP/2 차이 (멀티플렉싱이 프론트엔드 최적화에 주는 영향)

3. 보안

   • XSS/CSRF 공격 원리와 프론트엔드에서의 방어 방법
   • 인증 토큰 저장 전략 (cookie vs localStorage 트레이드오프)

4. 접근성/테스트

   • 시맨틱 마크업과 키보드 접근성 기본
   • 프론트엔드 테스트 전략 (단위/통합/E2E 선택 기준)

---

7. 이력서 기반 개별 질문 (자동 생성)

이력서에서 추출한 내용을 4카테고리에 따라 생성합니다:

• [앵커링] "○○ 프로젝트에서 [기술]을 주도적으로 도입하신 것으로 이해했는데, 맞나요?"
• [정량] "[성과]의 개선 전후 수치와 측정 방법을 설명해주세요"
• [의사결정] "[기술 스택]을 다른 대안과 비교했을 때 무엇을 포기하고 무엇을 얻었나요?"
• [실패] "이 프로젝트에서 시도했다가 되돌린 결정이 있나요?"

포트폴리오 파일(portfolio/<slug>/final.md)이 존재하면 질문 소스로 함께 활용합니다 — 포트폴리오는 면접관 질문을 유도하도록 설계된 문서이므로, 거기 심어진 질문 트리거 (트레이드오프, 실패 경험, 특이한 수치)에서 질문을 우선 생성합니다.

---

역질문 생성 규칙

역질문은 면접관에게 지원자의 시니어리티를 보여주는 마지막 인상이며, 임원/컬처핏 면접(/mock-interview)에서도 재사용되는 자산입니다. 이력서의 기술 스택·성장 방향과 연결된 역질문을 3개 생성합니다 (유형별 각 1개):

유형	예시 방향	이 질문으로 판단할 수 있는 것
기술 문화 검증형	코드 리뷰·배포 프로세스 운영 방식	입사 후 개발 경험의 질
팀 상황 파악형	프론트엔드 팀 구성, 기술 부채 현황	합류 시 맡게 될 일의 실체
성장 연결형	이력서의 관심 기술과 회사 기술 로드맵의 접점	회사에서의 성장 가능성

• 각 역질문에 "이 질문으로 무엇을 판단할 수 있는지" 한 줄 주석을 함께 답니다
• 범용 질문("회사 분위기는 어떤가요?")이 아니라 이력서 맥락(사용 기술, 지향하는 성장 방향)이 드러나는 질문이어야 합니다

JD·지원 회사 연결 규칙 (JD가 알려진 경우)

지원 회사나 JD가 알려져 있으면(예: /mock-interview에서 지원 회사·JD를 수집한 경우, 또는 사용자가 JD를 함께 제공한 경우) 이력서 맥락에 더해 JD 슬롯과 직접 연결해 생성합니다. JD 슬롯 구분은 portfolio-strategy 스킬의 5슬롯 정의(회사·도메인/핵심 책임/우대 기술/시니어리티/인재상, skills/portfolio-strategy/jd-parsing.md)를 그대로 따릅니다:

유형	연결할 JD 슬롯	생성 방법
기술 문화 검증형	핵심 책임	JD가 말하는 "할 일"이 실제로 어떤 프로세스(코드 리뷰·배포·품질 기준)로 운영되는지 확인
팀 상황 파악형	회사·도메인 + 핵심 책임	도메인 특성(트래픽 규모·규제·플랫폼 제약)이 프론트엔드 작업에 만드는 제약과 현재 기술 부채
성장 연결형	인재상 + 우대 기술	이력서의 강점·관심 기술이 회사의 기술 로드맵·인재상과 만나는 접점

예 (커머스 JD × 이력서에 성능 최적화 경험): "JD에 성능 개선이 핵심 책임으로 있던데, 현재 성능 예산이나 Core Web Vitals 목표를 팀에서 어떻게 관리하고 계신가요?" — 판단 포인트: 성능 작업이 일회성인지 상시 체계인지

피해야 할 역질문

역질문은 지원 동기·조직 이해도를 보여주는 마지막 평가 포인트이므로, 아래 유형은 생성하지 않으며 /mock-interview 역질문 턴에서도 감점 신호로 봅니다:

피해야 할 유형	예시	이유
처우 선공	"연봉 인상률은 어떻게 되나요?", "재택 되나요?"	처우는 합격 후 협의 단계의 주제 — 면접에서 먼저 꺼내면 지원 동기가 조건으로 읽힘
검색으로 알 수 있는 질문	"어떤 서비스를 만드나요?"	최소한의 사전 조사도 안 했다는 신호
범용 질문	"회사 분위기는 어떤가요?"	어느 회사에나 던질 수 있는 질문 — 이 회사에 대한 관심이 드러나지 않음
부정 전제 질문	"야근 많나요?", "이직률이 높다던데 왜죠?"	확인이 목적이라도 표현을 바꿔야 함 (예: "일정 산정과 우선순위 조정은 어떻게 이뤄지나요?")
면접관이 답할 수 없는 질문	실무 면접관에게 스톡옵션 정책 문의	질문 대상 미스매치 — 면접 단계·면접관 역할에 맞는 질문을 고르는 것도 판단력

---

출력 형식

구조 계약 — /evaluate의 3-에이전트가 이 파일을 파싱합니다. 모든 실행에서 동일하게 지킵니다:

1. 질문 번호(Q1, Q2, …)는 파일 전체에서 연속 부여합니다
2. 모든 질문 블록은 동일 구조입니다: #### Qn. [태그] 질문 헤더 → 꼬리질문 3줄(질문은행 질문만) → **답변:** 란
3. 태그 규칙 — 질문은행 질문은 [영역][난이도] (예: [JS][스크리닝]), 이력서 기반 질문은 [4카테고리][난이도] (예: [정량][본선])
4. 별도의 '답변 기록' 섹션을 만들지 않습니다 — 답변은 각 질문 블록 안에 작성합니다
5. 자가 평가 체크박스를 넣지 않습니다 — 채점은 /evaluate가 수행합니다
6. '예상 답변 포인트'는 질문 옆에 두지 않고 파일 말미 '답변 가이드' 섹션에 모아 둡니다 (답변 전에 모범 포인트를 보면 블라인드 모의 효과가 사라져 점수가 부풀려집니다)

아래 템플릿 제목의 [이름]은 이력서 본문에서 추출한 지원자 이름(표시용)입니다. 저장 파일명의 [이름]은 커맨드의 [이름] 결정 규칙(이력서 파일 베이스네임)을 따릅니다.

# [이름]님 맞춤 면접 질문지

## 기본 정보
- 경력: [N]년차
- 주요 기술: [이력서 기반]
- 목표 포지션: 프론트엔드 개발자

> **작성 안내**: 각 질문 아래 `**답변:**` 란에 답변만 작성하세요.
> 채점은 `/evaluate`가 수행합니다 — 이 파일에서 자가 채점하지 마세요.
> '답변 가이드'는 파일 맨 아래에 있으며, **모든 답변을 작성한 뒤에** 확인하세요.

---

## 1. 기술 질문 (40분)

### JavaScript/TypeScript (10분)

#### Q1. [JS][스크리닝] [기본 질문]
- 심화: [원리를 파고드는 꼬리질문]
- 경험 연결: [본인 경험을 묻는 꼬리질문]
- 상황 대응: [가정 상황 꼬리질문]

**답변:** (여기에 작성)

### 프레임워크 (10분)

#### Q2. [프레임워크][본선] [기본 질문]
- 심화: [꼬리질문]
- 경험 연결: [꼬리질문]
- 상황 대응: [꼬리질문]

**답변:** (여기에 작성)

### 성능/최적화 (10분)

#### Q3. [성능][본선] [기본 질문]
- 심화: [꼬리질문]
- 경험 연결: [꼬리질문]
- 상황 대응: [꼬리질문]

**답변:** (여기에 작성)

### 브라우저/네트워크/보안 (10분)

#### Q4. [네트워크][스크리닝] [기본 질문]
- 심화: [꼬리질문]
- 경험 연결: [꼬리질문]
- 상황 대응: [꼬리질문]

**답변:** (여기에 작성)

---

## 2. 이력서 기반 질문 (20분)

> 4카테고리가 연계형 4단계 역할을 하므로 꼬리질문 하위 항목은 생략합니다.

#### Q5. [정량][본선] [프로젝트/경험 기반 질문]

**답변:** (여기에 작성)

---

## 3. 협업/소프트스킬 (10분)

#### Q6. [협업][본선] [기본 질문]
- 심화: [꼬리질문]
- 경험 연결: [꼬리질문]
- 상황 대응: [꼬리질문]

**답변:** (여기에 작성)

---

## 4. 역질문 (5분)

> 역질문은 답변란이 없습니다 — 면접 마지막에 지원자가 면접관에게 던질 질문입니다.

1. [기술 문화 검증형] [질문] — 판단 포인트: [한 줄]
2. [팀 상황 파악형] [질문] — 판단 포인트: [한 줄]
3. [성장 연결형] [질문] — 판단 포인트: [한 줄]

---

## 답변 가이드 (작성 후 확인)

> 모든 답변을 작성한 뒤에 확인하세요. 답변 전에 보면 블라인드 모의 효과가 사라져
> /evaluate 점수가 실제 실력보다 부풀려집니다.

### Q1 가이드
- 예상 답변 포인트: [핵심 키워드·논리 흐름]
- 확인 포인트: [답변에 반드시 들어가야 할 요소]

### Q2 가이드
- (전 질문 동일 구조로 Qn 번호를 매칭해 작성)