이슈 리포트 리팩토링 (feat. 이미지 리사이징) 실제 QA에서 이런 업무는 하지 않는다.. 이슈 리포트를 살펴보면 QA 쪽에서 조금 더 친절하게 적어줄 만한 내용이 있다. 이슈의 원인을 파악하자는 게 아니고 어디까지 확인했고 정책이 뭔지는 알려줘야 한다. 정책을 기준으로 테스트를 하는 것이기에 버그라는 근거를 가져와야 한다. ​ *리팩토링: 개발자들은 코드 중복 제거, 공용 컴포넌트 적용, 디자인 패턴 적용, 가독성 개선 등 유지 보수를 편하게 하기 위한 작업을 한다. ​ 아래는 내용은 내부 보안에 위배되지 않게 일부 재구성되었음. 요약: 리뷰 이미지가 잘려서 노출됩니다. 설명: ​ [테스트환경] 블라블라 ​ [사전조건] 로그인 상태 작성 리뷰 존재하는 상태 ​ [재현과정] 1. 리뷰 > 작성한 리뷰 탭 진입 2. 이미지 확인 ​ [실제결과] 이미지 잘림 현상이 발생 합니다. ​ [기대결과] 이미지 잘림 현상이 없이 정상 노출 되어야 합니다. ​ [비고] 스크린샷 첨부 —— 여기까지가 작성된 내용이다. 내가 생각하는 이미지 잘림과 다른 의미로 쓰이는듯 하다. 내가 750*1334px, 100KB의 이미지를 업로드 했다. 하지만, 사용자단에 보이는 이미지는 750*900의 이미지인 것이다. 세로 434px이 잘린 것이다. 내 생각은 중요히지 않고.. 리포트를 읽을 사람이 중요하다. ​ 이 이슈에서 QA가 확인 해야할 것이 더 있다. 이미지 사이즈(서버에서 주는 원본 이미지), 레이아웃, 이미지 리사이징 기준이다. 안드로이드의 경우 네이티브 앱은 기기 환경설정에서 UI 레이아웃 확인 가능하다. ​ 안드에서 재현되어 레이아웃을 확인해 뵀다. 컨테이너 상하 패딩에 백그라운드 색상이 들어가서 이미지가 표시되다 보니 잘린 것처럼 보이는 내용이다. ​ 권장 사이즈가 있겠지만 이미지를 서버에 업로드하고 사용자에게 표시할 때 리사이징 한다. width:100px, height: 100px의 박스가 있다. 이 박스 안에 이미지를 넣어야 한다. 사용자가 업로드한 이미지는 200*300 또는 50*50이다. 이미지가 컨테이너보다 크거나 작은 경우 어떻게 해야 할까? 아무것도 지정하지 않으면 컴퓨터가 자동으로 할까? 자동으로 한 게 보기에도 좋을까? 원본 사이즈 그대로 넣으면 이미지가 작다면 여백이 생기고, 크다면 이미지가 다 보이지 않을 것이다. 이런 상황이 있기에 이미지 리사이징을 한다. ​ 이미지를 리사이징하는 방법에는 여러 가지가 있다. 이미지가 컨테이너보다 작은/큰 경우의 상황에서 비율 유지가 있음/없음, 기준이 너비/높이, 이미지 원본 그대로/확대/축소 ​ 이미지 리사이징은 CSS object-fit으로 검색하면 쉽게 알 수 있다. https://www.w3schools.com/css/css3_object-fit.asp https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ​ 마진: 바깥 여백 https://developer.mozilla.org/ko/docs/Web/CSS/margin ​ 패딩: 안쪽 여백 https://developer.mozilla.org/ko/docs/Web/CSS/padding ​ 이미지 리사이즈, 마진, 패딩을 알았으니 리포트를 조금 더 친절히 써보겠다. —— 요약: 리뷰 이미지 컨테이너 상하 패딩 약 20px 발생함 설명: ​ [테스트환경] 블라블라 ​ [사전조건] - ​ [재현과정] 작성한 리뷰 페이지 > 리뷰 이미지 확인 시 ​ [기대결과] 컨테이너 상하 패딩 0px ​ [실제결과] 컨테이너 상하 패딩 약20px 발생함 ​ [비고] 디자인 가이드 링크 —— 정답은 없다. 각자의 작성 스타일도 있다. QA 쪽에서 확인한 명확한 내용을 친절히 작성하면 더 좋을 것 같다.