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

QA 컨퍼런스에서 네 번째 발표를 맡아주신 안소현 님의 발표 내용을 정리해 보도록 하겠습니다.

주제만 봤을때는 어떤 내용일지 예상하지 못했습니다. 하지만 듣고 나선 재밌고 편하게 들었던 주제였습니다. 연사분이 말씀해 주신 것처럼 전공 듣다가 재밌는 교양 수업 듣는 느낌으로 발표를 봤습니다.

업무에 도움되는 부분과 다른 개인 작업을 진행할 때 꿀팁이 많았던 발표였습니다.
내용 정리를 해보면서 북마크 폴더를 새로 구성해봐야 할 것 같아요 🤣

제가 작성하는 내용은 QA 컨퍼런스 후기일 뿐입니다 🫠
QA 컨퍼런스에 직접 참여하셔서 발표를 들어보시는 것을 정말 추천드립니다!

QA 코리아 컨퍼런스 : https://www.qa-korea.com/
 
안소현 님 링크드인 : 링크드인 연결 링크

 

'

QA 컨퍼런스의 네 번째 발표는 안소현 님이 발표해 주셨습니다. QA 업무를 진행하다 보면 UI/UX 의견을 제시하는 경우가 종종 발생하는데, 디자이너와 협업하는 경우 어떤 방식으로 커뮤니케이션을 하면 좀 더 의사 전달이 잘 되는지 꿀팁들을 주셨고, 실무에서 쓰일 수 있는 여러 레퍼런스 자료들도 공유해 주셨습니다. 발표를 한 번 정리해 보겠습니다 😀

 

 

목차를 보기 전까지 디자인 QA? 그건 어떤 QA일까 직접 디자인을 하는건가..? UX 관점으로 화면을 보는 것일까? 생각이 많이 들었는데, 목차를 보고 QA 업무와 디자이너 업무는 별개지만 의사소통 방식에 대한 내용을 중심으로 알려주시는 듯했습니다. 설명해 주시면서 실무에서 QA와 협업했을 때 느낀 점을 디자이너 입장으로 풀어주신다고 하셨습니다. 

 

QA 입장이 아닌 디자이너의 입장으로! QA가 어떤 방식으로 다가가는게 편할지 상대방의 입장에서 내용을 알려주신다 하셔서 발표 내용이 궁금하게 만드는 도입부였습니다.

(PPT 형식부터 다르길래 오오.. 뭐지! 디자이너는 뭔가 다르다!하면서 봤습니다 😁)

 

 

먼저 업무 방식에 대한 이야기를 풀어주셨는데, 기획-디자이너 / 개발 - QA 따로 협업을 하는 것이 아닌 기획 - 디자이너 - 개발 - QA 같이 협업을 진행한다고 하셨습니다. 프로젝트 규모에 따라 이런 구조가 나올 수 없을 수 있지만 연사분은 다 같이 협업을 하는 경우가 많다고 하셨네요. 그러다 보니 서로의 업무에 대해 어느 정도는 알고 있어야 협업에 도움이 된다고 하셨습니다. 

 

 

회사에서 진행되는 프로세스를 예시로 들며 설명해주셨습니다. 업무 진행에 순서가 있고 담당하는 역할은 다르지만, QA 업무를 수행하시는 분들은 QA 업무뿐만 아니라 기획, 와이어프레임 구성, 디자인리뷰 항목에서도 의견을 주고받으며 업무를 진행한다고 하셨습니다.

 

저도 비슷한 경험을 가지고 있는데, 처음 기획안이 나오면 머리속으로 사용자 입장이 되어서 제품을 사용해 보는 시뮬레이션을 돌려봅니다. 그리고 화면 위치나 여기 있어야 할 기능이 아닌 것 같은데..?라는 생각이 들면 즉시 기획팀에 가서 많은 질문을 하곤 합니다. 그럼 자연스럽게 기획팀과 UI/UX 관점에 대한 협업을 진행하고 기획팀이 받아들이면 기획팀은 디자이너와 논의를 하고 수정을 하는 방식으로 진행합니다.

 

제가 직접 디자이너분과 협업을 하지 않았던 이유는 기획팀이 생각한 큰 그림이 있을 수 있고, 보여지는 기능 외 다른 기능이 추가될 수 있는 확장성이 있을 수 있어서 우선적으로 기획팀에 가서 문의하는 편입니다. 그래도 디자이너분과 직접 얘기를 하다 보면 디자인 측면의 사고를 넓힐 수 있어서 저렇게도 협의해보고 싶다!라는 생각이 들었습니다 😊

 

 

이후 Design QA에 대한 설명을 해주셨습니다. 디자인 업무를 진행하다보면 실제 반영되었을 때 다른 이슈로 인해 디자인이 틀어지는 경우가 있는데 이것들을 잡아주는 역할을 한다고 하셨습니다. 화면이 항상 동일한 구조로 되어있으면 괜찮겠지만, 글자 길이로 인한 화면 겹침, 사이트 언어 변경 시 UI 영향을 확인해 주는 것은 개발 문제가 아니기에 손수 확인해야 하는데, 이런 부분들을 QA분들이 확인해 주고 리포팅을 해주는 것을 보고 인상 깊었다고 하셨어요.

 

QA는 늘 화면을 보고 대부분의 버튼 조작이나 기능을 직접 수행하다보니 쉽게 발견할 수 있고 당연한 업무다라고 생각이 들 수 있지만 이렇게 디자인 측면으로 확인해 준다면 다른 작업을 할 때 여러 방향을 고려해서 디자인할 수 있어서 좋다고 하셨어요. 

 

여기서 드는 생각이 있었는데, 요즘 대부분 테스트 자동화를 목표로 만들고 있지만 막상 이런 부분처럼 사람이 코드상에 문제가 없어서 요소나, 컴포넌트, 식별자가 그대로 있는경우 화면에 표시되는 부분은 이상해도 자동화 시스템은 정상으로 판단하고 넘어갈 것 같네요. 자동화에 캡처 기능으로 확인한다 해도 모든 화면을 다 관리하는 것도 아닐 것이고... 자동화 테스트가 모든 것을 막아주진 못하겠구나라는 생각과 매뉴얼 테스트를 배제하면 안 되겠다는 생각도 들었습니다 🤔

 

 

그리고 이 화면을 보면서 살짝 놀랐습니다. 양쪽다 같은 로딩 화면을 표시해 주지만 로딩이 오래 걸리는 작업이라면..? 우측 화면처럼 진행되고 있는 상황을 표시해 주면 사용자도 로딩 중이지만 진행이 되고 있다는 느낌을 받을 것이고, 어느 정도 걸리겠다고 생각할 수 있을 것 같습니다.

 

단순히 로딩 중이라 하나의 화면만 계속 표시한다면 네트워크가 멈춘줄 알고 새로고침하거나 뭐가 이렇게 오래 걸려 하면서 창을 꺼버리고 다른 사이트로 가버릴 수 있기 때문이죠. 이 화면을 보고 디자인이나 사용자 관점에 대한 시각을 넓혀야겠다고 생각했습니다 😏

 

 

그리고 QA 관점에서도 생각하게 만드는 내용을 알려주셨습니다. 버튼 속성에 대한 시각적으로 보이는 부분에 대한 확인 작업인데, 단순히 화면에 정상 표시되고 기능이 정상 동작하는지를 넘어서 정상 동작에 맞는 문구가 들어가 있는지? 색상이나 어조에 일관성이 있는지, 터치 영역에 대한 고려가 되어있는지 확인해야 한다고 하셨습니다.

 

 

위에 설명한 부분은 바로 이해가 갔습니다. 가장 많이 쓰는 쿼티 키보드가 바로 생각 났는데요. 쿼티 키보드를 사용하다 보면 정말 오타가 흔하게 발생합니다. 생각했던 키를 누르려고 했으나 옆 버튼이 눌리는 경우.. 카톡을 사용하다 보면 정말 흔하게 발생하는 경우인데 이것도 고려해서 버튼 크기도 생각해야 한다고 합니다. 디자인 결함을 확인하는 QA의 경우 정말 확인할 게 많네요. 저도 본다고 보는데 훨씬 디테일한 측면의 사고를 넓혀야겠구나라고 생각했습니다.

 

 

버튼 속성 외 Textbox, 알림에 대한 UI 예시를 보여주시며 각 기능에서 확인해야 할 항목들을 체크리스트로 정리해서 관리한다고 하셨어요. 이렇게 체크리스트를 가지고 있으면 디자인 할 때나 QA 업무를 진행할 때 정상적으로 표시되는지 확인해야 할 항목이 TC처럼 존재하기 때문에 나중에 결함으로 확인하고 다시 수정하는 것보다 많은 공수 절감 효과에 도움이 될 것 같습니다.

 

 

그리고 해상도 별로 다르게 표시되는 반응형 웹 디자인을 고려해서 자주 사용되는 해상도에 대한 반응형 디자인 표시도 잘 되는지 확인해줘야 한다고 하셨습니다. 

 

모든 해상도를 확인할 수는 없으니 사람들이 많이 사용하는 해상도를 위주로 확인한다하셨고 관련 레퍼런스로 아래 링크를 알려주셨습니다. 관련 사이트에선 해상도 외 브라우저, 기기, SNS 등 여러 통계를 관리하고 있으니 다른 업무를 진행할 때도 도움 될 것 같습니다!

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

 

이 외에도 화면 구성이 잘 되어있는지, 올바른 인풋에 대한 아웃풋이 동작하는지 이미지나 아이콘은 정상 표시되는지 확인할 수 있는 체크리스트 예제를 보여주시면서 디자인 QA에 대한 내용을 잘 설명해 주셨습니다 👍👍

그리고, 디자인이나 업무에 도움되는 레퍼런스들을 사례로 보여주시면서 설명해 주셨습니다. 관련 레퍼런스 목록은 하단에 정리 및 별도 포스팅 페이지로 공유드리겠습니다.

 

 

이후엔 테스트에서 도움이 되었던 사례를 수행한 프로젝트를 예시로 들며 내용을 설명해 주셨습니다.

 

 

구성한 웹 페이지에서 결함이 발생하는 항목에 대한 데이터를 정리하여 전달받고 어떤 부분을 개선하면 사용자의 불편을 감소할 수 있는지, 사용자가 특정 기능은 왜 안 쓰려고 하는지에 대한 분석을 한 내용을 전달받으면 디자이너는 내용을 참고하여 더 나은 UI를 만들 수 있다고 하셨습니다.

 

다른 발표에 있었던 "사용자 행동 로그 검증" 내용이 생각났습니다. 사용자의 행동을 분석한 결과를 사용자 추천 데이터에 활용할 수 있지만, 사용성 측면으로 분석하면 UI/UX 개선에 도움을 줄 수 있겠구나라고 생각이 들었습니다.

 

이 부분은 정말 생각하지 못한 부분인데 데이터로 만들어가는 UI/UX라고 표현해야 할까요..? QA가 확인하고 분석하는 범위는 정말 넓은 것 같았습니다. 새로운 지식을 쌓아가는 부분이었습니다 👍

 

 

그리고 자체적으로 QA와 개발팀과 협업하여 개발한 것으로 보이는 배너 자동 생성 기능도 소개해주셨습니다. 디자인 부분에도 자동화 기능을 추가하셨구나 하고 신기해했고, 내용을 보면서 디자이너의 고충을 많이 해결해 줄 수 있는 기능이라고 생각되어 신기했습니다. 몇 번의 조작으로 여러 개의 배너 디자인을 제안할 수 있다는 게 엄청난 공수 절감 효과라고 생각이 들었습니다.

 

마지막으로 레퍼런스 관련 소개를 해주셨습니다. 관련 내용은 하단, 다른 포스팅으로 정리해 보겠습니다!

 

이번 발표를 듣고 QA나 디자인 내용보다 먼저 생각난 건 발표를 정말 많이 해보셨을 것 같다! 였습니다. 발표하는 방식이나 말씀해 주시는 것이 대화톤으로 편안하게 말씀을 해주셨고, 발표나 설명을 많이 해보셔서 그런지 정말 편하게 말씀 해주셨습니다. 대본이 있었는지도 모를정도로 자연스럽게 말씀해주시는 것을 보고, 저였으면 대본만 보면서 글자를 또박또박 읽느라 바빴겠다고 생각했습니다 😵

발표 내용도 좋았지만 발표하는 모습에 대해 배울 수 있었습니다. 

 

물론 발표 내용도 이색적이었습니다. 디자인 부분에서 QA의 역할에 대해 알아볼 수 있었고, 어떤 방식으로 테스트를 수행해야 하는지, 기획 단계에서 검토해야 할 부분에 대한 확장까지 정말 다양하게 알려주셨고 체크리스트의 경우 QA 업무를 진행할 때 바로 적용해야 할 것 같았습니다 😲

 

다음엔 게임 QA 관련 내용의 포스팅을 작성해 보겠습니다 :) 

 

 

  

 

---

위에서 안소현 님이 소개해 주신 레퍼런스를 정리해 보겠습니다.

 

다양한 통계를 확인할 수 있는 statconter

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

 

---

 

Chrome Extension

브라우저의 해상도를 즉각적으로 변경해 주는 Window Resizer

https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ko

Window Resizer

 

화면 해상도를 한 번에 띄워두고 자유롭게 변경하며 확인할 수 있는 Responsive Viewer

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

Responsive Viewer

 

컴포넌트에 간격을 쉽게 확인할 수 있게 지원해 주는 Dimensions

https://chromewebstore.google.com/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

Dimensions

 

스타일을 바로바로 확인할 수 있고 색상 정보도 볼 수 있는 CSS Peeper

https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=ko

CSS Peeper

 

웹 페이지에서 사용하고 있는 글꼴에 대한 정보를 얻어올 때 사용하는 WhatFont?

https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ko

WhatFont

 

---

UI/UX Reference

타사 서비스의 화면을 확인하여 UI 제작에 참고 자료로 활용할 수 있는 Mobbin

https://mobbin.com/browse/web/apps

 

Mobbin의 국내 버전, 국내 서비스 화면을 기능별 구분하여 UI 화면을 알려주는 WWIT 

https://wwit.design/

Lifeplus

 

IT 산업 동향이나 프로덕트 디자인 트렌드의 아이디어를 얻을 수 있는 Product Hunt

https://www.producthunt.com/

Product Hunt – The best new products in tech.

 

AI 피쳐를 가지고 있는 프로덕트를 소개해주는 aiverse.design 

https://aiverse.design/#explore

AIverse for Designers & Innovators

 

AI 프로덕트가 있는지 확인해 볼 수 있는 There is an AI For That

https://theresanaiforthat.com/

 

국내외 IT 자료들을 정리해 주는 지금 써보러 갑니다 (요즘 IT) 

https://yozm.wishket.com/

요즘 사람들의 IT 매거진, 요즘IT