애플리케이션의 시각적 품질은 고객의 첫인상을 결정합니다. 디자인과 사용감이 마음에 들면 사용자는 해당 애플리케이션을 더 자세히 살펴보게 됩니다. 온라인으로 결제를 해야 하는데, ‘계속’ 버튼이 그림 6-1과 같이 보인다고 상상해 보세요. 이 사이트를 신뢰하시겠습니까? 저는 신뢰하지 않을 것입니다. 돈을 잃을 위험을 감수하기보다는 경쟁사의 웹사이트를 선택할 것입니다!
그림 6-1. 버튼 텍스트가 잘린 결제 UI 예시
기업들은 더 많은 고객을 유치하기 위해 광고, 사은품, 캠페인에 막대한 비용을 지출하지만, 소프트웨어 팀은 종종 시각적 품질에 집중하는 것을 잊곤 합니다. 이는 마치 호화로운 집을 지어 놓고 페인트칠을 하는 것을 잊어버리는 것과 같습니다. 애플리케이션의 시각적 품질은 기업과 고객 간의 거리를 좁혀주고 고객의 호감을 얻는 데 도움이 되며, 이는 브랜드 가치를 직접적으로 높여줍니다. 시각 테스트는 수동 및 자동화된 테스트 방법을 모두 활용하여 애플리케이션의 시각적 품질을 검증하는 과정입니다 . (사용자 경험(UX) 디자인의 검증은 시각 테스트가 아닌 사용성 테스트에 해당하며, 제10장에서 다룹니다.)
시각 테스트는 각 요소의 크기, 색상, 상대적 위치 및 이와 유사한 시각적 속성이 다양한 기기와 브라우저에서 예상대로 표시되는지 확인하는 과정을 포함합니다. AI는 2013년부터 컴퓨터 비전과 Deep Learning 기술을 결합하여 자동화된 시각 테스트를 수행해 왔습니다.
이 장은 프로젝트나 비즈니스에 필수적인 사용 사례에 중점을 두고 시각적 테스트에 대한 간결한 개요로 시작합니다. 이어서 시각적 테스트를 제외한 다양한 종류의 프론트엔드 테스트 유형이 어떻게 종합적으로 애플리케이션의 시각적 품질 검증에 기여하는지에 대한 전체적인 관점을 제시합니다. 이어서 이 장에서는 Playwright와 유료 AI 기반 시각 테스트 도구인 Applitools Eyes를 모두 활용하여 자동화된 시각 테스트에 대한 실습을 진행하고, 이를 CI/CD 파이프라인에 통합하여 지속적인 배포를 가능하게 하는 방법을 다룹니다.
구성 요소
먼저 시각적 테스트 방법론을 소개한 다음, 비용-편익 분석을 통해 프로젝트에서 시각적 테스트가 언제 필수적인지 판단해 보겠습니다.
시각적 테스트 소개
오늘날에도 많은 소프트웨어 개발 팀은 애플리케이션의 시각적 품질을 검증하기 위해 수동적인 육안 검사와 UI 기반 자동화 테스트에 크게 의존하고 있습니다. 이러한 접근 방식이 일부 애플리케이션에는 충분할 수 있지만, 그에 따른 장단점을 이해하는 것이 필수적입니다.
첫째, 인간의 눈은 픽셀 단위의 변화를 감지할 수 없기 때문에 수동 육안 검사로 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
