FE개발팀의 기술 공유 문화, FE 기술블로그를 소개합니다!

 

 

안녕하세요, 

Tech Recruiter Kayla입니다.

 

오늘은 기술 공유 문화 조성에 앞장서고 있는 FE개발팀 크루들을 만나봤습니다.

 

기술 공유 문화 조성을 앞장선다고요?

'무얼 하는데 그렇게 말하는 거지?'라는 생각이 드실 텐데요!

 

뭐, 남들이 다 하는~

사내 기술 스터디? 당연히 하고 계시고요~

멘토링? 신입 개발자를 위한 멘토링과 OJT 프로그램도 체계적으로 준비되어 있고요~

내부 세미나? 데모데이도 활발히 운영하고 있고요~

 

 

그럼 도대체 뭐!!!

 

 

바로!

FE개발팀이 운영하고 있는 'FE 기술블로그'입니다!!!

 

홈

 

 

2021년 하반기부터 차근차근 준비하여

올해 3월! 외부에 공식 오픈했는데요,

외부에 공개한 지 6개월 만에

방문자수 약 5만 명, 누적 조회수 약 15만 뷰를 달성하는 등

엄청난 성장세를 보이고 있습니다.

 

 

그래서 오늘,

'FE 기술블로그'를 소개하기 위해

FE개발팀 크루들을 직접 만나 인터뷰도 하고,

소소한 응원파티도 마련해보았습니다. 

 

 

 

FE개발팀 크루들의 열정을 응원하는 마음을 담은 하트배열😌

 

 

 

FE개발팀 모두가 함께 만들어 나가는 문화이지만~

그중에서도 최초 10,000 뷰를 돌파한 Cheese와

타사 개발자들에게 주목받고 있는 글을 작성해주신 Kai,

그리고 FE개발팀을 이끌고 있는 shiren에게 물었습니다!

 

 

 

카이, 시렌, 치즈

 

 

 

'FE 기술블로그,

왜 만들어졌고

어떻게 운영하고 있고

앞으로의 목표는 무엇인가요?'

 

 

---

 

 

안녕하세요! 시렌, FE 기술블로그를 만들게 된 계기가 궁금합니다.

 

shiren : 블로그를 통해 기술을 공유하는 것은 다른 사람에게 지식을 전달하는 '공유' 그 자체로도 큰 의미가 있지만, 알고 있는 내용을 남에게 전달하려는 목적으로 이렇게 정리해 볼 때 오히려 자신의 이해도를 높일 수 있고, 이해가 부족한 부분에 대한 메타인지도 할 수 있습니다.

그래서 FE 기술블로그를 만든 가장 큰 이유는 크루들의 역량 및 기술력을 증진시키고 확보하는 것에 있습니다. 또, 다들 아시다시피 좋은 분들을 모시기 위한 노력이기도 하고요 :)

 

💡 메타인지란?
메타인지 또는 상위인지는 자신의 인지 과정에 대해 관찰 · 발견 · 통제 · 판단하는 정신 작용으로 "인식에 대한 인식", "생각에 대한 생각", "다른 사람의 의식에 대해 의식", 그리고 고차원의 생각하는 기술이다.

 

 

 

처음 FE개발팀 크루들에게 기술블로그를 만들자고 했을 때, 크루들의 반응은 어땠나요?

 

shiren : 기술블로그에 대한 팀원들의 부담감을 충분히 이해하고 있기에 걱정을 많이 했었는데요. 의외로 큰 무리 없이 시작할 수 있었습니다. 아무래도 요즘은 IT기업들이 기술블로그 운영을 많이 하고 있고, 개발자에게 글쓰기가 많이 권장되고 있으며 그 효용성에 대한 사례도 많이 공유되었기 때문에 어느 정도 공감대가 있지 않았나 생각합니다. 글쓰기에 대한 부담을 줄여주기 위해 충분히 시간을 확보할 수 있도록 조직 차원에서도 신경을 많이 쓰고 있고요. 물론 글쓰기보다는 업무가 우선이기에 업무 상황에 따라 스케줄을 유연하게 조정하고 있습니다.

 

 

 

 

블로그 내 글 작성 순번은 어떻게 정하시나요? 운영 방식이나 그라운드룰이 있다면 궁금합니다.

 

Cheese : 글을 작성하는 순번은 내부적으로 랜덤하게 순서를 정해놓고, 1주일에 한 번씩 돌아가면서 정해놓은 순서가 되면 각자 쓰고 싶은 주제를 가지고 글을 작성하고 있습니다.

 

Kai : 사실 순서는 최초 블로그를 만들 때 제비뽑기로 정해 놓았습니다 ㅎㅎㅎ. 하지만 너무 급한 업무를 담당 중이라면 일정을 뒤로 미룰 수도 있고, 내가 꼭 공유하고 싶은 주제가 있다면 언제든 글을 작성해 팀에 공유할 수 있습니다.

 

shiren : 카이의 말대로 초반에 랜덤으로 정해놓은 순서대로 주 1회 포스팅하는 것을 목표로 하고 있습니다. 업무상의 일정으로 일부 딜레이는 될 수 있지만 단위 기간당 총개수는 변함없이 업로드하고 있어요. 예를 들어 일정이 지연되면 한 주에 두 개의 글을 배포하는 경우도 있습니다. 업로드하기 전엔 작성자가 글을 작성해서 깃헙에 PR을 만들면 정해진 인원이 글을 리뷰하는 시간을 갖습니다. 일정기간 동안 리뷰한 후, 리뷰 내용을 작성자와 리뷰어가 협의하면서 글의 완성도를 높이는 작업을 합니다. 그리고 목표한 일정에 배포를 하는 거죠!

 

 

 

만뷰 축하! HOT콘텐츠 작성 응원!

 

 

 

 

주제는 어떻게 선정하셨나요?

 

Cheese : 이 글을 작성했을 시기가 입사한 지 얼마 지나지 않았을 때였는데요. 당시 graphql과 BFF 기술을 사용해 본 적이 없어 블로그에 작성하며 정리하면 프로젝트 구조를 이해하는 데에 도움이 될 것 같아서 주제로 선정하게 되었고, 실제로 큰 도움이 되었던 것 같습니다.
참고자료를 찾아볼 때도 이론적인 내용이 많고 실제 요청을 하는 게 어떻게 다른지 작성된 내용이 별로 없었던 것 같아서, 저처럼 구조를 이해하기 어려우셨던 다른 분들에게도 도움이 되었으면 좋겠다는 생각을 했었어요.

 

Kai :  카카오페이지에 디자인 시스템을 도입하게 되면서 '재사용성'이라는 키워드로 고민을 많이 하게 되었어요. 이때 가장 애를 먹었던 게 글 주제가 되었던 Dialog 컴포넌트였습니다. 여러 번 시행착오를 겪으면서 현재의 Dialog로 자리를 잡게 되었는데, 그 당시에 겪었던 시행착오와 고민의 흔적을 FE개발팀 내에 먼저 공유드렸습니다.
생각보다 공유에 대한 반응이 좋았고, 다른 파트에서도 동일한 형태의 컴포넌트를 만들어나가는 걸 보게 되면서 다른 개발자분들에게도 도움이 될 수 있겠다는 생각이 들었어요. 그래서 이 주제를 선정하게 되었습니다.

 

 

 

 

치즈와 카이가 작성하신 글에 대해 간략하게 소개 부탁드려요!

 

Cheese : BFF를 적용하는 배경, 카카오페이지에서 사용하는 BFF 구조 및 일반적인 API 요청과 비교하여 설명하는 글입니다. 실제 적용하게 되면서 마주치는 이슈도 같이 작성했고, 내용은 간략하게 적은 편이라 어느 정도 배경지식이 있는 분들에게 도움이 될 것 같습니다.

처음 BFF를 적용하게 될 때 알게 된 개념들을 한 페이지에 정리한 글입니다.

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

 

Kai : 리액트를 사용하시는 개발자분들에게 컴포넌트 재사용은 아주 익숙한 용어입니다. 일반적으로 컴포넌트 하나를 만들어 prop의 변화로 재사용을 하는 방식을 많이 사용하게 되지요. prop의 변경으로 컴포넌트를 재사용할 수 있는 틀에서 벗어나게 되면 보통 재사용성은 후순위로 밀려나고 매번 새로운 컴포넌트를 만들게 됩니다.
하지만 조금 더 생각해보면 prop을 사용하지 않고도 컴포넌트를 재사용할 수 있습니다. 우리가 html에서 select 태그를 사용할 때를 생각해 보세요. select 태그는 attribute가 아닌 option 태그라는 다른 html 요소의 합성으로 완성됩니다. 이와 마찬가지로 리액트에서도 하위 컴포넌트의 조합으로 재사용성을 챙길 수 있습니다. 이 글에서는 간단하게 하위 컴포넌트의 조합으로 재사용성을 챙긴 경험을 소개해봅니다.

React 합성 컴포넌트로 재사용성 극대화하기

 

 

주변 개발자들에게도 좋은 피드백을 받고 있는 카이~

 

 

 

글을 작성하실 때, 가장 중요하게 생각하셨던 것은 무엇인가요? 

 

Cheese : 제가 처음에 이해하기 어려웠던 포인트를 최대한 설명하려고 했던 것 같습니다. 어떤 장점이 있는지, 어떤 다른 점이 있는지를 주로 생각했던 것 같아요.

 

Kai : 왜 이런 생각을 하고 결론을 내게 되었는지가 가장 중요한 요소라고 생각했어요. 뜬금없이 '이렇게 해야 컴포넌트 재사용성이 높아'라고 글에서 정답을 강요하면 공감하기 어렵고 필요성을 느낄 수 없다고 생각했거든요. '이렇게 작업하다 보니 이런 벽을 마주하게 되어서, 난 이런 방법을 생각해 봤어'라는 게 조금 더 읽는 분들이 더 공감하기 쉽고, 다양한 생각을 하실 수 있을 거라고 생각했어요. 결과적으로 글을 읽는 분들이 단순히 결론만 받아들이기보다는 시행착오부터 해결 과정을 간접적으로 경험할 수 있기를 바라고 글을 쓰게 되었습니다.

 

 

 

 

반대로, 가장 고민이 됐거나 어려웠던 부분은 무엇이고 어떻게 해결하셨나요?

 

Cheese : 글로만 구조를 설명하기에는 어렵게 느껴졌던 것 같습니다. 저희 프로젝트 구조로 되어있는 이미지가 있는 것도 아니어서, 직접 구조를 표현한 이미지를 만들어서 첨부하게 되었습니다. 글에 나오는 개념들도 전부 설명하기에는 메인 주제를 BFF로 잡고 있어서 문서 링크를 활용하였습니다.

 

Kai : 개발엔 정답이 없잖아요? 특히 재사용성은 아주 주관적이고, 필요성에 대해서도 모두 생각이 다르다고 생각해요. 그래서 글을 작성할 때, '이 주제가 과연 FE개발팀의 블로그 글 주제로 타당한가?'에 대해서 고민을 조금 많이 했던 것 같아요. 다행히 팀 내 다른 분들의 반응도 좋아서 자신 있게 글을 올리게 되었습니다.

 

 

 

 

본인의 글에 대한 타사 다른 개발자들의 긍정적인 반응을 직접 들어보셨던 경험이 있으신가요? 있다면 이야기 부탁드려요!

 

Cheese : 주변 개발자분들이 제가 작성한 글인 줄 모르고 계셨는데 잘 읽었다고 연락 주신 분들이 계셔서 신기했습니다. 인스타그램 DM으로 책 제작을 요청해주신 분도 계셨는데 부담될 것 같아서 하진 않았습니다 ㅎㅎ😂

 

Kai : 부끄러워서 따로 다른 분들에게 직접 말씀을 드리진 않아서 반응을 많이 듣지는 못했는데요 ^^; 페이스북 댓글과 공유로 여러 가지 좋은 글들을 적어주셔서 많은 힘이 되었습니다. 항상 응원해주시는 원티드 개발자이신 남동훈님께도 감사를 드리고 싶네요.

 

 

 

(좌) 서핏/커리얼리 (우) 프론트엔드개발그룹 페이스북

 

 

 

 

위 말씀처럼 카이 글이 외부에서 긍정적인 반응을 이끌어내고 있다고 하는데, 그 비결은 무엇일까요!

 

Kai : 다른 글들에 비해서 쉬운 내용을 다루었고, 다른 분들도 경험해봤을 만한 간단한 내용이라서 좋아해 주시지 않을까(?) 하는 생각이 있네요. 아무래도 해결법 자체보다는 해결법으로 나아가는 의식의 흐름이 조금 더 도움이 되지 않았을까 합니다.

 

 

 

 

치즈의 글은 FE 기술블로그 내 최초 만뷰를 달성하셨는데, 소감 한 말씀 부탁드려요!

 

Cheese : 만뷰를 달성했는지 몰랐는데, 인터뷰 요청해주셔서 신기하고 감사했습니다. 좋은 크루들을 만나서 많이 배우고 이런 글을 작성할 수 있었던 것 같아요. 첫 글을 이렇게 많이 봐주시니 다음에도 더 좋은 글을 써보도록 해보겠습니다.

 

 

 

 

다음에 다뤄보고 싶은 주제가 있다면 무엇인가요?

 

Cheese : 아직 고민해보진 못했는데, 이번에 진행된 카카오페이지 개편에 관련해서 어떻게 달라졌는지 공유하면 재미있을 것 같습니다.

 

Kai : 제가 입사한 뒤 얼마 안 되어서 개발했던 톡뷰어라는 뷰어가 있는데요~ 나름 공도 많이 들이고 웹뷰로 잘 활용하고 있는 뷰어입니다. 여기에 같은 팀에 Steve가 설계해주셨던 Redux-saga 기반의 이벤트 버스 아키텍처가 적용되어 있는데, 경험도 아주 좋았고 제 역량을 많이 키워주었던 경험이라서 이에 대해 소개해드리고 싶어요. 맹목적으로 사용하게 되는 action -> reducer update에서 겪었던 단점을 벗어나 event -> saga -> action -> reducer update로 동작했을 때의 장점을 소개하고자 합니다.

 

 

(FE 기술블로그에 올라올 글들, 기대하고 있겠습니다.🙏🏻)

 

 

오늘의 주인공 카이와 치즈!

 

 

 

FE 기술블로그에 올라왔던 글 중 본인 글을 제외하고 추천해주고 싶은 글은 무엇인가요?

 

Cheese : 모든 글을 추천하고 싶어요! 하지만 하나만 고르자면, 최근에 업로드된 Cloto의 신입 공채 10개월 여정 글을 추천합니다. 회사에 처음 입사하게 되면 어떤 과정을 통해 일하게 되는지 궁금하신 분들이 많을 것 같아요. 저희 팀 문화를 소개하는 글이기도 해서 추천드립니다.

카카오 공채 입사 후 10개월 FE개발팀에서의 여정

 

Kai : Shai의 React 이벤트와 브라우저 이벤트입니다. 글도 재미있게 쓰였고, 리액트 이벤트 리스너에 대한 지식이 없는 분들은 정말 신기할 내용이거든요. (addEventListner('click')과 onClick은 뭐가 다를까?) 우리가 리액트에서 이벤트 리스너를 붙일 때, 한 번쯤 생각해보면 좋을만한 내용들이 들어있습니다.

React 이벤트와 브라우저 이벤트

 

 

 

 

업무시간 외에 이렇게 글을 작성한다는 것이 쉽지 않은데, 이런 활동들에 대한 기대라던가 목표가 있으실까요? 

 

Cheese : 우선 팀에서 생각하는 목표는 기술을 공유하면서 도움을 주는 것도 있겠지만, 블로그를 보시고 더 좋은 분들이 저희 팀에 함께하실 수 있도록 하는 것이 큰 목표입니다. 

 

Kai : 카카오엔터테인먼트라는 이름을 갖고, 많은 조회수를 가져갈 수 있는 경험을 할 수 있다는 것이 가장 큰 것 같아요. 보통 개인이 쓰는 기술블로그라는 게 많은 사람들이 보는 글이라기보다는 개인의 생각, 시행착오를 적어놓은 기록 저장소 같은 느낌이 강하잖아요. 하지만 FE 기술블로그에 글을 작성하고 공유하는 것으로 상당히 많은 개발자 분들이 내 생각을 볼 수 있다는 경험 자체가 아주 귀한 것 같아요. 그 경험을 위해 힘내서 글을 작성할 수 있습니다.

 

shiren : 저희 블로그를 통해 도움을 받는 개발자들이 많아졌으면 좋겠습니다. 도움을 받은 개발자들의 좋은 반응들은 글을 작성하는 저희 크루들에게도 아주 큰 힘이 됩니다. 당분간은 이렇게 기술을 공유하면서 팀원의 역량을 견고히 하고 외부와 지속적으로 소통하면서 크루들의 자존감과 만족감을 키우는데 집중하고 싶습니다. 이렇게 콘텐츠가 차곡차곡 쌓이다 보면 찾아오는 개발자분들도 많아지고, 또~ 저희 서비스를 이용하는 유저, 고객들도 많아져서 회사도 함께 성장한다면! 저희에게 꽤 가치 있는 일이 아닐까요?!

 

 

 

 

CTO 부문 크루들에도 기술 공유 문화에 대해 이야기해보자면요~

 

Cheese : 기술 공유 문화는 꼭 블로그 작성이 아니라도 팀 내부 공유나 스터디 등 여러 가지 방식으로 진행되고 있어서 외부에 좋은 문화를 알릴 수 있는 방법이 많아지면 좋을 것 같습니다~

 

Kai : 아무래도 개발 직무는 직접적으로 그 개발을 하지 않더라도 여러 분야의 개발을 접할 때가 많아서 다른 분야에는 어떤 일들이 발생하는지 궁금할 때가 많은데요. 조금 더 활발한 공유 문화가 자리 잡으면 좋을 것 같습니다. (이러다 보면 서로 궁금한 점을 해결하기 위해 교류가 일어날 수도 있지 않을까요?!)

 

 

 

 

마지막으로 함께 지식/경험 공유 문화를 구축하고 있는 FE개발팀 크루들에게 한 말씀 부탁드려요! 

 

Cheese : FE개발팀에서는 게더타운을 적극적으로 활용하면서 2주에 한 번씩 기술 공유(데모데이)와 스몰 톡을 번갈아가면서 하고 있습니다. 항상 더 좋은 문화를 만들어가기 위해 노력하는 크루들과 함께라서 감사한 마음입니다.

 

Kai : 바쁘신 와중에도 항상 새로운 주제로 좋은 글을 작성해주시는 크루분들에게 대단하다는 말씀과 감사하다는 말씀을 같이 드리고 싶습니다. 앞으로도 함께 더 좋은 블로그를 만들어나갔으면 하는 바람입니다!

 

shiren : 정말 대단하다고 말하고 싶습니다. 짧은 시간에 이렇게 좋은 아티클들을 많이 작성해 주셨습니다. 서로 배우고, 고민하고, 노력했던 흔적들을 앞으로도 계속 공유를 통해 자랑할 수 있었으면 좋겠습니다. 

 

 

오늘도 행복한 FE개발팀~

 

 

 

이렇게 기술 공유 문화에 앞장서고 있는 FE개발팀 크루들을 만나봤습니다 :) 

FE개발자로 성장하는 데 있어 이렇게 좋은 동료들과 함께 한다는 것!

소중하고 가치 있는 경험이 아닐까 싶습니다.

 

앞으로도 더 기대가 되는 FE개발팀!

언제나 응원합니다.

 

 

 

 

더 많은 FE 지식을 나누고 싶다면?! 카카오엔터테인먼트 FE 기술블로그 [바로가기]

 

 

 

 

📷 photo by. Selian 

 

 

 

 

 

---