# atomic design

qmflf556

서론 팀 프로젝트가 끝나고 이제 react 수업이 시작되었다. 그런데 진도상 이슈가 있는지 2주밖에 react 수업을 하지 않는다고 한다... 이게 대체 무슨일일까 한 3달은 react 를 하게 되지 않을까 생각하면서 지난 한달간 react 스터디를 진행했던건데 지금와서 생각해보면 미리 스터디를 시작해서 참 다행이다. 2주안에 react 를 다 배울수 있을지 모르겠지만 원리를 충분히 이해하기에는 빠듯할 수 있을것 같다는 생각이 떠나질 않는다. 스터디때 알아봤던 내용들중 머릿속에서 빠져나온게 있다면 다시 집어넣으며 이 포스트를 작성하게 되었다. 수업 요약 React 의 컴포넌트, props, JSX 와 함수형, 클래스형 컴포넌트의 기본구조, default props, PropsType 에 대한 내용이었다. 클래스형 컴포넌트는 react.dev 에서도 ![](https://velog.velcdn.com/images/qmflf556/

oka1313

1. Atomic Design 최근 스마트폰의 보급과 기술 발전으로 인해 웹 환경이 빠르게 변화하고 있다. 데스크톱과 모바일에서 더 나아가 태블릿, TV, 냉장고, 자동차 등 다양한 기기에서 웹 환경이 제공되고 있다. 이러한 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는 것이 더욱 중요해졌다. 기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고 관리하는 방식이었다. 하지만 프로젝트 규모가 커질수록 관리가 어려워지고, 일관성을 유지하기 어려워졌다. 이로 인해 일관성 없는 UI와 중복된 코드가 발생하여 유지 보수 및 확장성 측면에서 문제가 되었다. 이러한 문제를 해결하기 위해 아토믹 디자인(Atomic Design)이라는 개념이 등장하였다. 웹 디자이너 Brad Frost가 책 "Atomic Design"을 통해 제시한 디자인 및 프론트엔드 개발 방법론으로, 이 책을 통해 디자인 시스템과 아토

lovesyung

아토믹 디자인의 개념과 이를 구성하는 요소에 대해 알 수 있다. 아토믹 디자인 적용 시 얻는 이점에 대해 이해할 수 있다. 애플리케이션을 아토믹 디자인으로 구성하는 방법에 대해 이해할 수 있다. 💜Atomic Design >웹 디자이너 Brad Frost가 책 "Atomic Design"을 통해 제시한 디자인 및 프론트엔드 개발 방법론 최근 스마트폰의 보급과 기술 발전으로 인해 웹 환경이 빠르게 변화하고 있다. 데스크톱과 모바일에서 더 나아가 태블릿, TV, 냉장고, 자동차 등 다양한 기기에서 웹 환경이 제공되고 있다. ➡ 이러한 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는

pikadev1771

프로젝트에 아토믹 디자인을 적용할 것인지에 대해 팀원들 간의 상당한 의견 차이가 있었다. 충분한 고민 없이 도입하면 오히려 프로젝트 진행에 방해가 될 수 있다는 의견도 있었고, 실제로 이미 아토믹 디자인을 프로젝트에 적용해 본 많은 사람들이 아쉬운 점에 대해 경고😇하고 있기도 했다. 개인적으로는 이전의 프로젝트에서 재사용성을 고려하지 않고 반복해서 컴포넌트를 만들어냈던 경험과, 팀 프로젝트임에도 불구하고 팀원들이 각기 다른 스타일로 각자의 컴포넌트를 만들었던 점에 대한 아쉬움이 있었기 때문에 좀 더 체계적인 디자인 시스템을 갖춰보고 싶다는 욕구가 있었다. 팀원들 또한 더 나은 파일

asaei623

이 글은 카카오 FE 기술 블로그 '아토믹 디자인을 활용한 디자인 시스템 도입기'를 정리한 글이다. ⭐ 카카오 FE 기술 블로그 '아토믹 디자인을 활용한 디자인 시스템 도입기' 바로가기 ✍️ 서론 container-presentational 패턴을 사용했었다. 그러나 문제가 발생했고 대안을 찾아야 했다. 🥲 카카오 페이지 웹에서 컴포넌트 개발시 겪은 문제 컴포넌트의 파편화 디자인시스템에서 관리되지 않는 버튼은, 각 페이지마다 스타일이 제각각일 수 있다. 이렇게 하면 유지보수가 어렵고, 디자인부서와의 소통이 번거롭게 된다. 명확한 컴포넌트 설계 기준 미비 정확한 규칙없이 팀원마다 각자의 기준으로 컴포넌트를 나누면, 좋지 않은

rara-record

진짜 이번주는 너무 바빴다. 스터디 발표 준비로 PPT도 만들어야 했고 회사 프로젝트도 생각할 게 많았고, 데브로드 강의도 듣고 노트정리도 하고, 과제도 하고 너어무 바빠. 그렇다고 허투로 하고 싶지는 않은데, 어떻게 하면 시간을 더 효율적으로 쓸 수 있을까. 일을 시작한지 오늘로 딱 5개월..! 그동안 일하면서 컴포넌트 설계에 대해 고민이 많았었는데, 이번 강의를 듣고 현재 나에게 부족한 부분이 어떤건지 조금 더 분명하게 알게 된 것 같다. 컴포넌트를 구성하고, 분리하는 작업과 상태에 대한 이해도가 부족하다고 늘 생각했는데, 그 체계가 조금 더 뚜렷하게 잡힐 수 있었다. 물론 아직 부족한 게 많지만; 와닿지 않는 것도 많고.. 공부가 더 필요하다고 느낀 부분은 SSOT SRP DRY 원칙 그리고 아직 상태에 대한 이해도 ㅠㅠ 과제 진행도 재밌게 했다. 다시 보니 보완했으면 좋겠는 부분은 있지만.. 맘먹고 아주 잘게 잘게 나눠봐야지 했는데, 너무 불필요하게 많이

yoyongjin

Atoms ⊂ Molecules ⊂ Organisms ⊂ Templates ⊂ Pages 디자인 시스템: 어떤 조직이 디지털 인터페이스를 디자인하고 구축하는 방식에 대한 이야기 - Brad Frost design systems are systems of systems. A design system often contains many subsystems that make an interface tick UI components and variants in design and code Design tokens Typography system Color system Layout/Grid System Icon System Atomic Design: 디자인 시스템을 만드는 한 가지 방법

croishz

언젠가 네이버가 블로그 서비스의 기술 스택을 이전할 때 atomic design을 기반으로 프로젝트를 진행했다는 아티클을 본 기억이 있다. 본래 5단계인 원론을 실제에 맞춰 적용해 3단계 - 아마도 atoms < mocules < template - 로 줄이고, 여기에 맞춰 컴포넌트를 만들었다는 내용이었는데... 추상화, 계층 구조, 그리고 현재의 주류가 되있는 컴포넌트가 무언가의 쪼개진 단위라는 데에서 atomic design을 하나의 개발 architecture로 보는 게 아닐까 싶다. 원문의 기나긴 사전 배경 설명의 1장을 지나 이 아이디어를 설명한 2장에서 Brad frost가 말하는 5단계 추상화의 요점은, 디자인 시스템의 계층화이다. \- Brad frost 설명의 반대 방향의 풀이이긴 하지만 - 웹 페이지의 수많은 요소를 잘게 조사 쪼개다보면 더이상 그 형체나 특

rlatjsdn147

Atomic Design? 아토믹 디자인은 디자인 시스템을 만드는 데 여러 가지 방법론 중 하나이다. 이름에서 유추할 수 있듯이 Atom(원자) 단위로 디자인 및 개발을 한다. 명료하게 말해서, 원자가 결합하여 분자가 되고, 분자가 결합하여 유기체가 되는 것처럼, UI 컴포넌트 또한 가장 작은 단위로 쪼개고 합치며 UI를 마치 레고 블럭 쌓듯이 만들어나가는 방법이라는 것이다. 다음은 Atomic-Design의 단위이다. Atoms 가장 작은 단위의 컴포넌트를 의미합니다. 리액트에서는 Label, Input, CheckBox, Select 같은 HTML의 태그같이 기능적으로/의미론적으로 가장 작은 단위의 컴포넌트라고 할 수 있습니다. 앞으로 계속해서 재사용해나갈 컴포넌트이기 때문에 특정 기능을 수행하는 것이 아니라, 일반적으로 사용할 수 있도록 구현합니다. 예를 들어, input 태그의 onChange와 값이 어딘가에 종속되지 않도록 props로 전달받아 사용할 수 있

heelieben

리액트를 사용해서 컴포넌트를 개발하다보면 자주 듣는 아토믹 디자인 패턴에 대해서 얘기해보도록 하겠습니다. Atomic Design 아토믹 디자인은 디자인 패턴중에 하나입니다. 가장 작은 원자부터, 원자가 모여서 분자를 이루고, 분자들을 모아서 유기체를 형성하고, 유기체를 모아 하나의 템플릿으로 만들 수 있으며, 템플릿에 데이터를 주입해서 최종적으로 페이지를 생성합니다. 아토믹 디자인 > 아토믹 디자인의 5단계 atoms - 원자 molecules - 분자 organisms - 유기체 templates - 템플릿 pages - 페이지 즉, 아토믹 디자인은 총 5단계를 거쳐서 컴포넌트들을 생성하고, 최종적으

minkuk90

리액트 어플리케이션 구조 - 아토믹 디자인 >원문: [https://andela.com/insights/structuring-your-react-application-atomic-design-principles/ ](https://andela.com/insights/structuring-your-react-application-atomic-design-principles/) 필자는 처음 프로그래밍을 시작했을 때, 디자인 패턴, 파일구조와 같은 추상적인 프로그래밍의 개념과 중요성을 전혀 몰랐다. 하지만 호텔 관련 어플리케이션을 만들면서 그 중요성에 대해 알게 되었다. 어플리케이션의 주요 기능은 호텔 고객의 영수증 인쇄를 도와주는 것이었다. 1년 후, 호텔 경영진은 어플리케이션에 몇 가지 새

hjkdw95

Atomic Design이란? 쉽게 말하면 원자(Atom) 단위만큼 중복되기 시작하는 가장 작은 요소부터 component화 해서 작업하는 디자인 시스템을 일컫는 말이다. Atomic Design의 구성 Atom(원자) 가장 작은 component (보통 tag 1개에 대한 서식을 지정) 컬러팔레트, 폰트, 애니메이션과 같은 추상적인 요소를 포함하기도 한다. 추상적인 형태이기 때문에 그 자체로는 쓸모가 없다. Molecules(분자) 분자들은 그 자체의 특성을 가지고 있으며, 디자인 시스템의 중추 역할을 한다. 한가지 기능만 수행하는 것들을 지칭한다. 예를 들어, form 의 label, input, button 같이 각 개별적으로는 유용하지 않지만 form 으로 구성되면 실제로 기능을 할 수 있는 형태를 지칭한다. Organism(유기체) 인터페이스에서 "구분된 영역

magnet

출처 https://overthecode.io/the-meaning-and-limits-of-atomic-design-from-a-software-design-perspective/ https://sumini.dev/guide/009-dont-use-atomic-design/ [https://speakerdeck.com/feel5ny/atomig-paeteoneuro-dijaineowa-hyeobeobhagi?slide=7

ginameee

최근 프론트엔드 테스트에대해 관심이 생겼다. https://www.youtube.com/watch?v=q9d631Nl0_4 이 영상이 매우 유익한 것 같다. React vs Ezyme React test를 위한 도구로 jest 프레임워크 위에서 testing-library/react, Enzyme 많이 사용하고있다. testing-library는 Behavior Driven Test 주도의 테스트 방법론을 따르기 적합하기때문에, 실제 화면에 대한 테스트케이스를 작성하기 적합하다. 화면에 표현되는 props가 제대로 나타나는지, 액션에 의해 화면이 제대로 변경되는지와 같은 테스트다. 반면, 컴포넌트가 어떤 state, props를 가지고있는지, 클릭했을때 어떤 함수가 호출되는지에 대한 테스트는 적합하지않다. state, props 에 대한 테스트를 원한다면 Enzyme를 사용하는게 적합하다. 그러나 Enzyme는 개발자가 단순히 state 의

hong7511059

작년 네이버 커넥트재단에서 열린 부스트캠프에 Final Project 때 Atomic Design과 Storybook을 사용했던 경험에 대해서 소개한 글입니다. Atomic Design이란? Atomic Design이란 원자가 결합해서 분자가 되는 것처럼 단계를 나눠 작은 컴포넌트를 만들고, 그것들을 결합해 조금 더 큰 단위의 뷰를 만드는 방법론이며, 5개의 구분된 단계가 있습니다. 출처: https://brunch.co.kr/@ultra0034/63 Atoms(원자) 원자는 물질의 기본 구성 요소로, label, input, button과 같은 HTML tag입니다. Molecules(분자) 분자는 원자들이 함께 결합한 것이며, 화합물의 가장 작은 기본단위입니다. 분

gwak2837

디자인 패턴이라는 것은 공통되는 코드를 여러 곳에서 재사용하기 위해서 존재합니다. Atomic 디자인도 코드 재사용 및 원활한 코드 유지보수를 도와주는 객체지향 프로그래밍의 SOLID 원칙과 맥락이 비슷합니다. Atom 컴포넌트의 기능은 작지만 어디서든 자주 사용될 수 있으며 내부 로직 수정이 거의 없어야 하는 컴포넌트를 의미합니다. 예를 들면 커스텀 스타일이 적용된 `이나 ` 등이 atom으로 분류될 수 있습니다. atom 컴포넌트는 일반적으로 다른 프로젝트에서도 사용될 수 있을 정도로 모듈화 정도를 높이는 것이 좋습니다. 분자 atom 컴포넌트의 조합입니다. 또는 프로젝트에서 자주 반복되는 코드 묶음이 분자로 들어가는 경우도 있습니다. 유기체 (선택) 분자 컴포넌트의 조합입니다. 사실 분자와 유기체의 명확한 구분이 어려워서 컴포넌트 기능 및 코드 길이 측면에서 적으면 분자, 많으면 유기체로 분류하기도 합니다. 아

clowns123

1 Atomic Design 이란? 회사에서 react로 마이그레이션을 진행하기 위해 storybook를 공부하면서 기존 container-component구조가 아닌 Atomic Design을 적용하기 위해 공부하는 글 입니다. 개념 디자인 요소들을 나누어 파악하고 요소를 조합하는 과정을 통해 디자인을 구성하는 방식입니다. 위의 그림과 같이 Atomic Design은 5단계로 되어있습니다. Atoms(원자) Molecule

go286

1. 아토믹 디자인이란? 아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있다. Atoms(원자) 원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그이다. Molecules(분자) 원자들을 서로 결합하여 그룹을 만들면 분자들은 그 자체의 특성을 가지고 있으며 우리의 디자인 시스템의 중추 역활을 한다. Organisms(유기체) 분자는 우리가 작업할 수 있는 빌딩 블록을 제공하고 있어서 분자들을 결합하여 유기체를 형성할 수 있다. 유기체는 비교적 복잡하며 인터페이스에서 구분된 영역을 형성하는 서로 결합되어 있는 분자 그룹이다. Templates 템플릿은 주로 페이지를 구성하기 위해 서로 꿰매어진 유기체 그룹으로 구성되며 이 부분에서 디자인을 확인하고 레이아웃이 실제로 구동하는지 볼 수 있다. Pages 페이지

katej927

✍ 아토믹 디자인이란? 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식 = 컴포넌트 중심의 디자인 패턴 Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 함. Molecules: 원자들의 모음 Organisms: 분자들의 모음 Templates: 유기체들을 모아 템플릿으로 생성 Pages: 실제 페이지를 구성 ✍ 왜 아토믹 디자인인가? 리액트는 컴포넌트의 재사용성이 매우 중요 → 중복이 되는 컴포넌트를 공통으로 사용할 수 있도록

moaikang

부스트캠프 프로젝트에서 Atomic Design을 응용해 프론트엔드 프로젝트 구조를 설계하고 기술 스택을 결정한 경험을 공유할까 합니다. 우측 링크에서 프로젝트 소스코드를 확인해 보실 수 있습니다. 👉 GitHub 링크 Atomic Design이란? 아토믹 디자인 Atomic Design은 원자가 결합해 분자가 되고, 분자가 결합하여