2023년을 마무리하며

이맘때쯤이면 항상 시간은 빠르고 이뤄낸 것은 별로 없다고 생각한다. 하지만 돌이켜보면 꽤 많은 일들이 있었다. 2023년을 마무리하며 내가 무엇을 했고, 앞으로 무엇을 하고 싶은지 정리해 보려고 한다.

디자인시스템

우아한형제들 배민커머스웹프론트 팀에 입사하고 온보딩을 마치고 B마트와 배민스토어 서비스 쪽 간단한 작업을 진행하고 있었다. 익숙해질 때쯤 디자인시스템TF에 합류하면서 디자인시스템 개발 업무에만 몰두했다. 신규 프로젝트라서 레포 설정부터 시작해서 디자인시스템을 어떻게 구성할지, 어떤 기술을 사용할지, 어떤 방식으로 개발할지 결정하는 과정에 참여하고 모든 PR을 보면서 정말 많이 배웠다.

초반에는 자료 조사와 논의 위주로 진행했다. 각자 조사할 대상을 정하고 발표하는 시간을 가졌는데 나는 Vanilla-extract를 조사했다. Vanilla-extract는 한마디로 Zero-runtime css-in-js다. CSS Module의 TS버전이라고 생각하면 된다. Vanilla-extract는 무엇인가라는 글을 작성하고 사내에서 발표했다. 추가로 컨벤션들과 사용할 만한 유틸 함수들을 제안했다. 사내 발표를 통해서 Vanilla-extract를 좀 아는 사람으로 인식되어서인지 팀원들이 질문을 하기도 했다. 사용법이 어느 정도 정착되고 우리 팀에서 새로 시작하는 프로젝트에는 이제 Vanilla-extract를 사용한다. 이외에도 접근성, 디자인토큰 등등을 조사했다.

TF에서 처음으로 맡은 개발 작업은 디자이너님들이 Figma에서 만든 아이콘을 Code로 변경하는 일이었다. Figma API를 사용해서 응답 값을 살펴보니 Figma에서 SVG를 AWS s3에서 관리하고 있는 것을 알았다. Figma API를 통해서 SVG URL을 모두 가져오고 한 파일에 저장했다. 그런 다음 SVG URL에 GET 요청을 보내서 SVG코드를 파싱해서 리액트 컴포넌트로 변경하는 작업을 거쳤다. 추가로 Figma에서 디자인토큰들을 정의하고 있었는데 이것도 코드로 가져오는 작업도 함께했다.

TF에는 우리 팀 개발자뿐만아니라 다른 팀 개발자도 있다. 처음에는 10명이 넘었다. 이렇게 많은 인원이 디자인시스템이 기여하면 엄청난 것을 만들 수 있겠구나 생각했지만, 비즈니스 업무가 바빠져서 한 달 만에 디자인시스템TF 개발자가 다섯 명으로 줄었다. 해야 하는 양은 똑같은데 인원이 반토막 나버려서 업무가 많아졌다. 다섯 명의 개발자와 다섯 명의 디자이너가 열심히 만들었다. 디자인시스템 패키지 1.0 배포 몇 달 전부터 모두가 밤낮없이 개발했던 때가 있었다. 힘들었지만 해커톤 하는 느낌도 들고 제일 재미있었던 때다.

디자인시스템 1.0을 배포해서 유지보수 모드로 돌아섰지만 2024년에도 해야 할 일이 많다. 디자인토큰을 개선하고 시각적 회귀 테스트와 같은 생산성을 높일 수 있는 프로젝트들을 계획하고 있다. 디자인시스템을 통해서 배운 것과 경험한 것들을 앞으로 기록으로 남기려고 한다.

해커톤

우아한형제들의 해커톤, 일명 우아톤에 참가했다. 이번 해커톤 주제는 생성 AI였다. Chat-GPT에 질문만 할 줄 알지 프롬프팅 엔지니어링이나 Chat-GPT API를 이용해 본 적도 없어서 참가해야 할지 고민이었다. 마침 우리 팀 개발자분이 팀원을 모집 중이었고 인공지능, 백엔드 등등 모르는 것이 없는 분이라 함께하고 싶었다. 팀 FE개발자 세 명이 먼저 의기투합해서 해커톤 팀을 결성했다. 디자이너와 기획자 포지션도 필요해서 비교적 디자이너를 잘 아는 내가 디자이너를 섭외하고 나머지 분들은 기획자를 섭외했다.

재미있는 사실은 한창 개발하고 있던 디자인시스템 컴포넌트(베타)를 사용하기로 했다는 점이다. 지금까지는 제작자의 입장이었지만 해커톤 당시에는 사용자의 입장이 되었다. 제작자일 때는 몰랐던 불편한 점을 알 수 있었고 추후에 개선 작업을 진행했다.

결과적으로 인기상을 수상했다. 1박 2일 동안 밤새서 만든 프로덕트인 만큼 상을 받아서 기분이 좋았다. 가장 큰 수확은 디자이너님과 기획자님과 친해진 것이다. 밤새서 하나의 프로덕트를 완성시키는 과정에서 자연스럽게 친해졌다. 디자이너님과는 디자인시스템도 함께 만드는 분이었는데 이 일을 계기로 함께 주도적인 업무들을 진행했다. 디자이너님과는 우아콘 발표도 같이 하게된다.

해커톤에 참가하면서 우아한테크캠프(교육형 인턴)때가 떠올랐다. 우아한테크캠프에서는 주마다 프로젝트를 완성해야 한다. 인생에서 처음으로 밤새워서 무언가에 몰두했던 시기다. 친구들과 놀 때도 새벽 2시만 되면 졸려서 몰래 자던 나였는데 우아한테크캠프 때는 밤새워서 개발하고 있었다. 그때의 느낌이 해커톤 때와 비슷했다. 무언가를 만들어내는 과정에서 오는 행복감은 이루 말할 수 없다. 다시는 이런 경험을 못 할 것이라고 생각했지만 해커톤 때 경험할 수 있어서 좋았다. 내년에도 참가할 것이냐 물어보면... 그건 장담할 수 없다. 정말 힘들었다.

우아콘

회사에서 개발자로서 참여할 수 있는 것은 모두 참여한 것 같다. 우아콘이라고 불리는 우아한형제들의 테크 컨퍼런스에 연사로 참여했다. 해커톤에서 함께했던 디자이너님과 디자이너와 개발자의 소통을 주제로 발표했다.

평소에 둘이 참 이야기를 많이 했는데 막상 발표하려고 하니 생각나는 것이 없었다. 그럴 때마다 디자이너님이 우리가 논의하고 해결한 문제들을 떠올려주셨다. 할 이야기를 정하면 살을 붙이는 작업을 계속했다. 살을 붙이는 과정에서 우리의 작업을 정리하는 계기가 되었고 놓쳤던 작업도 파악했다.

콘텐츠는 나름대로 잘 준비되고 있었지만, 문제는 발표 실력이었다. 감사하게도 회사에서 발표 코칭 세션을 지원해 주셔서 발표자로서 문제를 알 수 있었고 개선할 점을 알 수 있었다. 나의 문제는 다음과 같았다.

1. 말하는 와중에 '어...'를 많이 함
2. 유창하지 않음 (한 문장을 빠르게 말하지 못함)
3. 말하는 데 힘을 너무 많이 줌, 평소처럼 이야기해야 하는 데 과장된 톤

1번은 발표 자료 숙지의 문제일 가능성이 높다. 발표 자료를 숙지하니까 저절로 해결된다. 반복연습이 중요하다. 2번 문제를 해결하기 위해서 말을 평소보다 조금 더 빨리해야 한다고 인지하고 있어야 한다. 말이 느리면 청중은 지루하다고 생각할 수 있기 때문이다. 3번은 녹음하면서 반복적으로 자신의 목소리를 들어야 한다.

발표 영상을 다시 들어보니 썩 마음에 들지 않았지만, 처음보다 나아져서 다행이었다. 전체적으로 발표 실력이 나아진 것은 만족했다. 200명이 넘는 사람들 앞에서 발표하는 것은 처음이었지만 다행히 떨지 않았다. 익숙한 팀원분들이 보여서 그런 것 같다. 이야기를 경청해 주는 팀원분에게 시선을 고정시키고 이야기하니 하나도 떨리지 않고 편하게 발표할 수 있었다. 발표가 끝나자마자 느껴지는 후련함이 좋았다. 실력을 좀 더 갈고닦아서 다음에는 더 많은 인원 앞에서 발표하고 싶다. 소규모 발표를 계속 자원하며 발표 실력을 키워야겠다.

오픈소스 기여

항상 하고 싶었던 일이지만 코드가 너무 방대하고 어디서부터 시작해야 할지 몰라서 시도하지 못했다. 올해 네 개의 프로젝트에 기여를 했다. 각각의 작업을 간단히 설명해 보겠다.

첫 번째로는 은재님이 만드신 issue-to-markdown에 기여했다. Github 이슈를 마크다운으로 변경해서 Github에 바로 push해주는 유용한 github-action 서드파티다. TIL 블로그에 사용하고 있다. Github 이슈를 마크다운으로 변환할 때 파일을 프로젝트 어디에 위치시킬지 정해야 한다. 기존 코드는 한 폴더에 하나의 글만 저장할 수 있었다. 하지만 하나의 폴더에 여러 개의 글을 저장할 수 있는 기능이 필요했다. 이슈를 올리지 않고 바로 PR부터 올렸다. 은재님과 피드백을 받고 개발 방향을 변경했다. 변경된 방향으로 PR을 만들었고 머지되었다.

다음으로는 구글의 레포에 기여했다. 평소에 Github를 자주 둘러보는데 그날은 chrome-extensions-samples를 보고 있었다. 해당 레포에 있는 코드들을 실행해 보던 중에 실행하면 에러가 나는 코드가 있었다. 알고 보니 파일네임이 잘못 작성되었던 것이다. 간단한 PR을 만들어서 수정했다. 정말 간단한 작업이지만 구글 Github에 기여한 것이 신기했다.

앞서 디자인시스템에서 Vanilla-extract를 사용하고 있다고 설명했다. Vanilla-extract의 assignInlineVars는 Element에 css-variable을 할당하는 메소드다.

      <div style={assignInlineVars({ ['background']: `red` })} />

assignInlineVars는 값으로 undefined를 받을 수 없다. 만약 undefined를 넣으면 에러가 발생한다. null이나 undefined값을 허용해달라는 이슈가 존재했고 마침 동일한 기능이 필요했던 터라 이를 구현해서 PR을 생성했다.

올해 디자인시스템 이외에도 네이버블로그 에디터와 비슷한 에디터를 만들고 있었다. 에디터의 콘텐츠가 비어있는 상태에서 툴바를 클릭하고 다시 에디터를 선택하면 스타일이 모두 초기화되는 버그가 있었다. 버그를 살펴보니 사용하고 있는 라이브러리 내부 문제였다. Lexical이라는 페이스북에서 만든 에디터 라이브러리를 사용하고 있었는데 내부 코드를 읽어보고 PR을 생성했다.

작년에는 오픈소스 코드를 읽고 이해하는 것이 정말 어려워서 읽다가 포기한 적이 많았다. 회사코드를 많이 읽어서 그런지 올해는 오픈소스 코드를 읽고 이해하는 것이 어느 정도 가능해졌다. 하지만 아직 빌드 쪽을 살펴보면 이 코드들의 동작 과정이 잘 이해되지 않는다. 2024년에는 라이브러리가 처한 더 어려운 문제들을 해결해 보고 싶다.

글쓰기

기술 블로그를 강제적이라도 운영하고 싶어서 글또라는 커뮤니티에 가입했다. 회원 전부가 성장을 위해 2주에 글 하나씩 작성하는 미션이 부여되는 커뮤니티다. 처음에는 업무가 바쁘지않아서 퀄리티가 괜찮았지만, 업무가 바빠지면서 한두 번 안 쓰게 되니 아예 놓아버렸다. 글또라는 커뮤니티에는 성실하고 멋있는 분들이 많다. 그런 분들을 보면서 나도 열심히 살아야겠다고 생각한다. 역시 같은 목표를 가진 사람들이 주위에 있으면 목표에 도달하기 좀 더 쉬워지는 것 같다. 글또는 기수제로 운영하는데 글또 8기에 이어 9기에도 참여하고 있다. 8기 때는 절반 정도밖에 글을 못 썼다. 이번 9기 때는 저번보다 나은 모습을 보여주고 싶다.

글또 9기를 시작하기 전에 블로그를 만들었다. 기존에는 Velog를 사용했는데 올해 목표 중 하나가 나만의 블로그를 만드는 것이어서 Next.js로 블로그를 만들었다. 자세한 내용은 이 블로그에 포함된 기술들을 자세하게 설명하는 글에서 파악할 수 있다.

기술블로그도 중요하지만, 일상적인 글쓰기에도 관심이 많아서 사내 글쓰기 스터디에도 참여했다. 한 편 혹은 두 편의 글을 6주동안 써서 마무리하는 것이 목표였다. 대학교때 학교 잡지를 만드는 동아리에 가입한 적이 있었는데 그 때 생각이 났다. (그때 열심히 쓸 걸 그랬다. 지금까지 글쓰기를 못할줄 몰랐고 중요한지도 몰랐다.) 스터디 기간 동안 근무지 자율적 선택제에 대한 글을 썼다. 스터디의 정말 좋았던 점은 서로 긍정적인 피드백을 해주는 것이다. 주제를 가지고 절대 지적하지 않는다. 대신 궁금한 점, 더 듣고싶은 이야기가 무엇인지 적어준다.. 글을 쓰기 시작할 때는 한 페이지밖에 적지 못했지만, 피드백을 받고 나서는 무엇을 써야 할지 파악하고 글을 쓸 수 있었다. 처음에는 아무리 써도 한 페이지 분량밖에 나오지 않았는데 피드백을 받은 덕분에 한 페이지를 더 쓸 수 있었다. 내년에도 스터디가 열리면 참여할 예정이다.

두 개의 열정적인 커뮤니티를 경험해 봤는데 공통점이 있었다. 두 커뮤니티 모두 리더를 맡고 계신 분이 정말 열정적으로 이끌어 주셨다. 리더의 헌신이 있다면 모임은 무조건 성공적으로 운영된다. 문제는 리더의 열정이 고갈될 수 있다는 점인데, 이런 이유 때문이라도 시즌제로 운영해야 하는 것 같다. 리더의 헌신을 알기에 나도 최대한 도움을 드리려고 했다. 기회가 된다면 리더가 되어서 열정적인 커뮤니티를 만들어보고 싶다.

2024년에 하고 싶은 것

[시니어 개발자 되기]
우리 팀 시니어 개발자분들이 참 대단하다. 문제가 생기면 너나 할 거 없이 해결해 주시고, 무언가를 만들어내면 빠르게 피드백을 주시고, 무언가를 빠르게 배우고 커뮤니케이션도 잘하신다. 가정이 있는 분들이 많으신데 어떻게 나보다 열정적으로 일하신다. 시니어와 주니어 개발자의 차이는 무엇일까 생각해봤다. 결론적으로 마음가짐 차이 때문이라고 생각한다. 사실 그분들은 시니어라서 그렇게 행동하는 것이 아니라 그런 행동을 하기 때문에 시니어가 된 것이다. 나는 스스로를 주니어 개발자로 인식하고 있는 것이 문제라고 생각한다. 굳이 주니어로 인식하지 않고 스스로를 시니어로 인식하고 행동해야 한다. 일정관리, 다른 직군과의 커뮤니케이션, 업무 분배 등등 시니어 개발자에게 미루지 말고 스스로 행동해야 한다. 2024년에는 한 명의 몫이 아니라 더 넓은 영향력을 가지는 개발자가 되고 싶다.

[인프런 지식공유자가 강의 개설 혹은 멘토링]
컨퍼런스에서 발표를 해보니 나의 처참한 발표 실력을 알게됐다. 여기저기서 발표를 자원해서 해볼까 했지만, 그것보다 접근성이 더 좋은 게 지식 공유라고 생각한다. 만들고 싶은 강의는 다음과 같다.

• Git 강의 : Git스터디를 진행 중인데 이를 기반으로 이해하기 쉬운 강의를 만들고 싶다.
• 나만의 블로그 만들기 강의 : 이 블로그를 만든 지식을 토대로 강의를 만들고 싶다.

강의를 만들 수 없다면 멘토링을 해볼 생각이다. 취준생이나 처음 개발을 시작하는 분들에게 좋은 가이드를 줄 수 있을 것 같다. 1월 초에 인프런 지식공유자를 신청해서 진행해 보려고 한다.

[블로그 꾸준히 하기]
블로그를 직접 만든 만큼 블로그를 꾸준히 운영하고 싶다. 디자인시스템을 만들면서 배웠던 것들, 오픈소스를 보면서 배웠던 것들을 기술블로그에 정리할 것이다. 어떤 지식은 쉽고 기초적인 내용이라 블로그에 쓰기 망설여지기도 하는데 앞으로는 쉽든 어렵든 헷갈리는 지식이라면 모두 적으려고한다.

기술 지식뿐 아니라 내 생각들도 적을 예정이다. 블로그의 네비게이션 바를 보면 Thoughts와 Writting이 있다. Writting에는 기술 지식을 Thoughts에는 일상적인 이야기를 쓸 것이다. 기술, 비기술 글을 합쳐서 총 36개의 글을 작성해 보려고 한다.

개인적으로 김봉진님의 생각을 굉장히 좋아하는데 힐링캠프에 출연하신 영상을 좋아한다. 우리가 오늘부터 피겨스케이팅을 타서 김연아보다 잘 탈 수 없다. 하지만 확실한 건 10년 전의 모습보다 성장해 있다는 것이다. 입사하고 뛰어난 사람들이 워낙 많아서 비교를 자주 하기도 하고 의기소침해질 때도 있었다. 그럴 필요 없다는 것, 예전의 나보다 성장하는 것을 목표로 살아가야 한다는 믿음을 주는 좋은 영상이다. 2024년에는 2023년보다 성장하길 기대하면 글을 마무리한다.