[Food&Learn] 디자인 단계에서의 QA역할

안녕하세요! 다들 잘 지내셨나요? 어느덧 여름이 왔네요 제주의 여름은 정말 뜨겁습니다;;

더위 조심하시고 Food&Learn 3번째 자료를 공유해 보도록 하겠습니다!

이 자료는 저의 팀원들과의 프로젝트를 원활하게 진행하기 위한 자료인 점 이해부탁드려요!

 

🔻 Food&Learn 2회 자료

2025.04.04 - [🔍 QA_Test] - [Food&Learn] 리스크 분석하기

[Food&Learn] 리스크 분석하기

---

개요

디자인 단계에서 QA는 UX/UI 설계를 검토하고, 접근성을 고려하여 사용자가 불편함 없이 서비스를 이용할 수 있도록 돕는다.

이 과정에서 초기 사용성 테스트를 통해 주요 문제를 조기에 발견하고 개선하는 것이 목표다.

 

📊 요약 (디자인 단계 QA 역할)

QA 업무	설명	여행 매거진 서비스 적용 예시
UX/UI 설계 검토	화면 디자인과 콘텐츠 배치를 점검하여 사용자 친화적인지 확인	기사 목록의 이미지 크기가 균일하지 않아 가독성이 떨어지는 경우 수정 요청
접근성 테스트 계획	색상 대비, 폰트 크기, 내비게이션 사용성을 점검하여 다양한 사용자가 불편 없이 이용할 수 있도록 보장	모바일 화면에서 글자가 너무 작아 읽기 어려운 경우 폰트 크기 조정 요청
사용성 피드백 수집	내부 테스트 및 베타 사용자 피드백을 통해 UX/UI 개선점을 발견하고 개발팀과 논의	"카테고리별 기사 찾기가 어려워요"라는 피드백을 반영하여 필터 기능 추가 검토

---

 

🔍 디자인 단계에서 QA의 역할

 

1️⃣ UX/UI 설계 검토

• 여행 콘텐츠(기사, 사진, 추천 장소)가 일관된 레이아웃으로 정리되어 있는지 확인
• 버튼, 메뉴, 내비게이션이 직관적이고 사용하기 쉬운지 점검
• 모바일과 데스크톱에서 디자인이 깨지거나 UI 요소가 잘리는 문제 방지

💡 QA 사례 적용 예시

• 기사 목록에서 이미지 크기가 제각각이라 정리가 안 되어 보이는 경우 → 동일한 비율로 정리 요청
• "제주도 추천 여행지" 기사 제목이 너무 길어 한 줄 이상 표시될 경우 → 제목 줄 수 제한 & 말줄임표 적용 요청

2️⃣ 접근성 테스트 계획

• 색상 대비, 폰트 크기, 링크 및 버튼 클릭 영역이 모든 사용자(색약, 시각 장애 등)에게 적절한지 점검
• 모바일에서도 쉽게 스크롤하고, 터치하여 원하는 콘텐츠를 찾을 수 있도록 검토
• 검색 기능, 필터 기능 등이 사용자가 혼동 없이 활용할 수 있는지 테스트

💡 QA 사례 적용 예시

• 색상 대비가 약한 배경과 텍스트 조합이 가독성을 해치는 경우 → 명암비를 고려한 디자인 개선 요청
• PC에서는 잘 보이지만, 모바일에서 제목이 작게 표시되어 읽기 어려운 경우 → 폰트 크기 자동 조절 적용 요청

3️⃣ 사용성 피드백 수집 및 개선 제안

• 초기 사용자 테스트를 통해 불편한 점을 발견하고 개발팀과 논의합니다.
• 베타 사용자(지인&팀원) 피드백을 수집하여 개선이 필요한 UI 요소를 우선적으로 수정합니다.

💡 QA 사례 적용 예시

• "기사를 읽고 있는데 다음 기사로 이동하는 버튼이 안 보여서 불편해요" → 이전/다음 기사 이동 버튼 추가 요청
• "제주도 관련 기사만 보고 싶은데, 원하는 지역별 필터 기능이 없어요" → 카테고리별 필터 기능 추가 제안

🔻 디자인 단계에서 QA를 통한 기대 효과

✅ 여행 콘텐츠를 쉽게 찾고, 읽고, 공유할 수 있도록 UX 개선

✅ 모바일, 태블릿, PC 등 모든 환경에서 최적화된 사용자 경험 제공

✅ 접근성 강화로 누구나 쉽게 여행 정보를 탐색할 수 있도록 지원