CDD란?
🤔 CDD란
CDD란 Component Driven Development의 약어로서 컴포넌트 기반으로 프로덕트를 개발하는 것을 말한다.
컴포넌트란 반복적이고 독립적이어서 어디든 붙일 수 있는 코드 묶음을 말한다.
예를 들면, 우리가 호텔을 만들때, 호텔방마다 공통적으로 들어가는 챔대, 책상, 욕조 등은 모두 컴포넌트로 해둔다면,
매번 침대를 만들지 않고도 '침대' 컴포넌트를 복사해 원하는 곳에 끼워넣기만하면 되는 식이다.
🤔 CDD는 왜 필요한가
여기에 대해선 나의 웹에이전시의 퍼블리셔 시절 이야기를 한번 해보려고 한다.
CDD가 꼭 필요한 순간을 너무 잘 대변하는 이야기 이기 때문이다.
성형외과 사이트를 제작하는데는 굉장히 많은 페이지가 필요하다.
사람들이 사이트에 들어와 어떤 수술이 가능한지 알아보고 상담할 수 있도록, 수술 종류마다 설명과 사진들이 즐비해야 하기 때문이다.
그때 성형수술의 종류가 이렇게나 많은지 처음으로 알았다.
컴포넌트 기반의 체계가 없었던 그 당시 회사는
기획자가 산발적으로 던져주는 기획서를 디자이너가 디자인을 입히며 프로토타입으로 만들었는데,
디자이너는 기획자의 기획서를 보며 자연스럽게,
비슷한 부분이 나온다 싶으면, 이미 만들어놓은 디자인의 부분 부분을 복사해와서 수정하는 식으로 디자인을 제작했다.
그리고 그 이후, 내가 퍼블리싱을 들어갈 때는, 분명히 뭔가 비슷한 부분들이 등장하는 것 같은데,
컴포넌트로 만들기엔 예외적인 경우도 있는 것 같고, 만들다보니 '어? 이거 비슷한거 어디 만든거 있었나?' 하는 경우가 많이 발생했다.
그럼 또 퍼블리셔인 나는 디자이너에게 가서 물어봐야한다.
퍼블리셔: 이 부분이랑 이부분이랑 이부분이 90%정도 유사한데, 이거 동일하게 가는거 어떤가요?
그럼 대다수의 경우 그래도 상관없다는 대답이 돌아온다.
그렇게 뚝딱뚝딱 퍼블리싱을 하던 도중, 기획안의 수정이 들어온다.
기획자: 클라이언트가 이 부분이 마음에 안든다네요! 이 부분 슬라이더가 아니라 탭되는 형식으로 변경해야 합니다.
그럼 디자이너는 또 기획자에게 물어볼 수 밖에 없다.
디자이너: 아 그 부분은 이페이지와, 저페이지에서도 동일한 형태로 들어가는데 그럼 이거 다 마음에 안드는 거래요? 그럼 다 바꿔야 하나요?
그럼 기획자는 말문이 막힌다.
기획자: 아...그건 잘 모르겠네요. 다시 확인하고 말씀드릴게요!
기획자, 디자이너, 퍼블리셔가 "반복되는 부분"을 정하고, 그것에 대한 정보들을 공유했으면 훨씬 작업시간을 단축시킬 수 있을 것이었다.
그래서 우리는 "반복되는 부분"을 "컴포넌트"라고 부르고, 그것을 기반으로 제작 체계를 잡을 필요가 있는 것이다.
💅🏾 CSS의 CDD를 위한, CSS-in-JS, 그리고 그 대표주자 Styled-Component
이렇게 Component기반의 개발이 중요해지면서 개발의 영역에선 자연스럽게 React로 만드는 것이 각광을 받게 되었다.
그런데 실질적으로 기획자와 디자이너와 개발자가 함께 공유가 필요한 부분 중 가장 큰 부분인 CSS는 컴포넌트로 어떻게 만들까?
CSS를 컴포넌트 단위로 쪼개서 사용하기 위해서 탄생한게 바로 "CSS-in-JS"이다.
말그대로 모듈 js 파일 안에서 css까지 설정할 수 있도록 하는 기술이다.
그리고 그 CSS-in-JS에서 가장 대표적인것이 Styled-Component이다.
Styled-Component에 대해 알고 싶다면 링크를 클릭한다!