Highlights
우리는 2주 전에 playground를 출시했습니다. 이번 주는 후속 작업으로, 완료되었다고 말하기 전에 다듬어야 할 세 가지 미흡한 부분을 해결했습니다. 이제 cookie가 RFC 6265를 올바르게 따르고, expand 버튼이 grid 셀을 늘리는 대신 response를 실제 전체 화면 overlay로 표시하며, 전체 기능이 마침내 모바일 기기에서 작동합니다.
What's New
Cookies follow RFC 6265 now
cookie jar에 2주 동안 잠재적인 버그가 있었습니다. 업스트림 사이트는 cookie가 서브도메인 매칭에 참여하도록 Set-Cookie: ...; Domain=.example.com을 보냅니다 (앞의 점은 "이 cookie가 apex 및 모든 서브도메인과 함께 전송됨"을 의미합니다). 우리의 파서가 해당 점을 제거하여 Domain 속성이 설정되었다는 사실 자체를 누락했습니다. 그 결과 jar가 host-only cookie(Domain 속성 없음)와 domain cookie의 차이를 구분하지 못했습니다. 눈에 띄는 두 가지 영향은 다음과 같습니다.
- raw 뷰가
Domain=example.com(점 없음)을 출력했기 때문에, cookie를 curl 명령어로 복사할 때 수신 사이트가 이를 host-only로 처리하여 서브도메인으로 다시 전송하지 않았습니다. - Browser 제품의 cookie 전달 기능이 브라우저에 어떤 종류의 cookie를 설치할지 결정하기 위해 취약한 추측에 의존했고, 동일한 jar에 apex와 서브도메인이 함께 있을 때마다 오작동했습니다.
우리는 파싱된 모든 cookie에 hostOnly 불리언 값을 추가했습니다. 점이 있든 없든 Domain 속성이 존재하면 hostOnly: false를 의미하며, cookie는 호스트 및 해당 서브도메인과 매칭됩니다. Domain 속성이 없으면 hostOnly: true를 의미하며, cookie는 정확한 호스트에만 고정됩니다. raw 뷰는 domain cookie에 대해 Domain=.example.com을 출력하고 host-only cookie에 대해서는 Domain을 완전히 생략하므로, jar에서 복사하더라도 왕복 전송(roundtripping) 시 cookie가 그대로 유지됩니다. 파싱된 뷰는 host-only 행에 작은 HO 배지를 표시하는데, 실제로 관찰해 보면 이는 흔치 않은 경우인 것으로 나타납니다. 수정 전에 저장된 기존 jar는 이전의 광범위한 매칭 동작을 유지하므로 아무것도 소리 없이 누락되지 않습니다.
Expand mode is a true fullscreen overlay
이전의 expand 버튼은 문서 흐름 내에서 response 카드를 늘렸습니다. 이로 인해 세로로 긴 response가 페이지 높이를 늘렸고, body에 스크롤바가 생겼으며, 토글할 때 response 위의 request 패널이 미세하게 움직였습니다. 또한 response 창 자체의 높이가 480~560픽셀로 제한되어 있어, 1440p 모니터에서는 깊은 JSON 트리가 그 아래에 빈 카드 영역을 남겼습니다.
이제는 사이드바의 오른쪽 가장자리와 뷰포트 가장자리 사이에 위아래로 고정된 position: fixed overlay입니다. body에 overflow: hidden이 적용되어 overlay 뒤에서 페이지가 스크롤되지 않습니다. overlay 내부의 활성 창은 calc(100vh - 280px)를 사용하며, cookie jar에도 동일한 스크롤 모델이 적용되었습니다. ESC를 누르면 split 뷰로 다시 축소됩니다. 이제 버튼 타이틀이 "전체 화면으로 확장" 또는 "분할 뷰로 축소"로 표시되어 더 이상 추측할 필요가 없습니다. 아이콘은 처음부터 네 개의 화살표 문양이었는데, 처음부터 명확하게 설명했어야 했습니다.
The playground works on phones
반응형 레이어를 작업하기 전에 두 가지 모바일 버그를 해결해야 했습니다. Send 버튼의 레이블이 가운데 정렬되지 않고 버튼의 왼쪽 가장자리에 붙어 있었고, response가 렌더링되면 넓은 자식 요소(긴 URL, JSON 트리, raw HTML pre 블록)가 grid 열을 뷰포트 너비 이상으로 늘려 페이지에 가로 스크롤바가 생겼습니다. 두 가지 모두 수정되었습니다. Send는 올바르게 가운데 정렬되며, grid 열은 minmax(0, 1fr)을 사용하여 넓은 자식 요소가 페이지를 옆으로 밀어내는 대신 자체 카드 내부에서 스크롤되도록 합니다.
그 외에도, 미처 완성하지 못했던 반응형 레이어는 다음과 같습니다.
- 1023px 미만에서는 Expand 버튼이 숨겨집니다 (grid가 이미 단일 열이기 때문입니다).
- 767px 미만에서는 여백(padding)이 줄어들고, method 드롭다운이 96px로 축소되며, API 키 선택 도구가 유연하게 배치(flex)됩니다.
- 640px 미만에서는 URL 행이 두 행으로 재배치되고 (위에는 method와 Send, 아래에는 URL), response 도구 버튼이 32px 터치 영역으로 커지며, 탭이 가로로 스크롤되고, cookie 테이블은 name, value, path, expiry가 세로로 쌓인 grid 카드로 변경됩니다.
- 374px 미만(iPhone SE 영역)에서는 추가적인 축소 처리를 통해 모든 요소에 접근할 수 있도록 유지합니다.
그리고 힌트 tooltip은 이제 pointer-coarse 기기에서 탭할 때 열리고, 동일한 트리거를 두 번째 탭할 때 닫힙니다. 이번 주 기차 안에서 빌린 iPhone SE로 테스트해 본 결과, 가로 흔들림 없이 모든 것이 잘 맞았습니다.
이것이 도구를 "데모"에서 "실제로 사용할 만한 것"으로 발전시키는 과정입니다. 출시 주간보다 조용했지만, playground가 더 이상 우리를 답답하게 만들지 않게 된 한 주였습니다.