내일배움캠프

[내일배움캠프] UX/UI 6기 Day 3 - 테스트 케이스 작성하고 디자인 QA로 발견한 이슈 공유하기

이응이응시옷 2025. 1. 22. 19:07
728x90

 

[수업 목표]

  • 제품팀이 무엇인지 이해합니다.
  • UX/UI 디자이너의 기본적인 디자인 프로세스를 파악합니다.
  • UX/UI 디자이너가 실무에서 누구와, 어떤 방식으로 일하는지 익힙니다.

01. 제품팀

💡제품팀이란?

👉 제품을 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀

 - 목적 조직 - 특정한 목적을 달성하기 위해 여러 직무의 사람들이 모인 팀

 - 기능 조직 - 유사한 직무끼리 구성된 팀

 - 매트릭스 조직 - 구성이 기능조직과 목적조직이 교차된 형태로 소속된 구성

 

제품팀이 일하는 방식

 

▶ 린스타트업

 빠르게 제품을 테스트하고 그 결과를 다시 제품에 반영하는 운영 방식

- 불확실성이 높은 스타트업에서 제품을 효과적으로 개발하기 위해 고안된 전략

- 핵심은 낭비를 줄이는 것, 적은 리소스로 제품을 만들어서 빠르게 시장에 검증해가면서 기능을 고도화해나가는 방법

 

▶ 애자일

제품을 만드는 방법론 중 하나

일정한 주기로 빠르게 제품을 배포해 사용자의 피드백을 받고 요구사항을 수정해나가는 과정을 반복

- 애자일한 제품팀은 1-4주의 스프린트 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해나가는 과정을 반복

- 폭포수 방식과는 반대

폭포수 방식 애자일 방식
• 폭포가 떨어지는 것처럼 수직적으로 각 단계를 하나씩 단계를 진행하는 것

• 각 단계가 완벽하게 완성되었을 때만 다음 단계로 넘어가고 이전 단계로는 돌아가지 않음

• 요구사항 설계부터 디자인, 개발이 순서대로, 그리고 독립적으로 진행

• 단계별로 업무 분담이 명확하고 진행 상황 파악이 쉬움

• 하지만 속도가 느리고 변화하는 상황에 유연하게 대처하기 어려움		 • 1~4주의 스프린트 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해 나가는 과정을 반복하는 것

• 수평적으로 일하면서 불필요한 의사결정을 줄이고 즉각적인 계획과 실행으로 피드백을 빠르게 반영

• 빠르게 변화하는 환경에 맞추어 기민하고 유연하게 대응할 수 있다는 것이 장점

 

✔️ 용어정리

▹ 스프린트 - 집중해서 여러 태스크를 완료하는 1-4주 정도의 짧은 기간

▹ 스크럼 - 1-4주 단위의 스프린트 안에서 목표를 정하고 우선순위에 따라 제품을 개발하는 방식

▹ 이터레이션 - 짧은 주기로 스프린트를 이어나가는 것

 

02. 디자인 프로세스

 

▶ 기획

  1. 문제 정의 - PO/PM과 함께 제품 목표에 따라 우선순위가 높은 문제를 정함
  2. 아이데이션 - 앞서 정의한 문제를 해결할 다양한 아이디어를 내고, 그중에서 적절한 솔루션을 선택, 필요에 따라 러프한 솔루션 스케치를 진행
  3. 프로덕트 스펙 문서 작성

▶ 디자인

  1. 초안 디자인 - 피그마나, 스케치 등의 디자인 툴로 솔루션을 디자인
  2. 피드백 - 기획 단계에서 논의한 대로 잘 디자인되었는지 팀원들에게 공유하고 피드백을 받음
  3. 최종 디자인 확정 및 핸드오프 - 피드백을 초안에 반영하여 최종 디자인을 확정, 엔지니어에게 공유

💡핸드오프란? 핸드오프는 디자인을 개발할 수 있도록 엔지니어에게 전달하는 것

디자인을 공유할 때 아래 내용을 포함해 전달하는 것이 좋음.

더보기
  • 유저 플로우
    처음 시작하는 화면은 어디이고 어떻게 연결되는지 만들려는 기능의 전체 흐름이 잘 보이도록 구성해 보세요.
  • 유즈 케이스
    상황에 따른 화면 정의
    예를 들어, 회원가입 화면에서는 정상 입력, 입력값 오류, 입력 가능 시간 초과 등의 다양한 상황이 생길 수 있어요. 모든 케이스에 달라지는 화면을 놓치지 않고 정의해야함
  • 반응형 레이아웃
    대부분의 회사에서는 스크린 크기를 하나 정해 디자인을 하고 반응형으로 대응
    아주 작은 스크린 크기나 특별한 스크린 크기에 디자인이 어떻게 표현되어야 하는지 가이드를 주는 것이 좋음

 

▶  개발

  1. 디자인 QA
    • 개발이 완료되면 디자인대로 정확하게 개발되었는지 확인
    • 최대한 사용자와 비슷한 환경으로 테스트
    • 앱이라면 적어도 안드로이드, iOS 두 환경을 모두 확인하는 것이 좋음

 

프로덕트 스펙 문서

💡프로덕트 스펙

👉 제품을 만들거나 개선할 때 사용하는 문서로 기능의 사양을 정의한 가이드

 - 팀원 모두가 같은 생각을 갖고 제품을 만들 수 있도록 가이드 하는 역할

 - 기획 배경과 솔루션, 기능 요구사람, 실험 계획 등

 - 가능한 한 기획, 디자인, 개발에 피룡한 모든 내용을 적는 것이 좋음

 

1) 기획 배경 & 문제 정의 - 기획하게 된 배경을 짧게 설명하고 사용자의 문제를 정의

  • 문제 발견 과정
  • 문제로 정의한 이유
  • 문제의 원인
  • 누가 이 문제에 영향을 받는지

2) 솔루션 설명 - 만들고자 하는 솔루션에 대해 UX/UI 관점에서 자세하게 설명

  • 페르소나
  • 사용자 시나리오
  • 기능별 주요 특징 & 요구사항
  • 예외 상황 및 Edge Case 정의
  • 최종 시안

3) 실험 설계 - 솔루션의 효과를 검증하기 위해 어떤 순서로 실험을 진행하고 어떻게 결과를 분석할 것인지에 대한 계획을 작성

  • 실험 가설 - 문제 해결을 통해 만들어 내고자 하는 결과
  • 실험 방식
  • 결과 평가 - 문제가 해결되었는지 판단할 수 있는 방법
  • 실험 기간

4) 예상 일정 - 프로덕트 스펙에는 예상 일정을 꼭 포함

  • 프로덕트 스펙 초안 작성 완료 예상 일정
  • UI/UX 디자인 최종 시안 제작 완료 예상 일정
  • 개발 분야별 예상 일정 - 프론트엔드, 서버, 이벤트 설계, QA를 각각 세부적으로 작성
  • 배포 목표 일정

디자인 공유하고 피드백 받기

👉 좋은 피드백을 받기 위해선 디자인을 잘 공유하는 것이 중요

  • 피드백을 주는 사람이 전체적인 내용을 알 수 있도록 충분한 정보를 함께 전달

📌 디자인 피드백을 요청할 때 포함하면 좋 것

  • 배경 - 해당 프로젝트를 기획하게 된 배경을 설명
  • 솔루션의 의도 - 가설에서 어떠한 방향성을 잡고 디자인했는지 설명
  • 필수 리뷰어 - 다수에게 디자인을 공유할 땐 꼭 피드백을 받고 싶은 사람을 지정
  • 참고 문서
  • 피드백 기한 - 제품 개발, 배포 일정에 영향을 주지 않도록 피드백을 받을 수 있는 충분한 여유를 두는 것이 좋음

 

03. 협업하기

1) 협업이란?

  • 앞서 제품팀은 각자 다른 전문적인 능력을 갖춘 사람들이 모인 것
  • 각 직무의 리소스가 낭비 없이 좋은 솔루션을 만드는 데 집중적으로 쓰이는 것
  • 서로가 더 좋은 퍼포먼스를 낼 수 있도록 돕고 시너지를 낼 수 있도록 하는 것이 좋은 협업

2) PO/PM 이해하기

PM (Product Manager) PO (Product Owner)
- 제품의 전략을 세우고, 우선순위를 결정해 실행하는 사람

- 실무 중심으로 프로젝트를 관리

- 요구사항 분석, 전략 설계, 지표 관리 및 분석 등의 업무를 수행		 - 제품에 대한 오너십을 갖고 제품이 시간에 잘 전달될 수 있도록 관리하는 사람

- 제품 전반의 로드맵을 그리고 제품을 관리

- 로드맵과 전략 설계, 지표 관리 및 분석 등의 업무를 하며 동시에 제품팀의 조직 관리

 

3) 엔지니어 이해하기

  • 프론트엔드 엔지니어 - 사용자가 만나는 지점, 특히 눈에 보이는 영역의 기능을 구현하는 사람
  • 벡엔드 엔지니어 - 제품에 필요한 정보를 저장하거나 전송하고, 관리하는 영역을 담당하는 사람
  • QA 엔지니어 - QA 테스트를 계획, 진행하고 제품 전반적인 품질을 높이는 역할을 하는 사람
  • 데이터 애널리스 - 수집하고 분석해서 인사이트를 제공하는 사람

4) UX/UI 직무 이해하기

  • BX(Brand eXperience)디자이너 - 브랜드 경험과 관련된 전반적인 디자인을 하는 사람
  • UX writer - 제품 내의 문구를 담당하는 사람

 

04. 실험 문화

💡실험이란?

👉 제품의 개선이 실제로 사용자에게 더 나은 경험으로 이어지는지 데이터로 검증하는 것

- 실험은 대부분 A/B 테스트로 진행

- A/B 테스트 설계를 할 수 없을 떄, 특정한 상황에서는 전후 비교 테스트를 하기도함

✔️ 전후 비교 테스트 - 실험 기간 전후로 지표가 어떻게 달라졌는지를 비교해보는 방법

 

💡A/B 테스트

👉 두가지 이상의 버전을 각각 다른 사용자에게 보여주고 성과를 측정하는 실험

 - 사용자를 임의로 대조군(Control)과 실험군(Treatment), 두 집단으로 나누고 서로 다른 안을 보여준 다음 어느 집단이 더 좋은 지표를 보이는지 측정하여 평가

 - 제품에 어떤 변화를 줬을 때 사용자가 어떻게 반응하고 행동하는지 정보를 얻기 위해 실험

 

☑️ 실험을 위한 제품 분석 도구

  • 앰플리튜드
    • 제품 안에서 일어나는 특정 행동에 이벤트를 심어두면 해당 행동이 일어났을 때를 기록해 데이터를 쌓고 보여줌
    • 이벤트별 분석, 화면별 퍼널 분석, 리텐션 그래프, 유저 구성 등의 기능이 있어서 제품에 관한 다양한 데이터를 얻고 분석 가능
    • 주로 PO/PM이 많이 사용
  • 구글 애널리틱스 (GA4)
    • 구글에서 제공하는 무료 분석 툴
    • GA4는 이벤트 중심으로 데이터를 수집하고 특정 페이지 조회, 링크나 버튼 클릭, 스크롤 내리기 등 사용자 상호작용을 기록
    • 구글의 마케팅 플랫폼과의 연계성이 좋아 주로 마케터들이 많이 사용

 

05. 디자인 QA

💡QA(Quality Assurance)란?

👉 제품이 출시되기 전에 기능을 테스트하는 것

 - 제품이 처음 기획한 대로 잘 구현이 되었는지, 회사에서 생각하는 품질 기준이 충족되었는지를 확인하는 과정

 

☑️ QA의 목적

  • 사용자가 제품을 이용할 수 없을 만큼의 치명적인 결함은 없는지 확인
  • 조직 전체에서 기대하는 수준의 품질이 갖춰졌는지 확인
  • Product Spec 문서에서 작성했던 명세대로 잘 구현되었는지 확인
  • 특수한 상황에서 예상하지 못한 대로 동작하지는 않는지 확인
  • 전반적인 UX가 사용하기 편리한지 확인

체크리스트(CL)

  • 예/아니요, 혹은 Pass/Fail로 답변할 수 있는 확인 성격의 항목을 나열한 목록
  • 기능이나 개선 범위가 넓지 않을 때 사용

테스트 시나리오(TS)

  • 기획한 기능이 모두 제대로 동작하는지 확인하기 위해 작성하는 문서
  • 사용자가 기능을 사용하면서 경험하게 되는 과정을 상세하게 작성

테스트 케이스(TC)

  • 특정 조건에서 요구 사항을 충족하는지 확인하기 위해 여러가지 케이스를 작성한 문서
  • 특정 조건, 테스트 범위, 케이스, 기댓값, 테스트 환경 등을 상세하게 작성

💡디자인 QA

👉 디자인이 정확하게 개발되었는지 확인하는 절차

 

디자인 QA에서 발견한 이슈 공유

  • 어디가 잘못되었는지 엔지니어가 정확하게 알 수 있도록 작성
  • 잘못 개발된 화면과, 원래의 디자인 화면을 기획 의도와 함께 전달
  • 조직에 따라 다르지만 지라나 트렐로 같은 프로젝트 관리 툴을 사용한다면 관리하기 좋게 발견한 이슈를 업무 티켓 형태로 전달하는 것을 추천

🍯 꿀팁! 중요한 것부터 해결할 수 있도록 중요도 표시하기

더보기
HIGHEST
  • 당장 대응이 필요할 정도로 주요 기능에 문제가 있는 경우
HIGH
  • 사용자가 행동을 완수할 수 없는 이슈
  • 기능상 사용성에 치명적인 문제가 될 수 있는 것
MEDIUM
  • 사용자가 행동을 완수하는 데 어려움을 겪을 수 있는 문제
  • 단계를 넘어가는 데에 어려움이 없으나 기획이나 피그마 디자인 화면과 다르게 적용된 것
  • 사용자가 상황을 제대로 이해하기에 어려움이 있는 것 (예시: 네트워크 오류로 팝업이 떠야 하는 상황에서 알 수 없는 오류 팝업이 뜨는 이슈)
  • 시각적으로 오류가 난 것처럼 보이는 것
LOW
  • 기능상 문제가 없는 것
  • 피그마 화면과는 다르지만, 맥락상 과정을 이해하기에 어려움이 없는 것
  • 오픈 후 수정되어도 문제없는 디테일한 부분
LOWEST 
  • 단순 의견 정도의 레벨로 급하게 반영되지 않아도 될 이슈

 

 

[숙제] 테스트케이스 작성 + 디자인 QA로 발견한 이슈 공유하기

 

뱅크샐러드의 회원가입/로그인 과정에서 휴대폰 본인인증 화면에 대한 QA

 

화면 조건 테스트 케이스 입력 값 기댓 값 테스트 환경
휴대폰 본인인증 정상 휴대폰 인증 요청 성공 ***-****-**** - SMS로 인증번호가 전송됨
- 앱에서 인증번호 입력 화면으로 전환됨 		Android
휴대폰 본인인증 에러 유효하지 않은 전화번호 입력 010-0000-0000 '입력하신 정보가 이동통신사에 등록된 정보와 일치하지 않습니다 확인 후 다시 시도해주세요'라는 오류 메시지 표시 Android
휴대폰 본인인증 정상 인증번호 입력 성공 유효한 인증번호 인증이 성공하여 비밀번호 설정 화면으로 이동 Android
휴대폰 본인인증 에러 잘못된 인증번호 입력 잘못된 인증번호 '잘못된 인증번호입니다 인증번호를 다시 입력해주세요. (최대 3회 입력 가능)'이라는 오류 메시지 표시 Android

 

 

이슈를 발견했다고 가정

Fail 기대 결과
휴대폰 본인인증 화면에서 이름 입력 텍스트 필드를 넘어 글자가 작성됩니다
 - 텍스트 필드를 넘겨 보이지 않도록 텍스트 필드를 넘어가는 경우 일정 글자수 이상부터는 말줄임표로 보이도록 해주세요
- 텍스트 필드 내용을 지울 수 있도록 X 버튼을 추가해주세요

 

 - 사내 메신저를 통해 엔지니어에게 발견한 이슈를 공유하는 글을 작성

 

안녕하세요, ooo 엔지니어님

다름이 아니라 디자인 QA 중에 한 가지 이슈를 발견하여 공유드리고자 합니다.

 

위치 : 휴대폰 본인인증 화면

상세 설명 : 휴대폰 본인인증 화면에서 이름을 입력하는 텍스트 필드를 넘어서 텍스트가 작성되는 이슈

기대 결과 :

- 텍스트 필드를 넘겨 보이지 않도록 텍스트 필드를 넘어가는 경우 일정 글자수 이상부터는 말줄임표로 보이도록 해주세요

- 텍스트 필드 내용 수정이 용이하게 텍스트 필드 내부에 우측 정렬로 X 버튼을 추가해주세요

 

참고하실 수 있도록 스크린 샷을 첨부하였습니다

추가적으로 궁금하신 사항이 있으시다면 언제든지 연락주세요

감사합니다.

728x90