[오픈소스 챌린지] Instagram과 Threads에 기여하기

들어가기 앞서

블로그에 포스팅하진 않았지만 2025년 삼성 전자를 비롯한 다양한 기업의 최종 면접까지 갔지만 아쉽게도 떨어졌다. 지난 취준 과정을 회고하며 과연 내가 가치를 만들어 낼 수 있는 개발자 인가에 대해 의구심이 들었다. 이전에 오픈소스 기여를 위해 LLVM 프로젝트를 선정했지만 잠시 미루고, 내가 사용하는 서비스에 기여를 통해 나의 가치를 만들기로 다짐했다. 기여하기로 결정한 서비스는 Instagram과 Threads로 많은 사람이 서비스 이용하고 관련된 repository가 활성화되어 있기에 선정했다.

StyleX 

처음 기여한 라이브러리는 StyleX이다. StyleX에 대해 간단히 설명하자면 JavaScript 상에서 정의한 스타일을 컴파일 타임에 최적화된 Css 파일로 변환해 주는 라이브러리이다. 런타임에 스타일을 생성하지 않아 오버헤드가 적고 Css 속성에 대해 타입이 지정되어 타입 안정성이 보장된다. 내가 기여할 수 있을만한 이슈들을 찾아보다가 재밌어 보이는 이슈를 찾아서 이슈 해결 여부를 묻고 진행하였다.

내가 해결하려는 이슈는 Css 변수에 값이 0을 할당했을 때 단위가 사라져서 변수 사용 시 에러가 발생하는 문제였다. 프로젝트 내부에 실험용 StyleX 프로젝트를 추가하고 이슈 상황을 재현했다. 문제가 발생하는 부분의 코드 흐름을 따라가며 잘못 작동하는 코드를 발견하고 수정했다. 그리고, Unit test를 추가하여 변경사항에 대한 검증을 완료 후 PR을 보냈다.

PR을 전송하니 Meta CLA라는 라이센스 동의서를 요구하였는데 큰 기업인 만큼 수정한 코드에 대한 법적 절차를 묻는 동의서였다. 서명 후 후 얼마 지나지 않아 메인테이너 분이 코드를 바로 메인 브랜치에 머지해주었다. 이슈 작성자분이 친절하게 문제 재현 방법과 문제 발생 지점을 특정해 주어 하루도 안 되어서 빠르게 해결할 수 있었다. 직접 사용하는 서비스에 기여했다는 점이 매우 뿌듯했다.

Lexical

그다음에 기여한 라이브러리는 Lexical이다. Lexical은 높은 확장성을 가진 웹 텍스트 에디터 프레임워크이다. editor의 상태를 tree 구조로 관리하여 변경이 필요한 부분만 DOM에 업데이트하여 성능 저하가 적다는 장점이 있는 도구이다. 직접 에디터를 활용해 볼 수 있는 playground를 지원하여 직접 이슈를 재현하고 문제를 수정 후 로컬에서 실행했을 때 빠르게 수정 사항을 확인해 볼 수 있다.

수정 전 Threads

수정 후 Threads

해결한 이슈 중 하나는 포맷이 적용된 텍스트와 적용되지 않는 텍스트들이 섞인 상황에서 텍스트를 드래그 후 한글과 같이 조합해야 하는 문자로 변경할 때 첫 입력이 사라지는 문제다. 이 문제는 macOS의 Chrome에서만 발생했다. 한글과 같은 문자를 입력할 때 사용자가 볼 수 없는 공백 문자를 삽입하는 데, 이 문자를 처리하는 과정에서 잘못된 조건을 적용하여 Chrome에 문제가 발생했었다(window에서는 유연하게 처리하여 문제가 발생하지 않았었음). 조건을 올바르게 고쳐주면서 문제를 해결했다.

또한, End-to-End 테스트를 진행하면서 잘못된 테스트를 수정하게 되었는데, 사용자 입력 후 공백 문자가 사라지지 않아 원하지 하는 행동이 발생할 수 있는 문제였다. 사용자 입력 중 공백 문자를 제거해 주고 undo/redo 시 문자 입력과 결합하는 방법으로 문제를 해결하였다. PR을 날리고 코드를 계속 수정하면서 메인테이너 분과 지속적으로 comment를 주고받으면서 해결했는데, commit message만 작성하며 줄었던 영작문 실력을 기를 수 있었다.

수정 전 Threads

수정 후 Threads

다른 해결한 이슈는 포맷이 적용된 텍스트에서 한글 입력 중 다른 텍스트로 이동할 때, 이전에 작성하던 영역의 포맷이 유지되는 문제다. 기존에는 선택 영역 변경 시 이전 선택 영역의 포맷을 상속하여 발생하는 문제였다. 이전 영역과 변경된 영역의 key가 다르면 포맷을 상속하는 코드를 추가 후 PR을 날렸다. 대부분의 오픈소스 기여자가 조합형 문자를 사용하는 사람이 아니기에 사용자인 내가 직접 코드를 수정하고 개선하는 것이 메리트가 있었다. 이러한 문제들을 해결하며 서비스상에서 원활한 한글 입력을 개선하였다.

두 달 동안 해결 후 가장 뿌듯했던 기여는 Markdown 코드를 일반 텍스트로 변환 시 강조 구문을 올바르게 처리하지 못했던 이슈를 해결한 것이다. 기존에 Lexical은 정규표현식을 기반으로 변환을 진행하여 Markdown spec대로 올바르게 처리하지 못하는 문제가 있었다. spec을 정리하여 Stack 기반의 Delmiter Alogirthm을 구현하여 문제 해결 후 PR을 날렸다. 기존의 방법에서 새로운 방법으로의 변환이라 PR을 받아들일지 걱정되었지만, 리뷰어 두 분의 반응이 굉장히 좋은 상태로 머지 되었다. 그리고, 2월의 릴리즈에 주목해야 할 변화 제일 상단에 위치하게 되었다.

느낀 점

올해 초 오픈 소스 기여를 해보자는 다짐을 하고 난 뒤로 8개의 PR을 날리면서 각기 다른 문제들을 해결했다. 아직 취준생인 내가 직접 대형 서비스에 기여를 하고 직접 개선한 오류를 확인할 수 있는 것이 즐거웠다. 글을 남겼다고 여기서 기여가 끝난 것이 아니라 지속적으로 오픈 소스에 기여를 하며 지속적인 오픈 소스 생태계를 만들어 나갈 것이다. 현재 기여들의 자세한 내용과 다른 PR들의 개선 사항은 여기서 확인할 수 있다.

StyleX 기여 후 오픈소스 기여모임이라는 곳을 알게 되어 다른 사람과 함께 기여하면 자극받을 수 있을 것 같아 참가하게 되었다. 아직 초보자라 기여에는 자신이 없었지만, 멘토님의 도움을 받아서 자신있게 더 많이 PR을 날릴 수 있었다. 만약 본인이 오픈 소스 기여를 하고 싶지만 걱정이 된다면 참여 해보는 것을 권장한다.