사이트를 구분하는 정보는 첫 화면 안에만 있지 않아요. 브라우저 탭이 여러 개 열려 있으면 작은 아이콘과 제목이 다시 돌아올 길이 돼요. DS와 Labs의 화면을 정리하던 중에는 이 작은 표식도 현재 사이트의 모습과 맞춰야 했어요.

DS에는 사용할 아이콘이 준비돼 있었지만 실제 페이지에서 제공하는 아이콘은 없었어요. Labs에서는 기존 표식을 새 사이트의 정체성에 맞게 바꿀 필요가 있었고요. 새 이미지를 갖고 있다는 것과 브라우저가 그 이미지를 읽는다는 것은 다른 상태였어요. 파일을 바꾸는 일로만 보면 탭에 나타나는 결과를 놓치기 쉬웠어요.

여러 탭에서 같은 빈 표식이 보여요
여러 탭에서 같은 빈 표식이 보여요 · 화면 재구성화면 크게 보기

두 사이트의 같은 종류의 빈칸

두 작업은 서로 다른 사이트에서 진행됐어요. 하나는 없던 표식을 연결하는 일이었고, 다른 하나는 기존 표식을 교체하는 일이었어요. 이를 하나의 수정이 양쪽에 자동으로 적용된 것처럼 묶지는 않았어요. 계정이나 팀이 같아도 실제로 제공되는 페이지와 아이콘은 각각 확인해야 했어요.

DS에서는 페이지가 새 아이콘을 읽도록 연결했어요. 사이트가 열리는지만 보지 않고 실제로 어떤 이미지가 제공되는지 확인했어요. 준비한 이미지와 운영에서 내려오는 이미지가 같아야 했어요. 첫 화면의 디자인이 바뀌어도 탭이 계속 빈 표식이라면, 사이트 밖에서 다시 찾는 단서는 여전히 빠져 있는 셈이에요.

Labs도 같은 기준으로 확인했어요. 새 아이콘을 연결하고 실제 공개 페이지에서 제공되는 결과를 대조했어요. 이때 중요한 것은 배포했다는 표시보다 방문자의 브라우저가 읽을 대상이 바뀌었는지였어요. 준비한 파일이 맞고 페이지의 연결도 맞아야 변화가 끝나요.

문제와 판단의 흐름
문제와 판단의 흐름도식 크게 보기

브라우저 탭의 표식은 작은 이미지여도 화면 밖의 탐색을 돕는 정보예요. 여러 작업 화면을 오가는 상황에서 사이트 내부의 큰 로고를 다시 볼 수는 없어요. 이때 사이트가 제공하는 표식과 제목이 같은 정체성을 알려 줘야 해요. 디자인 파일만 준비되어 있는 상태는 이 경험으로 이어지지 않았어요.

검수에서도 이미지의 미리보기와 실제 페이지 응답을 구분했어요. 파일 자체를 열면 새 모습이 보이는데 페이지가 예전 연결을 쓰고 있을 수 있어요. 반대로 페이지 연결은 맞는데 오래 열린 탭만 예전 표시를 보여 줄 수도 있어요. 같은 화면 차이라도 다음에 확인할 곳은 달랐어요.

서비스별 표식으로 돌아갈 탭을 구분해요
서비스별 표식으로 돌아갈 탭을 구분해요 · 화면 재구성화면 크게 보기

두 사이트의 변경을 한 글로 묶은 것은 작은 표식을 여러 글로 나누기 위해서가 아니에요. 서로 다른 상태에서 시작한 표식이 실제 제공 상태까지 이어지는 과정을 비교할 수 있었기 때문이에요. 새 이미지가 있다는 사실을 사용자가 받는 이미지와 연결하는 확인이 공통으로 필요했어요.

이미 열린 탭은 다른 시간을 보여줄 수 있었어요

운영에서 새 이미지가 제공돼도 이미 열린 탭에는 잠시 예전 상태가 남을 수 있었어요. 브라우저가 작은 아이콘을 보관하는 방식 때문이에요. 그 장면만 보고 다시 같은 파일을 수정하면 정상인 결과를 불필요하게 바꾸게 될 수 있어요. 새로 연 탭과 실제 이미지 응답을 함께 봐야 했어요.

그래서 서버가 제공하는 상태와 이미 열려 있는 브라우저의 표시를 나누어 기록했어요. 처음 화면을 볼 때 생긴 차이가 자료의 교체 실패인지, 이전 표시가 남은 것인지 구분한 거예요. 모든 방문자의 열려 있는 탭이 같은 순간에 바뀐다고 주장하지 않았어요.

당시 두 사이트 모두 새 이미지가 실제로 제공되는 범위까지 확인한 기록이 있어요. 다만 작은 아이콘이 탭을 찾는 시간을 얼마나 줄였는지 조사한 것은 아니에요. 사이트를 알아볼 표식을 실제 브라우저가 받을 수 있게 연결했다는 결과로 남겼어요.

이 작업은 눈에 띄는 새 기능보다 다시 돌아오는 순간의 단서를 맞추는 일이었어요. 첫 화면에서는 분명한 사이트가 브라우저 탭에서는 낯설게 남지 않도록 했어요. 방문자가 페이지를 읽는 동안뿐 아니라 다른 탭으로 갔다가 돌아올 때도 같은 곳임을 알아볼 수 있어야 했어요.