AI가 구현한 UI 개선을 재검토한 경험: 고정 검색창 제거 및 Playwright를 이용한 검증

오랜만에 기술 기고문을 작성합니다. 이번에는 개인 개발 중인 카드 검색 사이트에서 AI에게 구현시킨 UI를 재검토한 내용입니다.

검색창을 상시 표시하도록 변경했지만, 실제로 사용해보니 카드 목록이 보기 어려워졌습니다. 그래서 검색창의 고정 표시를 제거하고 Playwright로 스크롤 시 동작과 변경 전후 화면을 확인했습니다. 구현과 검증은 AI에게 맡기고, 어떤 사용성을 우선할지는 제가 판단했습니다.

제가 만들고 있는 것은 카드의 검색 및 덱 생성이 가능한 '듀얼마스터 클래식 08 카드 검색'입니다.

첫 번째 UI 개선에서는 검색이나 상세 조건 조작을 정비하는 변경 사항 중 하나로, 검색창을 상시 표시하는 구조를 만들었습니다. 스크롤 중에도 조건을 바꿀 수 있다는 점은 편리합니다.

하지만 목록을 훑어볼 때도 검색창이 화면을 차지했습니다. 제가 직접 사용해보고 피드백한 내용은 다음과 같았습니다.

검색창의 상시 표시는 불필요함 / 보기 어려워짐 / 오히려 스크롤 영역을 늘리고 싶음

이번에는 재검색의 용이성보다 카드를 넓게 볼 수 있는 영역을 우선하기로 했습니다. 검색창은 남겨두되, 위로 올라가면 사용할 수 있도록 할 예정입니다.

여기서 말하는 고정 표시는 검색창에 position: sticky를 지정했다는 의미가 아닙니다. 검색창과 목록을 세로로 나열하고, 목록 쪽에만 overflow-y: auto를 설정했기 때문에, 검색창이 움직이지 않고 남아있었습니다.

수정 PR에서는 검색창과 목록을 감싸는 .catalog-shell을 스크롤 대상으로 변경했습니다. 검색창도 함께 위로 흐르므로, 스크롤 후에는 그만큼의 공간을 카드 표시에 사용할 수 있습니다.

목록 쪽의 overflow-y: auto를 제거했을 뿐만 아니라, flex: 1; min-height: 0을 flex-shrink: 0으로 변경했습니다. 부모 요소가 스크롤을 담당하고, 목록은 내용에 따른 높이를 유지하는 구조입니다.

또한, '위로 돌아가기' 처리와 스크롤량을 감시하는 이벤트의 대상도 #cardList에서 .catalog-shell에 맞췄습니다. CSS만 변경하면 버튼이 이전 요소를 스크롤하려고 시도하기 때문에 그렇습니다.

비교 이미지는 이름 오름차순으로 정렬하고, 초기 위치와 500px 스크롤 후를 Playwright로 촬영했습니다. 변경 전은 수정 전의 CSS가 적용된 비교용 화면입니다. 외부 이미지를 로드하지 않기 때문에 카드 이미지는 플레이스홀더 상태입니다.

아래는 스마트폰(390×844px)에서의 스크롤 후 모습입니다.

변경 전에는 검색창이 남아 있고, 그 아래의 목록만 스크롤합니다.

변경 후에는 검색창이 화면 밖으로 이동하여 헤더 바로 아래까지 카드 목록을 표시할 수 있습니다.

PR 검증 기록에서는 '오늘의 1장'을 표시한 조건에서, 스크롤 중 목록 가시 높이가 스마트폰에서 600px에서 768px로, PC(1440×1000px)에서는 756px에서 924px가 되었습니다. 둘 다 168px 증가했습니다. 초기 표시 영역이 늘어난 것이 아니라, 검색창이 물러난 후의 차이입니다.

이미지 출처와 PC 버전 비교는 PR 스크린샷에 남겨두었습니다.

UI 변경 PR에서는 Playwright 스크린샷을 첨부하도록 합니다. 이번 카탈로그용 QA는 PC와 스마트폰, 각각 라이트와 다크의 4가지 조건으로 실행했으며, PR에는 40건의 체크 성공이 기록되었습니다.

검증 코드에서는 스크롤 후 검색창 하단이 스크롤 영역 상단 이하가 되는지 좌표로 확인합니다. 헤더 위치가 변하지 않는지, 덱을 열고 닫을 수 있는지, 맨 위로 돌아갈 수 있는지도 체크합니다.

특히, 휠 조작 직후에 판정하지 않고 waitForFunction으로 실제 스크롤량을 기다리는 점이 중요합니다. 동작을 보낸 시점과 화면 상태가 바뀐 시점을 분리하여 다룰 수 있습니다.

스크린샷은 사람이 비교하기 위한 기록입니다. 이번 코드에서 기준 이미지와의 픽셀 차분으로 자동 판정을 도입한 것은 아닙니다. 또한, 이 QA는 외부 통신을 차단하고 있어 실제 카드 이미지 로드나 외부 사이트 전이까지는 보장하지 않습니다. 범용 E2E에는 외부 이미지 가져오기 오류로 인한 실패도 별도로 기록했습니다.

검색창을 상시 표시하는 것에는 장점이 있습니다. 다만, 이번 화면에서 제가 우선하고 싶었던 것은 스크롤하면서 카드를 넓게 볼 수 있는 것이었습니다.

AI에게 구현과 검증을 맡길 때도 실제로 만져보고 어색한 점을 말로 표현하고, 무엇을 우선할지 전달해야 합니다. 그 판단에 따라 코드를 수정하고 동작 체크와 비교 이미지를 남기는 것. 이번 작은 수정은 그 흐름을 확인하는 기회가 되었습니다.

이미지나 테스트를 통해 확인된 것은, 의도한 표시와 동작이 되었다는 점입니다. 사용자 전체에게 사용하기 편리해졌는지에 대해서는 이번 검증만으로는 결론 내릴 수 없습니다.