docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Visual Regression Testing]]
|
||||
# [[Visual Regression Testing|Visual Regression Testing]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
시각적 회귀 테스트(Visual Regression Testing)는 스토리북(Storybook) 등의 도구로 렌더링된 컴포넌트의 픽셀 단위 스크린샷을 캡처하여 이전에 알려진 "정상(baseline)" 상태의 스크린샷과 자동으로 비교하는 테스트 방식이다 [1, 2]. 이를 통해 개발자는 풀 리퀘스트(PR) 과정에서 의도치 않은 UI 레이아웃, 색상, 타이포그래피 등의 시각적 변경이나 결함을 찾아낼 수 있다 [3-5]. HTML 마크업만 비교하는 기존의 스냅샷 테스트와 달리, 실제 사용자가 경험하는 화면 픽셀을 직접 검증하므로 추가적인 테스트 코드 작성이나 유지보수 부담을 줄이면서도 오탐(false positive)을 최소화할 수 있는 것이 특징이다 [1, 2].
|
||||
@@ -18,18 +18,18 @@
|
||||
### Related Concepts
|
||||
|
||||
#### [테스트 및 검증 기술]
|
||||
- [[Snapshot Testing]]
|
||||
- Snapshot Testing
|
||||
- 연결 이유: 시각적 회귀 테스트와 대조되는 테스트 방식으로, 픽셀이 아닌 렌더링된 HTML 마크업 코드 덩어리를 비교한다 [2].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: HTML 구조 비교 방식이 왜 빈번하게 오탐(False Positive)을 발생시키는지, 그리고 픽셀 기반 비교가 유지보수에 왜 더 유리한지 명확하게 이해할 수 있다 [2].
|
||||
- [[Interaction Testing]]
|
||||
- Interaction Testing
|
||||
- 연결 이유: 사용자의 상호작용이나 이벤트를 시뮬레이션하여 컴포넌트의 특정 UI 상태를 유도하는 테스트 방식이다 [5, 10].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 정적 UI 화면뿐만 아니라 로딩, 에러, 클릭 시 드롭다운 오픈 등 동적으로 변화하는 UI 상태를 시각적 회귀 테스트가 어떻게 캡처하고 검증하는지 파악할 수 있다 [9, 10].
|
||||
|
||||
#### [구현 및 활용 도구]
|
||||
- [[Storybook]]
|
||||
- [[Storybook|Storybook]]
|
||||
- 연결 이유: UI 컴포넌트를 애플리케이션의 복잡한 로직과 분리하여 격리된 환경에서 시각적으로 개발하고 문서화할 수 있게 해주는 도구이다 [3, 6].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 시각적 회귀 테스트가 전체 페이지 단위가 아닌 개별 컴포넌트의 상태(Story) 단위로 렌더링되고 기준선과 비교되는 아키텍처적 기반을 이해할 수 있다 [1].
|
||||
- [[Chromatic]] / [[Happo]]
|
||||
- Chromatic / Happo
|
||||
- 연결 이유: Storybook과 연결되어 실제 브라우저 기반의 스크린샷 캡처, 베이스라인 픽셀 비교, CI/CD 연동 등을 수행하는 시각적 회귀 테스트 클라우드 서비스(도구)이다 [1, 3, 4].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 자동화된 시각적 회귀 테스트가 브라우저 간의 렌더링 차이를 어떻게 병렬로 처리하고 풀 리퀘스트(PR) 프로세스와 어떻게 상호작용하는지 확인할 수 있다 [4, 12].
|
||||
|
||||
@@ -48,9 +48,9 @@
|
||||
- **My Project Relevance:** 프론트엔드 레거시 코드를 리팩토링하거나 수백 개의 화면에서 공유되는 코어 UI 라이브러리 버전을 업그레이드할 때, 다른 팀의 컴포넌트에서 발생하는 의도치 않은 파급 효과(Side Effect) 및 시각적 깨짐을 안전하게 감지하고 확신을 갖고 배포하는 데 핵심적인 역할을 한다 [3, 16].
|
||||
|
||||
### Adjacent Topics
|
||||
- [[Accessibility Regression Testing]]
|
||||
- Accessibility Regression Testing
|
||||
- 확장 방향: 시각적 테스트 워크플로우와 결합하여, 새로운 테스트 코드를 별도로 작성할 필요 없이 스크린샷 실행 단계에서 UI의 접근성 위반(명도 대비 부족, 키보드 포커스 누락 등)까지 동시에 자동 검증하는 영역으로 확장할 수 있다 [9, 10].
|
||||
- [[Continuous Integration (CI) Pipelines]]
|
||||
- Continuous Integration (CI) Pipelines
|
||||
- 확장 방향: GitHub Actions, CircleCI 등의 CI 도구에서 시각적 테스트 인프라가 어떻게 연동되며, 코드가 병합되기 전에 PR의 상태 체크(Status Check)를 필수로 제어하는 자동화 파이프라인 및 DevOps 프로세스로 학습을 넓힐 수 있다 [12].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user