티스토리 뷰
TistoryEditor v0.6.9 업데이트에서는 미디어 플러그인에서 유투브 동영상을 삽입할 수 없는 문제를 수정했습니다.
Youtube의 UserAgent 분기
TistoryEditor의 문제는 Youtube가 UserAgent마다 다른 응답을 해서 발생한 문제입니다. 왜 그런 응답을 하는지는 알 수 없지만 브라우저에서 요청을 하는 경우에는 Youtube는 Opengraph관련 메타태그를 표시하지 않습니다. 브라우저 외의 요청의 경우만 Opengraph정보를 넘겨줍니다.
TistoryEditor는 데스크탑앱이지만 Renderer Process는 사실 Chrome과 다를바없습니다. 이를 Youtube는 브라우저라고 판단하고 있어 Opengraph 정보를 가져올 수 없었던 것입니다.
이 문제를 해결하려면 두가지 방법을 사용할 수 있습니다. 먼저 Renderer Process가 아닌 Main Process에서 정보를 가져오는 것, 그리고 Renderer Process의 UserAgent를 변경하는 것. TistoryEditor는 Renderer Process의 UserAgent를 변경하기로 했습니다.
TistoryEditor의 UserAgent
TistoryEditor는 Electron이라서 Chrome의 UserAgent에 앱정보가 추가된 값을 UserAgent로 사용합니다. 이를 단순하게 앱 정보만 남기고 브라우저에 대한 정보를 모두 제거하였습니다. 테스트 결과 Youtube는 이제 Opengraph 정보를 표시합니다. 그런데 한가지 문제가 발생했습니다. 브라우저 정보를 가져올 수 없게 되자 material-ui 라이브러리가 비정상적으로 동작했습니다. 내부적으로 브라우저에 따라 분기를 하는데 정보를 판단할 수 없게 되니 style이 잘못 설정된 것입니다.
브라우저 분기는 보통 키워드가 있는지 검사해서 구분하거나 전체 구조를 파싱하는 방법을 사용합니다. Youtube와 material-ui가 서로 다른 방법을 사용하길 바라며 UserAgent에 'Chrome' 이라는 키워드만 삽입했습니다. 다행히 material-ui는 TistoryEditor를 Chrome으로 인식했고 Youtube는 그렇지 않았습니다.
이렇게 문제가 해결되었습니다. 문제는 또 남았습니다. 단축키가 바뀐 것입니다. 아무래도 UserAgent를 바꾸기 보다는 Main Process에서 fetch를 수행하도록 하는 것이 좋을 것 같습니다. 좀 더 테스트를 거쳐서 가장 좋은 방법을 찾아야겠습니다.