아톰

화면을 통째로 그리는 방식에서는 같은 부품이 화면마다 조금씩 달라졌습니다. 다섯 화면을 다섯 주에 걸쳐 그리면 버튼도 다섯 종류가 됩니다. 의도한 차이가 아니라, 그릴 때마다 높이와 여백을 그 화면에 맞춰 다시 정했기 때문입니다.

구현 단계에서 그 차이가 질문으로 돌아옵니다. 이 화면 버튼은 높이가 40인데 저 화면은 36인 이유가 무엇이냐는 물음에 답할 사람이 없습니다. 어느 쪽이 맞는지 정한 적이 없어서, 개발자는 둘 다 만들거나 하나를 골라 버립니다.

그래서 큰 화면보다 작은 조각을 먼저 정하는 순서가 자리를 잡았고, 그 가장 아래 층에 이름을 붙인 것이 이 말입니다.

혼자 두었을 때 의미가 남는지로 판정합니다. 버튼, 입력 칸, 레이블, 아이콘, 체크박스는 각각 하나만 화면에 놓아도 무엇인지 알 수 있습니다. 입력 칸과 버튼이 붙은 검색창은 쪼개면 입력 칸과 버튼이 각각 남으므로 이 층이 아니고, 한 층 위인 몰레큘에 들어갑니다.

색과 간격과 글자 크기는 이 층보다 아래입니다. 값에 이름을 붙여 둔 디자인 토큰이 재료이고, 이 층의 부품은 그 재료로 만들어집니다.

한 개를 만들 때 한 벌을 다 만듭니다. 버튼 하나에 평소 모습, 마우스를 얹었을 때, 누르고 있을 때, 눌러도 안 되는 상태, 결과를 기다리는 상태가 다 있어야 합니다. 여기에 기본·보조·위험 세 성격과 대·중·소 세 크기가 붙습니다. 이 한 벌을 다 만들어 두어야 위층에서 조립할 때 고를 것만 남습니다.

문맥을 모른다는 규칙이 하나 붙습니다. 자기 바깥 여백을 스스로 갖지 않고, 어디에 얼마나 떨어져 놓일지는 담는 쪽이 정합니다. 버튼이 아래쪽 여백 16을 스스로 들고 있으면 그 버튼을 다른 자리에 쓸 때마다 여백을 지우는 예외가 붙습니다.

개수는 적습니다. 대개 스물에서 서른 사이이고, 이 숫자가 늘어난다면 대개 몰레큘이 섞여 들어온 경우입니다.

"이건 아톰 아니라 몰레큘입니다. 입력 칸이랑 버튼으로 쪼개집니다."

층을 판정하는 말이고, 기준은 쪼개도 각 조각이 남는지입니다.

"버튼 아톰에 대기 상태가 없어서 두 번 눌리는 문제가 남아 있습니다."

한 벌을 다 만들지 않았다는 지적입니다.

"아톰에 마진 넣지 마시고 쓰는 쪽에서 잡을게요."

부품이 문맥을 갖지 않게 하려는 요청입니다.

페이지덱이 디자인 시스템을 처음 정리할 때 민서가 여기서 시작했습니다. 화면에 흩어져 있던 버튼을 모아 보니 열한 가지였고, 높이가 세 종류에 테두리 굵기가 두 종류였습니다. 한 벌로 합쳐 상태 다섯 개와 성격 셋을 갖춘 아톰 하나로 만들었습니다. 태오가 코드에서 버튼 컴포넌트 넷을 하나로 줄인 것이 그다음 주였습니다.