Next.js
이 항목은 단순히 PR만 제출된 상태입니다. 실제 Merge가 될지 여부는 알 수 없습니다.
과연 기여에 성공할 수 있을까?
저는 Vercel의 개발 서비스 철학을 좋아합니다.
Vercel의 Next.js는 개발자에게 불편하지 않은 개발 경험을 제공한다고 생각합니다.
Vercel의 Geist 폰트부터 Vercel Ship 웹사이트까지 Vercel의 브랜딩 전략은 정말 성공적이었다고 생각합니다.
(하지만 이 웹사이트는 Cloudflare에서 배포되었습니다😅)
이런 이유에서 저는 자주 Next.js의 레포지토리를 들여다봅니다.
여러가지 이슈와 PR을 구경하던 도중 유튜브와 관련된 한 이슈를 발견하게 됩니다.
Next.js란?
Next.js는 풀스택 웹 어플리케이션을 빌드하기 위한 React 프레임워크입니다.
해결하려는 이슈
발생하는 문제
Next.js에서는 서드파티 라이브러리를 효율적으로 로드하는 데 사용할 수 있는 컴포넌트와 유틸리티 모음인 @next/third-parties를 제공합니다. 그중 YoutubeEmbed라는 컴포넌트는 Youtube의 영상을 불러와서 최적화 시켜주는 컴포넌트 입니다.
위의 이슈에서 보고된 내용은 YoutubeEmbed의 Docs에는 Youtube IFrame API에서 제공하는 파라미터들을 사용할 수 있다고 되어있지만 autoplay 옵션이 작동하지 않는 문제가 있다는 내용이었습니다.
이슈의 작성자는 이 현상에 대한 원인을 YoutubeEmbed 컴포넌트가 음소거 옵션을 가지고 있지 않아서라고 판단했습니다.
이는 Youtube의 정책상 자동 재생되는 영상은 초기 재생 시 mute 처리되어야 하기 때문입니다.
하지만 실제 원인은 이게 아니었습니다.
mute라는 파라미터 옵션은 Youtube IFrame API에는 적혀있지 않은 옵션이지만 파라미터로 mute=1 옵션을 넣는다면 실제로 작동했기 때문입니다.
그렇다면 YoutubeEmbed 컴포넌트에 mute=1 옵션을 파라미터로 넣는다면 실제로 작동해야 합니다.
<YouTubeEmbed videoid="dQw4w9WgXcQ" height={400} params="autoplay=1&mute=1" /> // 자동 재생 X
<iframe width="560" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1" ></iframe> // 자동 재생 O
위의 두가지 방식의 코드의 옵션은 동일한 기능을 합니다.
하지만 위의 두 가지 코드 중에서 IFrame의 영상만 자동 재생이 됩니다.
이 현상으로 Youtube IFrame API 에는 mute라는 파라미터에 대한 서술은 없지만 정상적으로 작동하는 옵션이라는 것을 알 수 있습니다.
그렇다면 뭐가 원인일까요?
원인
원인을 알아보기 위해 저는 @next/third-parties의 내부 구현을 열어보았습니다.
@next/third-parties는 내부에서 third-party-capital이라는 라이브러리를 사용하고
이 라이브러리에서 또 내부적으로 lite-youtube-embed라는 라이브러리를 사용하는 상당히 내부를 들여다보기 어려운 구조를 가지고 있었습니다.
다행이도 저는 lite-youtube-embed에서 하나의 이슈를 발견하게 되었습니다.
@next/third-parties에서 생기는 현상과 똑같이 lite-youtube-embed에서도 Youtube Iframe API의 autoplay 옵션이 작동하지 않는다는 이슈였습니다.
이 이슈의 주요 내용은 lite-youtube-embed에서는 성능 최적화를 위해 자동 재생을 작동하지 않도록 만들었다는 것입니다.
lite-youtube-embed가 iframe보다 224배 더 빠를 수 있는 비밀은 애초에 초기 로딩 시에는 iframe을 로딩하지 않기 때문이었습니다.
이 라이브러리는 초기 로딩 시에는 썸네일 이미지만 랜더링을 한 다음 클릭 이벤트가 발생하면 실제 iframe을 로딩하는 방식으로 설계되었습니다.
당연히 iframe이 없는 상태인데 autoplay가 동작할 수가 없는 상태였던 것입니다.
이 라이브러리를 실제 구현에 똑같이 사용하는 Next.js도 마찬가지로 실제로 랜더링된 결과를 살펴본 결과
완전히 똑같은 방식으로 동작하지는 않지만 재생 버튼을 클릭하기 전까지는 iframe이 존재하지 않는 현상을 확인했습니다.
따라서 Next.js에서도 마찬가지로 클릭하기 전까지는 iframe이 존재하지 않는 상태이기 때문에
당연히 autoplay 파라미터를 적용할 수 없는 상태였던 것입니다.
그렇다면 Next.js의 공식 문서에서는 Youtube IFrame API의 모든 파라미터들을 사용할 수 있다고 적혀있으면 이를 사용하는 유저들에게 혼란을 줄 수 있습니다.
실제로 이 이슈의 작성자도 Next.js의 버그라고 생각했습니다.
해결
저는 결국 이 문제는 해결할 수 없는 문제라고 생각했습니다.
Next.js에서 내부적으로 lite-youtube-embed를 사용하는 한 성능 최적화를 위해 자동 재생을 포기할 수 밖에 없기 때문입니다.
결론적으로 Next.js의 docs에 안내 한 문장을 추가하는 것이 최선의 방법이라고 생각했습니다.
Next.js는 정말 많은 분량의 contribution-guide가 존재하고 그 중에서 docs 파트만 살펴봐도 정말 많은 분량이었습니다.
Docs Contribution Guide
Next.js에서는 docs에 작성하는 문장의 분위기까지 고려해서 작성하라고 써져있었습니다.
Voice
Here are some guidelines to maintain a consistent style and voice across the docs:
Write clear, concise sentences. Avoid tangents.
If you find yourself using a lot of commas, consider breaking the sentence into multiple sentences or use a list.
Swap out complex words for simpler ones. For example, use instead of utilize.
Be mindful with the word this. It can be ambiguous and confusing, don't be afraid to repeat the subject of the sentence if unclear.
For example, Next.js uses React instead of Next.js uses this.
Use an active voice instead of passive. An active sentence is easier to read.
For example, Next.js uses React instead of React is used by Next.js. If you find yourself using words like was and by you may be using a passive voice.
Avoid using words like easy, quick, simple, just, etc. This is subjective and can be discouraging to users.
Avoid negative words like don't, can't, won't, etc. This can be discouraging to readers.
For example, "You can use the Link component to create links between pages" instead of "Don't use the <a> tag to create links between pages".
Write in second person (you/your). This is more personal and engaging.
Use gender-neutral language. Use developers, users, or readers, when referring to the audience.
If adding code examples, ensure they are properly formatted and working.
따라서 'The autoplay parameter is not available.'라고 쓰면 안됩니다.
이 문장을 좀 더 순화해서 작성하면 'Available parameters exclude autoplay.'가 됩니다.
문서에서 바뀐 부분은 단 한 줄로 끝입니다.
과정에 비해 결과가 상당히 단순하지만 이게 다입니다.
하지만 충격적인 사실은 이 PR은 아직 열려있는 상태이고 Merge가 될지 여부도 알 수 없다는 사실입니다.
그래서 이 글의 제목이 '과연 기여에 성공할 수 있을까?'인 이유입니다.
후기
이번에 느낀 것은 Next.js 같이 규모가 큰 오픈 소스는 기여에 정말 많은 규칙을 지켜야 하는구나 라는 생각이 들었습니다.
많은 고민을 통해 나온 정말 사소한 변경점이지만 이런 사소한 노력들이 모여서 오픈 소스를 만드는 것이라고 생각하면 이 PR이 Merge 되지 않더라도 전혀 시간이 아깝지 않은 재밌고 유익한 시간이었다는 생각이 듭니다.