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