FEConf 2022 스태프로 참여한 후기
2022.10.07
life
행사 당일 아침후원사 부스유익한 세션들디자인 시스템, 형태를 넘어서 : FLEX - 이소영100+ 패키지 모노레포 우아하게 운영하기 : 토스 - 오창영ReScript 같이 해요: 그린랩스 - 정미량@webtoon/psd 오픈소스 라이브러리 개발기: 네이버웹툰 - 이동현, 강예형내 Import문이 그렇게 이상했나요?: 토스 - 박서진FEConf 2022를 마치고
코로나 2년만에 다시 오프라인으로 열린 FEConf22에 참여했다. 참가자가 아닌 스태프로.
몇 달 전부터 올해 행사를 기다리고 회사 슬랙에서도 프론트엔드 개발하시는 분들께 같이 신청하자고 졸랐는데 0.5초만에 매진이 띄워져있는 네이버 예약 페이지를 보며 침울했었다. 아침부터 네이비즘도 켜놓고 (개발자 컨퍼런스 참여하기 위해 네이비즘 서버시간도 확인하게 될 줄은 몰랐다) 기다렸는데 흑흑. 그러나 하늘이 무너져도 솟아날 구멍은 있다고 하던가. 며칠 뒤에 페이스북 FEConf 그룹에 올라온 행사 지원 스태프 공지를 보고 ‘이거다’ 싶었다. 그간 FEConf로 많은 도움을 받고 감사했던만큼, 오프라인으로 열리는 올해 행사를 운영하는데 스태프로써 도움을 드린다면 너무나 의미있을 것 같고 더 많은 분들을 만날 수 있을 것 같았다.
행사 당일 아침
올해 FEConf 행사는 롯데월드타워에서 진행됐다. 레지던스와 전망대, 호텔까지 있는 이 곳은 고급스러웠으나 길찾기가 조금 어려운 편이다. (길찾기에 자부심이 있을정도로 길을 잘 찾는 나 조차도 롯데월드타워에서 스태프 집결 장소였던 등록데스크 장소까지 조금 헤맸을 정도였으니..) 30분 전에 도착했는데도 일찍 오신 몇몇의 스태프 분들이 앉아계셨고 첫만남이지만 편한 분위기 속에 자기소개를 하며 업무가 주어지기 전까지 기다렸다.
FEConf 오거나이저 토스 한재엽님이 도착하시고 인사를 나누는데 SLASH22 세션 영상이나, JBee 기술 블로그 등으로 많이 뵈면서 내적친밀감이 쌓였던 재엽님을 직접 뵐 수 있어서 신기하고 좋았다. (연예인 보는 기분..!)
내가 스태프로 맡은 역할은 1층 데스크에서 참가자분들의 등록을 도와주는(네임택 배부) 일이었는데, 덕분에 이번 행사에 참여하시는 프론트엔드 개발자분들을 모두 한번씩은 얼굴을 뵐 수 있었다는 점. 가나다 순으로 쭉 네임택을 배치해보니 새삼 참여자가 정말 많았구나.. 치열했던 네이버 예약에 성공해서 오신 참가자 분들이 대단하다고 느껴지면서도, 이렇게 많은 분들을 모시는데도 내가 실패했던 것이 아쉬웠다. 그치만 스태프로 올 수 있어서 오히려 좋아 👍
오랜만에 반복적인 안내 멘트를 하다보니 대학생 때 홍보대사 활동하면 학교 행사 의전을 했던 추억이 떠올랐다. 초반에는 살짝 대충 스무번 이상 같은 안내를 하면 멘트가 입에 붙어서 조건반사처럼 튀어나온다.. 초대를 받아 회사 분들끼리 모여서 같이 오시는 분들도 있고, 개발자 분들끼리 1층 로비에서 서로 인사 하시는 모습도 종종 볼 수 있었다. 이러한 개발 커뮤니티에 자주 참여하고 두루 알고 지내는 사람들이 많으면 행사 참여해서 같이 이야기도 하고 더욱 즐거울 것 같다. 아쉽게도 이번 컨퍼런스에는 혼자 왔지만, 다른 좋은 개발자분들께 나도 그만큼의 가치를 줄 수 있는 사람으로 성장하면서 네트워크를 넓혀갈 수 있기를.
후원사 부스
오늘의집, 뱅크샐러드, 에이블리, 야놀자, 토스, 패스트캠퍼스, Superb AI, 요기요, aaant 등의 후원사에서 부스를 운영하고 있었는데, 이벤트도 참여하고 커피챗도 요청할 수 있었다. 굿즈 담아가기 쉽게 에코백과 쇼핑백을 주는 센스있는 기업들이 많아 부스를 쓱 돌면서 퀴즈도 풀어보고 굿즈도 한가득 받아왔다.
유익한 세션들
스태프로 참여한 만큼 행사의 원활한 진행과 일이 우선이기 때문에 참가자처럼 세션 시작 초반부터 앉아서 세션을 듣고 하지는 못했지만, 참가자분들이 많이 입장하시고 1층 데스크에서 등록하는 일이 어느정도 끝나고서는 감사하게도 오거나이저 분들께서 듣고 싶은 세션이 있으면 올라가서 보셔도 된다고 배려해주신 덕분에 몇몇 세션을 직접 들을 수 있었다. 놓친 세션들은 다음 날 유튜브에서 1.5배속으로 보면서 나에게 유용했던 몇개의 내용을 조금 정리해보았다.
모든 세션 내용들은 FEConf Korea YouTube 채널에서 다시볼 수 있다.
디자인 시스템, 형태를 넘어서 : FLEX - 이소영
- 형태가 강하게 결합된 디자인 시스템의 문제점 : 다양한 상황을 대응할 수 없음 → 디자인 시스템의 병목이 됨
- 컴포넌트가 변경을 수용하기 위한 방법으로는 두가지
1. 요구사항에 따라 키워서 크게 만들어가기 → 변경이 디자인 시스템까지 전파되어야함. 복잡성의 증가
2. 요구사항을 나누어서 분리하기 → 여러군데 구현체가 흩어져 파편화와 복잡성 증가
- Design System이 오히려 병목이 될 수 있는 아이러니함 → Design System에 대한 기대와 책임이 불분명할 때 발생
- 디자인 시스템에 무엇을 바라는가?
- Design System을 형태 / 기능 / 접근성 / 커스텀 네가지 구성 정의
- linear (FLEX design system 3.0) → Primitive Component
- FDS 1.0 → 2.0 → linear
- 3가지 principle
- 기능은 형태와 독립적이다
- 기본동작을 보장한다 = 기본동작이 아닌 것은 정의하지 않는다
- 최소한의 제약만 가진다
- Compound Component
- Primitive Component의 문제점 = 조합에 대한 비효율 (→ 서브웨이에서 주문하기와 같음. 조합된 세트를 재활용 할 순 없을까?)
→ linear extension : 반복작업의 비효율을 줄임
100+ 패키지 모노레포 우아하게 운영하기 : 토스 - 오창영
- 모노레포 : 잘 정의된 관계를 가진 여러개의 독립적인 프로젝트들이 있는 하나의 레포지토리이다.
- toss frontend libraries 구조
- Library Monorepo / Service Monorepo
- Slash → @toss/slash 깃헙에 공개 (’관습을 깨고 기술 혁신의 한 획을 긋다’ 후와)
ReScript 같이 해요: 그린랩스 - 정미량
- ReScript
- 읽을 수 있는 JavaScript로 컴파일되는 타입 언어
- 타입스크립트와 같이 자바스크립트의 슈퍼셋이 아님. 특정한 기능만 제공
- 작게 좋았던 점 / 크게 좋았던 점 : 논쟁할 필요가 없다 (작은 따옴표 vs 큰 따옴표, 탭사이즈 2 vs 4 ….), 파이프 연산자 : 책 읽듯이 한 방향으로 읽기, 패턴매칭
- 아쉬웠던 점 : 바인딩 / 커뮤니티
@webtoon/psd 오픈소스 라이브러리 개발기: 네이버웹툰 - 이동현, 강예형
psd 파일을 프론트엔드에서 파싱하기 위한 라이브러리를 개발한 과정을 설명하셨다. 약 10분의 1 크기, 약 7배 속도 향상, PSB 파일 지원, 유니코드 문자 지원 등의 장점을 가진 라이브러리를 개발하기까지 photoshop file structure도 분석하고, Cursor 객체를 만들고 바이너리 데이터를 읽어보는 것이 인상적이었다. 비트이동 연산이 필요함 → CS 기본 지식(비트 연산, 파일 구조)을 프론트엔드에 활용한 좋은 사례라고 생각. 전공지식이 있는 프론트엔드 개발자는 문제 해결력이 더욱 확장된다는 것을 느꼈다.
개발하는데 그치지 않고 psd 파서의 성능을 훨씬 빠르게 만들기 위해 psd의 이미지 디코딩 방식을 설명하고 개선하기 위해 WebAssembly을 적용해 최적화한 내용도 아주 인상적이었다.
다양한 환경에서 내가 만든 라이브러리를 쓰게 만들고 싶은 라이브러리 개발자의 고민을 어떻게 해결하고 싶은지 알 수 있었다.
notes
- 서버에 업로드하여 파일을 분석하고 메타데이터와 이미지 다운로드 / 사용자의 웹 브라우저에서 바로 파일을 분석
- 서버 : psd-tools
- 로컬에서 하는 것은 없음
- PSD.js → 1,000 downloads
- 번들링 용량, 실행 속도, .psb 형식 미지원, 한글 미지원 → 직접 만들어야지 뭐…
- No silver bullet. 장단점을 신중히 고민해봐야한다.
내 Import문이 그렇게 이상했나요?: 토스 - 박서진
- ESM(ECMAScript Modules)를 도입해야하는 이유
- 가짜 import로 발생하는 흔한 오류 →
Unexpected token import/require() of ES Module - CommonJS → ‘파일’단위. TS, Babel을 사용하면 CommonJS 형태로 변환이 됨. 가짜 import를 쓰고 있었다!
- CommonJS vs ESM
- CommonJS - require, 정적 분석 어려움, 동기, 언어 표준 x
- ESM - import/export, 정적 비교 쉬움, 비동기, 언어 표준
- Node.js에서의 ESM 규칙 = 확장자 써야함! (순회를 막기 위한)
- 현재 ESM 도입의 난관들
- ESM으로 옮기는 방법 : type module 추가 / 파일 확장자 추가 / require() 삭제 / __dirname 정의 등 / createRequire
여기에 다 적지는 못했지만 박신연님의 대형서비스 빠르게 프로토타입하기, 노용구님의 텍스트 에디터 세션, 최수형님의 상태관리, 박세문님의 DDD, 김혜성님의 엣지 컴퓨팅 등의 세션들 모두 흥미롭게 들었다 :)
FEConf 2022를 마치고
모든 세션이 끝난 후 진행된 럭키드로우에서는 에어팟, 아이패드 오랜만의 FEConf 컨퍼런스였는데 성황리에 잘 마무리한 것 같다. 행사 뒷정리를 마치고 근처에서 오거나이저분들과 연사님들, 스태프분들과 크래프트아일랜드로 뒷풀이를 갔다. 행사 도중에는 일도 많아 정신없어서 스태프분들끼리도 많은 이야기를 못했는데, 뒤풀이 장소에서 맛있는 음식들과 함께 많은 이야기를 나눌 수 있어서 재밌었다😁 재영님의 탁구의 효능, 효험에 영업(탁구 등록하러 가야겠다), 재익님의 화려한 언변과 진행에 감탄하고, 당근마켓 혜성님의 기술에 관한 깊은 생각도 내게 큰 인상을 주었던…
디자인이 심플하고 예뻐 꽤 자주 입을 것 같은 스태프 티셔츠 뒤에도 써있는 올해 FEConf 캐치프라이즈가 인상깊어 옮겨본다.
We are Dreamer, Self-Starter, Inventor, Change-Maker, Deep-Diver, Pioneer Not Engineer, Developer, Salary-man, Other boring things
‘not (common or traditional) engineer, developer’이 되자.
결론적으로 이번 행사에 스태프로 참여한 것은 최고의 선택이었다. 스태프로 조금이나마 행사 운영에 기여하면서 많은 뛰어나신 분들을 만나서 개발, 커리어 얘기를 할 수 있어 즐겁고 행복했다. 이런 좋은 기회를 주시고 고생하신 FEConf 모든 분들께 정말 감사하다.
내년에 또 스태프로 (혹은 기회가 된다면 오거나이저로도!) 지원할 수 있다면 하고 싶고, 그동안 다양한 경험과 도전을 하면서 언젠가 이런 컨퍼런스에서 세션 발표를 하며 프론트엔드 생태계에 기여할 수 있는 나로 성장할 수 있었으면.