프론트엔드 개발자, 어떻게 공부해야 할까?

저는 현재 프론트엔드 개발을 시작한 지 6년 정도 된 프론트엔드 개발자입니다. 요즘 들어, 면접관으로서 많은 취준생분들을 만나기도 하고 개발자로 직업을 전향하길 희망하는 분들도 많이 만나다 보니 느끼는 부분이 많은 것 같습니다. 느낀 점을 토대로 이번 포스팅을 통해 프론트엔드 개발자가 되려면 어떻게 공부하면 좋을지 개인적인 의견을 얘기해보려 합니다.

왜 프론트엔드 개발자인가?

우선 어떻게 공부할지를 생각하기 전에 이 부분이 명확해야 할 것 같습니다. 가끔 면접관으로서든, 친구로서든 얘기를 나누다 보면 "왜 개발자를 하고 싶은지"가 없는 느낌을 받을 때가 많습니다. 사실, 각자 나름대로 여러 가지 이유가 있을 것이라고 생각합니다.

 

그 이유가 무엇이 되었든 큰 문제가 되지는 않는다고 생각합니다만, 이왕이면 명확하면 좋지 않을까요?

 

왜 프론트엔드 개발자여야 하는지도 마찬가지 문제라고 생각합니다. 면접관으로서 "프론트엔드 개발자가 되고 싶은 이유가 무엇인가요?"라는 질문을 하면 많은 분들이 생각보다 그 이유가 명확하지 않은 것 같습니다.

 

이런 대답은 어떨까요?

 

"개발한 서비스의 사용자 경험(UX)을 높일 수 있는 방법을 생각해 보고 이를 나름대로 개선한 후, 주위에 물어봤을 때 이전보다 만족한 모습을 보는데 재미를 느꼈어요"

 

이 대답이 정답이라는 것도, 면접 질문에 대한 하나의 정답을 얘기하는 것도 아닙니다.

 

개인적인 생각으로 프론트엔드 개발자의 개발 목표는 사용자 경험을 높이는 데 있다고 생각합니다. 사용자 경험을 개선하는데 많은 부분을 뜯어고쳐야 하더라도 그게 사용자 입장을 이해하는데 맞는 방향이라는 생각이 든다면 당장은 힘들 수 있지만 나중에라도 고치는 게 필요한 것 같습니다.

 

이는 제 개인적인 의견일 뿐입니다. 다만, 개발자가 되고 싶은 분들이라면, 프론트엔드 개발자를 꿈꾸시는 분들이라면 한 번쯤은 이 부분을 명확히 짚고 "왜?"라는 질문을 스스로에게 던져보는 것도 좋을 것 같습니다.

 

이 질문에 명확하게 답할 수 있는 상태가 되었다면 좋은 개발자가 될 준비가 되었다고 생각합니다.

그럼 어떻게 공부해야 할까?

프론트엔드 개발자가 되고 싶은 이유가 명확해졌다면 이제 그냥 공부만 하면 됩니다. 사실, 말이 쉽지 프론트엔드 개발자가 되기 위해서 알아야 할 것들이 너무 많게 느껴질 수 있습니다.

 

프론트엔드 개발자라면 한 번쯤은 아래의 프론트엔드 로드맵을 본 적이 있으실 거라 생각합니다. 저도 로드맵을 처음 봤을 때 "이걸 언제 다 공부해"라는 생각과 함께 막막했던 것 같습니다.

 

모두를 다 공부할 필요는 없습니다. 필요한 부분들을 하다 보면 자연스레 알게 되는 부분도 많기 때문입니다. 서론이 길었으니 이제 제가 나름대로 프론트엔드 개발자가 되기 위해 공부했던 방법을 소개해보려고 합니다.

프레임워크나 라이브러리는 나중에, 일단은 기본부터

여기서 말하는 기본에 일단 CS(Computer Science)는 제쳐두도록 하겠습니다. 왜냐하면 요즘 전공자가 아닌 분들이 많이 개발자를 도전하는데 "CS가 가장 기본이니 이것부터 해야 돼"라는 말은 개인적으로 프론트엔드 개발자가 되기를 포기하라는 말과 같다고 생각합니다.

 

물론, 더할 나위 없이 중요하긴 하지만 우선은 개발에 재미가 생기고 어느 정도 지식도 쌓인 상태에서 "이게 이거였구나"라는 식으로 하나씩 공부해도 나쁘지 않은 방법이라고 생각합니다.

 

프론트엔드 개발자는 HTML, CSS, JavaScript를 정확하게 이해하고 이를 이용해 구현할 줄 아는 게 중요합니다. 요즘에는 빠르게 공부하고 빠르게 취직하는 것을 선호하는 현상이 나타나긴 하지만, 이럴 때일수록 프론트엔드 개발자의 기본이라고 할 수 있는 이 3가지의 숙련도를 높이는 게 중요하다고 생각합니다.

 

이 3가지 만을 이용해서, TodoList 혹은 Trello 같은 작은 애플리케이션을 개발해 보시는 것을 추천드립니다. 그리고 가장 중요한 것은 개발을 마무리하고 다른 걸 만들어보기보다는 좀 더 좋은 방법으로 구현할 수는 없는지를 고민해 보는 것이 좋습니다.

 

예를 들면 "생성자 함수"로 구현한 것을 "클래스"로 구현해 본다든지와 같은 좀 더 깊이 있는 고민도 해보면서 더 좋은 방향을 찾는 연습을 할 필요가 있습니다. 이러한 과정을 반복하다 보면 어느 정도 프론트엔드 개발에 대한 기본이 나도 모르게 쌓이게 될 거라고 생각합니다.

 

이후, React든 Vue든 공부하고 기존에 Vanilla JS로만 구현했던 것들을 한 번 바꿔보고 또다시 위와 같은 방식을 반복하는 것을 추천드립니다.

 

JavaScript에 대해 공부할 때 개인적으로 가장 많이 읽고 많이 도움 되었던 책을 하나 추천드립니다. "인사이드 자바스크립트"라는 책인데, 책의 두께도 그렇게 두껍지 않아 읽기 좋고, 내용도 꽤나 깊이 있었던 책이었습니다.

포트폴리오? 이력서 기반의 개발은 아닐지...

최근 들어 부트캠프든 인강이든 여러 경로를 통해 개발 공부를 시작하시는 분들이 많은 것 같습니다. 어떤 공부 방식이든 장단점이 있지만 한 가지 아쉬운 부분이 있다면, 너무 이력서를 화려하게 만드는 것에만 집중되는 것 같습니다.

 

화려하게 만든다는 게 뭔가 겉보기를 꾸미는 것을 말하는 게 아닙니다. 중간중간 쉬면서 본인이 포트폴리오를 많이 만드는 것에 어느샌가 집중하고 있지 않나 생각해 볼 필요가 있을 것 같습니다. 저는 포트폴리오를 많이 만드는 게 중요하다고 생각하지 않습니다.

 

포트폴리오는 만들어야 한다면 기본이 된 상태에서 하나 정도를 깊이 있게 치열하게 고민하면서 만들어보는 것을 추천합니다. 같은 기술을 혹은 같은 역할을 하는 라이브러리를 바꾸기만 해서 포트폴리오를 여러 개 만드는 것은 큰 의미가 없다고 생각합니다.

 

예를 들어보겠습니다. 인스타그램 클론코딩을 한다고 하면, 대부분의 사람들은 인스타그램을 클론 코딩만 하고 끝냅니다. 인스타그램을 클론 코딩 했을 때 고민할 것들은 UI/UX적인 것만 있는 게 아닙니다. 프론트엔드 개발자로서 추가적으로 고민할 수 있는 부분을 간단히 몇 가지만 생각해 보면 다음과 같습니다.

 

1. 인스타그램은 사진을 피드로 보여주는 게 주목적입니다. 그럼 보여줘야 할 피드가 무수하게 많다면 렌더링 성능은 문제가 없을까요?
2. 인스타그램의 "좋아요"는 더블클릭 기반으로 동작합니다. 그렇다면 더블클릭 시 보여줄 애니메이션은 어떻게 구현하면 좋을까요?
3. 여러 개의 사진을 올리면 캐러셀 UI로 보여주게 되는데, 사진이 만약 엄청나게 많다면 렌더링 성능에 문제는 없을까요? 생긴다면 몇 개 정도의 제한을 둘 수 있을까요?
4. 화면에 보여주는 속성들 중 동적으로 관리되고 있는 속성들은 없을까요? 이런 것들은 보통 백오피스 애플리케이션에서 관리하게 될 텐데 어떤 식으로 백오피스를 구현할 수 있을까요?

 

제가 예시로 든 것들을 생각하는 게 어려울 수는 있지만 여러 애플리케이션을 만드는 것보단 이런 맥락으로 생각하면서 좀 더 현재 개발한 애플리케이션을 개선하는 게 프론트엔드 개발자로서 더 도움이 될 거라고 생각합니다.

마지막으로 Computer Science

보통 컴퓨터 공학과, 과학과의 커리큘럼을 보면 OS, 네트워크, 자료구조, 알고리즘 이런 CS 지식들을 자연스럽게 습득하는 것을 목적으로 두고 있습니다. 그만큼 프론트엔드 개발자뿐만 아니라 개발자가 되기 위해선 중요한 지식들입니다.

 

그럼에도 불구하고, 이를 마지막으로 둔 이유는 전공이 아닌 분들은 4년간 배우는 저 지식들을 다 공부하고 개발이라는 것을 시작하기엔 현실적으로 불가능하기 때문입니다.

 

어느 정도 프론트엔드 개발자로서 기본도 다졌고, 깊이 있는 고민을 하면서 포트폴리오 하나도 제대로 만들어봤다면, 저런 CS 지식들을 조금씩이라도 공부하시는 것을 추천드립니다. CS 관련 서적들은 내용이 굉장히 방대하기 때문에 개인적으로는 인터넷 강의를 들으면서 공부하시면 좋을 것 같습니다.

 

단, 개인적으로는 CS 지식들을 단순히 외운다는 느낌보다는 알고 있는 개발 지식과 연결 지으면서 공부했던 게 기억에 오래 남았던 것 같습니다.

 

예를 들면, 내가 애플리케이션을 구현하는 과정에서, 애플리케이션이 실행되는 과정에서 실제 OS는 어떻게 동작하고 있을지, 브라우저에서는 애플리케이션을 렌더링 할 때 어떤 과정으로 보여줄지, 네트워크단에서는 어떻게 동작할지 등을 고민하는 것 등이 있을 것 같습니다.

결론

제가 이번 포스팅에서 소개한 프론트엔드 개발자, 혹은 타 개발자들에 대한 소개나 내용들이 정답이 아닐 수는 있습니다. 각자마다 맞는 공부 방법이 있다고 생각하기 때문에 정답은 없다고 생각합니다. 그래도 새로운 도전을 하는 분들에게 이 글이 조금이나마 도움이 되는 글이었으면 좋겠습니다.

 

마지막으로 개인적으로 공부한 내용들을 깃허브에 따로 정리를 해둔다거나 문서화를 해두는 것도 좋은 방법입니다. 그리고 정리한 내용들을 기회가 되면 다른 사람에게 발표를 해보거나 알려주는 것도 더 오래 기억에 남길 수 있는 좋은 방법입니다.