다듬는다

오늘의 시작은 단어 하나였습니다. 모바일에서 웹 링크를 추가하는데, 설명 입력칸의 placeholder에 “Tactics”라고 적혀 있었습니다. 링크 설명을 쓰는 자리에 왜 작전이라는 단어가 있을까.

이상한 단어는 대개 누수다

원인은 단순했습니다. 설명 입력 컴포넌트는 placeholder를 따로 지정하지 않으면 기본값으로 input.description이라는 번역 키를 씁니다. 그런데 이 키의 값은 태스크 도메인의 라벨인 “Tactics”입니다. 태스크 화면에서라면 맞는 말이지만, 웹 링크 화면은 placeholder를 지정하지 않았고, 그래서 태스크의 단어가 링크 화면으로 새어 나온 것입니다.

처음엔 “Description”이라는 올바른 단어를 넣어서 고쳤습니다. 그런데 조금 뒤에 이런 의문이 들었습니다. 우리, 다른 데서는 설명칸에 placeholder를 두던가?

고치기 전에, 관례부터

사용처를 전부 뒤져 봤습니다. 결과는 예상 밖이었습니다. 태스크·프로젝트·메모·루틴·라벨·연락처—거의 모든 화면이 명시적으로 빈 placeholder를 넘기고 있었습니다. 위에 필드 라벨이 이미 있으니, 입력칸 안에 같은 말을 반복하지 않는 게 이 앱의 관례였던 것입니다. 진짜 안내문이 있는 곳(대응 지침의 예시문 같은)만 예외였고요.

그러니까 올바른 수정은 “올바른 단어를 넣는 것”이 아니라 “관례대로 비우는 것”이었습니다. 그리고 같은 누수가 있는 화면이 더 있는지 찾아보니—자유게시판, 오버뷰, 마켓 상품, 사진 설명, 공지 본문. 전부 태스크 밖 도메인이라 “Tactics”가 그대로 노출되던 자리들이었습니다. 한 번에 정리했습니다.

이상한 단어 하나는 대개 그 자리 하나의 문제가 아닙니다. 기본값이 새고 있다는 신호고, 새는 곳은 보통 여러 곳입니다.

같은 흐름은 같은 모양으로

이왕 웹 링크를 보는 김에, 목록도 다시 봤습니다. Fecit에는 이미 “문서에 연결된 항목”을 그리는 문법이 있습니다. 연결된 태스크와 메모 목록이 그것인데—섹션 헤더에서 트리 커넥터 선이 내려와 각 행으로 꺾이고, 행을 누르면 상세로 들어가고, 여유 있는 높이에 눌림 배경이 있는 모양입니다.

웹 링크 목록만 달랐습니다. 선도 없고, 행이 납작하고, 누르면 상세가 아니라 브라우저가 열렸습니다. 같은 “문서에 붙은 목록”인데 다르게 생겼고 다르게 움직이는 거죠. 문법을 맞췄습니다. 연결 선, 같은 높이, 행 탭은 상세. URL로 이동하는 건 행 끝의 > 버튼—이것도 새로 그린 게 아니라 앱에 이미 있던 이동 버튼 컴포넌트를 그대로 썼습니다.

처음엔 행마다 삭제 × 버튼도 달았는데, 곧 뺐습니다. 삭제는 상세 화면에 이미 있고, 목록의 모든 행에 파괴적인 버튼이 상주할 이유가 없었습니다. 다듬는 일에는 더하는 것만큼 도로 빼는 것도 포함됩니다.

숫자에 쉼표를

마지막은 사소한 것. 준비물의 수량과 비용이 1200000처럼 맨숫자로 찍히고 있었습니다. 데스크톱에는 이미 “숫자로 읽히는 값만 쉼표를 찍고, 아니면 원문 그대로”라는 규칙의 헬퍼가 있었어서, 같은 규칙을 모바일로 옮겨 다섯 개 준비물 카테고리 전부에 적용했습니다. 편집 입력칸은 건드리지 않았습니다—표시에는 쉼표가 좋지만, 입력값에 쉼표가 섞이면 저장이 오염되니까요.

---

돌아보면 오늘 한 일의 대부분은 코드를 고치는 게 아니라 기준을 찾는 것이었습니다. placeholder를 어떻게 쓰는 게 이 앱의 관례인지, 문서에 붙은 목록은 어떤 문법으로 그리는지, 숫자는 어느 규칙으로 찍는지. 기준을 찾고 나면 수정 자체는 몇 줄이었습니다.

다듬는다는 건 예쁘게 만드는 게 아니라, 이미 정해 둔 모양대로 어긋난 자리를 되돌리는 일에 가깝습니다.