몰레큘

가장 작은 조각만 모아 두면 화면마다 같은 조합을 다시 만듭니다. 검색창은 입력칸 하나와 버튼 하나를 붙인 것인데, 이 둘만 부품으로 등록돼 있으면 화면을 만드는 사람이 매번 둘을 가져와 자기 손으로 붙입니다.

페이지덱에서 민서가 검색창을 쓰는 화면 다섯 곳을 나란히 놓고 보니 입력칸과 버튼 사이 간격이 4픽셀, 8픽셀, 12픽셀 세 가지로 갈려 있었습니다. 버튼에 쓰인 말도 검색과 찾기 두 가지였습니다. 조각은 같은데 붙이는 방식이 사람마다 달라 결과가 다섯 벌이 된 것입니다.

몰레큘은 그 조합 자체를 부품으로 등록하는 층입니다. 붙이는 방법까지 한 번만 정해 두고 그다음부터는 조합을 통째로 가져다 씁니다.

아톰, 곧 더 쪼갤 수 없는 가장 작은 단위 두세 개를 묶어 한 가지 일을 하는 단위로 등록합니다. 정해 둘 것은 다섯 가지입니다.

1. 묶는 기준은 혼자서는 뜻이 없고 둘이 모여야 일이 되는지입니다. 라벨과 입력칸과 오류 문구 세 개를 묶은 폼 필드가 전형적인 예입니다.
2. 크기는 조각 셋에서 다섯 개로 유지합니다. 그보다 커지면 의미 있는 영역 하나를 이루는 오가니즘으로 넘깁니다.
3. 조합 안에서 새 값을 만들지 않습니다. 간격과 색은 이미 정해진 값에서 가져오고, 이 조합에만 쓰는 특별한 간격을 새로 정하지 않습니다.
4. 무엇이 켜지고 꺼지는지는 바깥에서 받습니다. 검색어를 기억하는 일은 이 조합이 아니라 이것을 쓰는 화면의 몫입니다.
5. 이름은 역할로 붙입니다. 입력칸 더하기 버튼이 아니라 검색창이라고 적어 두면 쓰는 사람이 어디에 쓸지 바로 압니다.

층을 정확히 가르는 데 시간을 쓰지 않습니다. 이 조합이 아톰인지 몰레큘인지, 내용 없이 배치만 잡아 둔 템플릿 아래 어디에 놓일지를 두고 오래 논쟁하기보다, 부품으로 등록해 한 곳에서 고칠 수 있게 만드는 것이 이 층을 둔 이유입니다.

"이건 아톰이 아니라 몰레큘로 등록합시다. 입력칸과 버튼이 늘 같이 쓰여요."

함께 쓰이는 조각은 조합째로 부품이 된다는 말입니다.

"이 조합이 다섯 군데에서 조금씩 달라요. 하나로 묶고 간격은 정해진 값으로 고정합시다."

같은 것을 여러 번 조립한 상태를 하나로 모으자는 제안입니다.

"어느 층인지는 나중에 정하고, 일단 부품으로 만들어 두죠."

층 이름보다 등록 여부가 먼저라는 뜻입니다.

민서가 검색창을 하나의 부품으로 등록하면서 간격을 8픽셀로, 버튼 라벨을 검색으로 고정했습니다. 새 화면에서 검색창을 올리는 일이 부품 하나를 가져오는 일로 줄었습니다.

그다음 달에 검색 아이콘을 버튼 안쪽에서 입력칸 왼쪽으로 옮기자는 결정이 나왔을 때, 고친 곳은 다섯 화면이 아니라 부품 하나였습니다.