데스크톱 화면을 나흘간 다섯 번 갈아엎었다
모바일 전용으로 넉 달을 버틴 서비스의 검색 유입 96%가 데스크톱이었다. 죽은 여백을 재고, 레일을 붙이고, 카드 2단은 6시간 만에 버리고, 디자인 핸드오프로 전부 다시 짠 기록
의정활동 트래커는 국회 법안과 의원 활동을 모아 보여 주는 서비스이고, 5월 말부터 모바일 전용이었다. 2단 재설계는 안 한다고 프로젝트 지침에 박아 뒀는데, 정작 검색 유입은 대부분이 데스크톱이었다. 1440 화면에서 본문이 쓰는 면적이 절반이라, 지침을 지킬지 화면을 다시 그릴지를 정해야 했다.
하려던 것
의정활동 트래커는 5월 말부터 모바일 전용이었다. 프로젝트 지침에 “2단 재설계는 안 한다”고 박아 뒀다. 그런데 7월 중순 검색 콘솔에서 유입의 96%가 데스크톱으로 나왔다. 그때는 본문 폭을 600에서 720으로 늘리는 최소 대응만 했다.
웹 PC 개선 좀 해줘. 지금까지는 모바일만 대응했는데.
어떻게 시켰나
고치기 전에 재게 했다. 1440 화면에서 720짜리 본문이 쓰는 면적은 50%, 1920에서는 37.5%였다. 좌우로 353px씩, 600px씩이 죽은 여백이었다. 문제는 셋이었다. 가로 여백, 본문 위에 쌓여 본문을 밀어내는 메타 정보, 풀폭 바 안에 720짜리 섬으로 떠 있는 헤더.
안이 둘 나왔다. 정책을 유지하고 밀도만 올리는 안과, 읽기 폭 720은 지키되 메타 정보만 우측 여백으로 빼는 안. 두 번째로 갔고 법안 상세부터 시작했다.
어디서 막혔나
1일차, 레일. 1280 이상에서 우측에 320px 레일을 붙여 진행 게이지와 의안 메타를 옮겼다. 1440 사용률이 50%에서 74%가 됐다. 구현은 사본형이었다. 폰의 DOM 순서를 지키려고 메타 블록을 두 번 렌더하고 CSS로 한쪽을 숨겼다. 그 뒤 커밋 넷이 전부 sticky 함정이었다. overflow-x: hidden이 body를 스크롤 컨테이너로 만들어 sticky가 죽고, clip으로 바꾸니 Safari 특정 버전만 안 되고, 전역 clip이 폰에 없던 고정 헤더를 만들었다.
2일차, 의원 상세. 같은 레일인데 이번엔 사본 없이 했다. 레일에 갈 블록이 폰 순서의 맨 앞이라 <aside>를 DOM 첫 번째에 두고 그리드 칼럼만 뒤집으면 됐다. 사본형의 진짜 비용은 그 사이에 드러났다. 사본 둘의 <details> 열림 상태가 따로 놀았다.
3일차, 홈. 레일을 붙이고 나니 “더 늘려줘, 본문 폭도 더 늘려줘”라고 했다. 에이전트가 실측으로 반박했다. 트랙을 685에서 973, 1133으로 넓혀도 문서 높이가 4,771px로 완전히 같았다. 법안 제목이 p95까지 35자라 다시 흐를 글이 없었다. 늘린 폭은 카드 안의 빈 공간이 된다. 대안으로 카드 2단을 골랐다. 1440 사용률 90%, 문서 높이 −36%, 한 화면에 4.5건이 7.6건.
4일차 오후. 프로덕션 홈 스크린샷을 붙이고 “뭔가 끊어지게 보이는 것 좀 어떻게 안 돼?”라고 했다. 에이전트가 후보 넷을 냈는데 전부 아니었다. “좌우에 그림자로 끊어진 거.” body 배경과 셸 배경이 같은 색이라 그림자만 남아 세로줄 두 개가 보이는 것이었다. 여기서 부분 수정을 멈췄다.
어떻게 풀었나
20분 뒤 디자인 도구에서 뽑은 핸드오프 번들을 들고 왔다. 법안 목록과 상세의 라이트·다크 HTML. 에이전트가 기존 규칙 셋과 충돌한다고 짚었고 답은 “핸드오프 그대로, 전 기기 재설계, 토큰과 헤더 전역 교체”였다. 앱 아이콘 빼고 다 바꾸라고 했다.
6시간 전에 머지한 카드 2단 격자가 통째로 사라졌다. 홈 레일, 카드 컴포넌트 둘, 무채색 정책, “1023 이하는 불변” 원칙까지. 법안 목록은 분야·법안·진행 3열 테이블이 됐고, 헤더는 자기 폭 1360을 따로 가져서 홈과 검색 사이에서 290px 튀던 게 0이 됐다. 리뷰 10라운드에서 17건이 나왔다. 대비 미달, iOS 입력 자동 확대, 무한 스크롤 뒤에 숨어 도달 불가한 레일.
법안 상세는 신구조문 좌우 대조가 핵심이었다. 위아래로 쌓여 있던 현행과 개정안을 780 이상에서 좌우 2열로 놓고, 서버가 안 주는 변경 구간을 클라이언트에서 어절 단위 LCS로 계산해 개정안 쪽 어절만 표시했다. 공백을 LCS에 넣으면 전면 교체 판정이 영영 안 걸려서 뺐다. 전면 교체와 무변경은 표시하지 않는다. 정보가 아니라 잡음이다. 1일차의 사본형 레일은 여기서 사용처 0이 되어 삭제됐다. 밤에 검색 2단과 의원 상세 색까지 정리하고 끝났다.
배운 점
- 폭을 늘려도 되는지는 문서 높이로 판별한다. 넓혔는데 높이가 안 줄면 늘린 만큼이 빈 공간이다. 글이 다시 흐를 여지가 있어야 늘린다.
- 레일은 사본 없이 만든다. DOM에서 먼저 두고 그리드로 위치만 바꾼다. 사본은 상태 동기화 비용이 나중에 청구된다.
- 6시간 된 구조도 버린다. 카드 2단은 수치가 좋았지만 전체 방향이 바뀌면 남길 이유가 없다. 실측치는 그 결정을 쉽게 해 준다.
- 부분 수정이 네 번째 후보까지 빗나가면 전체를 다시 그린다. 스크린샷 한 장과 디자인 핸드오프가 나흘의 흐름을 바꿨다.
- diff 표시는 잡음을 빼는 게 일이다. 공백 제외, 전면 교체 비표시, 개정안 쪽만 표시. 셋을 안 하면 대조가 읽히지 않는다.