아토믹 디자인
이론
본 글은 브래드 프로스트(Brad Frost)의 아토믹 디자인에서 영감을 받았습니다. 본 문서는 원문을 참조하여 개인적인 해석과 요약을 덧붙여 구성되었습니다. 원문보다 간결하게 재구성되었으며, 자세한 내용은 원문 링크를 참조하시기 바랍니다.
개요
새로운 정보 공유 매체인 인터넷, 즉 월드와이드웹(WWW)은 1991년 일반에 처음 공개되었으며, 본격적인 대중화는 1990년대 중후반 상용 브라우저(예: 넷스케이프, 인터넷 익스플로러) 보급과 함께 되었다. 반면 종이는 수천 년에 걸쳐 인류의 지식 축적과 전달의 표준 매체로 자리 잡고 있었다. 이처럼 오랜 시간에 걸쳐 축적된 종이에 대한 익숙함은 현대 디지털 문서 시스템에도 영향을 주었으며, 초기 인터넷과 웹페이지 디자인 역시 종이 문서의 형태를 모방하면서 발전하여 '페이지' 중심의 사고 방식으로 웹사이트를 개발해왔다.
그러나 매체의 변화는 사람들의 정보 습득의 방식, 매체 크기의 변화, 출판 방식의 변화에 따라 디자인을 필수적으로 변화시킨다. 구체적으로 종이는 정적인 정보 전달과 단방향 출판에 최적화된 반면, 인터넷은 상호작용과 실시간 반응, 반복 가능한 배포를 중심으로 작동하기 때문에 전혀 다른 구성 방식이 요구된다.
아토믹 디자인은 이러한 인터넷 매체의 환경에 최적화된 디자인, 개발 방법론이라고 할 수 있다. 아토믹 디자인은 기존의 '페이지' 중심 사고에서 벗어나, 실시간으로 변화하고 사용자와의 경험과, 상호작용을 고려한 모듈단위의 사고를 기반으로 인터페이스를 설계하는 방법론이다.
아토믹 디자인의 핵심 개념 모듈성
전통적인 '페이지'는 종이처럼 고정된 사이즈에 맞춰 한 번 인쇄되는 단방향 구조이지만 모듈은 다양한 디바이스와 해상도에 맞춰 위치와 구성 방식이 유동적으로 재배치될 수 있는 단위로, 언제든 다양한 공간에 재배치하여 웹사이트를 완성하고 편리한 유지보수를 제공하고 다양한 매체에서 볼 수 있게 만들어준다.
멋있는 레고를 효율적으로 제작하고 유지하는 방법과 다르지 않다. 창의성만 있다면 같은 레고 조각들로 다양한 형상을 만들어 낼 수 있는 것이다. 또한 업무 생산성 또한 월등히 높힐 수 있다. 기존의 방식은 레고의 완성된 도면을 그리고, 제작자에게 도면을 전달하면 제작자들이 이 도면을 따라 레고를 조립하는 방식이라면, 아토믹디자인, 또는 디자인 시스템의 프로세스를 도입한다면, 팔, 다리, 몸, 머리를 각각 도면으로 제작하고 제작자에게 전달하면서 기획과 제작을 동시에 진행하는 것이다. 물론 이는 많은 부분을 생략한 설명이다.
이러한 모듈식 제작방법은 디자인 분야만의 놀라운 발견이 아니다. 과거 테일러의 과학적 관리법이나 포드의 조립 시스템뿐 아니라, 현대 컴퓨터 과학에서도 핵심 원리로 작동한다. 복잡한 시스템을 기능 단위로 나누어 병렬로 개발하고 결합하는 방식은 생산성과 효율성을 크게 높인다. 이러한 개념이 2000년대 jQuery UI와 같은 라이브러리의 등장을 기점으로 웹 디자인 분야에서도 본격적으로 모듈식 개발이 자리 잡게 된 것이다.
결과적으로, UI는 독립적이고 재사용 가능한 단위로 구성됨으로써, 유지 보수성과 확장성이 크게 향상되었다.
웹/앱 사이트 관리의 변화
이미 많은 기업들은 기존처럼 3~8년 주기로 전체 사이트를 전면 재설계하기보다는, 사용자의 학습성과 유지보수를 고려해 모듈 단위로 점진적으로 개선하는 방식을 선호하고 있다. 대규모 일괄 재설계는 기존 사용자에게 혼란을 주고, 익숙한 인터페이스를 새롭게 학습하게 만들어 비효율을 초래하기 때문이다. 또한 반복적인 재설계는 본질적인 문제를 해결하지 못하고 동일한 오류를 되풀이할 수 있다. 이에 따라 기업들은 실사용자의 경험을 해치지 않으면서도 필요한 부분만 유연하게 개선하는 전략을 선택하고 있다.
체계적인 UI 디자인
개발 방식이 변화함에 따라 디자이너도 단순히 보기 좋은 페이지를 만드는 데서 벗어나야 한다. 이제는 각 모듈이 사용자에게 어떤 경험을 제공하는지 고민하고, 이를 조합해 반응을 분석하며 실시간으로 개선해나가는 역할이 요구된다. 이를 위해 컴퓨터 시스템과 개발 방식에 대한 이해도 함께 필요하다.
디자이너는 이제 시각적 구성뿐 아니라 개발, 사용자 경험, 비즈니스 전략, 다양한 디바이스 환경까지 아우르는 역할을 수행해야 한다. 다양한 맥락에서 일관성 있게 작동하는 구조적 시스템을 설계하는 일은 반응형 웹의 본질이기도 하다. 하지만 이 모든 요소를 디자이너 혼자 감당하긴 어렵다. 그래서 모든 이해관계자(개발자, 마케팅, 영업부 등등)가 함께 참여하고, 체계적인 문서를 바탕으로 협업할 수 있도록 만든 것이 바로 '디자인 시스템'이다.
디자인 시스템의 중요성
디자인 시스템은 UI 구성 요소와 스타일, 행동 원칙, 코드 등을 체계적으로 문서화한 디지털 제품 개발의 기준과 도구 모음으로. 단순한 스타일 가이드를 넘어, 브랜드 일관성 유지, 디자이너와 개발자 간 협업, 컴포넌트 재사용, 접근성 향상 등 제품 전체의 품질과 효율성을 높이는 데 핵심적인 역할을한다. 예컨대 버튼, 입력창, 네비게이션 바 같은 요소들의 디자인과 기능을 명확히 정의함으로써, 여러 팀이 동일한 언어로 소통하고 일관된 사용자 경험을 제공할 수 있게 한다.
최초의 디자인 시스템은 애플의 HIG(Human Interface Guidelines) 라고 이야기 할 수 있을 것이다. 1987년 Apple은 Macintosh용 HIG를 통해 버튼, 레이아웃, 피드백 등 사용자 인터페이스의 일관된 원칙을 정의하고 문서화했다. Apple이 1987년 HIG(Human Interface Guidelines)를 내놓은 이유는 당시 그래픽 사용자 인터페이스(GUI)라는 새로운 인터페이스 환경이 확산되기 시작하면서, 개발자들이 일관된 방식으로 소프트웨어를 만들 수 있도록 가이드라인이 필요했기 때문이다.
한마디로 디자인 시스템의 토대는 개발경험과, 사용자 경험을, 컴퓨터와 인간을 연결시켜주는 핵심문서라는 것이다. 지금도 다양한 IT 기업이 디자인 시스템을 발표하고 있다. 대표적으로 Google의 Material Design, IBM의 Carbon Design System, Microsoft의 Fluent UI, Salesforce의 Lightning Design System, Adobe의 Spectrum, Shopify의 Polaris 등이 있으며, 각 기업은 자사의 제품 생태계에 맞는 디자인 원칙과 컴포넌트 라이브러리를 정립하고 있다.
아토믹 디자인 방법론
아토믹 디자인은 디자인 시스템의 기본 원칙과 구조적 사고와 일맥상통한다. 다양한 디자인 시스템이 구성 요소를 계층적으로 설명하는 것처럼, 아토믹 디자인은 이를 더욱 직관적으로 표현하기 위해 화학적 분류 개념을 차용했다. 저자 브래드 프로스트는 원자(atom)와 분자(molecule) 등의 비유를 통해 디자인 구성 요소 간의 관계와 재사용 가능한 구조를 쉽게 이해할 수 있도록 구성했다.
아래는 원자의 개념을 디자인 토큰의 관점을 추가하여 재해석한 버전이다. 원작자의 해석과는 다소 다름으로 궁금하다면 원문을 참조하길 바란다. (저자 브래드 프로스트 역시 이러한 디자인 구성 방식의 명칭은 조직이나 프로젝트의 필요에 따라 자유롭게 정의할 수 있다고 강조한다. 용어 자체에 매몰되는 것보다는, 이 프로세스 개념을 도입해 일관되고 반복 가능한 UI 시스템을 설계하는 것이 더욱 중요하다고 본다.)
- Atoms (원자): 색상, 텍스트, 간격 등 가장 작은 디자인 단위
- Molecules (분자): 원자의 조합으로 구성된 입력창, 카드, 셀렉트 등 기본 컴포넌트
- Organisms (유기체): 여러 컴포넌트를 조합해 구성된 상위 기능 단위
- Templates (템플릿): 유기체를 구조에 맞춰 배치한 레이아웃 틀
- Pages (페이지): 실제 콘텐츠가 삽입되어 사용자에게 보여지는 완성된 화면
아톰시스템은 이 다섯 단계를 하나의 정신적 모델로 삼아, 반복 가능하고 유연한 UI 설계를 지향한다.
아토믹 디자인의 장점
굳이 디자인 시스템을 도입해야하는 지 고민되는 이들, 그리고 회사내에 디자인 시스템을 도입하기 위해 설득하는 이들을 위해 디자인 시스템, 또는 아토믹 디자인에 대한 장점을 정리하였다.
아토믹 디자인은 단순한 설계 방식을 넘어, 다음과 같은 실질적인 장점을 제공한다:
- 디자인 시스템은 일관성 있고 일관된 경험을 제공한다. 즉, 사용자가 UI를 더 빨리 마스터하여 이해관계자가 중요하게 생각하는 지표를 기반으로 더 많은 전환과 더 많은 수익을 창출할 수 있다.
- 디자인 시스템은 팀의 워크플로우 속도를 높여준다. 새로운 요청이 들어올 때마다 처음부터 다시 만들지 않고 이미 구축된 UI 퍼즐 조각을 재사용하여 그 어느 때보다 빠르게 새로운 페이지와 기능을 출시할 수 있다.
- 패턴 라이브러리에서 UI 구성 요소를 중앙 집중화하면 조직의 모든 사람이 공유할 수 있는 어휘를 확립하고 모든 분야에서 더욱 협업적인 워크플로우를 만들 수 있다. 모두가 같은 언어를 사용하므로 업무에 더 많은 시간을 할애하고 불필요한 커뮤니케이션과 회의에 소요되는 시간을 줄일 수 있다.
- 디자인 시스템을 사용하면 브라우저/기기 간, 성능 및 접근성 테스트가 쉬워져 제작 시간이 크게 단축되고 팀이 고품질의 작업을 더 빨리 출시할 수 있다.
- 디자인 시스템(패턴 라이브러리와 함께)이 구축되면 조직이 시간이 지남에 따라 수정, 조정, 확장 및 개선할 수 있는 미래에 토대가 된다. A/B 테스트의 결과를 디자인 시스템에 적용하여 더욱 편리한 사용성을 갖추고 지속적으로 발전시켜나갈 수 있는 것이다.
디자인 시스템의 구축 시기
그렇다면 디자인 시스템은 언제 도입하는 것이 좋을까? 가장 좋은 시기는 '지금'이다. 초기부터 구축하면 프로젝트의 방향성과 설계 원칙을 명확히 할 수 있으며, 향후 기능 추가나 구조 변경 시에도 일관성을 유지할 수 있다. 단독 프로젝트로도 추진 가능하며, 팀 규모와 무관하게 시작할 수 있다는 점도 장점이다. 무엇보다도 중요한 것은 이 방법론의 개념을 팀에 정착시키고, 팀원들이 공통된 언어와 사고 방식으로 협업할 수 있도록 교육하고 공유하는 것이다.
가장 최악의 IT 프로젝트 진행 프로세스
이는 실제로 흔히 발생하는 비효율적인 프로젝트 진행 방식의 예시이다. 한 팀이 웹사이트 제작을 맡고, 킥오프 회의 후 UX 디자이너가 방대한 PDF 문서를 작성해 이해관계자에게 전달한다. 이후 피드백을 거쳐 시각 디자이너에게 와이어프레임이 넘어가고, 시각 디자이너는 디자인툴에서 스타일을 입힌다. 디자인 검토 회의에서는 이해관계자들이 다양한 의견을 쏟아내고, 디자이너는 그에 따라 디자인을 수정하는 과정이 반복된다.
이러한 방식은 피드백 루프가 비효율적이고, 각 단계가 순차적으로만 진행되어야 한다는 전제 때문에 개발 속도가 지연된다. 또한, 디자인이 확정된 뒤 개발자에게 일방적으로 전달되면 현실적인 구현이 어려운 디자인 요소들이 많아 개발자의 부담이 커진다. 그 결과 프로젝트 후반에는 일정 압박과 예산 부족 속에서 불완전한 결과물이 나올 수 있다. 디자인에 명시되지 않은 상태(예: 버튼 호버, 비활성 상태 등)는 개발자가 임의로 구현해야 하며, 이는 제품 전반의 일관성을 해칠 수 있다.
디지털 프로젝트에서는 물리적 제약이 없기 때문에, 이러한 순차적 워터폴 방식은 적합하지 않다. 많은 작업은 병렬적으로 진행할 수 있으며, 실제로 그래야 한다. UX, 시각 디자인, 프론트엔드 개발은 유기적으로 협업해야 하며, 각 단계가 완료된 후 사라지는 것이 아니라 지속적인 상호 협의가 필요하다. 디자인 시스템은 이러한 협업 구조를 지원하며, 명확한 기준과 반복 가능한 컴포넌트 기반 설계를 통해 프로세스를 훨씬 효율적으로 만들 수 있다.
개발은 디자인이다
디자이너와 프론트엔드 개발자는 분리될 수 없는 관계이며, 개발자와 디자이너, 그리고 사용자까지 효과적으로 소통할 수 있는 강력한 도구가 바로 디자인 시스템이다.
지금 이 순간에도 프로젝트는 점점 복잡해지고 있다. 반복되는 문제를 줄이고, 사용자에게 더 나은 경험을 제공하기 위해서는 체계적인 시스템이 필요하다. 디자인 시스템은 그 출발점이자, 협업과 성장의 기반이다. 지금당장 도입해야 할 이유는 충분하다.