이직에 바로 쓰는 프론트엔드 AI 실무: 과제 전형 90분 대응 런북
최근 Velog 트렌딩을 훑어보면 공통 패턴이 보입니다.
- “무엇을 만들었다”보다 어떤 제약에서 어떻게 의사결정했는지가 반응이 좋고
- “AI 도구 추천”보다 채용/실무에 바로 복제 가능한 흐름이 더 오래 읽히며
- “속도 자랑”보다 품질 기준과 실패 복구 전략이 신뢰를 만듭니다
그래서 이번 글은 프론트엔드 이직 관점에서, 과제 전형(또는 라이브 코딩)에서 가장 자주 등장하는 90분 시나리오를 기준으로 AI 활용 런북을 정리합니다.
핵심은 간단합니다.
AI는 구현 속도를 올리고, 개발자는 합격 신호(설계 근거·검증 로그·리스크 통제)를 남긴다.
왜 90분 런북이 이직에 강한가
면접관은 대체로 아래를 확인합니다.
- 제한 시간 안에 우선순위를 세울 수 있는가
- AI 결과물을 무비판적으로 붙이지 않고 검증하는가
- 결과를 팀 협업 문맥(PR, 문서, 테스트)으로 설명할 수 있는가
즉, 채용에서 중요한 건 “코드를 얼마나 많이 쳤는가”가 아니라 제약 하에서의 엔지니어링 판단입니다.
실무형 코드 리뷰 기준은 프론트엔드 AI 코드리뷰 실무 적용 플레이북, 릴리즈 직전 점검 항목은 이직에 바로 쓰는 프론트엔드 AI 실무: 릴리즈 준비도 체크리스트와 함께 보면 연결이 좋습니다.
90분 운영 시나리오 (0~90분)
여기서는 “상품 목록 필터 + 정렬 + 빈 상태 처리” 과제를 가정합니다.
0~10분: 문제 해석과 성공 기준 고정
이 구간에서 할 일은 구현이 아니라 채점 기준 고정입니다.
- 필수 요구사항 3개(예: 필터, 정렬, 오류 처리)
- 가산점 항목 2개(예: 접근성, 테스트)
- 시간 초과 시 버릴 항목 1개(예: UI 애니메이션)
면접에서는 이 메모 자체가 강력한 신호입니다.
“처음 10분은 구현하지 않고 성공 기준을 정의했습니다.”
이 한 문장으로 주도권이 생깁니다.
10~35분: AI로 1차 스캐폴딩 + 경계 분리
AI 프롬프트는 길게 쓰기보다, 경계를 강하게 지정하는 쪽이 안정적입니다.
Next.js App Router + TypeScript 기준으로
- 상품 목록 fetch
- 필터/정렬 상태는 URLSearchParams로 동기화
- 로딩/에러/빈 상태를 분리
- 접근성 속성(aria-label, role) 포함
- 함수 분리와 타입 정의를 우선이때 체크할 것:
- 데이터 fetching과 UI 상태가 섞였는지
- 클라이언트 컴포넌트 범위가 불필요하게 넓은지
- 타입이
any로 도망갔는지
서버/클라이언트 경계 판단이 헷갈리면 Next.js Server vs Client Components 실무 가이드를 기준선으로 삼으면 됩니다.
35~55분: 결함 제거 라운드 (가장 중요)
많은 지원자가 여기서 시간을 아껴서 탈락합니다.
우선순위는 아래 순서가 안전합니다.
- 오류 흐름: API 실패 시 UI가 복구 가능한가
- 접근성: 키보드 탐색, 라벨, 포커스 이동
- 성능: 불필요한 재렌더와 무거운 계산 제거
“작동은 되지만 신뢰할 수 없는 코드”를 “작동 + 방어 가능한 코드”로 바꾸는 시간이 이 구간입니다.
55~75분: 테스트 또는 검증 로그 확보
시간이 빠듯하면 테스트를 최소 단위로 줄이되, 검증 흔적은 반드시 남깁니다.
- 유틸 함수 단위 테스트 1~2개
- 핵심 사용자 플로우 수동 검증 체크리스트
- 실패 케이스 재현 로그(짧은 메모 가능)
E2E까지 여유가 있으면 Playwright 기반 E2E Eval 운영 가이드를 축약해서 적용하세요.
75~90분: 설명 가능성 포장 (PR/면접 대응)
마지막 15분은 “코드 수정”보다 “설명 가능한 결과물”을 만듭니다.
PR/제출 메모에 아래 4줄만 있어도 밀도가 달라집니다.
- 요구사항 충족 범위
- 포기한 항목과 이유
- 리스크 1~2개
- 다음 개선 우선순위
면접에서 바로 쓰는 답변 구조
면접관 질문: “AI를 쓰면 본인 역량을 어떻게 증명하나요?”
아래 순서로 답하면 설득력이 높습니다.
- 문제 정의: “90분 과제에서 필수/가산점을 먼저 분리했습니다.”
- AI 활용 범위: “초기 스캐폴딩과 반복 코드 생성에만 사용했습니다.”
- 검증 방법: “오류/접근성/성능 체크리스트로 결함 제거를 수행했습니다.”
- 결과와 한계: “핵심 기능은 완료했고, 애니메이션은 의도적으로 제외했습니다.”
포인트는 “AI를 잘 썼다”가 아니라 AI를 통제했다는 메시지입니다.
실무 재사용용 템플릿
## 90분 과제 대응 로그
### 1) 성공 기준
- 필수:
- 가산:
- 제외:
### 2) AI 활용 범위
- 사용 구간:
- 직접 수정 구간:
- 검증 항목:
### 3) 품질 점검
- 오류 흐름:
- 접근성:
- 성능:
- 테스트/검증 로그:
### 4) 결과 요약
- 완료:
- 미완료:
- 남은 리스크:
- 다음 액션:이 템플릿은 포트폴리오에도 그대로 재사용 가능합니다. “완성본”보다 “판단 과정”이 훨씬 강하게 남습니다.
7일 훈련 플랜 (취준 모드)
Day 1~2
- 과제 주제 1개 선정
- 90분 타이머로 1회 수행, 로그 남기기
Day 3~4
- 첫 결과를 기준으로 결함 제거 루프만 재실행
- 접근성/오류 처리 품질 끌어올리기
Day 5~6
- 같은 과제를 다른 제약(예: API 지연, 요구 변경)으로 변형
- PR 요약 문장 템플릿 고정
Day 7
- 면접 답변 3문장 버전/1분 버전으로 압축
- 포트폴리오에 “전/후 비교” 반영
마무리
이직 시장에서 AI 활용은 이제 기본값입니다. 차이를 만드는 건 아래 세 가지입니다.
- 시간 제약 속에서도 우선순위를 명확히 잡는가
- AI 산출물을 검증 가능한 품질로 끌어올리는가
- 결과를 팀 문맥(PR/문서/테스트)으로 설명할 수 있는가
이번 주에 90분 시뮬레이션 1회만 돌려도, 다음 면접에서 답변의 결이 확실히 달라집니다.