디자인 시스템 실무! 컴포넌트 기반 디자인의 이해

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템의 실무에서 정말 유용한 개념, 바로 컴포넌트 기반 디자인에 대해 이야기해보려고 해요. 저는 디자인 공부를 시작하면서 반복 작업에 지칠 때가 많았는데, 컴포넌트라는 개념을 알고 나니 작업이 훨씬 효율적이 됐어요. 여러분도 반복적인 디자인 작업에 지친 적 있지 않나요? 그럼 저와 함께 컴포넌트 기반 디자인의 세계로 들어가 볼까요?

 

ChatGPT 생성 이미지

버튼 하나를 10번 그리기 귀찮았던 적, 저만 그런가요?

제가 처음 앱 UI를 만들 때의 일이에요. 로그인 화면, 회원가입 화면, 설정 화면 등 여러 페이지에 "확인" 버튼이 필요했는데, 매번 버튼을 새로 그렸어요. 크기, 색상, 모서리 둥글기를 일일이 맞추다 보니 시간이 너무 오래 걸리더라고요. 심지어 한 페이지에서 버튼 색상을 바꿨더니 다른 페이지랑 안 맞아서 다시 수정해야 했죠. "버튼 하나를 10번 그리기 귀찮다!"라는 생각이 들 때쯤, 친구가 "컴포넌트로 만들면 되지!"라고 알려줬어요. 그때 처음 컴포넌트라는 개념을 접하고, 정말 눈이 번쩍 뜨였어요. 여러분도 이런 반복 작업에 지친 적 있지 않나요? 저는 컴포넌트를 알게 된 이후로 작업 속도가 확 빨라졌답니다.

컴포넌트란 무엇인가?

그럼 컴포넌트가 뭔지부터 알아볼게요. 컴포넌트는 쉽게 말해 재사용 가능한 디자인 조각이에요. 비유하자면, 레고 블록 같은 거예요. 레고 블록 하나를 만들어놓고, 그걸 여러 곳에서 조립해서 쓰는 것처럼, 컴포넌트도 한 번 정의해 놓으면 여러 화면에서 재사용할 수 있죠. 디자인 시스템에서 컴포넌트는 버튼, 입력 필드, 아이콘, 내비게이션 바 같은 작은 요소들로 구성돼요. 이 요소들을 미리 만들어놓고 필요할 때마다 꺼내 쓰는 거예요.

컴포넌트의 가장 큰 장점은 재사용성과 일관성이에요. 예를 들어, "확인" 버튼을 컴포넌트로 만들어놓으면, 모든 화면에서 똑같은 모양과 느낌을 유지할 수 있어요. 만약 버튼 색상을 바꾸고 싶다면, 컴포넌트 하나만 수정하면 모든 화면에 자동으로 반영되죠. 이게 얼마나 시간을 아끼는지, 직접 해보니 정말 감동이었어요.

버튼과 입력 필드 예시로 재사용성 이해하기

컴포넌트의 재사용성을 더 잘 이해하기 위해 구체적인 예시를 들어볼게요. 먼저 버튼 컴포넌트를 생각해 봅시다. "확인" 버튼을 컴포넌트로 만들 때, 크기(48px x 48px), 색상(파랑), 모서리 둥글기(8px), 글씨체(Noto Sans, 16px, Bold) 같은 속성을 미리 정의해요. 이렇게 만든 버튼 컴포넌트를 로그인 화면, 회원가입 화면, 설정 화면에 배치하면, 매번 새로 그릴 필요 없이 똑같은 버튼을 바로 사용할 수 있죠. 만약 버튼 색상을 파랑에서 초록으로 바꾸고 싶다면, 컴포넌트 속성만 변경하면 모든 화면의 버튼이 한 번에 초록색으로 바뀌어요. 이게 바로 재사용성의 힘이에요!

다음으로 입력 필드를 예로 들어볼게요. 입력 필드는 사용자가 텍스트를 입력하는 창인데, 이메일 입력, 비밀번호 입력, 검색창 등 여러 곳에서 쓰이죠. 입력 필드 컴포넌트를 만들 때, 테두리(1px 회색), 배경(흰색), 글씨체(16px, Regular), 높이(40px) 같은 속성을 설정해 놓아요. 이렇게 하면 모든 입력 필드가 통일된 스타일을 가지게 돼요. 제가 처음엔 입력 필드를 매번 새로 그렸는데, 컴포넌트로 바꾸고 나니 작업 시간이 절반으로 줄더라고요. 이런 작은 요소들이 모여서 전체 UI의 일관성을 만들어주는 거예요.

Figma 컴포넌트 맛보기 소개

컴포넌트를 실제로 만들어보려면 디자인 툴이 필요해요. 저는 Figma를 추천드려요. Figma는 초보자도 쉽게 사용할 수 있는 무료 디자인 툴인데, 컴포넌트 기능을 지원해서 정말 편리하죠. Figma에서 컴포넌트를 만드는 방법은 간단해요. 예를 들어, 버튼을 만들어볼게요:

1. 먼저 사각형으로 버튼 모양을 그리고, 색상과 글씨를 설정해요(파란색, "확인", 16px).
2. 이 버튼을 선택한 뒤, Figma 상단 메뉴에서 "Create Component" 버튼(다이아몬드 모양 아이콘)을 클릭해요.
3. 그러면 이 버튼이 컴포넌트로 등록돼요. 이제 이 버튼을 다른 화면에 드래그해서 쓰면 돼요.
4. 만약 버튼 색상을 바꾸고 싶다면, 원본 컴포넌트를 수정하면 모든 버튼이 자동으로 업데이트돼요.

저는 Figma로 처음 컴포넌트를 만들어보고 "이렇게 쉬울 수가!" 하고 감탄했어요. Figma는 팀원들과 실시간으로 협업할 수 있는 기능도 있어서, 디자인 시스템을 공유하기에도 좋아요. 예를 들어, 팀원 모두가 같은 버튼 컴포넌트를 쓰면 UI가 통일되죠. Figma를 아직 안 써보셨다면, 꼭 한 번 맛보기로 해보세요!

컴포넌트의 더 큰 장점: 효율성과 확장성

컴포넌트 기반 디자인의 장점은 단순히 시간을 아끼는 데 그치지 않아요. 효율성 외에도 확장성이 큰 장점이에요. 예를 들어, 앱에 새로운 화면을 추가해야 할 때, 이미 만들어진 컴포넌트를 활용하면 빠르게 작업할 수 있죠. 또, 새로운 디자이너가 팀에 합류했을 때도 컴포넌트 라이브러리를 공유하면 바로 작업에 투입될 수 있어요. 제가 들은 사례 중엔, 스타트업 팀이 컴포넌트 기반으로 디자인 시스템을 구축해서 개발 속도가 2배 빨라졌다는 이야기도 있더라고요.

컴포넌트를 알았으니, 아이콘도 추가해 볼까요?

컴포넌트 기반 디자인을 이해하니, 반복 작업의 피로가 줄어들고 UI도 더 깔끔해지는 걸 느낄 수 있었어요. 버튼, 입력 필드 같은 작은 조각들을 컴포넌트로 만들어 놓으면, 디자인 시스템이 훨씬 체계적이 되죠. 이제 컴포넌트의 기본을 알았으니, 다음 포스트에서는 디자인 시스템에 필수적인 또 다른 요소인 아이콘을 어떻게 추가하고 관리하는지 알아볼게요. 여러분은 컴포넌트를 어디에 써보고 싶나요? 저는 버튼 컴포넌트 덕분에 작업이 훨씬 편해졌어요. 댓글로 여러분의 경험도 공유해 주세요!