주니어 FE 개발자들의 스터디 여정

시작하며

안녕하세요, 저희는 카카오페이 FE 개발을 하고 있는 신입 개발자 가디, 라즈, 마쉬입니다. 가디는 보험 서비스 FE 개발을, 라즈는 머니 서비스 FE 개발을, 마쉬는 비즈니스 서비스 및 결제 FE 개발을 하고 있습니다. 저희는 입사한 후 다양한 스터디를 기획하고 진행해왔는데요. 그 과정에서 경험하고 느낀 바를 함께 공유하려 합니다! 지금부터 저희가 걸어온 스터디의 발자취를 따라가 보실까요~?

우리들의 첫걸음

2022년 초에 입사한 저희는 전면 재택근무로 회사 생활을 시작했습니다. 버디와 팀원들의 많은 도움 덕에 회사 분위기는 금방 적응할 수 있었으나, 업무를 진행하며 아직 모르는 것들이 너무나도 많다는 생각이 들었습니다.

카카오페이의 FE 서비스는 웹뷰 기반의 서비스이기 때문에 웹뷰에 대한 깊은 이해가 필요했습니다. 그러나 웹뷰와 초면이였던 저희는 업무를 진행하는 과정에서 혼돈의 카오스에 휩싸이게 되었습니다. 디바이스와 앱 종류에 따라서 달라지는 스킴의 형태나 다양한 링크 종류들, 웹과 앱 간의 통신을 가능하게 하는 JSAPI(JavaScript API) 등 처음 접하는 개념들이 차고 넘쳐났습니다.

사내에서 당연시 여겨지는 기본적인 개념이었습니다. 모두가 어려움 없이 사용하고 있는 기술이라는 생각이 들기 시작했습니다. 마음 속에 있는 여러 질문을 수면 위로 끌고 올라오는 것이 너무나도 쑥스럽게 느껴졌습니다. 그러나 주위를 살펴보니 길 잃은 양은 저 혼자만이 아니었다는 사실을 알게 되었습니다. 저는 용기를 내어 “동료 양”들을 물색하기 시작하였습니다.

그렇게 의기투합하여 뭉친 세 마리 양들의 첫 번째 스터디가 시작되었습니다! 첫 번째 리팩토링 스터디부터 지금 진행하고 있는 세 번째 패턴 스터디에 이르기까지의 스터디 진행방식을 지금부터 샅샅이 설명해 드리겠습니다!

우리들의 발자취

1. 주제 선정 방식

스터디 주제를 선정할 때 각자 맡고 있는 프로젝트를 진행하면서 아직 잘 모르고 부족하다고 느껴지는 기술적 요소들을 뽑아서 나열해보는 것부터 시작하였습니다. 그리고 우선순위를 정해서 지금 당장 공부하면 좋을 내용들을 스터디 주제로 잡아 일정 및 진행 방식을 계획했습니다.

올해의 스터디 주제로 평소 문법적인 개념이 부족하다고 느꼈던 타입스크립트, “FE 올타임 짱” 벤장님이 추천해주셨던 리팩토링과 디자인 패턴을 선정했습니다. 두둥 ✨

2. 스터디 그라운드 룰

꼭 지키고자 했던 그라운드 룰은 다음과 같습니다.

1. Always CAM ON!
2. 내가 바로 전문가다!
3. 이 세상에 바보같은 질문은 없다!

📷 Always CAM ON!

스터디를 진행할 때 모든 스터디원이 캠을 켜고 참여하는 것이 가장 중요했습니다. 첫 번째 스터디는 캠을 켜지 않고 진행했는데, 스터디가 끝나고 돌아보니 캠을 끄고 하면 몰입도를 떨어뜨리는 것 같아 아쉬웠습니다. 그래서 두 번째 스터디는 모두가 캠을 켜고 진행했습니다. 서로 얼굴을 보며 이야기를 나누니 집중도와 몰입도가 올라갔고 커뮤니케이션도 한결 수월해지는 효과를 얻을 수 있었습니다. 따라서 항상 모두가 카메라를 켜고 스터디에 참여하는 것을 규칙으로 만들었습니다. 최근에 시작한 디자인 패턴 스터디는 오프라인 참석이 가능해져서 온오프라인 혼합 형태로 진행하고 있습니다.

🧐 내가 바로 전문가다!

매주 1회 진행하는 스터디 시간에는 각자가 맡은 파트의 내용을 정리해 발표하는 방식으로 진행했습니다. 본인이 맡은 파트는 마치 그 분야의 전문가가 된 듯이 최대한 모든 내용을 빠삭하게 숙지하여 어떤 질문이 들어오더라도 자신있게 답변할 수 있을 만큼 준비했습니다. 또한 자신만의 발표 흐름을 만들고 스터디원들에게 질문을 던지며 자유롭게 발표를 이끌어 갔습니다.

🔍 이 세상에 바보같은 질문은 없다!

모두의 발표가 끝난 후에는 한 주간 각자 공부하면서 생겼던 질문을 자유롭게 쏟아내는 Q&A 시간을 가졌습니다. 이 시간을 스터디의 정수라고 할 수 있을 만큼 저희에게 가장 재미있고 뜻깊은 시간이었습니다. 나만 모르고 있는 바보 같은 질문일까봐 평상시에 꺼내기 어려웠던 질문을 생각나는대로 던져보며 많은 이야기를 나누었습니다. 서로 다른 서비스를 개발하고 있다보니 다양한 관점의 질문이 나오고 막상 질문을 던져보면 나만 궁금해하던 질문이 아니었다는 사실도 알게 되었습니다.

3️. 노션 정리법

스터디 초반에는 정해진 템플릿 없이 알아서 잘 딱 깔끔하고 센스있게 정리해오는 방식으로 진행했습니다. 그러나 각자가 중점을 두고 발표하는 부분들이 달라 발표 내용 정리의 통일성이 부족했습니다. 그래서 새롭게 스터디를 시작할 때 이전 스터디에서 모두가 좋았다고 생각하는 정리 방식을 취합하여 지금의 템플릿을 완성했습니다.

스터디 정리 템플릿은 크게 6가지의 키워드로 구성되어 있습니다.

Summary

• 한 줄 요약을 통해 발표자는 본인이 주제를 정확하게 이해했는지 점검하고, 스터디원들은 한 눈에 주제를 파악할 수 있습니다.

Concept

• 발표 주제의 이론적 개념 및 필요한 배경 지식을 설명합니다.

Advantages

• 발표 주제를 적용했을 때 얻을 수 있는 이점이나 해결할 수 있는 문제 상황들에 대해 설명합니다.

Disadvantages

• 발표 주제를 적용했을 때 발생할 수 있는 side effect나 trade-off에 대해 설명합니다.

Example Case

• 발표 주제가 적용되어 있는 라이브러리, 실제 업무에 적용되어 있는 코드, 직접 만든 예시 코드들을 첨부하여 이해를 돕습니다.

Wrap-up

• 발표를 마무리하며 발표 주제를 다시 요약하고 정리합니다.

여정을 돌아보며

스터디를 통해 얻은 게 있다면?

Gady 공부해야 할 필요성을 느끼는 주제를 선정하여 스터디를 진행했기 때문에 모두 열의가 뿜뿜 가득 차오른 상태였어요. 본인이 맡은 파트에 대한 예시를 더 적극적으로 찾아오거나 직접 작성해오기도 했어요. 학습한 개념이 적용된 코드를 보면서 이해도를 높일 수 있었을 뿐만 아니라 제 프로젝트에도 적용해보고 싶은 좋을 사례들도 있어 매우 행복한 시간이었답니다. 그리고 스터디 주제 외에 평소 품고 있던 의문점을 가감없이 공유하면서 각자 실무에서는 어떤 방식으로 작업하고 있는지에 대한 많은 이야기를 나눌 수 있어 주니어 개발자인 저로서는 무엇보다도 소중한 시간이었어요.

Marsh 저는 리팩토링 스터디 덕분에 개발 습관이 개선되었어요. 예를 들어 유틸리티 함수를 수정하고자 할 때, 임시 함수를 만들어서 테스트하거나 수정 과정을 커밋으로 남겨서 언제든 롤백이 가능한 상태로 만듭니다. 이 과정이 번거로울 수는 있지만 실제로 작업해보면 언제든지 수정 이전으로 돌아 갈 수 있으니 오히려 작업 시간이 단축되어 좋아요.

또한 타입 스크립트 스터디를 통해 잘 알지 못했던 다양한 키워드와 문법들을 많이 알게 되어서 좋았어요. 자주 사용하지 않는 문법들의 경우 하나하나 외우고 있지는 않지만, 필요하다 싶을 때 검색을 하지 않고 정리해 둔 스터디 노션에 들어와서 바로 찾을 수 있어 유용해요.

Laz 패턴 스터디에서 Hooks 패턴을 공부했던 주차에 가장 활발했던 토론의 장이 열렸는데요, 무엇을 기준으로 Custom hook을 분리할지, HOC나 Presentational/Container 패턴 대비 장점은 무엇인지, SRP를 지키기 위한 추상화 수준은 어느 정도가 적절한지 등 다양한 주제로 대화를 나누었어요. “Custom hook을 사용하는 목적이 여러 컴포넌트에서 사용되는 공통 로직의 추상화라면, 단 하나의 컴포넌트에서만 사용되는 로직을 분리하기 위해 Custom hook을 사용하는 것이 적절한가?” 라는 주제로 열띤 토론을 했던 기억이 생생하네요. 특히 저는 패턴에 대한 확고한 취향이 있다보니 제가 좋아하는 패턴의 장점은 어필하고 단점은 변호할 수 있어서 즐거웠어요.

가장 기억에 남는 순간은?

Gady 저는 스터디 내에서 교수님이라고 불리는 페블의 발표가 가장 기억에 남아요. “내가 바로 전문가다!“라는 스터디 그라운드 룰을 가장 적극적으로 실천하고 있는 팀원이예요. 모두가 발표하게 될 내용에 대해 다양한 자료를 찾아보면서 단순 정보 전달에 그치지 않고 자신만의 언어로 이해한 내용을 공유하려 노력했는데요. 그 중에서도 페블은 본인이 맡은 파트는 책에서 다루지 않은 내용도 더 깊게 조사해와서 어려운 주제도 페블표 풍부한 예시로 이해하기 쉽게 설명해주었어요. 이런 준비성에 모두가 감탄을 금치 못한 적이 한두 번이 아니었답니다.

Marsh 매번 새로운 스터디를 시작할 때마다 이전 스터디에서 개선했으면 하는 점들을 공유하고 보완하는 분위기가 특히 좋았어요! 그렇게 노션 템플릿도 만들게 되고, 전반적인 진행 방식도 정했답니다. 모든 발표가 끝난 후 Q&A를 진행할 때, 명확한 답이 있는 경우도 있었지만 긴 토론 후에도 결론이 지어지지 않을 때가 있었는데요, 답을 찾지 못했던 주제에 대해 프로젝트를 진행하며 제 나름의 결론을 내렸을 때 뿌듯했어요. 저희가 공부한 스터디 내용과 Q&A 기록들은 모두 노션으로 정리되어있어요. 저희 스터디 뿐만 아니라 다른 카카오페이 FE의 스터디도 노션에 공개되어 있어, 관심이 있었지만 참여하지 못한 스터디 내용도 확인할 수 있어 좋아요.

아쉬웠던 건 없었나요?

Gady 초기 스터디는 3~5명 정도의 규모였기 때문에 매주 모두가 하나의 주제를 맡아서 발표할 수 있었어요. 현재 진행 중인 디자인 패턴 스터디는 8명으로 규모가 커졌는데요. 그러다보니 매주 스터디 시간 내에 모두가 발표하기 어려워 2개의 조로 나누어서 격주로 발표하게 되었어요. 이로 인해 매주 발표 준비를 해야 하는 압박감과 부담감으로부터 해방되었지만 뒤돌아 생각해보니 발표를 맡지 않은 주간에는 스터디 준비에 내가 좀 소홀하지 않았나 반성하게 되더라고요. 그리고 인원이 많으니까 토론할 때도 모두가 말하기 어려운 상황도 있었고 나 말고 누군가는 말해주겠지라는 생각이 가끔씩 스쳐지나가기도 했어요. 인원이 많은 스터디를 진행하더라도, 모두가 적극적으로 참여할 수 있는 방법에 대해 고민해 볼 필요성을 느꼈어요.

Laz 주니어 개발자 위주의 스터디다 보니 경험해보지 못한 주제로 토론할 때 탁상공론에 그치는 경우가 종종 있어서 아쉬웠어요. 예를 들어 CSR, SSR, React Server Components 등 렌더링 패턴을 공부할 때 개념이나 자료에 나와있는 장단점은 이해하고 공감하지만, 그 이상으로 실제 적용해 본 후기를 공유하거나 사용해 본 경험에 빗대어서 의견을 제시하는 경우는 적었어요. 그러다 보니 스터디원들의 연차가 다양했으면 어땠을까 하는 아쉬움이 남았어요.

마치며

스터디를 시작하며 길을 잃어 갈팡질팡하던 한마리의 양에서 같이 길을 찾아갈 “동료 양”을 만나게 되었습니다. 혼자였다면 중간에 포기할 법한 분량의 내용들을 같이 공부하고, 서로의 고민을 마치 자신의 고민처럼 진지하게 들어주며 해결 방법을 모색하기도 했습니다. 이런 시간들이 쌓이면서 자연스레 전우애는 돈독해졌고 낯설었던 개념들도 익숙해지기 시작했습니다.

저희의 경험을 비추어 보았을 때 스터디를 할 때 가장 피해야 할 것은 단순히 이론적 측면에서만 스터디 내용에 접근하는 것이라고 생각합니다. 진정한 스터디는 공부한 내용을 어떻게 자신의 프로젝트에 접목할 수 있을지 스터디원들과 함께 고민하고 토론하는 시간에서 만들어진다고 느꼈습니다.

앞으로 함께 하고 싶은 스터디 주제들이 아직 많이 있습니다. 단순 개발 공부 뿐만 아니라 인프라 스터디, 사내 개발 환경을 좀 더 잘 활용할 수 있는 스터디 등 다양한 주제로 진행해보고 싶습니다. 사내 개발 환경을 바탕으로 한 사이드 프로젝트까지 진행한다면 재미있게 새로운 기술을 익힐 수 있지 않을까 싶습니다. 더 나은 스터디를 위해서 고민하고 개선해야 할 숙제도 남아 있습니다.

저희의 스터디 여정은 이제 막 닻을 올리고 항해를 시작했습니다. 저희가 걸어왔던 스터디 여정을 짧게나마 함께 하시면서 “나도 스터디를 시작해봐야지!” 라고 생각하신 분이 많으실 텐데요~ (저희의 바람입니다…ㅎ) 앞으로 새롭게 시작될 여러분의 항해에 이 글이 작게나마 도움이 되었으면 좋겠습니다~