기존 HTML 만을 사용한 페이지는 동일한 기능을 가진 페이지 요소들이라도, 반복해서 나올 때마다 매번 새로운 코드를 작성해야 함!
컴포넌트화를 적용하면, 이미 작성했던 코드는 그대로 불러와서 쓰기 편리해 짐!
디자인 시스템을 구축할 때 흔히 하는 오해가 있습니다. '이미 완성된 화면이 있으니, 이를 역으로 분석하면 디자인 시스템을 쉽게 만들 수 있을 것'이라는 생각입니다.
특히 프레임워크 없이 HTML/CSS로만 작성된 정적 웹사이트에서 디자인 시스템을 추출하려고 할 때 많은 가로막힘을 경험하게 됩니다.
결론부터 말하자면, 프레임워크(React, Next.js 등)가 도입되지 않은 단순 HTML/CSS 기반의 웹사이트에서 디자인 시스템을 완전한 형태로 역추출하는 것은 기술적·구조적 한계가 명확합니다.
현대적 의미의 디자인 시스템은 단순한 스타일 가이드(DESIGN.md)를 넘어, 화면의 표현 방식, 컴포넌트의 상태(State), 멀티미디어 처리 대응 방식 등이 코드로 구현되어 완전히 재현 가능한 유기적 시스템을 의미하기 때문입니다.
중복 코드의 산재
정적 웹사이트는 대개 동일한 UI 요소(예: 버튼, 내비게이션 바)가 여러 HTML 파일에 복사-붙여넣기 형태로 존재합니다. 겉보기에는 같아 보이지만, 미세한 인라인 스타일이나 클래스명 차이로 인해 '하나의 진실된 소스(Single Source of Truth)'로 묶기 어렵습니다.
상태 및 로직의 분리 불가능
AI 에이전틱 개발 과정에서 중복 컴포넌트가 생기는 핵심 이유! (미묘하게 다른 표현, 사실은 같은 요소)
UI 컴포넌트는 단순히 시각적 형태만 가지지 않습니다. 클릭, 호버(Hover), 로딩, 에러 등 다양한 '상태'에 따른 표현 방식과 멀티미디어 처리 로직이 결합되어 있어야 합니다. 정적 페이지에서는 이 로직이 전역 JavaScript 파일에 파편화되어 있어 컴포넌트 단위로 쪼개어 추출하기가 극도로 어렵습니다.
동적 프레임워크(React, Next.js 등)의 결정적 차이“정적” → “동적” 대체 뭐가 동적인가요?
정적 사이트는 조립이 끝난 최종본을
당장 화면에 표시할 페이지로 사용합니다.
부품형태로 코드를 짜놓고,
”조립”을 통해서 최종 페이지가 만들어지게 구현해 놓은
기술적인 체계가 바로 동적 프레임워크 입니다!
디자인 시스템의 효용성은 컴포넌트 기반 프레임워크를 만났을 때 극대화됩니다. 정적 웹사이트 환경과 비교하면 아래와 같은 구조적 차이가 발생합니다.
| 비교 항목 | 정적 웹사이트 (HTML/CSS) | 컴포넌트 기반 프레임워크 (React/Next.js) |
|---|---|---|
| 최소 단위 | 페이지 (Page) 중심 | 컴포넌트 (Component) 중심 |
| 디자인 토큰 | CSS 변수 선언에 국한됨 | JSON/코드 기반 토큰화 및 테마 가변성 확보 |
| 상태(State) 재현 | 불가능 (클래스 탈부착 방식의 한계) | UI 상태별(Props) 시각적 재현 완전 가능 |
| 멀티미디어 대응 | 미디어 쿼리 및 개별 태그 분기 | Image, Video 컴포넌트 자율 최적화 내재화 |
| 문서화 편의성 | 수동 작성 (DESIGN.md) | Storybook 등을 통한 코드-디자인 실시간 연동 |
따라서 프레임워크 수준의 웹사이트에서 디자인 시스템을 추출하거나 이식할 때 비로소 "완전한 재현 가능성"이라는 패러다임이 완성됩니다.
정적 웹사이트를 기반으로 통합 규칙을 도입하는 시도는 향후 고도화된 프로젝트를 관리하기 위한 강력한 훈련이 됩니다.
구현된 화면들을 전수 조사하는 과정에서, 동일한 역할을 수행하면서도 미세하게 달랐던 폰트 크기, 마진, 컬러 값들이 수면 위로 드러납니다.