링크를 더 눈에 띄게 만들려던 수정이 327개 페이지를 깨뜨릴 뻔했다
한눈에 답변
카드에 있는 출처 플랫폼 이름을 클릭 가능한 링크로 만들자는 아이디어가 있었다. 실제로 적용하기 전에 코드를 확인해 보니, 그 출처 표시는 이미 카드 전체를 감싸는 더 큰 링크 태그 안에 들어 있었다. 링크 태그를 링크 태그 안에 겹쳐 넣으면 브라우저가 이를 잘못 해석해, 이미 색인된 327개 페이지의 카드 링크 전체가 깨질 수 있는 상황이었다. 적용 전에 확인해서 실제로 배포되지는 않았다.
어떤 아이디어였나
목록에 보이는 공고 카드에는 어느 플랫폼에서 가져온 공고인지 표시하는 출처 라벨이 있다. 이 라벨을 지금보다 더 명확하게, 클릭할 수 있는 링크 형태로 바꾸자는 아이디어가 있었다.
적용하기 전에 무엇을 확인했나
실제로 코드를 바꾸기 전에, 그 출처 라벨이 있는 위치의 구조를 먼저 살펴봤다. 확인해 보니 그 라벨은 이미 카드 전체를 감싸는 더 큰 링크 태그의 안쪽에 들어 있었다.
왜 이게 문제가 될 뻔했나
HTML에서는 링크 태그 안에 또 다른 링크 태그를 넣는 것이 정상적인 구조가 아니다. 브라우저마다 이런 중첩을 처리하는 방식이 달라, 안쪽 링크나 바깥쪽 링크 중 하나가 예상과 다르게 동작하거나 아예 무시될 수 있다. 이 카드 구조는 이미 검색엔진에 색인된 327개 페이지에서 쓰이고 있었기 때문에, 이 수정을 그대로 적용했다면 그 페이지들의 카드 링크 전체가 깨졌을 것이다.
그래서 어떻게 했나
이 아이디어는 적용하지 않기로 하고, 하지 말아야 할 작업 목록에 이유와 함께 남겨 뒀다. 나중에 비슷한 개선 아이디어가 다시 나왔을 때, 같은 검토 없이 실행해 같은 실수를 반복하지 않도록 하기 위해서였다.
이 사건에서 얻은 교훈
작아 보이는 화면 개선(라벨을 링크로 바꾸는 정도)도, 그 요소가 이미 어떤 구조 안에 있는지 확인하지 않고 적용하면 이미 색인된 페이지 전체에 영향을 줄 수 있다. 특히 카드나 목록처럼 같은 컴포넌트가 대량으로 반복 사용되는 구조에서는, 작은 수정 하나가 그 컴포넌트를 쓰는 모든 페이지에 동시에 퍼진다는 것을 항상 염두에 둬야 한다. 적용 전에 구조를 확인하는 짧은 검토가, 배포 후 대량의 페이지를 되돌리는 것보다 훨씬 저렴하다.