Front-end 스터디 이야기

2022.01.04

안녕하세요 반가워요!!! 👋

라인웍스 FE 팀은 지난 6월 말부터 시작하여 9월 초까지 실무 능력을 향상하기 위한 분기 스터디를 진행했어요. 이 글은 스터디에 대한 회고이자, 길다면 긴 한 분기 동안 어떻게 스터디를 계속 이어 나갈 수 있었는지 공유하는 글이에요!

스터디를 하게 된 이유

현재 라인웍스 FE 팀은 Reactjs 기반 프로젝트를 수행하고 있어요. (물론 기회가 된다면 다양한 라이브러리를 활용하는 것도 고려하고 있어요! 💖)
FE 구성원은 Reactjs 의 상태 관리와 설계는 익숙하지만, HTML, CSS, Javascript 그리고 Browser 가 제공하는 다양한 기능을 활용하는 방법에 대해서는 더 알고 싶다는 갈증이 있는 것을 서로 알고 있었어요. 그래서 이러한 부분을 해소하기 위해 스터디 시간을 갖기로 했어요. 또한 라인웍스에서 구축하고 있는 디자인 시스템(Linewalks Design System, 이하 LWDS)을 구현하는데 있어서 도움이 될 거라고 생각했어요! (LWDS가 궁금하다면? 👈)

무엇을?
먼저 스터디를 위한 자료 또는 강좌를 선택하기로 했어요. 다양한 강좌 사이트를 찾아보던 중 저희 눈에 들어온 강좌는 패스트캠퍼스의 시크릿 코드: 프론트엔드 실무 완성편이었어요! (현재는 해당 사이트에서 검색해도 나오지 않네요 😢) 해당 강좌는 크게 UI 컴포넌트, CSS, 프레임워크로 이루어져 있었습니다.  이번 분기에는 UI 컴포넌트에 대해서 스터디를 진행하고, 향후에 CSS, 프레임워크에 대한 스터디를 추가로 수행할 수 있을 것 같다는 판단으로 해당 강좌를 선택했어요. 🕺

어떻게?
스터디를 위해서 저희는 두 가지에 중점을 두었어요.

  1. 활용빈도가 높거나 내부 구현이 궁금한 UI 컴포넌트를 선정하자! (어느정도 호기심이 생겨야 스터디를 계속 진행할 수 있다!)
  2. 매 시간마다 스터디에 대한 기록과 회고를 작성하여 이 시간들이 향후 우리에게 도움이 되도록 하자. (나중에 이 스터디가 어땠는지 기억하는 건 매 시간 작성한 기록 및 회고밖에는 없다! 🔥)

위 두 가지를 달성하기 위한 방법! 😆

  • 활용빈도 + 호기심 ⁉️

저희는 스터디 전 Kick-off 미팅에서 ‘강좌의 챕터를 따라가지 말자!’로 의견을 모았어요!! 이유는 굉장히 단순했어요. 활용빈도가 높고, 호기심이 생기는 컴포넌트 위주로 진행하고자 했으니, 강좌의 챕터를 따라가는 것은 큰 의미가 없었어요. 그래서 저희는 매 시간 스터디가 마무리 될 때, 다음 시간에 공부할 챕터를 제안하거나 호기심이 생기고 활용빈도가 높을 만한 챕터를 골라 스터디를 이어갔어요.

  • 기록 및 회고 📝

기록을 위한 템플릿을 만들었어요.

  • Chapter – 챕터 이름
  • Contents – 강좌에 대한 가벼운 소개 및 구현 법에 대한 요약
  • Question – 강좌를 들으며 궁금했던 점 그리고 이해한 부분에 대한 공유
  • Retrospect – 강좌 수강하면 느낀 것을 회고로 작성 (쓰다보면 반성이 많아짐…)
  • Reference(optional) – 참조사이트, 나중에라도 꼭 이해했으면 하는 내용
  • Next – 다음 스터디에서 할 것, Question, Retrospect 에 언급 된 서적 및 같이 읽어보면 좋을 서적 작성
  • 템플릿 덕분에 스터디에 대한 기록을 깔끔하게 남길 수 있었어요. 그리고 기록만 보더라도 당시의 스터디가 쉽게 이해가 될 수 있었어요.(상세히 적으면 적을수록 좋아요! 💪) 
  • 회고의 내용은 이번 스터디를 통해서 깨달은 바 위주로 작성을 했어요. 반성하는 내용을 많이 기록했었네요… 😢
  • 스터디와 회고의 텀이 길어졌을 경우에는 기존의 스터디의 내용을 잊어버리게 될 수도 있고 막상 회고를 할 때가 되면, 형식적인 내용만 생각나는 것 같았어요. 오히려 스터디 후 가볍게 5~10분 정도 의견을 공유한다 생각하면 가벼운 내용부터 심도 있는 내용까지 다룰 수 있었던 것 같아요! 🙌

스터디 진행

  • 서로 돌아가며 기록을 작성하고 진행을 해보자!
    • 한명이 계속 진행과 기록을 하게 되면 다른 구성원은 스터디에 대한 집중이 떨어질 수 있다!
    • 모임을 진행하는 것도 스터디에서 배워갈 수 있는 것 중 하나!
  • 궁금한 것은 모두 적어보자!
    • 내가 궁금한건 상대방도 모를 수도 있다! (의외로 모두 같이 알고 있는 게 많지 않더라구요!)
    • 더 큰 문제는 구성원 모두 으레 알고 있다고 생각해서 진짜로 모르는 것을 놓쳐 버리는 것이다!
  • 모르는 것은 꼭 서로 물어보고 공유하여 다같이 이해하자!
    • 모르는 것을 공유하여 질문자를 포함한 스터디원 모두가 알고 넘어가는 과정은 매우 중요하다!
    • 어리석고 어이없는 질문은 없다! 질문을 못하는 것이야 말로 어리석다!
  • 당장 이해가 되지 않은 것은 Reference 를 남겨 나중에라도 꼭 다시 이해할 수 있도록 하자!
    • 당장 모든 것을 이해할 수 없다!
    • 하지만 나중에도 이해하지 못하면 그것은 문제가 될 수 있다!

얻게 된 것은 무엇이 있을까?
매 시간마다 진행한 회고를 통해서 저희는 다양한 의견 및 생각을 공유했어요.

  • “쉽게 구현할 수 있는 것도 내장 기능을 알지 못하여, 부득이하게 로직으로 풀어나가는 경우가 많았다.”
  • “이전에 공부한 내용이 머릿속에서 사라졌는데, 다시 습득할 수 있었다.”
  • “효율적인 코드 작성을 위해서 다양한 내장 함수를 알고 활용하는 것이 좋겠다.”
  • “개발자의 구현 방법은 다양하지만, 작은 디테일 하나로 코드의 퀄리티가 차이나는 것을 알 수 있었다.”
  • “여전히 모르고 있던 내장함수들이 많다는 것을 알았다.”

회고를 하나 하나 살펴보니, HTML, CSS, Javascript 그리고 Browser 가 제공하는 다양한 기능을활용하는 방법에 대해 고민하고 논의하는 시간을 가지면서,  초기 목표에 부합하는 스터디를 성공적으로 진행하고 마쳤음을 알 수 있었어요.

글을 마무리하며…

  • 예전에는 스터디하면 거창하거나 큰 성과를 내야 할 것만 같은 압박감이 있었지만, 라인웍스에 입사 후 두 차례 스터디를 진행하면서 ‘어쩌면, 스터디란 거창한 것을 달성하려는 모임이 아니라, 같은 것을 함께 공부하고 자신의 부족한 점을 알게되는 것은 아닐까?’ 라고 깨달았어요.
  • 이번 스터디를 통해서 FE 팀은 괄목할 만한 성과를 이룬 것은 아니지만, 서로의 지식을 공유하고 자신의 부족한 점을 알게되었다는 점에서 제가 다시 알게 된 스터디의 의미로 봤을 때, 많은 것을 얻었습니다.(물론 스무개나 되는 다양한 컴포넌트를 공부한 것도 좋은 성과라 생각해요. 😆)
  • 물론 잘한 점만 있는 것은 아니죠! 반성할 점도 있어요! 우선 목표로 했던 챕터는 30개였는데 그 중 26개의 챕터에 대해서만 스터디 진행이 되었어요.
    저희는 스터디 기간을 한 분기로 정하였는데 해당 분기에 스터디를 마치고 달성한 것을 퍼센트로 치면 86% 정도 되네요. 🤷‍♂️
    다음 스터디에서는 목표로 한 것은 모두 달성하고 싶어요. 그리고 스터디한 컴포넌트 중에 실제로 실무에 반영하거나 구현해 본 컴포넌트가 많지 않았어요. 아쉽게도 현재 진행중인 프로젝트에서 새로운 형태의 컴포넌트를 사용하는 경우가 많지 않아서 다양한 컴포넌트를 반영할 수가 없었어요. 부족한 부분은 장기적으로 LWDS 에서 다양한 컴포넌트를 구현할 때 활용해봐야겠어요!

간단하게 라인웍스 FE 팀은 스터디를 어떻게 하고 있는지 그리고 스터디 템플릿 공유 를 쓰고 싶었는데, 생각한 것보다 글이 길어진 것 같아요.

마지막으로 이상적으로 분석된 헬스케어 데이터를 아름다운 UI/UX 로 만드실 분을 모시고 있어요! 언제든 열려있으니 라인웍스 채용 페이지(https://linewalks.com/recruit)를 참고해주세요! ⭐

긴글 읽어주셔서 감사합니다!

Seonyeong Jang

Linewalks에서 Front-end 를 개발하고 있습니다.

Seonyeong Jang