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