화면을 덜어내는 개편을 다섯 번에 나눠 했다

로그인하면 카드 열한 개가 같은 무게로 늘어서 있었다. 헤더에는 버튼이 열 개였다. 게다가 사용량을 API와 구독 두 갈래로 나눈 뒤로는, 한쪽을 안 쓰는 사람에게 빈 카드가 화면 절반을 차지했다.

“내 AI 토큰, 한 화면에서”라고 써 붙여 놓고 정작 한 화면에 아무것도 안 들어왔다.

그래서 이번에는 기능을 더하지 않기로 했다. 덜어내는 작업만 했다.

개편이 리팩터링으로 번지지 않게

화면을 뜯어고치기 시작하면 손이 자꾸 안쪽으로 들어간다. 배치를 바꾸다 보면 렌더 함수가 지저분해 보이고, 그걸 고치다 보면 상태 관리가 눈에 거슬린다. 그러다 일주일이 지나고 화면은 그대로다.

그래서 시작하기 전에 못 할 일을 먼저 적었다.

세 번째 줄이 제일 쓸모 있었다. 화면을 크게 옮기면 조용히 죽는 기능이 꼭 생기는데, 목록으로 적어두지 않으면 죽은 줄도 모른다.

작업은 다섯 단계로 쪼갰고, 각 단계는 그것만으로 배포할 수 있어야 한다는 조건을 달았다. 중간 상태로 며칠 묵히지 않겠다는 뜻이다.

계획 문서에는 이런 줄도 적어뒀다. 토큰이 부족하면 다음 세션이 여기서 이어받는다. AI와 같이 작업하면 한 번에 끝나지 않는 일이 생긴다. 그때 문서가 인수인계서가 되도록 단계마다 체크박스를 두고, 끝낼 때마다 갱신했다.

결과는 이렇게 갔다.

헤더 다이어트. 버튼 열 개를 드롭다운 두 개로 묶었다. 도구 묶음과 내 계정 묶음. 기존 버튼의 id와 클릭 로직은 그대로 두고 위치만 옮겼다.

탭 골격과 홈. 홈·사용량·리더보드 세 탭으로 나눴다. 기존 섹션은 이동만 했다. 홈은 이번 달 토큰을 크게 보여주고 티어와 순위, 최근 14일 미니 차트, 리더보드 상위 세 명만 남겼다. 아직 아무것도 연동하지 않은 사람에게는 홈이 곧 온보딩 카드다.

차트 넷을 둘로. 일별 카드 하나, 모델별 카드 하나로 합치고 트랙 토글을 헤더에 달았다. 기본값은 이번 달에 기록이 있는 쪽으로 열린다.

통일 규칙. 카드 헤더는 제목 하나에 우측 액션 하나까지. 제목 이모지는 트랙 표시와 브랜드성 있는 것만 남기고 지웠다. 영문 사전에서 죽은 키도 이때 정리했다.

검증. 한국어와 영어, 연동과 미연동 네 조합을 확인하고 문서를 닫았다.

두 가지는 하다가 접었다.

프로바이더 카드는 데이터가 없으면 접으려고 했는데 상시 노출로 되돌렸다. 그 카드 안에 키 등록 UI가 들어 있어서, 접어버리면 처음 쓰는 사람이 등록할 곳을 못 찾는다. 빈 카드를 숨기려다 시작점을 숨길 뻔했다.

타이포와 여백을 변수로 빼는 것도 보류했다. 화면 정리하러 들어갔다가 스타일 체계를 새로 만들고 앉아 있을 것 같았다. 앞에서 적어둔 금지 목록이 여기서 한 번 더 걸렸다.

빈 카드는 없앤 게 아니라 토글 뒤로 보냈다. 지워도 되는 건 인사이트 카드 하나였고, 그것도 기능 자체는 서버에 남겨뒀다.

덜어내는 작업의 결과는 사용자 눈에 잘 안 띈다. 버튼이 열 개에서 두 개가 된 화면을 보고 “편해졌다”고 말하는 사람은 없다. 그냥 불평이 줄어들 뿐이다.