한 화면에서만 옆 메뉴가 사라졌다

회사 안에서 쓰는 관리자 화면 이야기입니다.

어떤 한 페이지에 들어가면 왼쪽 메뉴가 통째로 사라졌습니다. 에러 메시지도 없고, 다른 페이지는 멀쩡했습니다.

틀린 짐작 다섯 개

단서가 적어서 짐작을 세우고 하나씩 확인해 나갔습니다. 전부 틀렸습니다.

짐작한 원인	확인해 보니
코드에 필요한 표시가 빠졌다	표시를 넣든 빼든 결과가 같았다
메뉴 목록이 비어서 온다	서버 응답에 정상적으로 들어 있었다
메뉴 자리가 0으로 찌그러졌다	어떤 화면 크기에서도 그렇지 않았다
권한이 없어서 숨겨졌다	권한 검사는 다른 영역만 담당한다
서버에 옛날 코드가 올라가 있다	계정에 필요한 권한이 전부 있었다

진짜 원인

메뉴를 감싼 상자에 "숨겨라" 와 "화면이 넓으면 보여라" 두 규칙이 같이 붙어 있었습니다.

이 두 규칙은 세기가 똑같습니다. 세기가 같으면 나중에 도착한 쪽이 이깁니다.

회사에서 함께 쓰는 디자인 꾸러미가 "숨겨라" 규칙을 자기 파일에도 한 번 더 적어 두고 있었습니다. 그 파일이 우리 파일보다 나중에 도착하는 페이지에서는 "숨겨라"가 이겨서 메뉴가 사라졌습니다.

왜 그 페이지 하나만 그랬나 — 여기가 핵심이었다

같은 꾸러미를 쓰는 파일이 아홉 개인데 한 개만 터졌습니다. 조건 세 개가 동시에 맞을 때만 생기는 일이었습니다.

1. 그 페이지가 서버에서 만들어지는 종류다
2. 그 파일이 다른 파일을 거쳐 한 번 더 밖으로 내보내지고 있다 ← 아홉 개 중 여기만
3. 그 파일에 "브라우저에서 쓴다"는 표시가 없다

이 셋이 겹치면 꾸미기 파일이 그 페이지 전용 묶음으로 따로 떨어져 나가고, 전용 묶음은 공용 묶음보다 나중에 도착합니다.

실제로 재 보니 문제의 페이지만 꾸미기 파일이 한 개 더 있었고, 마지막 "숨겨라"가 그 추가 파일에 들어 있었습니다.

그리고 2번 조건은 제가 만든 것이었습니다. 며칠 전 코드를 정리하면서 다른 곳에서도 쓸 수 있게 밖으로 내보냈는데, 그게 통로가 됐습니다. 규칙을 지키려던 변경이 다른 층에서 문제를 만든 경우입니다.

두 겹으로 고쳤다

• 원인 제거 — 그 파일에 "브라우저에서 쓴다" 표시를 붙였습니다. 그러면 꾸미기 파일이 공용 묶음으로 들어갑니다. 같은 모양의 파일 아홉 개도 함께 정리했습니다.
• 다시 안 나게 — "숨겨라" 규칙을 화면 크기 조건 안으로 넣었습니다. 그러면 상자에서 맨 "숨겨라"가 사라지고, 바깥 규칙이 겨룰 상대 자체가 없어집니다.

세기 싸움에서 이기려 하지 말고, 싸움 자체를 없애는 쪽이 맞았습니다.

올린 뒤 다시 재서 확인했습니다. 파일 수가 줄었고 메뉴가 정상으로 보입니다.

배운 것

1. 실제 서비스에서만 나는 문제가 있습니다. 개발용 서버는 꾸미기 파일을 한 덩어리로 주고, 실제 서버만 페이지별로 쪼갭니다. 제 컴퓨터에서 몇 번을 돌려도 애초에 재현될 수 없는 환경이었습니다.

2. 사용자가 실제로 쓰는 주소에서 재현해야 합니다. "개발 환경"을 제 컴퓨터라고 넘겨짚고 여러 번 확인했는데, 확인한 대상 자체가 달랐습니다.

3. 무엇이 달라져야 하는지를 먼저 정해야 합니다. 첫 짐작은 위치가 맞았습니다. 그런데 "에러가 나는지"만 보고 버렸습니다. 실제 영향은 에러가 아니라 꾸미기 파일이 어디에 실리느냐였습니다. 무엇을 볼지 정하지 않으면 맞는 짐작도 버립니다.

4. 서버가 안 주는 값을 "항상 온다"고 적어 두면 안 됩니다. 그렇게 적힌 곳이 이 응답 하나에서 세 군데 나왔습니다. 사실대로 고치면 도구가 나머지 빠진 곳을 찾아 줍니다.

5. 목록을 잘라 놓고 판단하지 않습니다.

6. 편하라고 자동으로 채워 주는 값이 뜻을 조용히 바꿀 수 있습니다. 사람이 직접 고르게 두는 편이 안전합니다.