dev/이직일기

[이직일기-2] 프론트엔드 기술면접 준비

2023. 7. 30. 16:01
신입, 경력(3년 차) 웹 프론트엔드 엔지니어 기술면접에서 실제로 경험한 내용들을 위주로 정리한 글이다.

개발자가 겪는 채용 프로세스 중에 가장 쉽다면 쉽지만 까다로운 절차가 기술면접이라 생각한다.

그 이유는 대부분 질문에 대한 명확한 정답이 존재하기 때문이다.

 

 

부르는 이름이나 내용도 참 다양하다.

직무 인터뷰, 기술면접, 실무자 인터뷰 등 다양한 명칭들이 있고,

기본(인성) 질문, 사전 과제(코딩테스트) 검증, 개발 지식, 포트폴리오 질문, 라이브 코딩, 역질문까지 다양한 컨텐츠들을 담고 있다.

 

단순히 기업이나 개발팀의 규모에 따라 기술면접은 달라지지 않는다.

시리즈 A 정도의 작은 스타트업임에도 불구하고 굉장히 디테일하고 다양한 질문들을 받은 곳도 있었고,

큰 기업임에도 상대적으로 간소화된 절차들로 진행된 면접도 있었다.

 

따라서 지원한 조직과 관계없이 폭넓고 깊이 있게 준비하는 것이 중요했다.

 

나는 주변에 마땅히 물어볼 곳이 없었기도 하고, 맨땅에 헤딩으로 준비했었기에 누군가에게 이 글이 도움이 되길 바란다.

실제로 받은 질문들과 중점적으로 준비했던 내용들에 대해 적어보겠다.

 

(다만, 지원했던 회사들과 세부 팀은 밝히지 않겠다.)

 


 

기본 질문

  1. 자기소개: 지원자님에 대해 간단하게 소개해주세요.
  2. 이직사유: (괜찮으시다면) 어떤 사유로 이직을 준비하게 되셨는지 말씀 부탁드립니다.
  3. 지원동기: 왜 저희 회사 or 저희 팀에 지원하셨나요?
    • 유사질문 1: 많은 회사들이 있을 텐데 왜 하필 저희 회사였나요?
    • 유사질문 2: 회사 안에도 여러 팀이 있을 텐데 저희 팀에 지원하신 이유가 궁금합니다.
    • 유사질문 3: 동일한 이직 사유가 발생하지 않을 회사라고 생각하신 이유가 있나요?
  4. 조직, 업무 관련 질문
    • 본인이 가장 퍼포먼스를 낼 수 있는 환경은 무엇인가요?
    • 본인이 가장 업무하기 어려운 환경은 무엇인가요?
    • 팀 내 의견이 다른 경우에는 어떻게 대처했나요? 사례가 있을까요? (갈등 사례)
    • 추구하는 개발 문화, 입사 후 기대하는 문화에 대해 궁금합니다.
    • 프론트엔드와 백엔드 중 프론트엔드를 고른 이유?
    • 앞으로 본인의 5년 후, 10년 후 커리어를 고민해 보신 적이 있나요?
    • 목적 조직(스쿼드, 사일로), 기능 조직(챕터, 그룹)에 대해 어떻게 생각하는지? 어떻게 일해왔는지?
  5. 꼬리 질문
    • 자기소개에서 ~한 표현을 사용해주셨는데, 조금 더 자세하게 설명해 주시겠어요?
    • 저희 팀의 이런 면 or 프로덕트에 관심이 많다고 하셨는데, 조금 더 구체적으로 부탁드립니다.
    • (신입 기준) 학력 관련 질문

 

 

개인적으로는 가장 중요하게, 또 집요하게 준비해야 하는 질문들이라고 생각한다.

그 이유는, 비교적 쉽게 답변할 수 있는 질문들에 대해 내가 의도한 방향으로 끌고 나갈 수 있다는 것이다.

또한 나라는 사람에 대해 조금 더 어필이나 설명을 한 상태로 기술에 대한 이야기로 넘어갈 수도 있다는 장점이 있다.

 

예를 들어보자,

내가 지원한 A라는 팀이나 기업의, B라는 프로덕트가 내가 추구하는 좋은 프로덕트이며, ~한 방향으로 서비스가 발전해 나가는 모습에 관심을 가져 지원하게 되었다고 답변했다.

 

위와 같은 뉘앙스의 답변을 했을 때,

모든 면접들에서 이후 질문으로 '좋은 프로덕트란 무엇인지', '서비스의 발전 방향에 대해서 어떻게 생각하는지, 어떻게 알게 되었는지'라는 질문을 추가적으로 받을 수 있었다.

 

합격 이후 진행될 면접(컬쳐핏, 임원 면접, 2차 면접)에서도 중복된 질문을 받을 수 있으니,

기술면접이라도 위 내용은 반드시 잘 정리하고, 이후 절차에서도 일관된 답변을 할 수 있도록 준비하는 것이 중요하다.

 


 

이력서 & 포트폴리오 질문

  1. 전반적인 커리어 관련 질문
    • 지원자님의 지금까지의 커리어에 대해 소개해주실 수 있나요?
    • 전 직장의 프로덕트, 개발, 프론트엔드 팀 규모는 어떻게 되나요? 그리고 어떤 방식으로 일하셨나요?
    • (신입 기준) 수행했던 프로젝트에 대한 설명과 팀원 구성은 어떻게 되나요?
    • (창업 경험 있을 때) 창업한 경험에 대해 상세하게 설명해 주실 수 있나요?
  2. 프로젝트 관련 질문 (보편적인 내용만 기술)
    • 가장 (인상 깊었던, 힘들었던, 자랑하고 싶은) 프로젝트에 대해 설명해주세요.
      • 특히 힘들었던 이유, Trouble Shooting에 대해 설명 부탁드립니다.
      • ~한 선택지도 있지 않았을까요? 어떻게 생각하시나요?
      • 어떤 성과가 있었는지도 설명 부탁드립니다.
    • 라이브러리 중 A와 B라는 두 가지를 사용해 보셨을 텐데, 둘의 차이와 둘 중 어떤 것을 선호 or 선택하신 이유에 대해 기술적으로 설명 부탁드립니다.
      • 성능 상으로도 차이가 있었나요? 어떻게 측정했나요?
      • Recoil vs Redux  /  React-Query vs SWC 와 같은 상태 관리 라이브러리에 대해, 데이터를 저장하는 방식의 차이와 성능에서 어떤 차이가 발생하는지 설명 부탁드립니다.
      • Webpack, Vite와 같은 모듈 번들러에 대해 차이를 알고 계시는지, 특정 번들러를 사용한다면 왜 사용했는지 설명 부탁드립니다.
    • A라는 프로젝트를 진행하셨고, 그중에서 (피쳐 개발, 성능 개선, 아키텍쳐 개선, 인프라 수정, CI/CD, 배포 프로세스) 업무를 수행하셨는데 이 업무들에 대해 보다 상세하게 설명해주실 수 있나요?
      • 단순히 '무엇을 만들었습니다'가 아닌 어떤 기획사항에 대해 최적의 선택을 했는지 설명 부탁드립니다.
    • 팀 내에서 컨벤션을 만들어나가거나, 컨벤션을 수정하는 것을 리드해 보신 경험이 있나요?
      • TS의 undefined, null에 대해 본인의 생각을 말씀해주세요.
      • 기술 부채는 최대한 빠르게 수정해야 한다고 생각하시나요?
      • 기술 부채 수정을 현재 업무와 병행해서 수정하시나요, 업무를 멈추거나 기간을 확보하고 수정하시나요?
      • 팀원 간의 컨벤션에 대해 의견이 다른 경우, 어떻게 의견을 맞춰가셨나요?
      • Storybook은 어떤 계기로 도입하셨나요?
  3. 실무, 공부 관련 질문
    • 어떠한 디자인 패턴(Atomic Design Pattern 등)이나 아키텍쳐을 선호하시나요?
    • 아키텍쳐를 수정하거나 개선해 본 경험이 있으신가요?
    • 평소에 어떻게 공부하시나요?
    • 사이드 프로젝트를 하고 계시나요?
    • 가장 최근에 관심 있게 찾아보거나 공부하신 내용이 뭔가요?
    • 특정 Web API(Web Worker, WebGL)을 사용하신 이유가 뭐였을까요?

 

 

기술면접 과정에서 가장 심도 있는 질문을 받고, 큰 비중을 차지하는 질문들이다. 

이력서, 포트폴리오 관련 질문은 지원자의 역량, 경험을 알아볼 수 있고, 우리 팀에 적합한지 판단할 수 있는 근거자료가 될 것이다.

 

대부분의 면접관은 나보다 연차가 높고 경험이 많은 분들이다.

 

내가 사용한 기술에 대해 이미 완벽하게 알고 있지는 않더라도,

내가 설명한 내용에 대해 100% 이해하기 위해 노력하시는 모습들을 보여주셨다.

 

이를 위해 추가적인 질문이 나오는 것은 당연하고, 어디까지 알고 있는지도 파악하려는 질문들을 받게 된다.

따라서 중요한 것은, 면접관이 고개를 끄덕일 수 있는 나만의 이유는 준비해야하는 것이다.

 

그것이 반드시 공식 문서에 나올 만큼 정확하거나, 일목요연하게 준비하지는 않아도 된다.

 

왜 여러 라이브러리 중 그 라이브러리를 택했는지, 

의견 충돌이 있었으나 굳이 내 의견을 밀고 나간 이유는 무엇인지,

얼마만큼의 정량적인 성능 개선이 발생했고, 이를 어떻게 측정했는지 는 반드시 정리해야 한다.

 

마지막으로, 만약 모르는 내용이 나왔다면 솔직하게 모른다고 답하자.

최대한 고민해서 유추까지는 해보아도 괜찮지만, 어디까지나 유추임을 전달하고 '정확하게는 모르겠다, 공부하겠다'라고 답했었다.

 

 


 

개발 지식 질문 (CS, 프론트엔드)

신입 위주, 경력 면접에서는 큰 비중을 차지하지 않았다.

다만, 경력 면접에서 나온 질문이나 키워드는 볼드처리했다.

 

  1. JavaScript
    • JS의 이벤트 루프 (비동기 처리)
    • Hoisting (선언 - 초기화 - 할당 / TDZ) 
    • Scope (Lexical Scope)
    • Closure, Currying
    • this
    • 함수 (일반 함수, 화살표 함수)
    • class, instance
    • 비동기처리 (promise, async/await)
    • 기본적인 syntax
  2. Typescript
    • 인터프리팅 과정 (parser, AST)
    • undefined, null 차이
    • interface, type 차이
    • 동적 타입 언어에 대해
    • 사용 시 장점 (JS 대비)
  3. Frontend 기본
    • HTTP Request
    • REST API
    • CORS, 보안 관련 질문
    • Event (Bubbling, Capturing, Delegation)
    • 브라우저 동작 원리
    • 브라우저 저장소 (Cookie)
    • RequestAnimationFrame
    • Module Bundler (Webpack, Vite, ESBuild)
    • Babel
    • 컴파일, 트랜스파일
    • 웹 접근성, 시맨틱 웹
    • CSR, SSR
    • 웹, 앱 브릿지
    • CSS 관련
  4. React
    • 데이터 바인딩 방식
    • Flux 구조
    • Memoization (useMemo, useCallback, React.memo)
    • Reconciliation, Fiber
    • React Event 처리 방식 (Delegation)
    • Component Key Props
    • Shallow Copy, Deep Copy
    • 선언형 프로그래밍
    • React 18 (Suspense, useDeferredValue, useTransition)
    • 기본적인 hooks
    • 상태 관리 (Client-Side, Server-Side)
  5. 기타 (Infra, Build, DevOps, Tools)
    • Webpack 구조, 각종 로더 특징
    • CI/CD
    • Babel
    • AWS
    • CDN
    • Storybook
    • Monorepo (lerna, turborepo, yarn workspace 등)
    • npm, pnpm, yarn, yarn2

 

 

생각보다 기본적인 내용들에 대해서도 정리할 내용들이 많다.

 

경력직 지원의 경우, 큰 비중으로 물어보지 않는다고 작성은 했지만

위 내용들이 이력서와 포트폴리오의 경험에서 많이 녹아들어 답변이 되기에 별도의 키워드로 질문을 하지 않는 것이라 생각한다.

 

단순히 키워드로서 지원자가 알고 모르는 것을 판단하는 것보다,

실제 사례나 프로젝트에서 어떻게 적용했고, 어느 정도의 이해도를 가지고 있는지 판단하는 것이 더 정확하기 때문이라 믿는다.

 

그럼에도 면접 준비를 하면서 위의 내용은 대부분 빠짐없이 글로서 정리하고, 무엇보다 말로 설명하는 것을 연습했다.

특히나 기본에 가까운 내용은 설명을 못하면, 본인과 면접관 모두 당황하는 불상사가 발생하기 때문에

철저하게 준비하는 것을 권장한다.

 


 

라이브 코딩, 코딩 과제 설명

 

이건 정답이 있거나, 미리 준비할 수 있는 부분은 아니라고 생각한다.

다만 면접장에 가기 전에 한번 더 작성한 코드와 부족했던 점, 요구 사항에 대해서는 분석해서 가도록 하자.

 

사전 과제의 경우,

면접 장에서 5분 정도의 시간을 주고 작성한 코드를 다시 읽어볼 수 있는 시간은 주어졌다.

 

라이브 코딩의 경우,

접속할 수 있는 링크를 제공받고, 정말 간단한 기능을 구현하거나 리팩토링하며 설명하는 시간이 주어진다.

생각보다 긴장되고 당황스러웠던 경험이었는데, 평소 자신의 코딩 실력을 믿는 수밖에 없다.

 

사전 코딩 과제에 대한 나름의 팁은,

git commit을 열심히 작성해 놓는 것이다. 

git commit -m "[Spec 4-2] Feat: 어떤 기능 구현 완료"

이런 식으로 커밋을 작성하게 되면 나는 편하지만, 실제로 과제를 읽어보는 분들이 편할지 아닐지는 잘 모르겠다.

 

실제로 '이 코드는 왜 굳이 이렇게 구현했나요?', '이 코드는 불필요할 수도 있을 것 같은데...'라는 질문에 대해,

'원래는 A 방식으로 구현했으나, 요구사항에 B 라는 기능을 반드시 사용하라고 해서 C 라는 방식으로 구현했습니다' 에 대해 나름의 증거자료로서 방어를 했던 경험이 있다. 

 

대부분 사전 과제, 코딩테스트에 대한 외부 유출을 금하고 있으니, Git에 올리는 행동은 피하도록 하자.

 

 


 

역질문, Q&A

 

대부분의 회사에서는 면접 말미에 지원자에게 회사나 팀에 대해 궁금한 내용을 질문할 기회를 준다.

 

앞서 제대로 답변하지 못한 내용들에 대해 보완할 수 있는 시간으로도 사용할 수도 있지만,

개인적으로는 내가 지원한 회사에 대해, 실무자와 이야기를 하며 이해도를 높일 수 있는 기회라 생각한다.

 

  • 엔지니어 조직의 비율이나 인원 구성에 대한 질문
  • QA, 버그 리포팅 체계에 대한 질문
  • 채용 공고(JD)에 적혀있는 내용에 대한 질문
  • 본인이 선호하는 업무 방식이 이러한데 이런 방식이 채택되어 있는지, 어떻게 생각하는지에 대한 질문
  • 앞으로의 회사나 팀, 프로덕트의 방향성, 간단한 로드맵에 대한 질문
  • 본인의 면접에 대한 피드백
  • 사전 과제의 의도나 정답에 대한 질문

나는 대략적으로 위와 같은 질문들을 했던 것 같다.

저 질문들로 면접관에게 점수를 따고 싶다는 목적보다는, 순수하게 그 회사에 대해 파악하는 것이 더 중요하다고 생각했다.

 

이직이나 취업을 준비하면서, 오직 한 군데만의 회사를 지원하는 경우보다는 여러 곳을 동시에 지원하는 경우가 많을 것이다.

그리고 스스로 가고 싶은 순위를 매길 것이다. 

 

그 순서에 대한 확신을 얻거나, 순서를 바꿀 수 있는 가장 확실한 수단으로 사용했으면 좋겠다.

 

나는 이러한 이유로 이 회사를 지원했고, 가장 가고 싶은 회사로 생각하고 있는데

막상 이야기를 나눠보니 아닐 수도 있고, 오히려 더 가고 싶은 회사가 될 수도 있지 않을까.

 


 

 

 

프론트엔드의 특성상, 매우 빠르게 트렌드가 변하고 지원한 회사마다 사용하고 있는 기술이 다를 수 있다.

최대한 보편적인 내용들로 작성하려 노력했고, 실제로 질문받은 내용들로 작성해보았다.

 

개인적으로는 면접 과정 자체가 떨리기도 했지만,

회사를 찾아보고, 준비하고, 실제로 면접 장에서 다른 분들과 이야기를 나눠보는 과정에서 많은 성장이 있었다고 생각한다.

나중에는 면접관으로 면접에 참가하는 날도 찾아오지 않을까 싶다.

 

이 내용들이 기술면접을 준비하는 지원자나, 면접관으로 면접 질문을 준비하는 사람들에게 조금이나마 도움이 되면 좋겠다.

 

화이팅 :)

 

 

 

오타나 잘못된 내용이 있다면, 댓글로 제보 부탁드립니다.

무단 복제나, 배포, 도용을 금합니다.

 

 

 

 


다음 단계인 컬쳐 인터뷰는 아래 링크에서 확인할 수 있다.

[이직일기-3] 컬쳐 인터뷰에 나오는 23가지 질문

 

 

'dev/이직일기' 카테고리의 다른 글
  • [이직일기-3] 컬쳐 인터뷰에 나오는 23가지 질문
  • [이직일기-1] 창업부터 스타트업까지
jaehuiui
jaehuiui
식물을 좋아하는 개발자입니다
dev.druid식물을 좋아하는 개발자입니다
jaehuiui
dev.druid
jaehuiui
전체
오늘
어제

프로필

  • Github
  • Category (3)
    • dev (3)
      • 이직일기 (3)
    • druid (0)

인기 글

최근 글

hELLO · Designed By 정상우.v4.1.4
jaehuiui
[이직일기-2] 프론트엔드 기술면접 준비
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.