오픈소스 프로젝트와 코더플레이스
GDG on Campus 한국외국어대학교 24-25 그룹에서 마지막 발표를 진행했습니다. 발표 주제는 글의 제목과 동일한 '오픈소스 프로젝트와 코더플레이스'였는데요, 최근 관심 있게 진행하고 있는 프로젝트 소개가 포함되어 있어 이 글에서도 내용을 정리하고자 합니다.
간단한 발표 하나 듣는다고 생각하시고 읽어주시면 감사하겠습니다. 🙂
발표
오늘은 오픈소스 프로젝트 이야기와, 제가 진행하고 있는 코더플레이스라는 프로젝트를 소개해 보려고 해요.
먼저 간단히 제 소개를 드리면, 저는 GitHub에서 ohprettyhak이라는 이름으로 활동하고 있고, 의료 도메인 스타트업 CSON에서 코파운더이자 웹 프론트엔드 개발자로 일하고 있어요.
최근에는 React와 Next.js로 개발을 진행하고 있고, 어떻게 하면 타입 안정성이 높은 코드를 작성할 수 있을지 고민하면서 일하고 있어요.
❶ 오픈소스 프로젝트
먼저 오픈소스 프로젝트에 대해 이야기해볼게요.
예를 들어서, 제가 컴퓨터공학부 세미나실을 예약한다고 가정해 볼게요. 세미나실 예약 시스템 웹페이지에 접속해서, 로그인하고, 날짜와 시간을 선택한 다음 예약을 완료하겠죠.
이 짧은 과정에서도 우리는 이미 여러 개의 오픈소스 프로젝트를 경험하고 있어요. 날짜를 선택할 때는 react-datepicker 라이브러리를 사용했고, API 요청이나 상태 관리는 react-query를 활용했어요.
아차차, 사실 이 페이지를 만드는 데 사용된 React, Webpack, Babel도 모두 오픈소스예요. 간단한 기능을 가진 페이지 하나에도 이렇게 다양한 오픈소스 도구들이 들어가고 있어요.
그럼, 우리가 사용하는 라이브러리들이 모두 오픈소스일까요? 이건 기준이 있어요.
네이버의 오픈소스 가이드나 GitHub의 Open Source Guides 같은 문서를 보면, 보통 오픈소스는 다음과 같은 조건을 갖고 있어야 해요.
공개(Public): 소스코드가 누구에게나 열람할 수 있게 공개된다.
자유(Freedom): 코드를 자유롭게 사용, 수정 배포할 수 있다. (라이선스 조건을 지키는 선에서)
라이선스(License): 법적 권리를 명시하는 공식 허용 조건이 있다. (MIT, Apache 2.0, GPL 등)
협업(Collaboration): 커뮤니티 중심의 개발과 기여 문화가 있다.
즉, 이 원칙을 지키고 있는 프로젝트는 오픈소스 프로젝트라고 생각할 수 있어요.
다시 홈페이지로 돌아오면, 앞에서 말한 라이브러리들은 이 네 가지를 모두 만족하고 있어요. 즉, 세미나실 예약 시스템을 만들 때 자연스럽게 오픈소스의 도움을 받고 있었던 거예요.
이렇게 우리는 오픈소스를 통해 많은 생산성 향상을 경험하고 있어요. 한가지 예시를 들어보고 싶은데요, 2006년에 출시된 제이쿼리라는 오픈소스 라이브러리로 사용자를 불러오는 코드를 만들려고 해요.
사용자 불러오기 버튼과 이를 출력할 리스트를 만들고 스크립트도 하나 추가했어요. 사용자 불러오기 아이템을 누르면, get 요청을 통해 API를 호출하고, 그 결과를 users 라는 아이디를 가지는 리스트에 출력하고 있어요.
어, 그런데 클라이언트가 아이템을 지우는 API와 삭제 버튼을 추가해달라고 하네요!
리스트 안에 지우기 버튼을 생성했고, 이를 클릭하면 API를 호출하는 새로운 코드를 추가했어요.
데이터를 불러오는 코드, 삭제하는 코드, 그리고 출력하는 코드까지 하나의 스크립트에 작성되어 있어 한눈에 어떤 기능을 하는지 알기가 힘들어요.
이번엔 같은 기능을 리액트로 다시 구현해 봤어요. 왼쪽에서부터, ① 유저를 담는 스테이트를 생성했고, ② '사용자 불러오기' 버튼을 클릭했을 때 실행될 API 호출 함수, ③ '삭제' 버튼을 클릭했을 때 실행될, 값을 지우는 API 호출 함수를 만들었어요.
오른쪽 코드에서, 사용자 불러오기에 로드 함수를 넣었고, 리스트에 사용자 배열에 있는 데이터를 자바스크립트 Array Map을 이용해서 출력하게 했어요. 또한, 버튼을 눌렀을 때, 아이디를 함수로 전달해서 삭제도 이루어지네요.
코드의 길이도 줄어들었고, 관심사를 분리하면서 개발자 경험도 향상되었어요. 만약 리액트가 오픈소스 프로젝트가 아니었다면, 우리는 생산성이 떨어지는 코드를 지금도 짜고 있을지 몰라요.
❷ 기여하기
그럼, 오픈소스에 왜 기여하면 좋고, 어떻게 기여할 수 있을지 이야기해 볼게요.
이것은 제가 기여했던 오픈소스 프로젝트의 일부에요. MDN Web Docs에서는 한국어로 번역되지 않은 일부 문서와 매크로를 번역했어요.
Contentlayer는 마크다운을 자바스크립트에서 쉽게 사용할 수 있도록 하는 라이브러리인데요, 패키지 의존성 버전 문제로 콘솔에서 워링이 발생하는 문제를 해결했어요.
Vercel은 제가 애용하는 호스팅 서비스이자, Next.js 프레임워크의 개발사인데요, 터보레포 가이드의 일부 문서가 잘못 라우팅 되는 현상, 패키지를 실행했을 때 리액트 워링이 발생하는 문제를 해결했어요.
저는 토스의 라이브러리를 통해 공부하고 있고, 그 과정에서 라이브러리의 버그를 수정하고 코드를 개선한 경험도 있어요. suspensive 리액트 서스팬스 라이브러리의 가이드를 모바일 환경에서 들어갔을 때 발생하는 오류를 해결했고, 사용자 선호 테마가 지원되지 않는 등의 리포지토리의 문제를 해결했어요.
여기서 나일론브릭스는 제가 만들고 운영하는 오픈소스 라이브러리 개발팀인데요, Next.js의 정적 페이지를 기반으로 블로그 테마를 만들었고, 그 과정에서 mdast 트리의 기능을 확장하는 remark-blockqoute-alert 라이브러리를 배포했어요.
오픈소스에 기여하는 방법을 정리해 볼게요.
번역(Translation): MDN, pnpm, Hugging Face 등 많은 국제화 프로젝트가 존재한다.
버그 제보(Issue Reporting): 가장 쉬운 방법, 공개된 프로젝트는 생각보다 버그투성이다.
코드 작성(Code Contribution): 버그를 수정하거나, 새로운 기능을 개발한다.
후원(Sponsorship): 개발자의 기분을 좋게 한다.
많이 사용되는 오픈소스는 문서가 잘 작성되어 있어요. MDN Web Docs, pnpm, Hugging Face 등이 그 예시에요. 이런 프로젝트에서는 개발자들이 자율적으로 번역을 진행하거나, 버그 제보 및 수정이 이루어지고 있고, 어떻게 기여하면 되는지에 대한 가이드도 자세히 작성되어 있어요.
버그 제보의 예시로 최근 제가 겪었던 문제인데요, 사용자에게 코드를 입력받기 위해 OTP 인풋 라이브러리를 사용했는데, 6자리를 입력할 수 있도록 했지만, 복사 & 붙여넣기를 하면 모든 텍스트가 넣어지는 오류가 발생했어요. radix-ui/primitives는 17,000 개 이상의 스타가 찍힌 프로젝트이지만, 여전히 이곳저곳에서 버그가 발생하고 있어요.
이 이슈를 등록하고 10분도 채 되지 않은 시간에 다른 개발자분께서 본인이 이 문제를 해결하고 싶다고 댓글을 남기셨고, 코드 작성으로 이어졌어요. 이런 식으로, 오픈소스에서는 정말 빠르고 유연한 협업이 가능해요.
그러면 오픈소스를 하면서 얻을 수 있는 건 뭐가 있을까요? 저는 이를 '성장' 이라는 키워드와 연결하고 싶어요.
첫 번째 성장은 다양한 코드베이스를 경험할 수 있다는 거예요. 잘하는 개발자들이 모여서 만든 프로젝트일수록 코드 퀄리티에 신경을 쓰며 작업하는데요, 그것을 보고 해석하는 것만으로도 큰 인사이트를 얻을 수 있었어요.
두 번째는 커리어에요. 토스와 버셀, 구글 등 많은 IT 기업에서 오픈소스 개발 경험을 우대하고 있어요. 또한 앞에서 말했듯 우리 같은 신입 개발자들은 실무 경험을 할 수 있는 기회가 되기도 해요.
세 번째는 경제적 자유의 가능성도 열려있다는 거예요. 러스트 기반 트랜스파일러인 SWC는 Vercel을 비롯해서 정말 많은 프론트엔드 생태계에서 이를 적용하여 사용하고 있고, Firebase의 대체제로 개발되었던 Supabase는 현재 클라우드를 이용해 수익화하고 있어요.
❸ 코더플레이스
이제 이번 발표의 마지막 주제인 코더플레이스를 소개할게요.
어느 날 학이 여행을 갔어요. 선글라스를 낀 걸 보니까 일본 도쿄에 놀러 간 것 같아요. 그런데 갑자기 대표님에게 전화가 옵니다.
"일해~"
그때 이런 생각이 들었어요. '다른 도시에서 일하기 좋은 공간은 어디일까?'
이 질문에서 출발한 프로젝트가 바로 코더플레이스예요. 좋은 공간에서 일할 수 있도록, 일하기 좋은 장소들을 기록하고 공유하는 프로젝트예요.
코더플레이스는 네 단계로 작동해요. 먼저, 장소에 대한 데이터를 작성하는 거예요. 오른쪽의 사진은 서울 성수에 있는 '에어드롭 커피'라는 곳인데요, 해당 장소에 대한 데이터를 JSON 형태로 작성해요.
그리고 깃허브 저장소에서 PR을 생성할게요. 이번 PR은 '에어드롭 커피'를 코더플레이스에 추가해달라는 의미에요. 장소가 추가된 도시의 메인테이너에게 리뷰가 할당되어요.
리뷰를 맡은 메인테이너가 에어드롭 커피 성수를 방문했어요. 작업을 해보니까 공간이 넓고 좋아요. 냄새도 좋대요. 해당 공간을 추가해달라는 PR을 병합해요.
기여한 장소가 웹사이트에 반영되었어요.
지도에 공간이 나타나기 때문에 서울에서 갑자기 일하고 싶을 때 일하기 좋은 공간을 찾을 수 있어요. 학이가 도쿄에서 일하고 싶을 때도 코더플레이스에 접속하면 현지에서 일하기 좋은 공간이 많이 나오니 문제없어요.
그래서 저는 좋은 공간에 대한 기여, 지역의 메인테이너 활동, 후원을 원해요. 많은 사람이 참여하는 오픈소스가 되어 좋은 공간을 나누고, 지역 커뮤니티가 활성화되고, 누구나 기여할 수 있는 구조가 되었으면 좋겠어요.
코더플레이스는 6월 중으로 서울, 도쿄, 맨체스터 세 개의 지역을 시작으로 확장해 나갈 예정이에요. 출시가 완료되면 슬랙 메시지를 보낼 테니 관심 있으신 분들은 꼭 함께 해주시면 좋겠어요.
여기까지 발표 들어주셔서 감사합니다. 😊
마치며
제가 참여 중인 이 그룹은 7월에 이번 기수 활동이 중단됩니다. 마지막 발표를 관심 있는 주제와 의미 있는 내용으로 마무리하게 되어서 좋고, 한편으로는 뿌듯하기까지 합니다.
저는 코더플레이스를 통해 사람들을 모으고, 그 안에서 네트워크가 형성되기를 바라고 있습니다. 관심이 있으시다면 저에게 연락해 주세요.