컴포넌트란 무엇인가요?

"이 버튼, 그냥 그림인가요? 아니면 컴포넌트인가요?"

"이 버튼, 그냥 그림인가요? 아니면 컴포넌트인가요?"

어느 날, 디자이너와 개발자가 마주 앉아 화면을 보고 있었습니다.
디자이너가 말합니다.

"이 버튼, 여기저기 다 쓰니까 컴포넌트로 만들어주세요."

개발자가 되묻습니다.

"혹시 어떤 상태들이 있고, 어디서 쓰이는지 알 수 있을까요?"

짧은 대화지만 이 안에는 중요한 차이가 숨어 있습니다.
디자이너가 말하는 ‘컴포넌트’와 개발자가 말하는 ‘컴포넌트’는 전혀 다를 수 있다는 사실입니다.

---

컴포넌트란?

컴포넌트(Component)는 재사용할 수 있는 UI 조각을 말합니다.
디자인과 기능을 하나로 묶어, 독립적인 단위로 사용할 수 있는 UI입니다.

버튼(Button), 입력창(Input), 카드(Card), 네비게이션 메뉴(Navigation) 같은 것들이 모두 컴포넌트가 될 수 있습니다. 여기엔 단순히 디자인만 있는 게 아닙니다.

동작, 상태, 데이터 처리까지 포함될 수 있습니다.

예를 들어 버튼 하나만 봐도 다양한 상태가 있죠.

마우스를 올렸을 때(Hover)

클릭했을 때(Active)

비활성화됐을 때(Disabled)

디자이너가 보는 버튼과 개발자가 구현하는 버튼은 단순한 그림이 아니라 작은 시스템에 가깝습니다.

---

디자이너가 말하는 컴포넌트

디자이너에게 컴포넌트는 디자인 툴(Figma, Sketch 등)에서 관리하는 재사용 가능한 디자인 단위입니다.

마스터 컴포넌트와 인스턴스 구조

색상, 크기, 상태 변화에 따라 Variants로 구성

어디서든 동일한 스타일과 구조로 재사용 가능

디자이너의 목표는 디자인의 일관성 유지와 반복 작업 최소화입니다.

---

개발자가 말하는 컴포넌트

개발자에게 컴포넌트는 코드로 구현된 UI 구성 요소입니다. React나 Vue 같은 프레임워크에서는 아주 중요한 개념이죠.

props로 데이터 전달

클릭, 입력 같은 이벤트 처리

상태(state)를 가질 수도, 안 가질 수도 있음

함수나 클래스 단위로 구성

개발자의 목표는 명확합니다.
코드 중복을 줄이고, 재사용성과 확장성이 높은 구조를 만드는 것.

---

결국 컴포넌트란 무엇인가요?

컴포넌트는 사용자에게 보이는 UI를 작고 관리하기 쉬운 단위로 쪼개는 방식입니다.

디자이너에게는 디자인 단위

개발자에게는 코드 단위

관점은 다르지만, 같은 컴포넌트를 기준으로 이야기할 수 있다면 협업은 훨씬 쉬워집니다.

---

그렇다면, 왜 컴포넌트가 중요한가요?

디자인 시스템 구축의 핵심 단위가 된다.

기능 중복을 줄이고 유지보수가 편해진다.

새로운 화면을 만들 때 개발 속도가 빨라진다.

디자이너와 개발자가 같은 언어로 소통하게 된다.

결국 컴포넌트는 일관성, 효율성, 협업의 중심에 있는 개념입니다.

---

기획자와 디자이너를 위한 실무 중심 스터디, 브런치 독자 여러분을 기다립니다.

https://app.holix.com/chatroom/cover/j3ar0GN4

�함께 성장하는 - 프로덕트 디자인 스터디 | 홀릭스(HOLIX)