brunch

매거진 어바웃 어플리케이션

라이킷 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 Feb 28. 2019

눈물만 나오는
파이어폭스 애드온 개발

파이어폭스는 언제쯤 지원을 할 것인가..

안녕하세요 에어데스크 개발자 한상훈입니다. 이번에 크롬 기반 브라우저에서만 제공되던 에어데스크를 파이어폭스에서 제공하려고 합니다. 개발을 할 수록 이거 참... 싶은 부분이 한두 개가 아니네요. 파이어폭스가 마치 동네 구멍가게를 보는것 같아 마음이 짠해집니다. 그럼 왜 그런 느낌이 들었는지 하나하나 적어보겠습니다.

1. 몇 년 째 CSS 호환이 안돼..

크롬의 몇 년 전부터 지원하는 CSS 속성들을 파이어폭스에서는 지원하지 않는 경우가 있습니다. 예를 들면 크롬에서는 가상 엘리먼트로 만들수 있는 스크롤바 등입니다.

언제 지원하실꺼에요 ㅠㅠ

스크롤바의 디자인을 돕는 여러가지 CSS문법을 크롬은 오래전부터 지원했지만 파이어폭스는 64버전이 되서야 스크롤바에 대한 매우 간단한 수준의 지원을 시작했습니다. 참고로 2019년 2월 28일 현재 파이어폭스는 65버전입니다.

더 심각한 문제는 기본 속성값을 인식입니다. width나 height에 사용하는 fit-content 역시 기본값으로 넣어주면 인식하지 못하기 때문에 -moz-를 붙여야만 사용할 수 있다는 점도 괴로운 점입니다. 크롬의 경우 -webkit-을 붙여서 사용하지 않아도 잘 작동되는 것과 비교되는 부분입니다. 물론 이 분야 끝판왕인 익스플로러지만 파이어폭스에게 기대하는것과 많이 다릅니다.

파이어폭스: 계산해보니 12px인데 그냥 16px로 보여줄께요!

값은 하나하나 바꿔주거나 밴더 프리픽스를 넣어서 해결할 수 있습니다. 하지만 문제가 이게 끝이 아닙니다. CSS 기본 규칙 조차 제대로 동작하지 못합니다.~~(이럴거면 브라우저는 왜 만드냐..)~~ 이미지에 나온 엘리먼트는 width가 12px로 나와야 합니다. 인라인 명령으로 지정됐기 때문이죠. 심지어 계산된 값(이미지 우측 하단)을 봐도 12px라고 나옵니다. 그런데 왜 16px일까요? 이유는 모릅니다. 인라인보다 클래스 명령을 우선하고, 클래스 문법을 체크 해제해도 있다고 표시되고, !important 명령도 문법까지 무시하니 할 말이 없습니다.

2. 왜 파이어폭스와 나이틀리를 구분 못하니ㅠㅠ

파이어폭스 브라우저는 2가지 선택지가 있습니다. 최근에 나온 파이어폭스 나이틀리(Firefox Nightly)는 기존의 파이어폭스를 뛰어넘는 브라우저를 지향하며 시작한 프로젝트입니다. 그러나 안타깝게도 이 두 친구는 함께 사용할 수 없습니다. 파이어폭스가 열린 상태에선 파이어폭스 나이틀리가 켜지지 않습니다. 반대로 나이틀리를 켠 상태에선 파이어폭스를 켤 수 없습니다.

함께 사용할 수 없습니다..

웹 개발자 입장에선 파이어폭스와 나이틀리를 동시에 테스트하기란 불가능합니다. 모든 파이어폭스 브라우저를 닫고 나서야 나이틀리를 켜서 그때부터 나이틀리 테스트를 할 수 있습니다...

3. 퍼미션 안줄꺼야. 절대 안 줄꺼야.

크롬에서는 제공한지 10년 이상된 퍼미션을 파이어폭스에서는 아직도 지원하지 않고 있는 경우가 있습니다. 지원을 안한다면 대체할 수 있는 기능이 있으면 좋겠지만 그게 없다는게 함정입니다.

크롬에선 거의 20년 전부터 지원하는데 제발 지원해주세요 ㅠㅠ

예를 들면 크롬에서 사용자의 브라우저에 저장된 favicon 이미지를 가져오는 "chrome://favicon" 권한이 있습니다. 하지만 파이어폭스는 아직도 지원하지 않고, 대체 기능도 지원하지 않습니다.

4. 이렇게 코드를 불러온다고?

크롬에서 확장 프로그램 개발은 매우 간단합니다. 소스코드 전체를 하나의 폴더에 넣은 다음 그걸 클릭해주는 방식입니다. 해당 폴더에 모든 파일이 확장 프로그램에 온전히 사용된다고 이해할 수 있죠. 반면 파이어폭스는 어떨까요? 확장 프로그램에서 로드할 js파일 하나를 선택해야합니다.(잉??)

크롬 확장 프로그램을 개발하던 입장에선 이상한 방법입니다. js를 선택하면 이를 바탕으로 중심이 되는 매니페스트 파일(manifest.json)을 검색하고, 그에 따라 영향 받는 js 파일을 다시 검색하는 방식으로 보이는데... 영 찝찝함을 가실 수 없습니다.

5. 왜 같은 메소드를 다르게 리턴하는가

파이어폭스에 어렵사리 코드 이식을 해서 테스트를 진행하면 마주하는 문제가 있습니다. 바로 크롬과는 다른 코드 동작 방식이죠. 예로부터 자바스크립트의 동작방식이 기괴하다는건 다들 아실 겁니다.

이게 프로그래밍 언어라구요??

그런데 파이어폭스의 심각한 문제점은 바로 에러 트래킹입니다. 크롬에서는 문제없이 동작하는 코드가 파이어폭스에선 에러를 만들게 됩니다.

여기 삼항연산자가 있습니다. 에러가 존재하면 "error"라는 알림창이 나타납니다. 크롬에서는 어떻게 될까요? 크롬에서는 chrome.runtime.lastError를 에러가 없을 때 undefined로 리턴합니다. 파이어폭스는 어떨까요? null로 리턴합니다.(잉?) 크롬으로 시작하는 메소드니까 파이어폭스에선 아예 해당 메소드를 지원하지 않는것 아닌가해서 찾아보았지만 파이어폭스도 동일하게 지원합니다. 동일하게 지원하고, 동일한 코드인데 리턴값이 다르니 결과가 반대로 출력되는 현상이 나타납니다.

6. 깐깐하십니다.

문제가 될 수 있는 부분에 대해서 아예 작동을 안해버리는 방식으로 파이어폭스는 구동됩니다. 예를 들어 event.pageX라는 마우스 커서의 위치를 알려주는 메소드가 있습니다. 정식 방법은 해당 이벤트의 매개변수로 event를 지정하고, 해당 이벤트에 대해 가져오는게 맞습니다.

위의 코드는 새 일정을 만들 때 사용하는 함수입니다. 보시면 event를 딱히 정의하지 않고 있습니다. 원래대로라면 전역 event가 정의되지도 않았고, 전역변수로 찍어봐도 undefined로 나오기 때문에 작동되지 하지 않아야 합니다.

하지만 크롬에서는 event를 MouseEvent로 인식하여 객체를 리턴해줍니다. 덕분에 위의 코드는 크롬 기반 브라우저에서 아무런 문제가 없습니다. 반면 파이어폭스는 event가 선언되지 않은 변수라고 말합니다. 즉 이 코드 작동 못시켜준다는 말이죠. 이 부분은 마음엔 들지 않아도 파이어폭스의 방향이 맞는 것 같습니다. 다만 아직까지 이 부분을 해결하기 위해 어디서 마우스 클릭 이벤트를 가져와야할지 고민하게 만들뿐이죠.