글또 프론트엔드 모바일 반상회발표자 모집이 시작된 1월 14일부터 발표 당일, 2월 6일까지의 기록입니다. (약 3주)
이번 글은 발표자로서의 후기이며, 발표에 대한 내용은 따로 다룰 예정입니다. (생애 첫 npm 라이브러리 배포하기!)
들어가며
지난해 2024년에는 커리어를 시작하고 첫 외부 발표 도전에 성공했었어요! TeoConf2024에서 주니어 개발자의, 200일간 혼자만의 짧은 글쓰기 챌린지로 성장하기라는 제목의 발표였죠!
이번에는 기술 주제 발표에 도전하고 싶었어요. 그래서 2025년을 맞아 설정했던 저의 액션 아이템 중 하나는, 기술 발표 1회 달성하기였어요! 사실 어떤 구체적인 방안이나, 계획 없는 아이템 설정이었죠...!
그런데 이런 막연한 마음이라도 품고 있었던 것이 아주 큰 도움이 되었습니다!!
왜냐하면...
1. 발표자 신청
1월을 맞자마자 기회가 찾아왔기 때문이었어요!!!
제가 활동하고 있는 글또 10기의 슬랙에서 프론트엔드 반상회의 발표자를 모집한다는 글이 올라온 것입니다!! 천만 다행인 것은... 사실 저는 슬랙 푸시를 잘 체크하지 못해 번번히 소식 업데이트가 늦어졌었는데… 마침 이때는 기가 막히게 푸시가 오자마자 확인했다는 것이죠!
모집 인원은 3명이며, 선착순으로 이루어진다고 공지가 되어있었어요. 어차피 액션 아이템으로 새기고 있었던 터라, 평소와 달리 1초도 망설임 없이 구글폼에 들어가 이름을 입력했습니다.
그럼에도 사실 5분 정도는 망설였기에… 글이 올라오자마자 곧바로 신청한 분들이 많을 거라 생각해서 제가 될 거라는 생각은 안했었고, 신청해보는 것 자체에 평소와 달리 용기 낸 것에서 의의를 두려했었어요.
2. 발표자 확정 및 소재 선정하기
그런데 왠걸… 선정된 것입니다…!! 😳 너무너무 설레고 행복함이 몰려왔지만 한편으론...
어안이 벙벙했고 그제서야 큰일났다 싶었어요. '어떤 주제를 해야할까?' '뭐부터 준비해야하지?…' 걱정이 태산이었어요.
다행인 것은, 틈틈히 소재를 기록해두다보니 이야기 하고 싶은 주제들이 몇 개 있었다는 것이었어요. 어떤 주제가 그나마자 제가 할 수 있는 이야기들 중, 더 많은 분들이 흥미를 가질 수 있을지 고민이 많이 되었어요.
고민 끝에 최근 "npm 라이브러리를 처음으로 만들어본 경험"에 대해서 발표를 만들어보자고 결심했습니다!
그 이유로는 다음과 같았어요.
- 마침 블로그 글을 작성해보려 했던 만큼, 구상하던 흐름이 있었던 것
- 특정 기술 분야가 아니라 많은 사람이 공감할 수 있는 주제라고 생각
- 실제 보여줄 수 있는 사례 또한 존재
대상은 저와 같이 ‘npm 라이브러리에 대해 막연한 두려움을 가지신 분’들로 설정했어요!!
그렇게 저는 야심차게 주제와 배경, 예상 내용 구성을 공유드렸습니다!
다음 스케줄은 리허설이었어요. 2월 2일까지 발표 자료를 1차적으로 완성해야했습니다.
그리고 발표 날짜는 2월 6일(목)으로 확정되었습니다. 즉, 준비 기간은 23일로 약 3주였던 것이죠..! 심사숙고 할 틈 없이 발빠르게 준비해야했어요.
3. 발표 자료 준비
TeoConf2024의 최종 발표 자료를 준비했을 때처럼, 이번에는 고민 없이 구글 슬라이드로 ppt를 만들기 시작했습니다. 당시 ppt 제작 도구와 나름의 템플릿을 구성하는데 조금 시간을 소요했었는데, 이번에는 거의 동일하게 시작했기 때문에 시간을 많이 절약할
수 있었어요.
자체적인 레퍼런스가 있다는 것이 이런 이점이 있었죠!
3.1 목차
제가 이야기하고자 한 발표의 흐름부터 구상해보았어요. 제가 만든 라이브러리의 구체적인 구현에 대한 내용이 아니라, 어떠한 모듈을 라이브러리로 만드는 것에 대한 과정에 대해 들려드리고 싶었어요. 전달드리고 싶은 핵심은, "라이브러리를 만드는 것이 생각보다 어려운 것이 아니었으니 마음이 생기면 바로 시도해보자!"였습니다. (어려운 것은 무엇을 만들지이죠... 👀)
우선 어쩌다 라이브러리를 만들게 되었는지 이야기하고 시작해야한다고 생각했어요.
그리고 어떤 과정을 거쳐서 라이브러리로 배포가 가능했는지, 막상 배포해 보니 무엇이 부족하여 개선을 거쳤는지를 큰 줄기로 만들어보았어요.
마지막으로, 결국 이렇게 처음으로 계기를 만들어준 라이브러리는 배포 철회를 하였고 새로운 라이브러리를 만들어 배포한 것에 대해 이야기하며 마무리하기로 하였어요.
목차는 이렇게 설정하였습니다.
- Prologue 라이브러리를 만들 결심
- Chapter 1 라이브러리로 구현 시작
- Chapter 2 라이브러리 조금 더 개선하기
- Chapter 3 진정한 나의 라이브러리 만들기
- Chapter 4 정리
- Epilogue 마치며 - 라이브러리에 대한 벽을 허물자!
3.2 소프트스킬 발표와 기술 발표의 차이
이전에 저의 첫 발표 경험은 주니어 개발자의, 200일 간 혼자만의 짧은 글쓰기 챌린지로 성장하기였습니다. 즉, 기술이 아닌 경험과 소프트스킬 주제의 발표였죠.
이번에는 나름 기술 주제의 발표 자료를 만들며 느낀 것은, 시간이 2배 이상 더 걸린다는 것이었어요. 왜냐하면... 코드와 발표 자료를 비동기적으로 만들어나가야했기 때문입니다.
3.2.1 공유 가능한 형태로 가공하기
물론 코드를 모두 새로 작성하는 것은 아니지만 공개 가능한 부분으로 조정하고 최대한 단번에 어떤 내용인지 이해가 쉽도록 가공하는 작업이 필요했어요.
3.2.2 재현 안되는 이슈
의도하는 이야기 흐름에 맞추어 코드를 가져와야할 때, 이전에는 잘되던 것이 갑자기 에러가 발생할 때가 종종 있었어요.
조금 시간을 투자하면 금방 해결할 수는 있지만, n회 발생할 경우 이 시간도 무시 못합니다... 🫠 뇌는 발표 장표를 구성하는 모드였는데 갑자기 디버깅 모드로 전환해야하고, 해결하고서는 또 다시 돌아가야하는 컨텍스트 스위칭에 비용이 컸습니다.
또한 어떠한 트러블 슈팅에 대한 내용을 막상 담아보려 하니 재현이 안되어... 낭비하는 시간도 많았죠.
———
기술 발표 자료를 구성할 때는 예상 못하는 변수가 많이 생겼습니다. 체감으로는 개발과 발표 자료 만들기를 동시에 진행하는 기분이었어요...! 기술 발표는 더더욱 시간을 많이 투자해야 하는 일이었습니다.
4. 리허설
그리고 리허설 날이 되었어요! 구글 밋 링크가 공유되었습니다. 여유롭게 발표 자료를 완성해두고, 리허설 직전까지는 스크립트만 되뇌어 두려고 했었어요. 하지만 그전날까지도 마무리가 잘안되었었기 때문에 역시 계획은 실패로 끝났어요... 😅
발표 자료 작업을 하면 할수록 넣고 싶은 내용이 계속 늘어났기 때문입니다. 결국 리허설 시작 전까지도 계속 발표 자료를 개선하다 허겁지겁 제출하고...! 구글 밋에 참여하였어요.
성윤님과 준비위 분들, 그리고 저를 포함하여 발표자 3분이 함께 했죠.
- 나의 방식으로 네트워킹 시작하기 - 김성현
- 생에 첫 npm 라이브러리 배포하기! - 이병우
- 기술 스터디로 성장한다는 착각 - 송빈산
실제 발표 순서는 제가 첫 번째였지만, 리허설에서는 두 번째가 되었습니다.
먼저 성현님의 '나의 방식으로 네트워킹 시작하기' 발표를 경청하며 동시에
피드백 시간을 가졌어요. 발표자를 제외하고 총 8명이 동시에 피드백을 작성하기 시작했습니다.
글또 반상회 리허설의 피드백은 스프레드 시트를 이용하여 실시간으로 작성하는 방식이었습니다.
피드백을 작성할 때는 어감을 특히 신경 써야한다고 생각했기 때문에 처음에는 이렇게 즉시 공개되며 작성하는 것이 조금 조심스러웠는데, 오히려 좋은 점과 덧붙이고 싶은 아이디어가 휘발되지 않아 좋은 방식이라 생각되었어요!
한껏 긴장한 채로 저의 순서가 시작되었어요. 온라인 미팅으로 발표를 하는 것에 대해 대비가 안되었었다는 것이 너무 티가 났어요. 😳 시선 처리가 고르지 못했습니다..!
또한 막상 발표 분위기에서 이야기를 시작하니 20분이라는 시간이 너무 짧게 느껴졌어요. 한장 한장 충분히 전달드리지 못하고 재빠르게 넘어가는 감이 있었습니다. 전혀 강약 조절을 하지 못하며 발표가 종료되었어요.
내용은 둘째치고 발표에 대한 준비가 많이 부족하다는 것을 느꼈죠.
이어서 참여자 분들께서 피드백을 직접 이야기해주시는 시간이 되었어요. 저의 예상보다 좋은 반응들을 들을 수 있어 놀랬었고! 또한 귀한 의견들을 많이 받을 수 있었습니다. 이렇게 발표 내용에 대해 직접적인 피드백을 들을 수 있는 시간이 생각보다 없는 만큼, 정말 귀중한 시간이었어요.
덕분에 어떤 내용이 인상적이었고, 어떤 것을 개선하면 좋을 지, 그리고 이야기의 맥락에 어긋나는 것은 무엇인지를 직접적으로 알게되었습니다.
대표적인 피드백은 이러했습니다.
기승전결로 구성하지 못하고강강강강이 되버린 점- 장표에서 텍스트가 너무 생략되었던 점
- 코드에 대한 시각 자료가 청중 입장에서 시인성이 좋지 못했던 점
- 이야기에 대한 정리가 막바지에만 위치했던 점
이 귀중한 피드백을 바탕으로 발표 자료를 개선해나갔습니다.
7. 글또 프론트엔드 모바일 반상회 시작
2월 6일, 글또 프론트엔드 모바일 반상회 날이 되었습니다. 평일 일정이었기 때문에, 퇴근하고 장소에 도착하여 대비할 시간이 얼마 안된다는 점이 유독 긴장되는 요인이었어요...! 행사 시작 직전까지 근처 스타벅스에서 스크립트를 되뇌이다 입장하였습니다!!
7.1 입장
입장하고, 명찰을 작성하며 귀여운 글또 스티커와 행사 기념품인 수건, 그리고 카뱅스티커와 함께 체크인한 후 크라이치즈 버거를 수령하여 첫 줄에 자리 하였습니다!
그리고 진행을 맡으신 유림님의 진행으로 글또 프론트엔드 모바일 반상회는 시작되었습니다!
그리고 발표 첫 순서였던 저는 주변을 여유롭게 둘러보지 못하고 사실 긴장한 상태로 발표 자료만 계속 복기하고 있었어요. 🫠
7.2 첫 번째 순서로 발표 시작
좀 더 일찍 와서 화면 셋팅도 미리 리허설을 해볼 껄 그랬어요... 제 맥북을 연결하며 자연스럽게 2개 화면을 사용하려 하였으나 생각보다 매끄럽게 되지 않아 시간을 낭비했습니다.. 이때부터 이미 체감상 5분 가량 낭비했다는 생각에 조바심이 들어 더더욱 서둘러 발표를 진행하게 되었습니다.
지난 첫 번째 발표인 TeoConf2024에서도 개선해야할 점이라 생각했었는데, 이번에는 더욱 청중과의 교감을 하지 못했습니다. 시간을 오버하지 않기 위해 부랴부랴 진행하다보니 반응을 잘 살피지 못했고, 완급 조절을 하지 못한 발표를 마무리 지었습니다.🥲
그럼에도 질문 타임에서 다행히 이야기가 전달되었다는 기분을 느낄 수 있엇어요!!
7.3 질문 타임
Slido라는 서비스를 이용하여 실시간으로 질문을 받을 수 있었어요!
질문에 대한 답변
Q1) 삭제된 라이브러리 그립지 않으셨나요?
답변) 너무너무 그립습니다… 🥲 삭제 버튼 누를 때의 목메임이란… (꼭 다시 보자…!)
Q2) 발표 잘 들었습니다! 오픈기버라는 오가니제이션을 만드셨다고 하셨는데, 추가로 다른 라이브러리도 개발&추가하시거나, 다른 기여자분들과 오거나이징하시려는 계획도 있으신가요?!
답변) 계획 너무 있습니다!! 😆 현재 1개 올려진 markyfy의 최소한의 안전성을 좀 더 확보한 후에, opengiver에서 현재 것 뿐만 아니라 앞으로 새로운 라이브러리도 함께 만들어갈 분들을 모셔보려해요!!
Q3) 발표 잘 들었습니다! 제가 발표를 중간부터 들었는데... 혹시 라이브러리 만드실 때 번들러를 사용하셨나요? 그리고 TypeScript 타입 정의 파일도 추출 가능한 구조로 고려하셨었나요?
답변)
첫 배포를 할 때는 번들러 없이 tsc로 트랜스파일링만 했습니다! 저의 경우 외부 의존성이 없었고, 코드 양도 적었기 때문이었어요. 그 다음 개선 때는 rollup을 적용해보긴 했어요!
그리고 처음부터 염두하고 코드를 작성한건 아니었는데, 돌아보니 d.ts로 추출하기 적절한 구조인 셈이었더라구요 😅 type을 잘 정의해 둔 덕분이었어요!
Q4) 발표 잘 들었습니다! npm link를 사용하실 때 라이브러리를 개발하면서 테스트를 하는 것으로 이해했는데, 라이브러리에 watch 옵션을 추가하여 코드 수정이 일어나면 이를 연결한 리포지토리에서도 즉시 빌드되어 반영될까요??
답변)
오 생각 안해보았었는데… 테스트 해보니까 변경 사항 저장만 해도 연결된 리포지토리에서 즉시 반영 잘되네요! 가장 빠르게 로컬 테스트 확인해보는 방법은 npm link + watch 조합이겠군요! 덕분에 배웠습니다 😊
Q5) (와 정말 chill하다…)
답변) chill하다니… 너무 감사합니다 !! 😆
Q6) 제가 자세히 못 들은 것 같은데, 회사에서 private 도 원치 않아서 삭제하신거였나요? 좋은 기능 같은데 아까워요 ㅋㅋ
답변)
맞습니다! private으로 바로 전환이 가능했다면 그대로 진행할 수 있었을텐데, npm 정책 상 이미 public으로 배포가 되어있는 라이브러리를 private으로 전환하지는 못하더라구요! 우선은 사내 깃헙에서 따로 관리하여 사용하고 있고, 또 다른 사용자 데이터를 수집하는 여러 모듈을 만들어서, 추후에는 모두 합쳐 private으로 npm 배포 건의해보려구요! ㅎㅎ
Q7) 발표 잘 들었습니다~ Markfy가 기존에 있는 비슷한 기능의 라이브러리랑 다른 점 또는 차별점이 있을까요?
답변)
아쉽게도 markyfy가 기존 마크다운 파싱 라이브러리 대비 뚜렷한 차별점은 없습니다…! 😅 우선은 ‘만들고 싶은 소재를 찾은 것', ‘마크다운을 저의 방식으로 동작하도록 만들어본 것'에만 의의를 두고 있어요! 한번 꼴을 갖추었으니, 앞으로는 기존의 페인포인트를 찾아 개선하는 것까지 개진해보려 합니다!!
Q8) public으로 올린 라이브러리를 내리게된것은 보안이슈인가요? 사내코드다보니?
답변)
네 맞습니다! 처음에는 일단은 빠르게 public으로 올리는 것을 학습하고 prviate으로 전환하고 회사 계정으로 옮길 수 있을 거라 생각했었어요. 그런데 npm 정책 상 이미 public으로 배포된 라이브러리를 private으로 전환하는 것은 불가능하게 해두었더라구요 😅 일단 경험한 것에 의의를 두고, 그 사이에 사용자 데이터 수집에 대한 여러 모듈을 추가적으로 만든 것들도 합쳐 추후 제대로 회사 계정 private으로 올릴 것도 건의해보려구요!
Q9) 각각 라이브러리 구현 기간은 얼마나 걸리셨나요?
답변) 사실 상 기능 구현에 시간이 걸렸고, 라이브러리 형태로 만들어 배포하는 것에는 시간이 그리 오래 걸리진 않았어요! ‘라이브러리를 구현하는 것‘이라면 어떤 것을 만드느냐에 따라 천차만별일 것 같고, ‘라이브러리 형태로 배포하는 것’이라면 금방 해낼 수 있다고 생각해요! 발표에서 공유드린 두 경험의 경우, 각각 하루 걸렸었어요!
Q10) 질문 시간은 끝났지만.. 만드신 라이브러리에서 다른 서드파티를 사용하진 않으셨나요? 그럴 경우 종속성 관리를 어떻게 하는게 좋은지 좀 어렵더라구요
답변)
시간이 끝났음에도 질문 남겨주셔서 감사합니다!! 😄 하지만 저는 다른 서드파티를 사용한 것이 없어… 좋은 답변을 드릴 수 없어 너무 아쉽네요…! 다만 외부 의존성이 생길 때부터 라이브러리 패키징을 하는 난이도가 높아질 것 같아요…! 예상으로는 peerDependencies와 번들링을 잘 활용해야할 것이라 생각하고 있습니다!!
7.4 네트워킹 타임
첫 번째로 발표한 덕분에 이후 두 발표를 맘편히 경청할 수 있었어요! 이를 위해서 첫 번째를 자원한 이유이기도 했었죠!
'나의 방식으로 네트워킹 시작하기, 그리고 '기술 스터디로 성장한다는 착각'을 경청하고 내용 그자체도 너무 유익했지만 두 발표자 분 모두 너무 발표를 잘하셨기 때문에 깊게 배운 것이 많았습니다!! 👏🏻👏🏻
그렇게 발표 시간이 종료되고, 네트워킹이 시간이 시작되었어요! 슬랙을 통해 조 편성을 시트가 공유되었습니다. 저는 16조였어요.
함께 발표를 준비했던 성현님, 그리고 TeoConf2024에서 함께 발표를 준비했던 동훈님과 같은 조가 되었다는 것이 소름 돋았습니다!! I 성향이라 사실 이런 오프라인 모임에 올 때마다 첫 시작이 조금 어려웠는데, 덕분에 너무 반갑게 시작하고 쉽게 융화될 수 있었어요! 😆 민영님과 태인님까지 모두 합류하고, 각 조마다 따로 장소를 찾아 깊게 네트워킹 하는 시간을 가졌습니다.
우테코 교육장의 미팅룸에 모여 앉았더니 코드가 잘 통한다는 것이 느껴졌고, 질문이 오가며 즐겁게 이야기를 나누게 되었어요! 더욱이, 글또 준비위 분들께서 만들어주신 질문지 덕분에 어색한 기류가 흐를 틈이 없었어요!
대화를 나누며 시간이 정신없이 흐르는 와중, 조별로 인생네컷을 찍는 시간이 되었어요. 덕분에 오늘의 인연을 기념으로 간직할 수 있었습니다!(성윤님의 트레이드마크, 메타몽으로 선택했죠!)
7.5 게임
네트워킹 시간을 통해 팀의 결속이 생긴 후, 카훗이라는 게임이 시작되었어요. 처음 해보는 게임이었는데 직관적으로 게임의 룰을 알 수 있었어요. 문제가 나타나고 사지선다가 각각 가지고 있는 컬러로 재빠르게 답을 선택해야하는 게임이었습니다!
저는 JavaScript, 프론트엔드 기초 지식으로 퀴즈를 낸 것이 대부분이었어요. 그런데 저는 대부분 맞춘 것이 없어서... 반성을 많이 하게 되었습니다... 😂
7.6 발표 피드백
반상회 당일, 행사가 끝나갈 쯤 성윤님은 참여 후기를 요청하셨었어요. 반상회에 대한 전반적인 소감과 각 발표자들에게 피드백, 그리고 준비 위원회 분들에게 마음을 전달하는 내용을 작성할 수 있었어요. 벌써 종료된다는 것에 아쉬운 마음을 담아 열심히 구글 폼을 작성해서 제출했었죠!
그리고 반상회가 끝난 일주일 후, 성윤님께서 DM으로 기쁜 소식을 전달해주셨어요!
각 발표자에게 하고싶은 말 중, 첫 번째 발표자인 저에 대한 답변을 모아서 전달해주신 것입니다!! 이미 Q&A와 슬랙 스레드의 댓글을 통해 몇몇 참여자 분들의 반응을 받아 흐뭇한 와중이었는데, 이렇게 모든 참여자 분들의 목소리를 들을 수 있다는 것에 뭉클했습니다...
제가 이 발표를 통해 이야기드리고 싶었던 내용은 "npm 라이브러리 만들기에 대한 막연한 장벽을 허물자!"였습니다. 이 시트를 통해 참여자 분들의 목소리를 들어보았을 때, 다행히 그 의도가 분명히 전해졌다는 것을 알 수 있었어요!! 실제로 용기를 얻었다는 말씀을 들었을 때 더할 수 없는 충만감을 느꼈습니다...! 🥺
글또 반상회만의 특별한 점이었습니다. 그냥 이야기를 전달드리고 끝이 아니라 어떻게 받아들였는지 즉시 알 수 있었으니까요!!
7.7 종료
그렇게 저에게 2번째 발표 기회를 준, 글또 프론트엔드 모바일 반상회가 종료되었어요! 모든 것이 매끄럽고 즐거웠던 하루였습니다!!
그 다음 날 저는 글또 10기 슬랙의 프론트엔드 빌리지 채널에 저의 발표 자료와 함께 감사의 글을 전달했습니다.
앞으로
첫 번째로 기술 주제의 발표를 하였던 귀중한 경험이었습니다. 80명이나 되는 선배 개발자 분들 앞에서 발표를 할 수 있었다니... 너무나 기뻤었죠!!
그렇지만 단 한번만 해보아도 원이 없겠다고 생각했던 바램과 달리... 다음에 더 스스로 만족할 수 있을만큼 멋진 발표를 해보자는 새로운 목표가 생겼습니다. 아쉬운 것 투성이었어요.
- 기술 주제인 만큼 더 구체적인 내용이면서도 쉽게 이해가 되게 해야한다는 점
- 고민과 문제 해결과정이 더 많이 들어가지 못한 점
- 흡입력 있는 스토리가 되지 못한 점
- 완급 조절이 유연한 스피치가 되지 못한 점
한 번이면 족하다고 생각했었지만 오히려 욕심만 더 커졌습니다...! 더 흥미로운 주제로 더 완성도 높은 기술 발표를 준비하고 싶어졌습니다!
이런 뜻깊은 행사를 만들어주신 성윤님과 준비위 모든 분들,함께 발표를 열심히 준비한 다른 발표자분들, 그리고 뜬금없이 눈이 매섭게 내리던 날임에도 불구하고 모두 즐겁게 참석해주신 참여자 분들께 감사의 인사를 전합니다!
