주니어도 오픈소스 첫 기여 할 수 있어!

이가 은·2025년 8월 25일

Opensource Contributors ssgoi 오픈소스 기여 프론트엔드 오픈소스 라이브러리 기여

opensource-contributors

목록 보기

1/1

벌써 프론트엔드 개발자로 전향하고나서 경력 2년을 꽉 채우게 되었다.
지나서 생각해보면 2년 내내 내 커리어에 '이거 하나 있으면 좋겠다' 싶었던 것 중 하나가 오픈소스 기여였다.
컨트리뷰터가 된다는 것, 주니어 개발자에게 그건 거의 환상🦄이나 다름없었는데
이어질 내용에서 어떻게 그 환상🦄과 마주하여 실체화했는지 써내려가보려고 한다!

시작은 가볍게

📅 7월 29일

아쉽게도 8월 마지막 주를 달려가고 있는 지금, 나는 8월이 되자마자 실업자가 되었다.
실업자가 된 마당에 이때다 싶어서 항해플러스 부트캠프를 하며 코어 다지기를 하고 있었다.

항해플러스 부트캠프를 진행하고 있는 도중
xxziiko 님이 오픈소스 기여모임 8기에 참여했었고 계속 진행하고 있으며 너무 만족스러운 경험이었다면서 기여에 관심이 있다면 신청해보라고 추천해주었다.

오픈소스 기여 모임 9기 모집
[모집 완료]오픈소스 기여 모임 9기 참가자를 모집합니다!

자 드가...자?

📅 8월 16일

보증금 납부 후 디스코드 방에 초대되었고, 지난 8기의 글들을 보며 어떤 이슈가 있었고 어떤 식으로 진행되는지 천천히 읽어봤다.
그리고 하루, 이틀, ...일주일, 얼마 안 됐는데 벌써 ...2주가 훌쩍 지나가버렸다.

날이 가면 갈수록 늘어나는 엄청난 PR 머지 글에 위협 아닌 위협(?)을 받아 2주 동안 했던 고민을 접고 본격적인 이슈 탐방을 시작했다.

Next.js나 React에 기여하자니 할 만한 이슈들은 빠르게 해결되고 주니어가 기여할 수 있는 부분이 크게 없는 것 같아서
TailwindCSS, shadcn/ui, React Hook Form 중에서 할 수 있을 법한 이슈를 찾아보았다.
그리고 자신 있게 이슈를 분석해보고 이슈 선정 도움 요청글을 올렸는데 ....

세상은 원래 내 뜻대로 되지 않는 거야 - 빌 게이츠

하지만..

AI가 이슈 해결 방법을 제안해 줬는데 무언가 이상해 보였다.
register 등록 로직에서 의도치 않은 동작이 발생되는 것 같은데 이 동작이 의도치 않은 동작인지 아니면 정책상 의도된 동작인지 불분명했다.
그래서 React Hook Form 코드를 뜯어보며 AI가 제시해준 방법에 대해서 고민해봤다.

문제점

React Hook Form은 기본적으로 자체 JavaScript 검증만 사용하고 HTML 네이티브 검증은 옵셔널
-> 이 때문에 CSS의 :user-invalid 같은 가상클래스가 동작하지 않음

사용자들은 검증 기능이 있으니까 CSS 가상클래스도 당연히 될 거라고 기대하지만,
실제로는 progressive: true 옵션을 따로 설정해줘야 HTML 속성이 추가되고 브라우저 네이티브 검증이 동작해서 CSS도 제대로 적용되는 상황

결국 이 옵션에 대한 설명이 부족해서 생기는 혼란이고, 문서를 개선하거나 주석을 추가하거나
CSS에 :user-valid/:user-invalid 사용이 감지되면 자동으로 progressive: true 활성화

첫 기여를 하는 입장에서 큰 프로젝트에 신규/개선된 기능을 추가하는 건 내가 생각했던 것보다 부담이 컸다.
그래서 과감하게 포기하고 좀 더 작은 단위의 기여를 노려보았다.

진짜로 드가자~

📅 8월 16일

React Hook Form 문제를 직면하고 나서 내가 확실하게 기여할 수 있는 부분이 무엇일까 생각해보았다.

한글 번역 문서화 기여
작은 오픈소스 라이브러리에 기여
작은 기능 bug fix

첫 기여 때 보통 문서화 기여를 많이 한다고 한다.
그래서 React Hook Form의 아쉬움을 뒤로한 채, React 한글 번역 문서화에 기여해보려는데 마침 좋은 기회가 찾아왔다.

링크드인에서 팔로우하고 자주 보던 대승님이다!
근데 오픈소스 기여자도 구하고 계신다고요?!

기회는 올 때 붙잡는 거다 이 때 아니면 못한다!

이거다!

그리고 얼마 지나지 않아 이슈 내용이 올라왔다.
해당 이슈를 참고해서 작업해야 하는 내용은 다음과 같다

- 현재 react, vue, svelte SsgoiTransition에 children, id만 인자로 받고 있음
- 각각 className을 옵셔널로 받을 수 있도록 코드 수정
- 각각 as를 옵셔널로 받을 수 있도록 코드 수정 (default는 div 엘리먼트로 함)
- 전달하는 요소에 맞춰서 타입 추론 가능하도록 타입스크립트 지원

그리고 첫 기여인 만큼 작은 기능이어도 책임감을 갖고 열심히 마무리하고 싶어서 나름대로 고려 사항을 두었다.

다른 코드에 영향을 주지 않는지 테스트를 해볼 것!
내가 적용할 로직은 다른 코드에 사이드 이펙트가 발생할 수 없는 구조이다.
오로지 SsgoiTransition 내부에서 HTML element 전환 로직에서만 오류가 나야 한다.

기존 오류는 건들이지 말 것
다른 로직에서 발생되는 오류는 다른 이슈에서 개선될 테니 과감하게 무시한다. 만약 신경 쓰인다면 다음에 이슈를 오픈하고 직접 해결한다!
지금 내가 적용할 로직에만 집중한다. 선택과 집중.

적용된 로직 외에 UI 정상 동작을 확인할 것
ssgoi 라이브러리는 내부 로직도 중요하지만 애니메이션이 핵심 기능이니 이 부분은 코드 검증으로만은 해결이 안 된다.
코드상에 오류는 없으나 SsgoiTransition 컴포넌트를 사용할 때 전달되는 props에 따라서 UI가 변경되고 애니메이션이 실제로 잘 동작하는지 눈으로 확인한다.

build시 오류가 나지 않는지 확인하고, 추가된 props 타입에서도 문제가 없는지 확인한다.
문제가 없다면 ssgoi 로컬에서 나의 소중한 로직이 포함된 .tgz 패키지를 React, Svelte, Vue 미니 프로젝트에 install해준다.

그리고 UI 및 기능 테스트를 하면 끝!

📅 8월 24일

드디어 PR이 올라가고 올라간 PR에 메인테이너의 추가 요청까지 잘 적용하여 PR이 머지되었다.

https://github.com/meursyphus/ssgoi/pull/103

뿌 - 듯

환상🦄과 마주한 순간이었다.
잘못된 이슈 선정(React Hook Form)부터 제대로 된 이슈 선정 및 PR 머지까지 일주일이란 시간이 걸렸다.
간혹 메인테이너가 확인을 해주지 않거나 방치되는 경우는 PR 작업 후 머지까지 한 달이 걸리기도 한다고 하니 길지도, 짧지도 않은 기간이었던 것 같다.

짧은 회고

오픈소스 기여모임에서 운영진들이 오픈소스 생태계를 위해 많은 고민을 하고 있다는게 느껴졌다.

AI로 인해 전체 코드 파악 없이 무의미한 기여를 하는 경우가 생겨 메인테이너들이 기여자들을 안 좋은 눈초리로 보고 있다는 이야기도 들었다.
AI를 쓰는 것도 건강하고 올바른 방향으로 잘 쓴다면 문제가 없겠지만, AI를 활용한 성의 없는 무분별한 오픈소스 기여로 기여자들에 대한 인식이 점점 나빠지고 있는 느낌이다.

요즘 수익화가 되어있는 큰 프로젝트에만 많이 기여하여 작은 프로젝트들이 뒤쳐지거나 유지보수가 힘들어서 크지 못하고 있다는데 확실히 나조차 React, Next.js부터 생각했으니 그럴 만한 것 같다.
그래서 오히려 ssgoi에 기여하길 잘했다고 생각되었다. 💪

docs 기여가 부담이 없긴 하지만 나처럼 작은 코드로 오픈소스에 기여하고 싶다면 한국인 메인테이너가 있는 오픈소스부터 시작해도 좋을 것 같다.