이번 숙제는 뱅크샐러드 앱의 회원가입/로그인 과정에서 휴대폰 본인인증 화면에 대한 QA를 한다는 가정하에
테스트케이스를 작성하고,
튜터님께서 제공해 주신 디자인 QA 예시로 발견한 이슈를 공유하는 과정과,
엔지니어에게 발견한 이슈를 글로 공유하는 연습을 하는 숙제이다.
이번에도 숙제를 하기에 앞서 테스트케이스와 디자인 QA에 대해 먼저 정의를 하려고 한다.
UX/UI 디자이너는 제품팀, 엔지니어, PM, 개발자 등 여러 분야의 사람들과 협업을 하며 일을 한다.
제품에 문제가 생겨 수정사항이 필요할 때 다른 팀에게 자료를 넘겨주는 과정이라 매우 중요하다.
이미지로 제공하는 부분도 중요하고 글로 공유하는 부분도 매우 중요하다.
이번 숙제는 이런 과정을 연습하는 숙제이다.
QA란?
Quality Assurance(보증, 확신) 의 약자로, 제품이 출시되기 전에 기능을 테스트하는 것을 말한다.
- 제품이 처음 기획한 대로 잘 구현이 되었는지, 회사에서 생각하는 품질 기준이 충족되었는지를 확인하는 과정이다.
- 규모에 따라 별도로 QA 팀이 있기도 하고 제품팀에서 QA를 수행하기도 한다.
- QA 팀이 있더라도 기능을 만든 담당자라면 대부분 직접 QA를 한다.
QA의 목적
- 사용자가 제품을 이용할 수 없을 만큼의 치명적인 결함은 없는지 확인한다.
- 조직 전체에서 기대하는 수준의 품질이 갖춰졌는지 확인한다.
- Product Spec 문서에서 작성했던 명세대로 잘 구현되었는지 확인한다.
- 특수한 상황에서 예상하지 못한 대로 동작하지는 않는지 확인한다.
- 전반적인 UX가 사용하기 편리한지 확인한다.
QA를 할 때 준비해야 하는 문서
1. 체크리스트(CL)
- 예/아니요, 혹은 Pass/Fail로 답변할 수 있는 확인 성격의 항목을 나열한 목록이다.
- 기능이나 개선 범위가 넓지 않을 때 사용한다.
예시) 버튼을 눌렀을 때 색상이 변하나요?
2. 테스트 시나리오(TS)
- 기획한 기능이 모두 제대로 동작하는지 확인하기 위해 작성하는 문서이다.
- 사용자가 기능을 사용하면서 경험하게 되는 과정을 상세하게 적는다.
예시) 1. 회원가입은 카카오톡, 네이버, 일반 회원가입 3가지가 있다.
2. 일반 회원가입의 경우 이메일, 비밀번호, 이름을 입력한다.
3. 통신사 별로 핸드폰 인증을 한다.
3. 테스트 케이스(TC)
- 특정 조건에서 요구 사항을 충족하는지 확인하기 위해 여러 가지 케이스를 작성한 문서이다.
- 특정 조건 아래의 환경을 테스트하는 것이기 때문에 특정 조건, 테스트 범위, 케이스, 기댓값, 테스트 환경 등을 상세하게 적어야 한다.
디자인 QA란?
디자인이 정확하게 개발되었는지 확인하는 절차이다.
디자인 QA에서 발견한 이슈 공유하는 방법
- 디자인과 다른 부분을 발견했다면 팀원들과 내용을 공유하고 수정을 요청해야 한다.
- 어디가 잘못되었는지 엔지니어가 정확하게 알 수 있도록 작성하는 것이 좋다.
- 잘못 개발된 화면과, 원래의 디자인 화면을 기획 의도와 함께 전달해야 한다.
- 조직에 따라 다르지만 지라나 트렐로 같은 프로젝트 관리 툴을 사용하는 것을 추천한다. (관리하기 좋게 발견한 이슈를 업무 티켓 형태로 전달하는 것을 추천한다)
<업무 티켓 예시>
이슈의 중요도 정의하기
- 중요한 것부터 해결할 수 있도록 중요도 표시하기
- 배포 일정이 촉박한 경우 QA에서 발견한 모든 이슈를 수정하지 못하고 배포해야 할 때도 있다.
- 제품의 퀄리티를 해치는 이슈 먼저 해결할 수 있도록 이슈별 중요도를 표시하는 것이 좋다.
숙제
1. 테스트케이스 작성하기
조건 | 테스트 케이스 | 입력 값 | 기댓값 | 테스트 환경 |
정상 | 모든 텍스트 필드에 정상 값 입력 | 123123@gmail.com | 휴대폰 본인인증으로 이동 | iOS |
에러 | 텍스트 필드 공백 | 공백 | 다음 화면으로 넘어가지 않음 | iOS |
에러 | 인증번호 오류 | 인증번호 오류 | 인증번호 오류라고 뜸 | iOS |
2. 디자인 QA로 발견한 이슈 공유하기 (엔지니어에게 공유한다는 생각으로)
Fail | 기대 결과 |
이름 칸에 이름을 길게 쓰면 글자가 텍스트 필드를 넘어갑니다. | 1. 이름을 길게 쓰면 텍스트 필드를 넘지 않게 해주세요. 2. 16글자 이상으로는 ...으로 뜨게 구현해주세요. |
|
3. 슬랙으로 엔지니어에게 발견한 이슈를 공유하는 글 작성하기
'UIUX 3기 본캠프' 카테고리의 다른 글
디자인 입문 강의 5주차 숙제(디자인 원칙 사례 찾아보기) (0) | 2024.02.28 |
---|---|
디자인 입문 강의 4주차 숙제(피그마 프로토타입 연습하기) (1) | 2024.02.28 |
디자인 입문 강의 2주차 숙제(디자인씽킹을 통한 스카이스캐너 개선 아이디어) (1) | 2024.02.27 |
디자인 입문 강의 1주차 숙제(자주 사용하는 앱 UI 분석) (1) | 2024.02.27 |
피그마에서 마진 값 구하는 방법 (0) | 2024.02.22 |