이 글은 Dan Callahan 이 쓴 Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More 의 한국어 번역본입니다.

오늘(4월 19일)부터 다음의 기능과 개선 사항들을 포함하고 있는 Firefox 53를 다운로드 받으실 수 있습니다.

윈도우에서의 Quantum Compositor Process

프로젝트 Quantum의 첫번째 중요한 기능 중 하나인 Compositor Process를 드디어 윈도우에서 사용하실 수 있습니다. Compositors는 웹페이지 위의 다양한 요소들을 하나의 이미지로 만들어 그려주는 역할을 합니다. Firefox는 이 Compositor 작업을 Firefox 프로그램과 완전히 별개로 동작하게 만들었습니다. 즉, Compositor 작업에서 충돌이 일어나더라도 Firefox는 정삭적으로 동작하며 Compositor는 아무 일이 없었다는 듯 작업을 다시 시작할 것입니다.

Project Quantum이 Firefox가 충돌을 일으키는 비율을 얼만큼 줄였는지에 대한 자세한 내용은 Anthony Hughes의 블로그를 확인해보시길 바랍니다.

Light/Dark Compact 테마

“Compact” 테마는 Firefox Developer Edition에서 처음 선보인 뒤 이제 Firefox 에서도 기본 기능으로 사용하실 수 있습니다. 사용자들은 Customize 모드에 들어가면 “Themes” 메뉴 아래 공간-절약, 사각형-탭 등의 변화를 갖는 Dark 테마를 체험해보실 수 있습니다.

새로운 WebExtension 기능

WebExtension은 브라우저에서 제공하는 부가기능으로 Firefox에서만 제공하는 강력한 기능 뿐만 아니라 Firefox, Chrome, Opera, Edge 등에서도 안전하고 효율적인 기능을 제공하도록 고안되었습니다.

Firefox 53에서는 기존의 몇몇 Chrome API와의 호환되는 WebExtension을 제공합니다:

• browsingData API는 브라우저의 캐시, 쿠키, 히스토리, 다운로드 기록, 기타 데이터를 삭제할 수 있는 기능을 제공합니다. 예를 들면, Firefox의 Forget 버튼이 바로 이 WebExtension API를 이용하여 만들어진 버튼입니다.
• identity API는 사용자의 동의 하에 OAuth2 토큰을 요청하는 기능을 제공합니다. 부가기능 내에서 사용자 인증을 간단하게 구현할 수 있습니다.
• storage.sync API는 Firefox Sync에 사용자 데이터를 저장할 수 있는 기능을 제공합니다. Firefox Sync를 통해 기기 간의 데이터를 공유하고 동기화 할 수 있습니다.
• webRequest.onBeforeRequest API는 이제 헤더 뿐만 아니라 바디에도 접근할 수 있는 기능을 제공합니다.
• contextMenus API는 이제 브라우저 액션과 페이지 액션에 메뉴를 추가할 수 있는 기능을 제공합니다.

Firefox 53는 다음의 고유한 API도 제공합니다:

• Test Pilot에서 진행 중인 Container 실험의 기본 요소, Contextual Identities는 이제 contextualIdentities API를 통해 생성하고 관리할 수 있습니다.
• contextMenus API를 사용하여 탭에 Context 메뉴와 비밀번호 필드를 생성할 수 있습니다.
• tabs.insertCSS API를 통해 페이지에 삽입된 CSS가 작성자 스타일시트를 따를지 사용자 스타일시트를 따를지 설정할 수 있습니다. 이 레벨은 cascading 순서 내에서 구분되는 레벨을 따릅니다.

새로운 CSS 기능: CSS 마스크와 Flow-Root

Firefox 53은 CSS 마스크를 제공합니다. 개발자는 이 기능을 통해 부분적으로 혹은 완전히 웹페이지에서 요소를 가릴 수 있습니다. 마스크는 이미지 혹은 다른 그래픽 요소(선형-그라디언트) 위에서 동작하며 그래픽 요소의 어떤 부분이 보일지, 반투명으로 보일지, 완전히 투명하게 보일지를 결정합니다.

마스크는 교합에 대해 luminance 혹은 alpha 값을 가질 수 있습니다. 설정이 luminance 일 경우 마스크 내 흰 픽셀들은 마스크 아래에 있는 요소를 그대로 보여줄 것입니다. 반면에 검은 픽셀들은 마스크 아래의 요소도 완전히 투명하게 보이도록 합니다. alpha 설정인 경우 마스크가 갖는 투명도(opacity)를 따릅니다: 마스크의 투명한 픽셀은 마스크 아래의 픽셀도 투명하게 만듭니다.

많은 마스킹 속성들이 background-*와 동일한 기능을 제공합니다. 예를 들면, mask-repeat은 background-repeat과 같습니다. 이용 가능한 속성에 대해 더 배워보고 싶으신 분들은 MDN 문서를 참조하세요.

스펙에서도 특정한 모양이나 벡터를 기준으로 이미지를 잘라낼 수 있는 메소드를 정의하고 있습니다. 완전한 기능은 Firefox 54에서 제공할 예정입니다.

마지막으로 Firefox는 새로운 display: flow-root 값을 제공합니다. 이 값은 clearfix와 비슷한 효과를 갖지만 pseudo-엘리먼트나 다른 요행과는 달리 표준 CSS 값을 사용합니다.

기본 미디어의 더 나은 사용자 경험

많은 다른 UI 개선과 함께 기본 <video>와 <audio> 컨트롤 화면 또한 새롭고 현대적인 UI를 갖게 되었습니다:

추가적으로, Firefox 53는 새로운 귀찮은 기능을 끌 수 있는 기능을 제공합니다: 기본적으로 HTML5 미디어는 해당 탭이 처음 활성화 되기 전에 자동으로 재생되지 않습니다. 이 링크를 오른쪽 클릭하여 “새로운 탭 열기”를 선택해보세요. 탭을 바꾸기 전까지 영상이 재생되지 않는 것을 확인해 보실 수 있습니다.

편집: 아이고, 자동재생 끔 기능은 Firefox 53이 아니라 54 버전에서 제공될 예정입니다. (버그 1308154)

64-비트 Firefox

Windows 사용자들은 이제 설지 과정에서 32-비트와 64-비트를 선택할 수 있습니다:

우리는 macOS의 32-비트 Firefox, Pentium 4 이전의 프로세서 그리고 Linux의 Opteron을 더이상 지원하지 않습니다.

더 많은 정보

Firefox 53에 대해 더 궁금하다면 릴리즈 노트와 MDN에 있는 개발자를 위한 Firefox 53를 살펴보세요.