험난한 오픈소스 컨트리뷰션

개발자라면 누구나 마음 한편에 오픈소스라는 단어가 있을 것이다. 예전부터 한 번쯤은 오픈소스 프로젝트에 컨트리뷰트하는 경험을 해보고싶다는 생각을 했다. 그래서 오픈소스 가이드라는 문서도 참고하고 국내외 개발자들의 첫 오픈소스 컨트리뷰션 후기들을 찾아봤다. 그리고 내가 내린 결론은 다음과 같다.

내가 자주 사용하는 라이브러리 혹은 프레임워크의 오픈소스 프로젝트에서 이슈를 살펴보자.

해결할 수 있는 이슈 찾기

최근 1년간 주로 스벨트를 사용하여 개발을 했기 때문에 스벨트 관련 오픈소스 프로젝트를 깃허브에서 찾아봤다. 여러가지 프로젝트 중에서 스벨트5가 릴리즈될 때 개편된 스벨트 공식사이트가 있어서 관심이 갔다.

해당 프로젝트의 이슈 중에서 해결할 수 있을 것 같은 이슈가 있는지 찾아봤다. 인기 있는 오픈소스 프로젝트의 경우 수 많은 이슈들이 존재하기 때문에 해당 프로젝트에 처음으로 컨트리뷰트 하는 사람에겐 어떤 이슈를 골라야할지 고민이 되는 경우가 있다. 이러한 사람들을 위해서 깃허브는 good first issue 레이블이 달린 이슈들의 목록을 보여주는 페이지를 제공한다. 해당 페이지에 접속하는 방법은 프로젝트의 깃허브 레포지토리 루트 페이지에서 마지막 pathname에 contribute를 붙여서 접속하면 된다.(e.g., https://github.com/sveltejs/svelte.dev/contribute)

해당 페이지의 이슈 중에서 마땅히 해결해 보고 싶은 문제들이 없었다. 그래서 전체 이슈들을 살펴보다가 iOS 사파리 다크모드에서 에디터 커서의 색상과 배경색의 대비가 낮아서 식별이 어렵다는 이슈를 발견했고 해결해 볼 수 있을 것 같았다.

good first issue가 아니더라도 해결할 만한 이슈는 있다.

문제 발생 원인 좁히기

문제 발생 원인을 정확히 파악하기 위해 해당 문제에 대해 궁금한 것들을 작성하고 하나씩 해결하며 문제 발생 원인을 좁혀야한다.

  1. iOS Safari에서만 발생하는 문제가 맞을까?
  2. CSS 관련 문제인가?
  3. 에디터 라이브러리의 문제는 아닐까?

1번 문제를 확인하기 위해 macOS와 Windows 그리고 Android 휴대폰으로 테스트를 한 결과 모두 다크모드에서 커서의 색깔이 흰색으로 나오는 걸 확인했다. 2번 문제를 확인하기 위해 프로젝트 코드를 살펴봤다. /packages/editor/src/lib/codemirror.css 파일을 보면 다음과 같은 코드가 있다.

.cm-cursor {
  border-left-color: var(--sk-fg-3);
}

cm-cursor 클래스를 가진 요소가 코드 에디터에서 커서 역할을 하는 것 같았다. 해당 값을 바꿔서 macOS에서 테스트하면 커서의 색상이 정상적으로 변경됐다. 그러나, iOS Safari는 여전히 반응이 없었다. 코드를 좀 더 살펴보니 caret-color 관련 CSS 코드가 없어서 다음과 같이 추가해 줬다.

.cm-editor {
  /* ... */
  caret-color: var(--sk-fg-3);
  /* ... */
}

해당 코드를 추가해도 iOS Safari에서 에디터 커서의 색상은 흰색이 아닌 검은색이었다. 그래서 혹시 라이브러리 문제는 아닐까 해서 해당 라이브러리에 이슈를 등록해 보기로 했다.

CodeMirror 라이브러리에 이슈 등록하기

이슈를 등록하기 전에 비슷한 이슈가 등록된 적이 있는지 확인 했는데 없었다. 그래서 border-left-color 값이 iOS Safari에서 잘 동작하지 않는다는 내용의 이슈를 등록 했다.

codemirror-ios-safari-issue

그러자 CodeMirror 메인테이너가 다음과 같은 답변을 줬다.

codemirror-ios-safari-issue-solved

요약하자면 메인테이너가 해당 작업을 했었던 과거에는 iOS Safari에서 caret-color를 지원하지 않아 CodeMirror의 자체 커서를 비활성화하고 iOS 네이티브 커서를 사용하도록 했다고 한다. 그러나, 2021년부터 iOS Safari에서도 caret-color를 지원하기 시작해서 코드를 수정했다고 한다.

수정된 라이브러리 코드 확인하기

수정된 라이브러리 코드는 다음과 같다.

const CanHidePrimary = !(
  browser.ios &&
  browser.webkit &&
  browser.webkit_version < 534
);

브라우저가 iOS 운영체제에서 실행되고, 브라우저가 Webkit 기반이며, 브라우저의 Webkit 버전이 534 미만인 경우에는 에디터 자체 커서를 비활성화하고 iOS 네이티브 커서를 사용하도록 하는 것이다. Webkit 534는 대략 iOS 5에 해당한다. 따라서, iOS 5 이상의 아이폰 사파리에서는 에디터 자체 커서가 활성화 된다는 의미이다.

CodeMirror 패키지 버전 변경하기

긴 여정이 끝나고 svelte.dev 프로젝트에서 CodeMirror를 사용하는 패키지의 codemirror/view 모듈 버전을 6.35.2로 업데이트 후 PR을 날리고 스벨트의 창시자인 Rich Harris에게 머지를 받았다.

codemirror-ios-safari-merge

그런데, PC 크롬에서 6.35.2 버전의 에디터를 이용하면 이상한 오류가 있어서 잠시 Revert 됐다가, codemirror/state 모듈을 같이 업데이트하니 정상적으로 동작되었다.

codemirror-ios-safari-after