디자인 아틀라스아이콘 세트를 여러 명이 나눠 그리면, 같은 24px 안에 있어도 어떤 아이콘은 커 보이고 어떤 아이콘은 작아 보이는 일이 생긴다. 원인은 모양마다 "꽉 차 보이는 지점"이 다르기 때문이다. 키라인은 이 문제를 미리 정해둔 네 가지 틀 — 원, 정사각형, 세로 직사각형, 가로 직사각형 — 으로 해결한다. 동그란 아이콘(시계, 지구본)은 원 키라인에, 각진 아이콘(정지 버튼, 카드)은 정사각형에, 세로로 긴 아이콘(문서, 책)은 세로 직사각형에 맞춰 그리면 서로 다른 모양이라도 화면에서 같은 무게로 보인다.
실무에서는 24px 그리드에 원 20px, 정사각형 18px, 직사각형 16×20(또는 20×16)px 정도를 겹쳐두고 시작한다. 새 아이콘을 그릴 때 이 중 어떤 키라인에 가장 가까운 모양인지 먼저 정하고, 그 틀의 바깥 경계를 넘지 않는 선에서 디테일을 채운다. 키라인은 절대적인 규칙이 아니라 팀 안에서 "이 정도 크기면 같아 보인다"는 합의를 도형으로 고정해둔 것이다.
키라인을 안 쓰면 생기는 가장 흔한 증상은 아이콘 세트를 나열했을 때 유독 동그란 아이콘만 작아 보이거나 네모난 아이콘만 커 보이는 것이다. 이건 착시 때문에 실제 치수를 맞춰도 해결되지 않는다 — optical-correction 항목이 이 착시를 다룬다.
언제 쓰나
새 아이콘 세트를 시작할 때 가장 먼저 그려두세요. 기존 세트에 아이콘을 추가할 때도 원본 키라인 치수를 확인하고 맞추면 세트 전체의 통일감이 깨지지 않습니다.