개발자 온라인 컨퍼런스 준비하며 느낀 점

지난 3월 26일, 나는 패스트캠퍼스에서 주최한 ‘캠프콘’이라는 개발자 온라인 컨퍼런스에 연사로 참여했다. <2024년 프론트엔드 트렌드로 살펴보는 회사가 뽑고 싶어 하는 신입/주니어의 기준>이라는 주제로, 2024년 취업/이직을 준비하는 웹 프론트엔드 개발자들이 알면 도움이 될 만한 트렌드와 실질적인 가이드를 담았다.

처음 패스트캠퍼스 측에 연사 제안을 받고, 어떤 주제로 이야기하는 것이 좋을까 많이 고민했다. 당시 나도 이직 준비를 하고 있어서, 크게 전할 만한 이야기가 없다고 생각했다. 그래서 참가자분들께 어떤 이야기가 도움이 될지 주제를 선정하기까지 오래 걸렸는데, 캠프콘 참가 대상이 ‘주니어 프론트엔드 개발자’와 ‘취업 준비를 하는 분들’이니, 이직이나 취업을 준비하는 과정에서 도움이 될 만한 주제로 발표했으면 좋겠다고 전달받았다. 그래서 엄청 대단한 이야기보다는 몇 년 앞서 그 길을 걸은 사람으로서, 취업/이직을 할 때 고려하면 좋을 점들을 솔직하게 말해보면 좋겠다는 생각이 들었다.

그래서 주제를 크게 두 가지로 결정했다.

1. 2024 프론트엔드 트렌드
2. 회사가 뽑고 싶어 하는 신입/주니어의 기준

아무래도 프론트엔드는 트렌드가 빠르게 바뀌는 경향이 있고, 개인적으로 실질적인 이력서, 코딩테스트, 과제 전형, 기술 인터뷰 등에 대해 도움을 받을 수 있는 곳이 많지 않다고 느꼈기 때문이다. 이번 글에서는 필자가 개발자 컨퍼런스 캠프콘에서 어떤 내용들을 다뤘고, 느낀 점은 무엇인지 공유하고자 한다.

*이 글은 발표 내용을 간단히 정리한 글로, 마지막에 첨부한 발표 자료를 함께 참고해 주시길 바랍니다.

2024년 프론트엔드 트렌드 살펴보기

강연의 1부는 <2024년 프론트엔드 트렌드 살펴보기>라는 주제로 진행했다. 세부 주제로는 프로그래밍 언어, 프레임워크/라이브러리, 빌드 도구/번들러, CSS/스타일링, 그 외까지 다섯 가지로 세분화했다. 사실 이러한 주제 말고도 프론트엔드 분야 트렌드는 정말 많지만, 그걸 다 다루기에는 물리적인 시간도 부족했고, 또 너무 세부적인 내용까지 다루면 듣는 사람도 부담일 것 같아 크게 다섯 가지 주제에 집중하기로 했다. (결과적으로 이 다섯 가지 주제를 다루는 데에도 생각보다 시간이 많이 소요됐다.)

1) 프로그래밍 언어

프로그래밍 언어 주제에서는 자바스크립트, 타입스크립트에 대한 이야기를 가장 많이 했다. 자바스크립트는 2024년 기준으로 ECMAScript2023 버전까지 나왔고, 타입스크립트는 5.3 버전까지 나왔다. 새로운 메이저 버전이 나올 때마다 기능이 추가되고 있지만, 사실 이러한 변경 사항보다는 자바스크립트는 비동기 처리와 ES6 이후의 문법을, 타입스크립트는 타입 추론, 제네릭, 유틸리티 타입 등 실무에서 많이 쓰는 내용들을 더 강조했다. 

그리고 최근 구글 크롬팀 등에서 주목하고 있는 ‘WASM(WebAssembly)’에 대해서도 관심을 두고 살펴보면 좋겠다고 이야기했다. 현대 웹에서는 점점 더 높은 성능의 애플리케이션이 등장하고 있고, 이를 자바스크립트로 브라우저에서 처리하는 것에는 한계가 있다. WASM으로 C++이나 Rust 같은 저수준 언어를 컴파일하는 방식이 앞으로 주목받을 것이며, 실제로 기술 트렌드를 빠르게 읽어나가는 팀에서는 이러한 저수준 언어들로 서비스를 만들고 있다. 대표적으로 ‘ESBuild’나 ‘Turbopack’이 있다. 그렇다고 지금 당장 러스트를 배우라는 뜻은 아니고, 지금은 자바스크립트, 타입스크립트만 잘 학습해도 충분하다.

각 주제별로 실제 면접에서 물어볼 수 있는 질문도 조금씩 넣어 보았다. 아무래도 프로그래밍 언어와 관련해 프론트엔드 개발자는 자바스크립트를 쓰는 경우가 가장 많을 것이고, 그중에서도 비동기 처리 질문이 개인적인 경험으로 가장 많았다. 브라우저 런타임에서 비동기를 어떻게 처리하고, 그 안에서 정확한 시간만큼 시간 지연을 해주고 싶다면 어떻게 해야 하는지 등 이와 관련된 질문으로는 얼마든지 꼬리에 꼬리를 물 수 있다. 이 부분은 구글링해 보면 예상 질문들이 많으니, 스스로 부족하다고 느낀다면 학습해 보기를 권장한다.

2) 프레임워크/라이브러리

2024년 현재 개발자들이 리액트를 가장 많이 사용하고 있지만, 리액트뿐만 아니라 뷰(Vue), 스벨트(Svelte) 등의 라이브러리도 비교해서 살펴보았다. 라이브러리나 프레임워크는 유행에 따라 변한다. 5년 뒤, 10년 뒤에 계속 프론트엔드 진영에서 리액트를 쓸지, 아닐지는 아무도 모른다. 그래서 나는 특정 라이브러리를 잘하는 것이 중요하기보단, 그 라이브러리가 왜 생겼고 어떤 문제를 해결하는지에 더 주목해야 함을 강조했다. 예를 들어, 뷰는 리액트보다 마이그레이션을 수월하게 할 수 있고, HTML, CSS, JS를 하나의 뷰 파일에서 다 관리하기 때문에 이해하기 수월한 장점이 있다. 그리고 스벨트는 리액트에 비해 사용하는 코드 수가 적고, 가상 돔을 사용하지 않기 때문에 오버헤드가 적다. 또한 코드를 바로 자바스크립트에 컴파일하므로 앱을 빠르게 시작할 수 있다.

여기에 연관해서 서버 사이드 렌더링 프레임워크인 Next.js, Solid.js, Astro, Qwik 등에 대해서도 살펴보았다. 현시점에서는 Next.js가 압도적으로 많이 쓰이고 있다. 하지만 위와 같은 이유로 Next.js를 잘 쓰는 것보다, 다양한 서버 사이드 렌더링 프레임워크들이 어떤 문제를 해결하기 위해 만들어졌고, 어떻게 해결하고 있는지를 아는 것이 더 중요하다. 예를 들어, Qwik은 이름처럼 빠른 성능을 지향하기 위해 최소한의 자바스크립트 코드를 내려받는 것을 지향하면서 가능한 모든 코드를 비동기로 처리하고 있다. Astro는 Next.js와 달리 SSR을 우선으로 생각하고, 필요시 CSR을 선택한다. 다른 UI 프레임워크 언어들에 비해 덜 복잡하게 설계가 되었다는 점이 장점이고, 이는 브라우저가 아닌 서버에서 렌더링이 되도록 설계했기 때문이다.

3) 빌드 도구/번들러

빌드 도구, 번들러에서는 웹팩, 롤업 등의 Node 번들러 도구를 먼저 살펴본 후, ESBuild와 비트(Vite)로 이어지는 번들러와 빌드 도구의 변화를 살펴보았다. 웹팩은 코드 스플리팅도 지원하고, 로더, 플러그인, HMR도 지원해서 많은 개발자에게 오래 선택 받아왔다. 그러나 점점 프로젝트 규모가 복잡해지면서 설정이 어려워졌고, 러닝 커브가 올라가면서 복잡도의 증가, 빌드 시간의 증가 등 한계가 나타나기 시작했다. 웹팩, 롤업, Parcel 등의 번들러는 전반적으로 비슷했는데, node_modules의 코드 베이스를 묶어서 바벨과 같은 트랜스파일러로 빌드 프로세스를 실행하고 번들링 된 코드를 브라우저에 제공했다.

이러한 기존의 방식을 바꾼 도구로 ESBuild, Vite 등이 있다. Go로 작성된 ESBuild는 기존의 노드 기반 번들러보다 수십 배 이상 빠른 빌드 속도를 가지는 장점이 있다. 그래서 이 ESBuild를 사용한 도구들이 많이 생겼고, 그중 대표적인 도구가 바로 snowpack이었다. 여러 장점이 있었지만, 운영(production) 환경에서 쓰기에는 불안정하거나 지원하지 않는 영역이 다소 있었고, 그렇게 나온 대안이 Vite다.

Vite는 빠른 개발 서버를 지향하며, 운영 환경에서도 롤업 플러그인을 통해 최적화된 사전 구성 프로덕션 빌드를 지원한다. 또한 코드 스플리팅과 레이지 로딩, 비동기 청크 로딩도 지원하고 있어, 기존에 웹팩, 롤업이 가진 다양한 기능과 ESBuild의 빠른 빌드 속도를 가져갈 수 있는 장점이 있다.

4) CSS/스타일링

이 주제에서는 기존의 CSS-in-JS 방식의 라이브러리들이 가진 문제점(e.g. 런타임 동작)을 해결할 수 있는 StyleX, Vanilla Extract 등의 도구에 대해 살펴보았다. 우선 TailwindCSS는 유틸리티 퍼스트 CSS 프레임워크(Utility-first CSS Framework)다. 기존에 컴포넌트 퍼스트 CSS 프레임워크(Component First CSS Framework)에 부트스트랩이나 MUI 등이 해당됐는데, 확장 가능성이 작고 커스터마이징에 한계가 있었다. 이를 해결하기 위해 나온 도구가 TailwindCSS다.

기존의 CSS-in-JS 방식 도구인 emotion이나 styled-components 등의 도구가 많이 사용됐지만, 런타임에 브라우저에 CSS를 주입하여 추가적인 자원 사용과 처리 시간이 발생했고, 이는 성능에 영향을 주었다. 이를 해결하기 위해 나온 도구가 StyleX, 그리고 Vanilla Extract이다.

StyleX는 원자 CSS(Atomic CSS) 방식을 유지하며 CSS 출력을 최소화하고, 컴포넌트 수가 증가해 프로젝트 크기가 커지더라도 CSS 크기가 일정하게 유지된다. Vanilla Extract는 런타임 CSS-in-JS의 문제점을 해결하기 위해 zero-runtime CSS-in-JS 방식으로 등장했다. 런타임이 아닌 빌드 타임에 ts 파일을 css 파일로 만들고, tailwindCSS처럼 아토믹 CSS를 구성할 수 있다.

5) 그 외

그 외에도 모노레포 도구, 테스팅 라이브러리, 패키지 매니저 등의 도구들을 살펴보았다.

• Supabase: Firebase의 오픈 소스 대안으로, 실시간 데이터베이스와 인증 등을 제공하는 백엔드 서비스
• pnpm: 효율적인 패키지 관리와 빠른 설치 속도를 제공하는 패키지 매니저
• Playwright: 다양한 브라우저를 지원하며 크로스 브라우저 테스트를 위한 강력한 엔드 투 엔드 테스트 도구
• Turborepo: 대규모 모노레포 프로젝트를 위한 고성능 빌드 시스템
• MSW(Mock Service Worker): 프론트엔드 개발 및 테스트를 위한 네트워크 요청 모킹 도구

취업/이직을 위한 실전 가이드

강연의 2부는 <취업/이직을 위한 실전 가이드>라는 주제로 진행했다. 세부 주제로는 이력서/서류전형, 코딩테스트/과제, 기술 인터뷰 이렇게 세 가지로 세분화했다.

1) 이력서/서류 전형

우선 이력서를 쓰는 과정에서 주의해야 할 점과 어떤 포인트를 이력서에서 강조해야 하는지 이야기했다. 실제로 채용 담당자가 이력서 한 장을 살펴보는데 걸리는 시간은 30초가 채 안 되기 때문에, 이 30초 안에 강점을 어필해야 한다. 그러기 위해서는 내가 무엇을 어필하고 싶은지, 우선순위를 정해두어야 함을 강조했다.

또한 이력서를 작성할 때 단순히 내가 한 일만 나열하는 것이 아닌, STAR(Situation - Task - Action - Result) 형식으로 작성할 것을 추천한다. 그리고 회사에 직접 지원하는 방법뿐만 아니라 지인 추천, 즉 레퍼럴을 통해 지원하는 방법을 적극적으로 활용하면 좋다. 이에 더해 본인이 한 업무를 여러 개를 적기보다는 단 한 개라도 좋으니 가장 많이 기여했거나, 가장 깊게 고민한 부분을 중점적으로 어필하는 것이 효과적이다.

2) 코딩테스트/과제 전형

개발자라면 반드시 거쳐 가야 하는 코딩테스트를 어떻게 준비해야 하는지, 과제 전형은 어떻게 해야 하는지에 대해 이야기했다. 먼저 코딩테스트를 준비할 때 보통 백준이나 프로그래머스, 리트 코드 등을 많이 사용하는데, 거기서 가장 많이 출제되는 유형 10가지에 대해 각각 10문제씩 풀어서 총 100문제를 직접 풀어본다면, 웬만한 기업 코딩테스트에서 합격할 수 있을 것이라고 이야기했다. 많이 나오는 유형으로 해시, 스택, 큐, 힙, 그리디, 정렬, DP, DFS/BFS, 이분 탐색 등이 있다. 이러한 유형의 문제를 시간을 정해 충분히 풀어보아야 한다.

과제 전형에서도 단순히 내가 이 기능을 구현할 수 있는지의 수준을 넘어, 기능 구현을 익숙하게 할 수 있다는 점을 어필하면 좋다. 더 나아가 여기서 주어진 요구사항에 없는 고민 포인트를 찾아, 그것을 결과물에 적용할 수 있는지 연습해 볼 것을 권장했다.

3) 기술 인터뷰

기술 인터뷰에서는 어떤 예상 질문을 준비할지, 또 성공 가능성을 높일 수 있는 방법에 대해 다뤘다.

기술 인터뷰에서 단골로 나오는 질문들을 대비하고 가면 좋다. 예를 들면,

1. 자기소개(나의 개발 커리어, 어떤 강점이 있는지, 어떤 관심사를 가지고 있는지)
2. 가장 주도적으로/도전적으로 참여했던 작업에 대한 경험
3. 이직하는 경우라면, 왜 이직하게 되었는지(여기서 주의할 점은 전 회사나 전 회사 동료를 비난하는 방향으로 답변해선 안 됨)

물론 회사마다 질문은 다 다르다. 개인적인 경험으로는 지식 기반의 질문보다는 경험/성과 기반의 질문을 많이 하는 회사가 내가 더 가고 싶은 회사인 경우가 더 많았다. 그런 경우에는 정답이 따로 없으므로, 완벽하게 답변하려고 하기보다는 본인의 생각, 경험 기반으로 솔직하게 대답해 보자. 그다음 면접관들과 함께 답을 찾아가는 방향으로 면접에 임하는 방향이 더 바람직하다.

마치며

이번 컨퍼런스를 준비하며 나의 이직 준비 경험에 대해서도 온전히 돌아보게 되었다. 최근 오랜만에 이직을 준비하며 많은 시행착오를 겪었고, 많은 면접에서 불합격했기 때문이다. 그 과정에서 나에게 부족한 점이 많음을 느꼈고, 어떻게 보완할 수 있을지 스스로 복기하는 시간을 가졌다. 

면접을 준비하면서 느낀 점은 신입/주니어가 면접을 준비하는 방법에는 어느 정도 답이 정해져 있다는 것이다. 경력직(일반적으로 4년 차 이상)은 논외로 치고, 신입/주니어의 취업, 이직에서는 지원자가 가지고 있는 잠재력이 정말 중요하다는 생각이 들었다. React도 약 2년 전 18 버전이 새롭게 나왔고, Next도 약 1년 전 13 버전이 새롭게 나왔다. 그러면서 기존에 방식과 다르게 동작하는 기능이 많이 생겼다. 이러한 변화는 앞으로도 프론트엔드 진영에서 많이 나타날 것으로 보인다. 그렇다면 회사 입장에서는 새로운 버전을 빠르게 배우고 적용할 수 있는 사람을 더 원할 것이라는 확신이 들었다. 

물론 신입/주니어 포지션에서 취업, 이직이 예전에 비해 정말 어려워졌음에 깊이 공감한다. 그럼에도 취업/이직에 성공하는 사례가 있고, 그들을 보면 누구보다 노력했음을 알 수 있다. 회사마다 원하는 인재상은 조금씩 다르기에, 모든 회사에 합격할 수 있는 마스터키를 찾기보다는 특정 회사를 공략하는 방식이 더 수월할 것이다. 

약 5년 전만 하더라도 대학교를 졸업할 때, 대졸 공채를 통해 입사하는 경우가 많았다. 그러나 지금은 대졸 공채 방식보다 상시 채용, 수시 채용 방식이 훨씬 더 많아졌다. 신입/주니어 개발자가 갈 수 있는 회사들은 공채 방식이 아닌 특정 직군별(웹 프론트엔드 개발자, 백엔드 개발자, 안드로이드 개발자, iOS 개발자 등)로 모집하는 채용 공고가 더 많아진 것이다. 신입/주니어 포지션에서 전문성을 증명해야 하는 상황이라 부담되는 것도 사실이지만, 본인의 전문성을 인정받을 수 있다면 상대적으로 쉽게 채용되기도 한다.

이전과 비교해 채용 프로세스가 많이 바뀌었지만, 그래도 회사가 뽑고 싶어하는 신입/주니어의 인재상은 크게 바뀌지 않았다고 생각한다. 나 또한 이번 컨퍼런스를 준비하며, 개발 트렌드를 읽고 나만의 강점을 찾는 것에 더 몰입할 수 있었다. 현재 취업을 준비 중이라면 가고 싶은 회사의 니즈를 잘 파악한 후, 나만의 강점을 잘 다듬어 보자. 열심히 준비하다 보면 분명 좋은 결과가 있을 것이라 믿는다.

발표 자료: 2024 프론트엔드 트렌드로 살펴보는 회사가 뽑고 싶어 하는 신입/주니어의 기준

<원문>

패스트캠퍼스 컨퍼런스인 캠프콘을 준비하며

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.