[CSS] 모듈화 디자인

컴포넌트

• 컴포넌트는 소프트웨어 개발에서 재사용 가능한 모듈화된 부분을 의미한다.
• 독립적인 기능을 가지며, 다른 컴포넌트와 조합하여 애플리케이션을 구축하는 데 사용된다.
• 컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다.
• 데이터 및 이벤트를 상위 컴포넌트로부터 전달받아 사용하며, 다른 컴포넌트와 상호작용 가능하다.

모듈화된 디자인

• 개념
• 모듈화된 디자인은 디자인 요소들을 독립적인 모듈로 분리하여 구성하는 방식이다.
• 디자인 요소들을 재사용 가능하고 조합 가능한 단위로 만들어 개발 및 디자인에 활용한다.
• 각 모듈은 독립적으로 개발, 유지보수 및 확장이 가능하며, 필요한 곳에서 필요한 모듈을 조합하여 사용할 수 있다.
• 장점
• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
• 모듈화된 디자인은 재사용성과 일관성을 높여 개발 및 디자인 작업의 효율성을 향상시킨다.
• 디자인 요소들을 독립적으로 관리하므로, 수정이 필요한 경우 해당 모듈만 수정하여 전체적인 작업에 영향을 최소화할 수 있다.
• 디자인 모듈을 디자인 시스템의 일부로 구성하면, 다양한 프로젝트에서 일관된 디자인을 적용할 수 있다.
• 팀원들과의 협업에 용이하며, 디자인 시간을 절약하고 일관성을 유지할 수 있다.
• 적용 방법
• 디자인 모듈을 정의하고 구성하기 위해 디자인 시스템을 구축한다.
• 디자인 요소들을 모듈화하여 개발 및 디자인 작업에서 필요한 곳에서 적절히 조합하여 사용한다.
• 각 모듈은 일관된 스타일과 디자인 원칙에 따라 개발되어야 하며, 필요한 경우 모듈을 업데이트하거나 수정한다.
• 디자인 시스템과 함께 사용하여 일관된 디자인을 유지하고, 다른 팀원들과 협업하여 디자인 작업을 진행한다.

반응형 웹 기초 실습

기초에서 배운 내용과 모듈화된 디자인을 활용해 간단한 반응형 웹 사이트를 만들 수 있다.
유노코딩님의 강의를 보며 실습을 해보자.유노코딩