표는 욕심을 부린다 — 데스크톱 테이블 뷰

데스크톱의 할 일 화면에는 리스트, 달력, 칸반이 있었습니다. 거기에 네 번째 뷰를 더했습니다. 행은 할 일, 컬럼은 상태·프로젝트·담당·우선순위·마감인 테이블입니다.

처음 목표는 소박했습니다. “각 컬럼의 값을 누르면 설정을 바꿀 수 있게 하자.” 우선순위 셀을 누르면 우선순위 팝업이 그 자리에 뜨고, 마감 셀을 누르면 달력이 뜨는 식으로. 상세 화면을 열지 않고 표 위에서 끝내는 거죠.

그런데 표라는 물건은 욕심을 부립니다. 하나를 들어주면 다음 게 당연해집니다.

들어준 욕심들

• 인라인 편집 — 상태·프로젝트·담당·우선순위·마감·별 색깔까지, 할 일 제목 빼고 전부 셀에서 바로 바꿉니다. 상태와 우선순위는 아이콘과 이름을 함께.
• 컬럼 폭 조절 — 경계선에 마우스를 올리면 전체 높이의 가이드 라인이 서고, 끌면 폭이 바뀝니다.
• 컬럼 순서 변경 — 헤더를 잡아 끌면 컬럼 폭 그대로의 아웃라인이 마우스를 따라다니고, 떨어질 자리에 세로 라인이 섭니다.
• 컬럼 표시/숨김 — 기본 일곱 개 컬럼 뒤로 난이도·만족도·예정 시간·시작일·완료 시각·생성일·태스크 코드·장소·꼬리표까지, 켜고 끌 수 있는 컬럼이 열여섯 개가 됐습니다. 설정 메뉴 안에서 드래그로 순서도 바꿉니다.
• 헤더 정렬과 필터 — 헤더에 마우스를 올리면 ⋯ 버튼이 나타나고, 컬럼마다 정렬(오름/내림)과 필터를 겁니다. 상태·색·프로젝트·키워드·날짜 범위·우선순위·난이도·만족도·담당자·꼬리표. 서버 API도 이날 같이 자랐습니다.
• 저장 필터 — 자주 쓰는 조합은 이름 붙여 저장하고, 핀으로 꽂으면 테이블 위 바에 칩으로 박힙니다. 칩 클릭 한 번이면 그 화면.

순서와 폭과 표시 여부는 전부 기억됩니다. 내가 만든 표는 내일 켜도 내 표여야 하니까요.

작은 좌절의 기록

매끈하게 끝난 것처럼 적었지만, 중간중간 이런 일들이 있었습니다.

리사이즈 핸들이 안 보인다고 해서 봤더니, 테이블 셀 안의 절대 위치가 WebKit에서 미덥지 않았습니다. 셀에 핸들을 심는 방식을 버리고, 마우스가 경계선 근처에 오면 전체 높이의 핫스팟을 띄우는 방식으로 갈아탔습니다. 그랬더니 이번엔 핫스팟이 깜빡깜빡 — 오버레이가 커서 밑에 나타나는 순간 컨테이너의 mouseleave가 발화해서 표시와 숨김이 무한 반복되고 있었습니다. 오버레이를 컨테이너 안으로 옮기니 멈췄습니다.

별 색깔 팝업이 테이블 뒤에서 열린 적도 있습니다. 컬럼을 왼쪽에 고정하려고 셀에 position: sticky 를 줬더니, 그 셀이 스태킹 컨텍스트가 되면서 안에서 띄운 팝업이 z-index를 아무리 올려도 그 컨텍스트에 갇혀 버린 겁니다. 팝업을 포털로 문서 최상위에 렌더하는 걸로 해결했습니다.

드래그 앤 드랍은 “되긴 되는데 느낌이 안 사는” 구간이 길었습니다. 기본 고스트 이미지를 투명하게 만들고 컬럼 폭 그대로의 아웃라인을 직접 그려 마우스에 붙이고 나서야, 컬럼을 통째로 들고 다니는 느낌이 났습니다.

표가 가르쳐 준 것

기능 목록만 보면 그냥 표인데, 만들고 나니 데스크톱에서 가장 밀도 높은 화면이 됐습니다. 모바일에는 이 표를 만들지 않기로 했습니다. 리스트 뷰에 정렬과 필터를 더 얹는 것도 하지 않기로 했고요. 옵션이 많아서 좋은 화면과 단순해서 좋은 화면은 다른 화면이고, 둘을 한 화면에 욕심내면 둘 다 잃는다는 걸 — 표의 욕심을 하루 종일 들어주면서 거꾸로 배웠습니다.