신입 프론트엔드 개발자를 위한 면접 조언

모르는 것보다는 아는 게 1%쯤 좋을 정보

재작년 하반기, 예전에 가르쳤던 학생 한 명이 네이버에 프론트엔드 개발자로 면접을 보게 됐다며 자신의 포트폴리오를 보고 의견을 줄 수 있겠느냐고 부탁해왔다. 꽤 좋은 아이디어라고 생각했기 때문에 흔쾌히 해주겠다고 하고 나름대로 몇 가지 조언을 해줬고 결국 합격했다는 기쁜 소식을 들었다. 물론 그 학생 본인이 열심히 노력한 덕이지만 빈말이라도 내 조언이 유용했다고 해주어서 뿌듯했던 기억이 있다.

. . .

그 후엔 잊어먹고 있었는데 오늘 자료를 정리하다 보니 그때 그 학생에게 보내려고 작성해 둔 파일이 나타났다. 비록 대단한 조언은 아니었을지 모르고, 그 학생에게 맞는 조언을 한다고 해준 것이어서 어쩌면 다른 사람들에게는 크게 유용하지 않을지도 모르겠다. 하지만 첫째로는 내 기록을 위해서(글을 작성한 후에는 자료를 지울 예정이다), 두 번째로는 눈곱만큼이라도 도움을 받을 사람이 있을까 싶어 공개적인 장소에 약간 손을 본 후 남겨두기로 했다.


먼저

보통 신입한테는 어마어마한 기술적 소양을 물어보기보다는 다루는 기술의 기본을 충실히 알고 있는지 확인하는 경우가 많다. 따라서 면접을 앞두고 있다면 지금까지 본인이 잘 안다고 생각했던 것들을 정말 제대로 알고 있는지 확인해보는 게 중요하다.

점검할 수 있는 가장 쉬운 방법으로는 다른 사람에게 설명해보고 그 사람이 이해했는지 점검해보는 게 있다. 대상은 이왕이면 해당 분야에 대해 지식이 없는 사람이면 좋겠지만, 꼭 사람이 아니어도 좋다. 인형을 붙잡고 해도 좋으니 그저 처음부터 끝까지 잘 설명할 수 있는지 스스로 확인해보자. 설명하다 보면 자신의 이해도에 대해 되돌아볼 수 있다. 실제로 이와 비슷한 고무 오리 디버깅이라는 방법이 있다(한국어 자료).

포트폴리오

  • 가능하면 GitHub이나 BitBucket 같은 Git 호스팅 서비스에 올려두자.
    요즘은 SVN이든 Git이든 VCS를 사용하지 않는 업체를 찾기 어려울 정도이다. 혹시 VCS를 전혀 사용하지 않는 개발 업체가 있다면 입사를 다시 한번 고민해보라고 진지하게 말하고 싶다. 입사 지원자에게 GitHub 계정 링크를 알려달라는 곳이 해외는 물론 국내에도 꽤 있다. 가능하면 포트폴리오를 앞서 말한 두 서비스 중 하나를 택해서 올려두는 게 좋다. 개인적으로는 GitHub을 추천하는데, 사용자가 더 많아서 문제가 생겼을 때 도움을 구하기 쉽기 때문이다.
  • .gitignore 파일에 .idea 폴더나 npm-debug.log 같은 불필요한 파일은 포함되지 않게 설정해두자. 코딩 능력과 상관없는 거지만 기본적인 사용법을 모르는 것처럼 보일 수 있다.
  • 커밋 메시지는 의외로 많은 것을 말해준다. 신경 써서 좋은 커밋 메시지를 작성하는 게 좋다.
  • 혹여 포트폴리오 소개서를 쓴다면 사용한 기술은 나열은 하되 강조하지는 않는 걸 추천한다. 신입에게는 대단한 기술 스택일지 몰라도 (아마) 면접관들에게는 그리 대단하지 않을 공산이 큰데, 그런 걸 강조하면 오히려 더 없어 보이기 때문. 반면 만에 하나라도 면접관의 관심을 끌 만한 기술이라면 굳이 강조하지 않아도 눈에 띌 것이다.
  • 개인 프로젝트라 하더라도 테스트 케이스는 성의껏 작성해두자. 코딩 전에 하든 후에 하든, 어쨌든 작성해 두는 게 좋은 인상을 줄 수 있다.

예상 질문

  • MVC 패턴에 관해 설명해보세요.
  • 했던 프로젝트에서 nginx를 사용해 성능을 개선했다고 했는데 어떤 식으로 개선한 건가요?
  • "RESTful 하다"라고 썼던데 그 말의 정확한 의미가 무엇인가요?
  • 프로젝트의 프론트엔드 성능을 개선하기 위해 어떤 방법을 사용했나요?
  • 또는 어떤 방법을 사용할 수 있을까요?
  • 디버깅은 어떻게 했나요? 특정한 도구를 사용했으면 그것까지 얘기해주세요.
  • UI와 UX의 차이점을 설명해보세요.
  • 어떻게 보면 전공과 거리가 있는 직군인데, 이 직업을 선택한 이유가 무엇인가요?
  • 다른 언어도 배웠던데 굳이 프론트엔드 개발자로 지원한 이유가 있나요?
  • XSS(Cross-site scripting)를 설명해보세요.
  • 각 프로젝트별로 기술적으로 가장 어려웠던 점과 극복했던 방법을 한 가지씩만 얘기해보세요.

참고: 기술과 관련한 질문은 아래 링크한 프론트엔드 면접 질문에 방대하고 상세하게 나와 있어서 위 목록에는 당시 해당 문서에 없던 질문만 추가했다.

읽어볼 만한 자료

이 자료는 당시 조언을 구했던 학생에게 필요하다고 생각했던 것이므로 면접자의 상황에 따라 충분하지 않을 수 있다.


사실 페이스북 어느 그룹에도 남겨뒀는데 페이스북의 특성상 1년이 넘은 글을 다시 찾아보기란 거의 불가능에 가까웠다. 어쨌든 이렇게 남겨둘 수 있게 됐으니 누구에게든 도움이 되었으면 하는 바람이다.

[adsense]

  1. 언젠가 프론트엔드 면접을 볼 것 같아서 북마크해두었는데, 이제 보게되네요. 감사합니다!

  2. 안녕하세요. 프론트엔드 예비 신입 개발자입니다. 취업준비를 하고있는데 정말 많은 도움이 되어 감사하다는 말 남기고 싶어 댓글적습니다. 감사합니다!

  3. 북마크를 드디어 보고 준비를 하게 되네요 감사합니다 ^^ 잘 와닿지 않는 부분이 생겨서 질문드립니다.
    "개인 프로젝트라 하더라도 테스트 케이스는 성의껏 작성해두자. "
    개인프로젝트만 신경을 쓰고 있는데, 테스트 케이스를 언급하셔서요. 어떤것을 말씀하시는지 조금 더 풀어서 알려주시면 감사하겠습니다

    1. 단위 테스트(Unit test) 또는 E2E 테스트처럼 애플리케이션 테스트를 자동화 할 수 있는 도구들이 있습니다. 거의 모든 언어에 각자 관련 도구가 존재하는데 PHP라면 PHPUnit, JS라면 Mocha, Chai, Jest, Selenium 등이 유명합니다.

      개발하다보면 새로 추가한 기능때문에 다른 기능에 문제가 생기는 일이 심심찮게 발생하곤 합니다(상당히 자주요!). 그런 문제를 비롯해 개발 도중 발생할 수 있는 여러 문제를 방지할 목적으로 코드 작성 중 혹은 배포 전에 테스트 지동화 도구를 사용해 지속적으로 테스트를 실행하곤 합니다. 심지어는 아예 테스트를 먼저 작성하고 코드를 작성하자는 개발 방법론도 있습니다(TDD = Test driven development = 테스트 주도 개발이라고 합니다).

      실무에서는 구현하기도 바쁘다보니 테스트가 뒷전인 경우도 왕왕 있긴 하지만, 한창 배울 신입이 포트폴리오 프로젝트에 이런 테스트를 잘 작성해두었다면, 적어도 작성하려는 노력이라도 했다면 올바르게 잘 배웠다는 인상을 줄 수 있을 거라 확신합니다. 매뉴얼 자체가 영어로 되어있다보니 간혹 영어를 불편해하는 분들도 있고 그래서 테스트를 작성하지 않는 경우도 있는데, 언어보다는 "테스트를 한다"는 게 더 중요하므로 테스트의 설명 부분은 한국어로 작성하셔도 됩니다. 나중에 국제적인 프로젝트가 되면 그 때 영어로 바꿔도 늦지 않다고 생각합니다.

      혹시 질문하실까 미리 말씀드리면 제 개인적으로는 기능이 풍부한 Jest를 선호하지만, 아마 기능이 조금 더 단순하고 사용자와 자료도 훨씬 많아서 답변 구하기가 쉬운 Mocha가 접근하기에는 더 좋으리라 생각합니다. 사실 두 프레임워크의 사용법이 크게 다르진 않아서 한 가지에 익숙해지고 나면 다른 한 가지도 금방 배우리라 생각합니다.

  4. 안녕하세요. 얕은 지식으로 프론트엔드의 직무에 흥미가 생겨 알아보다가 이 글을 접하게 되었어요. 정말 많은 공부가 필요한 직무인 것 같아요. 다시 처음부터 준비를 하려하는데, 나중에 이 면접 리스트를 사용할 날이 오면 좋겠습니다! 좋은 글 감사합니다!

Leave a Reply to parkminjiCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.