아바타

협업 도구의 화면에는 사람이 계속 등장합니다. 이 문단을 누가 고쳤는지, 이 댓글을 누가 달았는지, 지금 누가 같이 보고 있는지가 줄마다 표시됩니다. 그런데 그 정보를 이름 글자로만 적으면 화면이 금세 이름으로 빽빽해집니다.

페이지덱의 초기 문서 화면이 그랬습니다. 댓글 스무 개가 달린 기획 문서를 열면 왼쪽에 이름 세 글자가 스무 번 반복해 찍혔습니다. 같은 사람이 남긴 댓글 세 개를 묶어서 읽으려면 매번 이름을 하나씩 읽어 맞춰 봐야 했고, 화면을 내리다 보면 방금 본 사람이 누구였는지 놓쳤습니다. 이름은 읽어야만 알 수 있는 정보라서 빠르게 훑는 데 약합니다.

아바타는 그 정보를 글자에서 그림으로 옮긴 부품입니다. 사람은 색 덩어리나 얼굴을 글자보다 훨씬 빨리 구별합니다. 같은 원이 여러 자리에 반복해서 나오면 읽지 않고도 아까 그 사람이라고 알아챕니다. UI 컴포넌트 안에서 아바타가 누르는 부품이 아니라 상태를 알려 주는 표시 갈래에 놓이는 이유도 여기 있습니다. 사용자가 조작하는 대상이 아니라, 지금 누가 관여하고 있는지를 알리는 자리입니다.

아바타는 사용자 계정에 묶인 그림 하나를 정해진 크기의 원 안에 잘라 넣어 보여 줍니다. 부품 하나로 보이지만 안에서는 네 가지가 순서대로 정해집니다.

1. 무엇을 보여 줄지 — 사용자가 올린 사진이 있으면 그것을 쓰고, 없으면 이름의 첫 글자를 띄우고, 이름조차 없으면 사람 모양 도형을 놓습니다. 이 순서를 미리 정해 두지 않으면 사진을 안 올린 계정 자리가 빈 네모로 남습니다.
2. 어떤 모양으로 자를지 — 사람 계정은 원, 팀이나 회사 계정은 모서리를 둥글린 사각형으로 가르는 방식을 많이 씁니다. 한 제품 안에서는 이 규칙을 하나로 고정합니다.
3. 어떤 크기로 놓을지 — 24·32·40·64 픽셀처럼 서너 단계를 미리 정해 두고 자리마다 골라 씁니다. 크기를 그때그때 지정하게 두면 같은 댓글 목록 안에서 줄마다 아바타 높이가 달라집니다. 이 값들에는 디자인 토큰으로 이름을 붙여 둡니다. 색이나 간격 같은 값에 이름을 붙여 디자인 파일과 코드가 같은 값을 보게 만드는 단위입니다.
4. 무엇이라고 읽어 줄지 — 화면을 눈으로 보지 못하는 사용자에게는 그림이 소리로 전달돼야 합니다. 그래서 아바타에는 사람 이름을 대체 텍스트로 답니다. 이미지를 글로 설명해 주는 텍스트입니다. 여기에 프로필 이미지라고만 적어 두면 화면에 깔린 스무 개가 전부 같은 소리로 읽혀서 구별이 사라집니다.

여러 사람을 한 줄에 보여 줄 때는 아바타를 조금씩 겹쳐 놓고 끝에 남은 인원수를 +5 처럼 적습니다. 참여자가 서른 명인 문서에서 서른 개를 모두 늘어놓으면 문서 제목보다 아바타 줄이 넓어지기 때문입니다. 겹치는 개수는 보통 셋에서 다섯 사이에서 끊습니다.

아바타는 화면 요소에 사람이 묶여 있는 자리마다 들어갑니다. 페이지덱 안에서 아바타가 나오는 자리는 크게 넷입니다.

1. 댓글과 활동 기록 — 한 줄마다 누가 한 일인지 앞에 붙습니다. 개수가 가장 많이 깔리는 자리라 크기도 제일 작게 씁니다.
2. 실시간 편집 화면 — 지금 문서를 함께 열어 둔 사람들이 위쪽에 줄지어 뜨고, 본문 안에서는 각자의 커서 옆에 따라다닙니다.
3. 오른쪽 위 계정 메뉴 — 자기 아바타를 누르면 설정과 로그아웃이 팝오버로 열립니다. 특정 요소에 붙어 작게 뜨는 레이어입니다. 이 자리만은 표시이면서 동시에 누르는 지점이라 예외에 가깝습니다.
4. 멤버 목록 — 워크스페이스 구성원을 테이블로 늘어놓을 때 이름 칸 앞에 놓입니다. 행과 열로 데이터를 늘어놓아 값끼리 견주기 좋게 만든 요소입니다.

아바타 하나만으로 전하지 못하는 정보는 다른 부품을 겹쳐서 붙입니다. 접속 중이라는 초록 점이나 읽지 않은 개수는 아바타 모서리에 배지를 얹어 나타냅니다. 개수나 상태를 작게 붙여 알리는 표시입니다. 이때 색만으로 상태를 구분하면 색을 구별하지 못하는 사용자에게는 아무 차이가 없으므로, 점의 위치나 모양을 함께 달리하는 편이 접근성 쪽에서 안전합니다.

"사진 안 올린 사람들이 전부 같은 회색 동그라미로 나와요. 이니셜이라도 띄웁시다."

기본 상태가 서로 구분되지 않아 아바타가 제 일을 못 하고 있다는 지적입니다.

"댓글 목록은 24로 통일하고 실시간 참여자 줄만 32 쓸게요."

자리별로 쓸 크기 단계를 미리 고정해 두자는 합의입니다.

"참여자 여덟 명이면 다섯 개만 겹치고 나머지는 +3으로 접어 주세요."

아바타 줄이 가로 폭을 밀어내지 않게 개수를 끊자는 요청입니다.

페이지덱에서 이 부품을 손본 것은 민서였습니다. 활동 기록 화면에서 아바타가 어떤 줄은 28, 어떤 줄은 36으로 나오는 것을 발견하고 크기 단계를 네 개로 줄여 이름을 붙였습니다. 태오가 그 값을 코드 쪽 변수로 옮기면서 사진이 없는 계정의 처리 순서도 같이 정했습니다. 사진, 이니셜, 도형 순서로 내려가게 해 두니 그전까지 간헐적으로 나던 빈 네모가 사라졌습니다.

그 뒤로 새 화면을 만들 때 아바타를 두고 오가는 말은 줄었습니다. 크기와 기본값이 정해져 있으니 어디에 쓸지만 정하면 되기 때문입니다.

아바타를 있으면 보기 좋고 없어도 그만인 장식으로 여기는 경우가 가장 많습니다. 그림 한 장이라 누르는 기능도 없고 값을 입력받지도 않으니 자연스러운 오해입니다. 하지만 아바타가 맡은 일은 장식이 아니라 구별입니다. 댓글 스무 줄에서 같은 사람의 말을 묶어 읽게 만들고, 문서를 지금 누가 보고 있는지 세지 않고도 알게 합니다. 아바타를 빼거나 전부 같은 회색으로 두면 사용자는 그 일을 이름을 읽어서 대신하게 되고, 그만큼 화면을 훑는 속도가 느려집니다.

반대로 실제 얼굴 사진이어야 제구실을 한다고 믿는 경우도 있습니다. 사진을 안 올린 계정을 문제로 보고 등록을 강하게 권하는 화면을 붙이기도 합니다. 필요한 것은 얼굴이 아니라 계정마다 다르게 보이는 표시입니다. 이름 첫 글자에 계정별로 고정된 색을 깔아 주면 사진 없이도 구별은 충분히 됩니다.