QA 엔지니어와 협업하여 생성형 AI 프로덕트의 완성도 높이기 - 안소현

QA의 의견 반영 및 분위기: 프로젝트 시작 시 기획서 리뷰부터 모든 팀원이 참여하여 자유롭게 의견을 주고받는 분위기입니다. 다양한 국적의 동료들이 있어 커뮤니케이션이 중요합니다.

프로그래스와 인디게이터 차이: 로딩 시간에 따라 UI가 다릅니다. 짧은 로딩 시간에는 스피너, 긴 로딩 시간에는 프로그래스바를 사용합니다.

발표자료 체크리스트: 이메일로 일괄 전송됩니다.

모달/모달 영역: 페이지 내 버튼을 누르면 뜨는 추가 정보 입력 창으로, 팝업과 유사합니다.

패딩과 마진 차이: 패딩은 개체 테두리 안쪽 간격, 마진은 개체 외부 간격입니다.

참고 사이트: WhatFont, Saas Interface, uigarage 등이 있습니다.

협업하기 편한 QA: 커뮤니케이션이 잘 되고, 타 직무에 대한 기본 지식과 프로덕트 이해도가 높은 분이 협업하기 편합니다.

QA 엔지니어의 기여도: 기획부터 배포까지 모든 분야에 걸쳐 활약하며, 프로젝트가 잘 진행된다면 QA팀이 맡은 역할 이상을 수행하고 있다고 봅니다.

유스케이스에 따른 화면 설계: 유저플로우와 와이어프레임을 중점으로 화면을 전개합니다.

피그마 편집 권한 및 디자인 피드백: 피그마 편집 권한은 제한적입니다.

테스트 자동화 툴: Selenium, Puppeteer, Playwright 등을 사용합니다.

디자이너 협업 인원: 프로젝트와 스쿼드 단위에 따라 5명에서 10명 이상 협업합니다.

디자인 QA: 최종 디자인 문서와 구현된 화면을 비교 검토하는 작업입니다.

웹 UI와 모바일 UI 디자인 차이: 화면 크기(해상도)와 입력 방식(마우스/손가락 터치)의 차이로 인해 레이아웃과 접근 방식이 다릅니다.

 

디자인 툴: 과거에는 Sketch, Zeplin, Adobe 툴을 사용했지만, 현재는 Figma를 주로 사용합니다. Figma의 장점은 플러그인 사용의 자유로움, 협업의 편리함, 문서 관리의 용이성입니다.

디자인 이슈 우선순위: 기능적인 부분이 최우선, 그 외에는 브랜드 관련 요소(컬러, 폰트, 로고, 아이콘), 미세한 픽셀과 폰트 오류 순서로 배정합니다.

디자인 단계에서 컴포넌트 ID 부여: 디자인 단계에서는 진행하지 않고, FE와 QA 단계에서 진행합니다.

안드로이드 해상도와 다국어 지원 문제: 다양한 케이스를 배포 전에 확인하려고 노력하지만, 모든 언어와 스크린을 일일이 대응할 수는 없기 때문에 주 사용층 위주로 대응합니다.

디자인 변경 의견 수용 태도: 좋은 의견은 기꺼이 수용하려는 태도가 중요하며, 특히 스타트업에서는 동료들의 가감없는 의견을 많이 들어보는 것이 도움이 됩니다.

QA의 초기 단계 역할: 기획 및 디자인 단계에서 추후 발생할 수 있는 오류나 공백을 짚어주는 것이 중요합니다.

디자인 의견 변경: 디자이너뿐만 아니라 모두의 의견이 개발적 한계로 변경되는 경우가 있으며, 기획 단계부터 활발하게 커뮤니케이션하는 것이 효율적입니다.

디자인 이슈 협의: 기능적인 부분과 브랜딩에 대한 부분이 어긋나있다면 우선순위를 올려서 대응하며, 우선순위와 FE 리소스에 대한 협의는 위클리 미팅이나 슬랙으로 소통합니다.

만족스러운 디자인 툴: 사용성과 기능, 심미적인 모든 것을 고려했을 때 Figma가 가장 만족스러운 툴입니다.

디자인 테스팅 지표: UX 이슈와 관련된 경우 유저 이탈율과 사용성, 매출에 직결되는 지표를 가장 먼저 확인합니다.

Product Owner의 역할: 전반적인 기획과 방향성에 관여하며, 디자인 리뷰와 컨펌도 함께 진행하지만 디자인 QA에는 관여하지 않습니다.

PM과 디자이너 업무 영역 차이: PM은 기획문서와 전반적인 프로젝트 관리를 담당하고, 디자이너는 디자인을 담당하지만, 요즘은 각 분야를 자유롭게 넘나들며 일할 수 있는 능력이 요구됩니다. 

 

디자인 QA는 디자인팀에서 관리하거나, 리소스가 한정적일 때는 QA팀과 동시에 진행합니다.