[IT 기획자 가이드] 기획은 조립이다: 디자인 시스템과 컴포넌트의 이해

안녕하세요, IT UI/UX 기획자 디노에디입니다.

앱 제작 방식(네이티브, 하이브리드, 크로스 플랫폼)까지 섭렵하셨다면, 이제 그 앱의 내부를 채우는 '부품'들에 대해 깊이 있게 이야기할 차례입니다.

기획서를 쓸 때마다 "이 버튼은 무슨 색으로 하지?", "입력창 모양은 어떻게 할까?"라며 하얀 캔버스 앞에서 매번 고민하고 계신가요? 디자인 시스템(Design System)을 제대로 이해하는 기획자는 더 이상 고민하지 않습니다.

 

대신, 잘 만들어진 부품을 가져와 '조립'을 시작합니다.

 

오늘은 협업의 속도를 10배 높여주는 마법의 규칙, 디자인 시스템을 기획자의 언어로 풀어보겠습니다.

---

1. 디자인 시스템: 우리 서비스의 '레고 가이드북'

디자인 시스템은 서비스에서 사용하는 모든 UI 요소(컬러, 폰트, 버튼, 아이콘, 간격 등)를 하나의 규칙으로 정해둔 집합체입니다.

• 기획자의 관점: 새로운 화면을 만들 때마다 새로운 요소를 창조하는 것이 아니라, 이미 약속된 '레고 블록'을 가져와서 목적에 맞게 조립하는 과정입니다.
• 핵심 이득: 기획서 작성 속도가 비약적으로 빨라지고, 안드로이드와 아이폰, 웹 등 서로 다른 환경에서 디자인이 제각각으로 나오는 불상사를 원천 차단할 수 있습니다.

SMALL

---

2. 핵심 개념: 컴포넌트(Component)와 아토믹 디자인

디자인 시스템을 이해할 때 가장 유명한 이론이 바로 '아토믹 디자인(Atomic Design)'입니다. 이는 UI 요소를 화학적 단위처럼 구분하는 방식입니다.

① 원자(Atom): 가장 작은 단위

더 이상 쪼갤 수 없는 기본 요소입니다.

• 예: 버튼, 아이콘, 텍스트 스타일(Heading 1, Body 2), 입력창(Input Field) 등.

② 분자(Molecule): 원자들의 결합

원자들이 모여 하나의 기능을 수행합니다.

• 예: '아이콘 + 텍스트 + 입력창'이 합쳐진 [검색바]

③ 유기체(Organism): 복잡한 인터페이스

분자들이 모여 화면의 특정 섹션을 이룹니다.

• 예: 서비스 상단의 **[GNB(헤더)]**나 상품 목록을 보여주는 [카드 리스트]

기획자는 화면 설계서(Storyboard)를 쓸 때, 구구절절 설명하는 대신 "이 영역에는 시스템의 'Card_Type_A' 컴포넌트를 배치한다"라고 명시해주기만 하면 됩니다.

---

3. 디자인 시스템이 기획자에게 주는 '진짜' 가치

① 커뮤니케이션 언어의 통일

"그.. 하단에 있는 확인 버튼 있잖아요, 그거 좀 더 진한 파란색으로 해주세요"라고 말하는 기획자와, "이 화면 하단에는 'Primary_Button_Large'를 적용해 주세요"라고 말하는 기획자 중 누가 더 전문적으로 보일까요?

 

디자인 시스템은 디자이너, 개발자와 소통할 때 혼선을 줄여주는 '공통 언어'가 됩니다.

② 예외 케이스 처리의 자동화 (State Design)

잘 설계된 디자인 시스템에는 각 컴포넌트의 상태(State)가 이미 정의되어 있습니다.

• Active: 사용 가능한 상태
• Disabled: 클릭할 수 없는 상태 (예: 필수 약관 미동의 시)
• Loading: 데이터를 불러오는 중인 상태 기획자가 일일이 "포인트가 부족하면 버튼을 회색으로 바꾸고 클릭 안 되게 해주세요"라고 설명할 필요가 없습니다. 시스템 규칙에 따라 "잔액 부족 시 버튼을 Disabled처리함" 한 줄이면 충분합니다.

③ 효율적인 유지보수와 확장성

브랜드 리브랜딩으로 메인 컬러가 바뀌어야 한다면 어떻게 될까요? 시스템이 없다면 수백 장의 기획서와 코드를 일일이 수정해야 하지만, 디자인 시스템이 있다면 중앙의 'Global Variable(변수)' 값 하나만 바꾸면 서비스 전체에 즉각 적용됩니다.

---

4. 마무리: 기획자의 가방에는 '컴포넌트'가 들어있어야 한다

UI/UX 기획은 예술적인 감각만으로 하는 것이 아니라, 논리적인 공학에 가깝습니다. 우리 서비스만의 규칙인 디자인 시스템을 완벽히 숙지하고, 그 컴포넌트들을 어떤 맥락(Context)에서 배치해야 사용자가 가장 편할지를 고민하는 것이 기획자의 핵심 역량입니다.

 

오늘 당장 우리 팀 디자이너에게 슬쩍 말을 건네보세요. "혹시 우리 팀 디자인 시스템(혹은 피그마 컴포넌트 가이드) 공유받을 수 있을까요?" 이 질문 하나가 여러분의 기획 인생을 '노가다'에서 '설계'로 바꿔줄 것입니다.

 

글이 유익했다면 '공감'과 '댓글' 부탁드려요!

 

다음 편에서는 드디어 IT 기술 기초 시리즈의 대단원! "기획자가 알아야 할 서버 배포와 버전 관리(Git, Release)"에 대해 알아보겠습니다.

 

마지막까지 함께해요!