웹엔진 없이 진짜 유리 효과를 그린 찾기 카드

찾기는 에디터에서 자주 쓰는 기능이에요. 그런데 잘 작동한다는 이유로 오래 손대지 않았어요.

mote의 찾기 창도 그랬어요. 항상 두 줄이었고, 문서에서 낱말을 선택한 뒤 열어도 검색어 칸은 비어 있었어요.

세 앱이 같은 답을 하고 있었어요

고치기 전에 Typora와 MarkText, Obsidian에서 같은 문서에 찾기와 바꾸기를 띄워 캡처했어요. Notion은 공개된 도움말로 확인했어요. 표로 모아 놓으니 공통점이 분명했어요.

찾기는 한 줄로 시작했어요. 바꾸기는 필요할 때만 펼쳤고요. 선택한 낱말은 검색어 칸에 바로 들어갔어요. 일치 개수를 입력 칸 안에 두는 것도, 화살표로 일치 사이를 오가는 것도 대부분 같았어요.

mote도 이 흐름을 따르기로 했어요.

기본 화면은 한 줄로 줄였어요. 바꾸기는 왼쪽 버튼이나 Ctrl+H로 열 수 있어요. 선택한 문장이 한 줄이고 200자 이하면 검색어로 자동 입력해요.

일치하는 결과가 없을 때는 숫자 0 대신 ‘결과 없음’이라고 알려줘요. 입력 칸에는 빨간 테두리가 생겨요. 오타인지, 문서에 정말 없는 말인지 바로 확인할 수 있도록요.

한 줄을 줄였을 뿐인데 본문이 더 많이 보였어요. 첫 번째 검색 결과가 카드에 가리는 일도 줄었고요.

바꾸기보다 찾기를 훨씬 자주 써요. 가끔 쓰는 기능을 늘 펼쳐 두면, 자주 하는 일에 매번 비용을 내게 돼요.

모든 것을 다른 에디터처럼 바꾸지는 않았어요. 오른쪽 위에 떠 있는 카드와 옵션 버튼은 그대로 뒀어요. 다른 제품을 살펴본 이유는 따라 하기 위해서가 아니었어요. 익숙한 방식과 mote만의 선택을 구분하기 위해서였어요.

카드 아래 글자가 실제로 흐려져요

찾기 카드는 유리처럼 보여요. 단순한 효과가 아니에요. 카드 아래의 본문을 실제로 흐리게 그려요.

처음에는 리눅스에서 흐림 효과를 아예 빼기로 정했어요. GTK의 렌더러에는 형제 위젯 뒤의 표면을 샘플링하는 기능이 없어요. 게다가 문서를 스크롤할 때마다 배경이 달라져서, 프레임마다 다시 계산해야 했고요. 예쁜 화면보다 빠른 화면이 더 중요하다고 판단했어요.

해결책은 카드를 흐리게 만드는 대신 에디터가 직접 흐린 화면을 그리는 것이었어요.

에디터는 문서를 그릴 때 카드가 덮는 부분만 한 번 더 그려요. 두 번째로 그릴 때는 18 px 블러를 씌우고, 카드는 그 위에 옅은 틴트만 얹어요.

다시 그리는 곳은 카드 아래에 실제로 보이는 줄들뿐이고, 이 일은 어차피 그려지는 프레임 안에서 일어나요. 유휴 상태에서 예약되는 프레임은 그대로 0이에요.

헤더도 같은 방식이에요. 문서를 스크롤하면 제목이 헤더 아래로 들어가며 자연스럽게 흐려져요. 선명한 화면과 흐린 화면을 같은 순간에 그리기 때문에 서로 어긋나지 않아요.

유리의 경계에는 그림자 대신 1 px 테두리를 넣었어요. 흰 문서 위에서는 그림자만으로 가장자리를 구분하기 어려웠기 때문이에요. 카드와 창 오른쪽 사이에는 그림자가 보일 수 있도록 24 px 여백을 뒀고요.

등장 애니메이션은 넣지 않았어요. Ctrl+F를 누른 사람은 이미 찾을 말이 있어요. 짧은 연출도 이때는 기다림이 돼요. 카드는 누르는 즉시 열리고, 첫 화면부터 유리처럼 보여요.

놓치던 검색 결과도 다시 찾았어요

화면을 줄이고 나니, 검색 결과가 제대로 표시되지 않는 곳들이 보였어요.

표 안의 결과에는 색이 칠해지지 않았어요. 읽기 모드에서는 강조 위치가 어긋났고요. 인라인 코드와 형광펜 안에서는 기존 배경색이 검색 표시를 가렸어요.

문제마다 원인은 달랐어요.

표 안에서는 칸마다 위치를 따로 계산해야 했어요. 읽기 모드에서는 숨긴 기호의 위치를 다시 맞춰야 했고요. 배경색이 있는 글에서는 검색 표시를 먼저 그려야 했어요.

위치를 계산하는 방식과 색을 그리는 순서를 바로잡아 세 문제를 모두 해결했어요.

검색 결과는 노란색으로 표시해요. 지금 보고 있는 결과만 주황색으로 보여주고요. 화면과 PDF, HTML에서도 같은 색을 써요.

글자색은 바꾸지 않았어요. 형광펜은 글자 위에 칠하는 것이 아니라, 종이와 글자 사이에 놓이는 색이니까요.

유리에는 비용이 들어요

찾기 카드가 열린 채로 스크롤하면 흐림 효과를 화면마다 다시 계산해요. 카드 아래만 다시 그리지만, 비용이 사라지는 것은 아니에요.

그래서 유리를 여러 겹 쌓지 않아요. 헤더와 사이드바, 지금 열린 카드 하나에만 써요.

유리는 꾸미는 재료가 아니라 성능 안에서 나눠 써야 하는 예산이에요.

찾기 창을 더 예쁘게 만드는 일과 더 가볍게 만드는 일은 반대처럼 보였어요. 하지만 끝에 남은 질문은 하나였어요.

이 화면은 언제 다시 그려야 할까요.