Chrome Dev Insider 두 번째 버전에 오신 것을 환영합니다. 여기서는 커뮤니티와 Chrome의 새롭고 흥미로운 기능에 대한 업데이트를 공유합니다. 이 뉴스레터는 Google의 업무 접근 방식에 관한 내부자들의 이야기를 담은 새로운 에피소드이며, 여러분이 주목해야 할 가장 중요한 업데이트 몇 가지를 간단히 살펴봅니다.
저는 Chrome 개발자 관계팀의 web.dev 및 developer.chrome.com 콘텐츠 리드인 레이첼 앤드류입니다. 저는 20년 넘게 개방형 웹 표준 및 CSS에 중점을 두고 웹 작업을 해왔으며 CSS Working Group에 속해 있습니다.
2개월 전 Google은 Google I/O를 마무리하면서 Google이 사용자 정보를 안전하게 비공개로 유지하면서 더욱 빠르고 강력한 웹을 만들 수 있도록 개발자를 지원하는 방법에 관한 가장 중요한 업데이트를 공유했습니다.
주목할 만한 사항 중 하나는 웹에서 더 많은 CSS 및 UI 기능을 지원하기 위해 Google에서 진행 중인 막대한 작업입니다. 이번 Chrome Dev Insider 버전에서는 이 작업을 수행한 직원, CSS 및 UI 개발자를 지원하기 위한 Google의 노력과 앞으로의 계획에 대한 비하인드 스토리를 소개합니다. 이번 호의 인사이더를 진행하게 되어 정말 기쁩니다.
뉴스 속 장소
첫 번째 Chrome Dev Insider에서 Google은 Compat 2021 및 Interop 2022 이니셔티브에 관한 몇 가지 업데이트를 공유했습니다. 이 이니셔티브에서는 브라우저 공급업체와 생태계 게시자가 모든 브라우저에서 지원되는 더 많은 기능을 웹에 도입하기 위해 파트너십을 맺었습니다. 브라우저 비호환성은 CSS 개발자에게 가장 큰 과제 중 하나이므로 이 이니셔티브는 CSS에 중점을 두고 있습니다.
이것이 대부분에게 새로운 소식은 아니지만 여러 브라우저에서 이미 진전을 이룬 것은 매우 흥미로운 일입니다.
지난달 초 Safari에서 Container Query, subgrid, flexbox inspector와 같은 흥미로운 기능이 포함된 Safari 16.0 베타의 범퍼 버전을 발표한 바 있습니다. Firefox 및 Chrome의 최근 출시에는 여러 가지 흥미로운 기능과 수정사항이 포함되어 있습니다. 매달 웹 플랫폼의 새로운 기능 게시물 시리즈를 통해 안정화 및 베타 브라우저의 주요 사항을 다루고 있습니다.
최신 소식: CSS 및 UI 개발자 지원
2022년은 CSS 기능에 흥미진진한 한 해가 될 것으로 판단되어 개발자에게 비하인드 스토리를 소개하기에 좋은 시기라고 생각했습니다. 웹 UI 및 Devtools DevRel 리드 우나 크라베츠와 CSS 및 HTML API를 주로 담당하는 웹 UI 제품 관리자인 니콜 설리반을 만나 UI 개발자를 지원하기 위한 Chrome의 여정에 대해 이야기했습니다.
먼저, 두 분 모두에 대해 알아보도록 하겠습니다. 자신에 대해 좀 더 자세히 알려주세요.
니콜: 저는 Chrome 웹 UI의 제품 관리자입니다. 특히 새로운 CSS 및 HTML API와 UI를 빌드하는 개발자와 디자이너를 중점적으로 다룹니다. 컨테이너 쿼리, 범위, 세로 리듬 등 매우 중요한 API를 제공하는 흥미로운 공간입니다.
우나: 저는 웹 UI 및 DevTools DevRel팀을 이끌고 있습니다. 당사는 웹 플랫폼에서 UI 엔지니어를 지원하고 이들이 성공하는 데 필요한 도구를 제공하는 데 집중하고 있습니다. 여기에는 CSS API, HTML 구성 요소와 함께 DevTools 기능이 포함되어 있어 적극적인 변경사항과 피드백을 확인할 수 있습니다.
지난 몇 년간 UI 개발자를 위한 Chrome의 지원은 급격히 성장했습니다. 여기까지 오는 데 왜 이렇게 오래 걸렸다고 생각하나요? 가장 큰 어려움은 무엇이었나요?
Una: 이 작업이 얼마나 중요한지, 왜 우선순위로 다루어야 하는지 설명하기 위해 몇 가지 작업을 해야 했습니다. YouTube는 2019년 MDN DNA 설문조사를 시작하면서 YouTube 플랫폼의 가장 큰 고충으로 UI를 꼽았습니다. 그 이후로 MDN과 내부 개발자 만족도 설문조사를 통해 데이터를 가이드로 계속 사용했습니다. 그 결과 Compat 2021과 Interop 2022와 같은 이니셔티브의 주된 초점을 차지하는 UI 공간에서 가장 많은 요청이 있었던 개발자 기능을 중심으로 엔지니어링 작업의 우선순위를 정할 수 있었습니다.
니콜: 경영진의 승인을 받는 것 외에도 개발자에게 이러한 API를 제공할 적절한 방법도 찾아야 했습니다. 제가 처음 Chrome에 입사했을 때 Layered API (줄여서 LAPI)라는 프로젝트에서 이 실수를 했습니다. LAPI의 목적은 개발자에게 삽입형 구성요소 환경을 제공하는 것입니다. 좋은 결과였다고 생각하지만 많은 실수가 있었습니다. 먼저 토스트 알림과 가상 목록에 중점을 두었습니다. 토스트 메시지는 액세스하기가 거의 불가능하며 가상 목록은 구현하기가 가장 어려운 구성요소 중 하나입니다. 의도는 좋았지만 개발자에게 도움이 되지 않아 프로젝트를 중단했습니다. 어려운 방법을 배우는 것은 쉽지 않지만 모든 실수는 현재 일어나고 있는 CSS와 HTML의 르네상스를 일으키고 있습니다.
LAPI에 대해 좀 더 이야기해 보겠습니다. 무슨 일이 있었나요?
니콜: LAPI의 경우 웹에 기본 UI를 빌드하는 데 더 가까운 삽입형 구성요소 개발자 환경이 필요하다는 것을 알고 있었습니다. 그리고 작업 시간을 재편하는 것이 개발자들의 발목을 잡는 데 걸린다는 것이 분명했습니다. 내 커리어 동안 만든 탭이 몇 개인지 셀 수 없을 정도예요. 하지만 Google은 브라우저에 자바스크립트를 탑재하여 이 문제를 해결하려고 했으며, 이는 매우 어려운 일입니다. 이전에 브라우저에 JavaScript를 출시한 적은 없었으며, 브라우저의 렌더링 엔진을 구동하는 C++ 코드와 어떻게 상호작용해야 하는지도 명확하지 않았습니다. Google은 다른 브라우저 공급업체 (Mozilla와 같은 노력)의 의견에 귀를 기울였으며 이러한 접근 방식에 지지를 얻었습니다. 그래서 개방형 UI를 사용하면 훨씬 더 나은 기능을 찾을 수 있었습니다. HTML과 CSS를 활용하면 유연하고 선언적인 솔루션을 만들 수 있습니다. 이는 선언적이기 때문에 JavaScript로 하기가 쉽지 않은 방식으로 접근성을 구현할 수 있습니다. 이게 어디로 가고 있는지 정말 기대돼요. 정말 필수적인 UI 디자인 패턴인 selectmenu, 팝업, 팁, 탐색, 아코디언, 탭, 캐러셀, 전환 버튼을 지원하기 위해 노력하고 있습니다.
지금까지 많은 것을 배웠습니다. 이 분야에서 CSS Houdini와 같은 다른 이니셔티브가 진행되고 있다는 사실을 잘 알고 있습니다. 스토리는 무엇인가요?
Una: 네, CSS Houdini도 커뮤니티에서 배웠던 곳이기도 해요. Houdini 기능은 많이 있지만, 대부분은 광범위한 채택 및 지원을 얻기에는 너무 낮은 수준이었습니다. 우리는 하위 수준의 API를 구현한다고 해서 개발자가 겪는 마찰이 반드시 줄어들 수는 없다는 것을 깨달았습니다. 대신 보다 높은 수준의 솔루션과 요구사항에 집중함으로써 브라우저 간 지원을 얻고 생태계에서 급부상하는 데 필요한 지원을 얻었습니다. 현재 https://ishoudinireadyyet.com/에서 진행 상황을 추적하고 있습니다.
브라우저 간 지원과 관련해 Interop 2022 및 Open UI와 같은 이니셔티브가 커뮤니티에 상당히 긍정적인 결과를 제공하고 있는 것으로 보입니다. 개발자들로부터 어떤 의견을 들으시나요?
Una: 개발자들이 가장 많이 겪고 있는 문제 중 하나는 '여러 브라우저에서 디자인이 동일하게 작동하도록 만드는 것'입니다. 이 문제를 해결하기 위해 다른 브라우저 공급업체와 협력하여 가장 요청이 많았던 일부 개발자 기능을 우선시하고 해당 기능을 도입했습니다. 또한 커뮤니티에서 받은 피드백은 매우 긍정적이었습니다. 또한 RenderingNG라는 대규모 재설계 작업을 통해 이러한 기능 중 일부를 훨씬 더 효율적으로 사용할 수 있게 되었습니다. 개발자들은 오랫동안 기다렸던 이러한 기능들이 마침내 작업되고 교차 브라우저 기반이 되어 사용할 수 있게 되어 기쁩니다.
니콜: 커뮤니티에 뜨거운 열기가 느껴집니다. Twitter에서 확인할 수 있습니다. :)
개발자들의 업무 효율을 높이는 데 있어 Google Play가 성공을 거두기 위해서는 생태계와의 협력이 매우 중요한 것으로 입증되었습니다. 팀에서 많은 작업을 해왔다는 것을 알고 있습니다. 세부정보를 공유해 주실 수 있을까요?
니콜: 우선, 저는 개발자들이 웹에서 빌드하는 프로젝트가 항상 감탄해요. 가장 작은 라이브러리에서부터 완전한 프레임워크까지, 개발자들은 멋진 앱을 만들어 나가고 있습니다. 환상적인 제작자 커뮤니티입니다. Chrome은 이러한 프로젝트와의 연결을 강화하기 위해 많은 조치를 취하고 있습니다.
예를 들어, 몇 년 전 우리는 React 및 Angular와 같은 JavaScript 프레임워크를 사용하기 시작했습니다. Next, Nuxt, Gatsby와 같은 메타 프레임워크입니다. 작년에 우리는 Sass, Bootstrap, Material과 같은 UI 도구와 프레임워크로 동일한 작업을 하기 시작했습니다. 내년에는 GreenSock을 비롯해 개발자의 업무 효율을 높여주는 다른 도구와 협업할 수 있기를 바랍니다. GreenSock의 Cassie Evans가 Smashing Conference에서 연설하는 것을 봤는데, 애니메이션 분야에서 사람들과 협업하게 되어 정말 즐거웠습니다.
그렇다면 웹 UI 생태계에서 얻을 수 있는 가장 큰 기회는 어디에서 확인할 수 있을까요?
Una: 큰 기회라는 관점에서 보면 맞춤설정이 가능한 웹 환경을 구현할 수 있는 일의 극히 일부일 뿐이라고 생각합니다. 컨테이너 쿼리 및 CSS 사용자 환경설정 미디어 기능과 같은 새로운 API는 개발자가 반응형 디자인을 보는 방식을 재정의하고 있습니다. 또한 개발자와 디자이너가 웹사이트를 방문하는 사용자와 조화롭게 작업할 수 있는 공동작업 디자인 환경에도 큰 기대가 됩니다.
니콜님, 팀을 위한 로드맵의 다음 단계는 무엇인가요?
니콜: 모든 탐색 분석 작업이 배송 가능한 항목으로 전환되는 것은 아니지만 현재 저는 여러 가지 기대되는 점이 있습니다.
먼저 언급하지 않고, 우리는 반응형 구성 요소 기반 디자인을 사용할 수 있도록 지원합니다. 여기에는 디자이너가 어두운 모드와 같은 사용자 기본 설정에 반응할 수 있도록 색상 시스템을 디자인하기 위한 도구가 포함되어 있습니다. 예를 들어 OKLCH 색상 공간은 여러 색조에서 밝기를 일관되게 유지합니다. 디자이너는 진흙 같은 팔레트를 사용하지 않고도 색상 선택에서 색상 간 관계 디자인으로 넘어갈 수 있습니다.
Google은 컨테이너 쿼리, 캐스케이드 레이어, 상위 선택기 (:has), 범위가 지정된 스타일, 중첩과 같이 가장 많이 요청된 API를 제공하기 위해 노력하고 있습니다. 개발자가 재사용 가능한 구성요소로 가득 찬 유연한 디자인 시스템을 빌드할 수 있으려면 이러한 기능이 필요합니다.
스크롤에 연결된 애니메이션은 또 다른 흥미로운 영역입니다. 저는 Steve Gardner의 데모를 정말 좋아합니다. 스크롤하면 버터처럼 부드러운 스크롤과 멋진 비행기 애니메이션이 실행됩니다. 이러한 기능은 재미있지만 특히 접근성을 염두에 두고 제대로 된 기능을 구현하기가 까다로울 수 있습니다. 따라서 현재 이 기능의 접근성에 관한 사용자 테스트를 실행하고 있습니다.
개인적으로 가장 흥미로운 점은 기본 제공 웹 UI 컨트롤입니다. 개발자들이 같은 탭 세트를 계속해서 빌드하는데, 브라우저가 도움이 될 수 있다고 생각합니다. UI 열기에서는 선택 메뉴, 팝업, 도움말, 탭, 탐색, 아코디언, 전환 버튼과 같은 구성요소를 작업하고 있습니다. Google은 시간이 지남에 따라 웹에 기본적으로 액세스할 수 있도록 이러한 브라우저 프리미티브에 접근성을 구현하는 것이 어떤 것인지 살펴보고 있습니다. 그러면 개발자는 더 복잡하고 미묘한 문제에 집중할 수 있으며, '탭 사용 방법'과 같은 기본사항은 브라우저에서 지원할 수 있습니다. 별도의 게시글이 필요한 것 같으니 일단 종료하겠습니다.
마지막으로 Google은 브라우저 간 상호 운용성에 계속 투자할 예정입니다. WebKit 및 Gecko 사용자와 협력하여 개발자 환경에 일관성을 가져온 것은 정말 멋진 일입니다. 이를 원한다는 개발자의 의견이 접수되었습니다.
아직 확인해 보지 않으셨다면, Seamless Web Team의 Shared Element Transitions API가 웹용 디자인 방식을 변화시킬 것입니다. 디자이너가 실제 공간에서 디자인의 방향을 설정할 수 있도록 하는 미묘한 전환은 모두 가능할 뿐만 아니라 쉽게 만들 수 있을 것입니다. 제이크 아치볼드가 훌륭한 데모를 선보입니다.
표준이 잘 되고 있다면 올해는 세로 리듬도 살펴볼 수 있습니다. 우리는 많은 기능을 잠금 해제하는 LayoutNG를 기반으로 빌드할 수 있습니다.
둘 다 감사합니다. 여러분과 같은 전체 커뮤니티가 웹 UI 환경에서 새로운 개선 사항과 기능이 도입될 것을 기대하고 있을 것입니다. 아직도 이해할 수 있는 내용이 많은데 어디서부터 여정을 시작해야 할까요?
Una: I/O의 웹 플랫폼의 새로운 기능 세션에서는 올해 출시된 여러 기능의 주요 내용을 다룹니다. 아담 아가일은 모든 신규 및 향후 CSS 방문에 대한 유용한 도움말을 작성했습니다. 현재는 안정화 버전 출시에 계속 집중하고 향후 출시되는 다른 작업만 파악하고자 합니다. 웹 플랫폼 초보자 시리즈도 놓치지 마세요. web.dev 뉴스레터를 구독하면 이 콘텐츠가 개발자의 받은편지함으로 전송됩니다. 이 모든 작업에 참여하려는 개발자라면 Open UI에 가입하는 것이 이러한 작업을 지원할 수 있는 가장 좋은 방법 중 하나입니다.
예정된 주요 업데이트
Google은 웹 환경을 구축할 때 유념해야 할 예정된 변경사항을 미리 알려드리는 Google의 전통을 이어가고 있습니다.
쿠키의 최대 수명을 400일로 제한
- 업데이트: 쿠키가 명시적
Expires/Max-Age속성으로 설정되면 이제 값이 향후 400일 이내로 제한됩니다. 이전에는 제한이 없었으며 쿠키가 몇 천 년 후에 만료될 수 있었습니다. 이 제한사항의 목표는 일반적인 사용 패턴과 사용자 개인 정보 보호 간의 균형을 유지하는 것입니다. 400일보다 빈번하게 방문하는 모든 사이트는 서비스 연속성을 보장하기 위해 쿠키를 새로고침할 수 있으며, 사용자는 쿠키를 사용하지 않으면 수천 년 동안 브라우저에 머무르지 않으므로 안심할 수 있습니다. - 예상 일정: Chrome 104에서의 배송 (2022년 8월 2일 안정화)
- 개발자 CTA: 개발자는 사용자가 웹사이트를 방문할 때보다 사전에 쿠키를 더 자주 새로고침해야 할 수 있습니다. 그렇지 않으면 처음 쿠키가 설정된 후 400일이 지나면 사용자가 로그아웃될 수 있습니다.
이번 Chrome Dev Insider 버전이 도움이 되었기를 바랍니다. 아직 못 보셨다면 첫 번째 항목을 확인해 보세요. 다음 분기에도 더 많은 기회를 제공할 수 있기를 바랍니다.
그때까지 이번 Chrome Dev Insider 버전에 관한 의견과 개선이 필요한 부분을 알려주세요.
이번 Chrome Dev Insider 버전에 관해 어떻게 생각하시나요? 의견을 공유해 주세요.