이슈 리포트 리팩토링 (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 쪽에서 확인한 명확한 내용을 친절히 작성하면 더 좋을 것 같다.
로그인 후 모든 글을 볼 수 있습니다.