🌟 디테일의 간격 시리즈! [✏️ 실리콘밸리 혁신 디자인의 비밀 : 아토믹] (👀간단 요약) ✓ 작은 블록부터 쌓아나가 전체를 만드는 디자인 방법 ✓ 빠르고 유연, 높은 확장성 ✓ 일관적이고

🌟 디테일의 간격 시리즈! [✏️ 실리콘밸리 혁신 디자인의 비밀 : 아토믹] (👀간단 요약) ✓ 작은 블록부터 쌓아나가 전체를 만드는 디자인 방법 ✓ 빠르고 유연, 높은 확장성 ✓ 일관적이고 클라우드 시대에 적합한 디자인 ✓ 미국의 그래픽 디자이너이자 엔지니어인 브래드 프로스트(Brad Frost)에 의해 정립 📌 작은 원자가 모여 큰 완성체로 확장성 장점 ✓ Atom(원자) - Molecule(분자) - Organism(유기체) - Template(템플릿) - Page(페이지)로 정의 ✓ 원자의 경우 서비스 디자인의 구성요소 중 가장 작은 단위인 '버튼' 혹은 '정보 입력 필드' 같은 것 ✓ 분자 구조는 검색 입력 필드와 버튼이 하나로 모여서 구성된 '검색 창' 같은 것 ✓ 유기체는 분자들이 모여 홈페이지 상단에 놓인 '메인 메뉴'와 같은 구성 ✓ 템플릿은 여러 유기체가 모여 특정 시나리오의 틀을 잡아 줄 수 있는 기본 레이아웃 ✓ 페이지는 실제 이 템플릿을 기반으로 콘텐츠와 이미지 등을 추가해 완성한 것 📌 빠른 디자인의 구축과 해체 가능 ✓ 서비스 디자인은 빠른 구축 후 테스팅을 거쳐 단점을 보완하는 반복형 디자인 프로세스가 중요 ✓ 방향이 잘못 설정 되었다고 판단 되었을 때, 디자인을 빠르게 해체하고 변경할 수 있는 피봇팅도 중요 ✓ 레고 처럼 빠른 구축과 해체가 가능한 아토믹 디자인이야 말로 이에 최적화 된 시스템 ✓ 기획 - 출시까지 시간 단축, 출시 후 디자인 변경 사항이 생겼을 때 유연한 대처 가능 📌 일관성 있는 사용자 경험의 추구 ✓ 정해진 시스템을 통해 디자인 하지 않으면 서비스에 반영하는 과정에서 통일성이 떨어지는 경우가 발생 ✓ 일관성 없는 사용자 경험이 반복 되면, 브랜드에 대한 신뢰를 잃어 사용자 이탈로 이어질 수 있음 ✓ 한 명의 사용자라도 더 생태계에 포섭하는 것이 관건인 IT 회사들에게 디자인 시스템의 일관성은 경쟁력 그 자체 📌 클라우드 시대, 장벽 없는 사용자 경험이 중요 ✓ 버튼 하나를 디자인 할 때 조차 웹브라우저, 테블릿 PC, 스마트폰에서 모두 사용할 수 있는 접근법 필요 ✓ 상황, 플랫폼 별 어떤식으로 원자와 분자 단위의 에셋을 결합할 것인가에 대한 룰이 마련 됨 ✓ 서비스 구축을 위한 더 많은 디자인 분자 조합과 유기체 구성이 가능 ✓ 플랫폼 별 모든 것을 처음부터 만들 필요도 없어지고 전체 디자인의 구축 시간도 단축 (👋중요한 이유가 뭔가요?) 기획과 디자인을 거쳐 서비스에 적용하고 보니 다른 기능, 디자인 등과 일관성이 없어 난감했던 적이 있어요. 이건 본문에 나와있는 것처럼 디자인의 일관성 등에 대한 내부 기준이 명확하지 않았기 때문인데요. 그때 저는 디자인 시스템 전체를 구축할 여력이 없다는 걸 잘 알았기에 우리 서비스에 자주 쓰이는 구성 요소를 먼저 파악해 단계적으로 일관성을 갖게 하고, 다음 기능 개발 때 참고할 수 있는 나름의 기준을 잡고자 노력했어요. 그런 단계 별 노력이 결국 디자인 시스템으로 연결 될 수 있었고요. 이 기준이 있고 없고의 차이는 꽤 컸어요. 기획 단계부터 참고할 수 있는 가이드가 있어 불필요한 고민을 줄일 수 있었고, 규격 등이 달라지는 일도 많이 줄었기 때문이에요. 사실 서비스를 만드는 초기에 함께 구축할 수 있다면 좋지만, 이미 운영중이라 하더라도 기본적인 기준을 함께 만들어 놓으면 많은 도움을 받을 수 있다고 생각해요. 그 출발을 어떻게 하면 좋을지에 대한 중요한 정보들이 있어 코멘트로 작성하게 되었습니다.