원자 디자인 : 그것을 사용해야하는 10 가지 이유

원자 디자인
(이미지 출처 : Jim McCauley)

한동안 프런트 엔드 개발 커뮤니티에 있었다면 Atomic Design에 대해 들어 보셨을 것입니다. Atomic Design은 화학에서 영감을받은 방법론입니다. 모든 물질이 결합하여 분자를 형성하는 원자로 만들어져 더 복잡한 유기체를 구성하는 것처럼, Atomic Design은 웹 사이트를 기본 구성 요소로 분해 한 다음 거기에서 사이트를 만들기 위해 작업하는 과정을 포함합니다.

Atomic Design을 사용하면 많은 이점이 있습니다. 그것이 당신의 삶을 더 쉽게 만들어 줄 10 가지 이유를 발견하기 위해 계속 읽으십시오.

웹 사이트를 만드는 방법에 대한 일반적인 조언이 필요하면 완벽한 웹 사이트를 만드는 방법에 대한 게시물을 참조하세요. 웹 사이트 레이아웃 , 그리고 우리가 가장 좋아하는 웹 사이트 빌더 .



01. 구성 요소를 혼합하고 일치시킬 수 있습니다.

구성 요소를 기본 원자로 분해하면 사이트의 어떤 부분을 재사용 할 수 있는지, 그리고 다른 분자와 유기체를 형성하기 위해 어떻게 혼합 및 일치시킬 수 있는지 쉽게 알 수 있습니다.

원자 디자인 : 요소

이 다섯 가지 기본 요소를 혼합하여 다양한 페이지를 만들 수 있습니다.

예를 들어 사이트에 작은 이미지, 큰 이미지, 단락, 목록 항목 및 링크의 5 개 원자 만 포함되어 있다고 가정 해 보겠습니다. 이러한 원자를 복제하고 결합하여 분자를 만들어 매우 유용한 웹 페이지를 만들 수 있습니다.

02. 스타일 가이드 작성은 간단합니다.

처음부터 Atomic Design 원칙에 따라 사이트를 만들면 사이트가 만들어지기 전에 만들어진 모든 원자와 분자가 기본 스타일 가이드 역할을 할 수 있습니다. 원자 적으로 구축되지 않은 사이트의 경우에도 기본 구성 요소를 추론하고 조합하여 더 많은 페이지를 구성하는 것은 어렵지 않습니다. 하지만 나중에 사이트에 Atomic Design 원칙을 도입하는 것보다 처음부터 원자 적으로 사이트를 만드는 것이 항상 가장 좋습니다.

03. 알기 쉬운 레이아웃

원자 적으로 디자인 된 웹 사이트의 코드는 일반적으로보다 전통적인 방식으로 만든 웹 사이트보다 읽기가 훨씬 쉽습니다. 이는 생성 당시뿐만 아니라 향후 사이트를 참조하거나 약간의 조정을 위해 되돌아 볼 때에도 마찬가지입니다.

원자 분자와 유기체가 사용되는 위치와 위치에 대한 문서화로 인해 코드의 각 부분이 무엇을 나타내는 지 쉽게 알 수 있습니다. 이것의 또 다른 장점은 새로운 개발자에게 코드베이스를 설명하기가 더 쉽다는 것입니다.

04. 코드의 일관성

원자 설계 : 패턴 연구소

3D로 볼까요?
Pattern Lab은 Atomic Design을보다 쉽게 ​​만들어주는 도구 모음입니다.

Atomic Design을 사용하면 미리 정의 된 원자를 사용하여 사이트 레이아웃을 만들 수 있으며 사이트의 다른 부분에 어떤 구성 요소가 사용되는지 쉽게 확인할 수 있습니다. 이렇게하면 중복 코드를 작성할 가능성이 줄어 듭니다.

예를 들어 누군가가 Atomic Design을 사용하지 않고 사이트를 만들고 빨간색 버튼이 필요한 경우 기존 사이트를 찾으려고 전체 사이트를 살펴 봐야합니다. 이것이 존재하는 경우 해당 코드를 복사하여 새 인스턴스에 붙여 넣어야합니다. 빨간색 버튼이 없다면 새 버튼을 만들어야합니다. 그러나 Atomic Design을 사용하면 원자 목록으로 돌아가서 정확한 빨간색 버튼을 쉽게 찾을 수 있습니다.

이것은 Pattern Lab 라이브러리가 관련 될 때 훨씬 더 쉬운 프로세스가됩니다. 패턴 연구소 Atomic Design을 더 쉽게 만드는 도구 모음입니다. 이 예에서는 원자에 대한 검색 표시 줄을 제공하므로 정확한 빨간색 버튼을 쉽게 검색하고 찾을 수 있습니다.

05. 완벽한 픽셀 디자인에 집중하지 않음

Atomic Design의 아이디어는 사이트 생성을위한 빌딩 블록으로 원자를 사용하는 것이므로 웹 개발자가 유사한 일을 위해 많은 원자를 생성 할 가능성이 적습니다. 대신 기존 원자 목록을 살펴보고 필요한 경우 새 원자를 만들도록 조정하면됩니다.

이에 대한 좋은 예는 사이트의 제목입니다. 제작자가 사이트에 사용 된 제목 목록을 모두 검은 색으로 가지고 있다고 가정 해 보겠습니다 : 기본 머리글, 하위 머리글 및 단락 제목. 그들은 한동안 사이트에서 일하지 않았고 새로운 파란색 제목을 추가하기 위해 사이트로 돌아와야합니다. 그들은 이미 존재하는 타이틀을 살펴보고 원하는 결과를 얻기 위해 그들 중 하나를 사용자 정의 할 수 있습니다.

06. 더 빠른 프로토 타이핑

사이트 생성이 시작되기 전에 원자 목록이 있다는 것은 페이지를 빠르고 쉽게 모형화 할 수 있음을 의미합니다. 필요한 것은 페이지에 필요한 요소를 선택하고 결합하는 것뿐입니다. 그런 다음 모형을 최종 사이트에 맞게 사용자 정의하고 다듬을 수 있습니다.

07. 사이트 일부 업데이트 및 제거 용이

한 번에 하나의 원자, 분자 또는 유기체 만 변경되기 때문에 구성 요소에 대한 업데이트가 사이트 전체의 다른 모든 인스턴스에 전달되는지 쉽게 확인할 수 있습니다. 마찬가지로 원하지 않는 구성 요소를 쉽게 제거 할 수 있습니다.

08. 더 모듈화 된 파일 구조

마크 업 (HTML)과 관련하여 Atomic Design이 매우 널리 사용되지만, 이러한 기술은 CSS, JavaScript 또는 사이트를 만드는 데 사용되는 다른 언어에도 사용할 수있어 전체 코드를 더 모듈화하고 재사용 할 수 있습니다.

저는 제가 만든 웹 사이트에 atomic CSS를 사용하며이 접근 방식에 큰 이점을 발견했습니다. 그러나 HTML 구성 요소와 같은 것들이 도착하면 원자에 특정한 CSS와 JavaScript를 HTML과 함께 자체 폴더로 분리하는 것이 합리적이라고 생각하므로 업데이트 또는 삭제가 필요한 경우 어디로 가야하는지 정확히 알고 있습니다. 바꾸다.

09. 전체적으로 더 적은 구성 요소

창조자가 사이트 생성이 시작되기 전에 제시된 원자, 분자 및 유기체의 목록을 가지고 있다면, 그들은 작은 변형에 대한 새로운 구성 요소를 만드는 것보다 이미 존재하는 것을 사용할 가능성이 더 큽니다.

Photoshop에서 색상 선택 및 변경

글꼴 크기가 4.5em 인 제목이 디자인에 필요하지만 원자 목록에서 이미 4em 크기의 제목이 존재하는 경우 제작자는 완전히 새로운 제목을 만드는 것보다 4em 크기의 제목을 선택할 가능성이 더 큽니다. 이렇게하면 전체적으로 사용되는 원자 수가 줄어들어 웹 사이트가 더 깨끗하고 간결 해집니다.

10. 패턴 랩 탐색

원자 설계 : 패턴 연구소

Pattern Lab은 Brad Frost의 정적 사이트 생성기입니다.

이것은 Atomic Design의 많은 이점이 아니지만 브래드 프로스트 (아토믹 디자인이라는 용어를 만든 사람) 데이브 올슨 프로세스를 돕기 위해. 본질적으로 템플릿에는 콧수염을 사용하고 상호 작용에는 JavaScript 뷰어를 사용하는 정적 사이트 생성기입니다. 페이지 크기를 조정하고 사이트 섹션 및 코드 스 니펫에 댓글을 추가하는 옵션과 함께 모바일 우선 디자인을 염두에두고 생성되었습니다.

원래 버전은 PHP로 작성되었지만 두 가지 Node 버전이 있습니다. 하나는 gulp 용이고 다른 하나는 Grunt 용입니다. 데모를 엉망으로 만드는 것이 좋습니다. 패턴 연구소 작동 방식과 일반적인 Atomic Design에 대한 더 나은 이해를 제공하는 사이트입니다.

더 알고 싶으세요? Brad Frost의 원래 게시물 읽기 원자 디자인 .

관련 기사: