아토믹 디자인

화면 단위로 디자인하던 시절에는 새 기능이 생길 때마다 그 화면을 처음부터 그렸습니다. 매번 새로 그리니 높이가 40픽셀인 버튼과 44픽셀인 버튼이 같은 제품 안에 나란히 남았습니다. 한두 화면일 때는 아무도 눈치채지 못하다가, 화면이 예순 개쯤 되면 같은 이름의 버튼이 열일곱 가지 모양으로 흩어져 있는 상태가 됩니다.

이 상태는 개발자에게 먼저 걸렸습니다. 시안을 받은 태오가 "이 화면 버튼은 높이가 40인데 옆 화면은 44네요. 둘 다 맞나요" 하고 물으면, 디자이너도 왜 다른지 설명하지 못했습니다. 의도한 차이가 아니라 다른 날 그려서 생긴 차이였기 때문입니다.

아토믹 디자인은 그리는 순서를 뒤집어 이 문제를 없애려는 시도입니다. 화면부터 그리면 조각은 화면의 부산물로 매번 새로 생기지만, 조각을 먼저 정해 두면 화면은 이미 있는 것을 고르는 일이 됩니다. 디자인 시스템을 구성 요소와 방법론과 운영으로 나눌 때, 이 말은 가운데 자리인 방법론을 맡습니다.

화학에서 이름을 빌려 왔습니다. 원자가 모여 분자가 되고 분자가 모여 유기체가 되듯, 작은 조각이 모여 큰 덩어리가 된다는 그림입니다. 층은 다섯이고 순서대로 올라갑니다.

1. 지금 쓰고 있는 것을 모읍니다. 기존 화면을 전부 캡처해 버튼끼리, 입력창끼리 모아 놓습니다. 여기서 버튼이 열일곱 가지로 흩어져 있다는 사실이 드러납니다.
2. 아톰을 정합니다. 더 쪼갤 수 없는 가장 작은 단위로, 버튼 하나, 입력창 하나, 라벨 하나가 여기 듭니다. 아톰이 쓰는 색과 간격 값은 디자인 토큰으로 이름을 붙여 두고 그 이름만 부릅니다.
3. 아톰을 묶어 몰레큘을 만듭니다. 혼자서는 할 일이 없던 조각들이 붙어 하나의 기능을 갖는 층입니다. 입력창에 버튼을 붙이면 검색창이 되고, 라벨과 입력창과 오류 문구를 묶으면 입력 한 칸이 됩니다.
4. 몰레큘과 아톰을 모아 오가니즘을 만듭니다. 화면에서 한 구역을 통째로 차지하는 덩어리입니다. 로고와 검색창과 메뉴가 붙은 머리말, 문서 카드가 늘어선 목록 영역이 그렇습니다.
5. 템플릿으로 배치를 잡습니다. 내용을 넣지 않고 어느 자리에 무엇이 오는지만 정해 둔 틀입니다. 문서 목록 화면과 설정 화면처럼 형태가 반복되는 자리의 뼈대가 여기서 정해집니다.
6. 실제 내용을 채워 화면을 완성합니다. 진짜 데이터가 처음 들어오는 단계라, 제목이 40자를 넘길 때 줄이 깨진다는 문제가 여기서 드러납니다.

여섯 단계를 한 번에 통과하지는 않습니다. 6단계에서 발견한 문제가 2단계나 3단계로 돌아가 조각을 고치게 만들고, 고친 조각은 그것을 쓰던 모든 화면에 한 번에 반영됩니다. 조각을 한 번 고쳐 화면 열두 장이 같이 바뀌는 것이 이 방법이 노리는 결과입니다.

잘 맞는 쪽은 같은 형태가 반복되는 제품입니다. 화면이 수십 개이고 그중 대부분이 목록과 상세와 설정의 변주라면, 조각을 정리했을 때 재사용되는 비율이 높아 들인 시간이 금방 돌아옵니다. 디자이너와 개발자가 각각 여럿이라 서로 다른 화면을 동시에 만드는 상황에서도 같은 말로 부를 대상이 생겨 도움이 됩니다.

반대로 화면이 다섯 개인 초기 제품이나, 매번 형태가 다른 홍보용 페이지에는 잘 맞지 않습니다. 재사용될 일이 없는 조각을 정리하는 데 이틀을 쓰면 그 이틀은 그냥 사라집니다.

한계는 대개 층 이름에서 나옵니다. 검색창이 몰레큘인지 오가니즘인지, 아바타와 이름이 붙은 조각이 어느 층인지를 두고 회의가 길어지는 일이 흔합니다. 답이 정해져 있지 않은 질문이라 논의는 끝나지 않는데 결과물은 달라지지 않습니다. 그래서 층 이름을 셋으로 줄이거나 아예 자기 팀의 말로 바꿔 쓰는 팀이 많습니다.

아래에서 위로만 올라가려는 것도 자주 걸리는 지점입니다. 실제 화면을 한 번도 보지 않고 조각만 정하면, 막상 화면을 조립할 때 필요한 것이 없거나 만들어 둔 것의 절반이 쓰이지 않습니다. 그래서 대개 대표 화면 두세 장을 먼저 대충 그려 놓고 거기서 조각을 뽑는 방식으로 시작합니다.

"이건 오가니즘까지 갈 필요 없고 몰레큘로 두죠. 다른 데서도 쓸 거예요."

이 덩어리를 한 화면 전용으로 만들지 말고 재사용 가능한 크기로 잘라 두자는 제안입니다.

"아톰부터 정리하는 데 2주 잡았어요. 그동안 새 화면은 기존 방식으로 갑니다."

정리 작업과 진행 중인 제품 작업을 분리해 두겠다는 뜻입니다.

"층 이름은 그냥 우리 식으로 부르죠. 어느 층인지 따지느라 이번 주에만 두 번 회의했어요."

방법의 이름 체계가 비용이 되기 시작했으니 느슨하게 쓰겠다는 말입니다.

페이지덱에서는 민서가 문서 편집 화면을 다시 만들면서 이 순서를 처음 썼습니다. 먼저 기존 화면을 전부 캡처해 붙여 놓으니 버튼이 열일곱 가지, 입력창이 아홉 가지였습니다. 그중 정말 다르게 생겨야 할 이유가 있는 것을 골라 내니 버튼은 셋, 입력창은 둘로 줄었습니다.

정리한 조각을 태오가 컴포넌트로 옮기면서 이름을 맞췄습니다. 시안의 조각 이름과 코드의 부품 이름이 같아지자, 민서가 "여기 몰레큘 바꿨어요" 라고 말했을 때 태오가 어느 파일을 열어야 하는지 바로 알게 됐습니다.

층을 정확히 나누는 것이 이 방법의 목적이라고 읽는 경우가 가장 흔합니다. 이름이 다섯 개나 붙어 있고 화학 비유가 선명해서 분류 자체가 과제처럼 보이기 때문입니다. 하지만 층은 쌓는 순서를 기억하기 위한 장치이지 판정 기준이 아닙니다. 분류를 목적으로 삼으면 새 부품 하나를 추가할 때마다 회의가 한 번씩 더 생기고, 방법이 아껴 주기로 한 시간을 방법 자체가 도로 가져갑니다.

아토믹 디자인을 도입하면 디자인 시스템이 생긴다고 여기는 것도 흔한 오해입니다. 둘이 같은 자리에서 자주 언급되니 하나가 다른 하나를 포함한다고 읽기 쉽습니다. 그러나 이것은 쌓는 순서일 뿐이고, 만든 부품을 누가 고칠 수 있는지와 예외를 언제 허용할지는 여기에 들어 있지 않습니다. 순서만 들여오고 운영 규칙을 정하지 않으면 반년 뒤에 버튼이 다시 열 가지로 늘어납니다. 층을 잘 나눠 놓았기 때문에 이번에는 그 열 가지가 각각 아톰이라는 이름을 달고 있다는 점만 다릅니다.