같은 역할의 요소는 같은 모양과 문구로 맞췄습니다

지난 몇 달 동안 저희는 기능을 추가할 때마다 화면을 하나씩 빠르게 만들었습니다. 화면을 하나씩 열어 볼 때는 문제가 없어 보였어요. 그러다 10월 28일에 화면들을 나란히 놓고 비교해 보니 서로 다른 점이 보였습니다.

같은 역할의 줄이 네 가지 크기였습니다

사람 목록의 프로필 사진은 48px, 클랜 멤버는 40px, 메시지 친구는 46px, 폰 순위는 38px이었습니다. 모두 사람 한 명을 한 줄로 보여 주는 같은 역할이었습니다.

고르는 줄도 마찬가지였습니다. 클랜 화면은 폭을 가득 채운 알약 모양 단추 묶음을, 아바타 분류는 고르면 배경색과 글자색이 반전되는 칩을 쓰고 있었어요. 페이지 제목의 크기와 굵기도 화면마다 달랐고, 클랜 순위는 순위 화면에서 이미 없앤 금색 숫자를 아직 쓰고 있었습니다.

각각은 그때 이유가 있었던 결정입니다. 하지만 사람들은 여러 화면을 오가며 서비스를 씁니다. 같은 일을 하는 요소의 모양이 화면마다 다르면, 사용자는 매번 눌러 본 뒤에야 그 요소가 무엇인지 알 수 있습니다.

역할부터 나누고 모양은 하나씩 정했습니다

고르는 줄은 역할 셋으로 나눴습니다. 한 목록 안에서 보기 방식을 바꿀 때는 내용 폭만큼의 알약 단추 묶음을, 한 대상 안에서 다른 칸으로 이동할 때는 프로필과 같은 밑줄 탭을, 목록을 필터링할 때는 테두리 칩을 씁니다. 색이 반전되던 칩은 없앴습니다.

사람 줄의 프로필 사진은 44px 하나로 정했습니다. 페이지 제목과 절 제목의 크기, 제목 굵기, 폰 단추 높이도 각각 한 가지 값으로 통일했고 순위 숫자는 어디서나 같은 검은 글자로 표시합니다. 시안에서 일부러 정한 값처럼 근거가 있는 예외는 근거를 적어 두고 남겼습니다.

같은 문제는 그 뒤에도 나왔습니다. 설정, 알림, 프로필 편집 같은 하위 화면의 상단 영역이 여덟 곳에 따로 복사되어 있어서, 하나를 고치면 나머지와 모양이 달라졌어요. 11월 4일에 공용 부품 하나로 합쳤습니다. 리뉴얼 대상에서 빠져 옛 모양으로 남아 있던 오프라인 화면도 그 무렵 오류 화면과 같은 모양으로 맞췄습니다.

화면 문구도 같은 기준으로 고쳤습니다

문구 문제는 모양보다 먼저 알게 되었습니다. 9월에 번역 화면의 «켜기 · 끄기» 단추를 두고 무엇이 켜지는지 모르겠다는 의견을 받았어요. 단추를 «보이기 · 숨기기»로 바꾸고 상태 칩도 «보임 · 숨김»으로 맞췄더니 설명이 필요 없어졌습니다.

10월 27일에는 화면 문구를 모두 «~했습니다» 말투로 바꿨습니다. 단추도 같은 기준이라 «코인에 사기»는 «코인에 구매하기»가 됐고, 공개 범위 같은 선택지 이름은 «비공개 · 초대 전용 · 전체»처럼 정리했습니다. 공지문에 그대로 실려도 어색하지 않은 문장만 화면에 둡니다. 사람들이 친구에게 보내는 문장만 예외로 뒀습니다.

일부 요소를 뺀 변경은 14분 만에 되돌렸습니다

11월 4일 새벽, 화면을 단순하게 하려고 몇 가지 요소를 뺐습니다. 스튜디오 입력칸 밑의 시작 칩을 메뉴 안에 넣고, 제작 보상을 코인 화면으로 옮기고, 탐색 친구 줄의 배지를 뺐어요.

그리고 14분 뒤 셋을 모두 되돌렸습니다. 시작 칩은 처음 온 사람이 바로 보는 자리에 있어야 했고, 제작 보상은 만드는 화면에 있는 편이 맞았습니다. 배지는 한 곳에서만 빼면 그 화면이 또 하나의 예외가 됩니다. 그 전 주에도 같은 기능을 폰에서만 다른 메뉴로 옮기는 안을 시안 단계에서 취소했습니다. 화면 폭에 따라 같은 기능의 위치가 달라져서 오히려 더 헷갈렸기 때문입니다.

규칙은 자동 검사로 지킵니다

사람이 기억해서 지키는 방식으로는 모양과 문구가 다시 달라집니다. 저희는 새 화면을 만들기 전에 같은 역할의 공용 부품부터 찾고, 없으면 만들어 공용 목록에 올립니다. 그 부품을 쓰지 않은 코드는 빌드 전에 실행되는 검사에서 걸러집니다.

문구가 헷갈린다는 의견을 받으면 설명을 덧붙이고 싶어집니다. 하지만 대부분은 낱말 하나를, 누르면 어떤 결과가 생기는지 말하는 낱말로 바꾸면 해결되었습니다.

화면을 단순하게 하려고 기능을 숨기면 그 기능을 찾기 어려워지는 다른 문제가 생겼습니다. 저희는 이제 요소를 빼기보다 같은 역할의 모양과 문구를 맞추는 일을 먼저 하고, 지금 모양을 바꾸려면 새 안이 더 낫다는 근거를 먼저 확인합니다.