컴포넌트와 패턴으로 일관성 만들기

화면은 한 장씩 따로 존재하지 않는다. 사용자는 홈 화면을 보고, 목록을 훑고, 상세 페이지를 열고, 입력하고, 결제하고, 돌아온다. 이 긴 흐름 속에서 계속 마주치는 것이 버튼, 입력창, 카드, 모달, 탭 같은 반복 요소다. 많은 팀이 이 요소들을 "작은 UI 부품" 정도로 생각하지만, 실제로는 제품의 성격과 사용성을 동시에 결정하는 핵심 장치다.

같은 서비스 안에서 버튼이 화면마다 다르게 생기고, 입력창의 오류 표현이 제각각이며, 카드의 정보 배치가 매번 달라지면 사용자는 기능을 배우는 데 쓸 에너지를 화면 해석에 써버린다. 반대로 반복되는 요소가 일정한 규칙으로 움직이면, 사용자는 새 화면에서도 빠르게 적응한다. 어디를 눌러야 하는지, 무엇이 선택된 상태인지, 실수했을 때 어떻게 복구할 수 있는지를 짐작할 수 있기 때문이다.

이것이 바로 컴포넌트와 패턴이 중요한 이유다. 일관성은 브랜드 톤보다 먼저 사용성을 만든다. 멋있어 보이는 화면보다 먼저, 예측 가능한 화면이 필요하다.

컴포넌트는 부품이 아니라 약속이다

컴포넌트는 단순히 재사용 가능한 UI 조각이 아니다. 더 정확히 말하면, 사용자가 반복적으로 학습하는 약속이다. 이 버튼은 누르면 다음 단계로 간다, 이 입력창은 잘못 쓰면 바로 알려준다, 이 카드 안에서는 제목이 가장 중요하고 보조 정보는 아래에 있다, 이 탭은 같은 수준의 내용을 전환한다는 식의 약속 말이다.

좋은 컴포넌트는 세 가지를 함께 해결한다. 첫째, 사용자가 익숙하게 쓸 수 있어야 한다. 둘째, 팀이 빠르게 만들고 수정할 수 있어야 한다. 셋째, 제품이 커져도 무너지지 않아야 한다. 하나만 만족해서는 부족하다. 예를 들어 보기에는 그럴듯하지만 화면마다 조금씩 다르게 구현되는 버튼은 확장성이 약하다. 반대로 개발하기는 쉬워도 사용자가 상태를 이해하기 어려운 입력창은 좋은 UX가 아니다.

실무에서는 컴포넌트를 예쁘게 그리는 것보다 먼저 이렇게 질문해야 한다. 이 요소는 어디에서 반복되는가. 사용자는 이 요소를 보면 무엇을 기대해야 하는가. 상태가 바뀌면 어떻게 보여야 하는가. 예외 상황에서는 어떤 식으로 무너질 수 있는가. 이 질문에 답하지 못하면, 컴포넌트는 재사용되는 부품이 아니라 반복되는 혼란이 된다.

버튼은 가장 작은 액션 설계다

버튼은 단순해 보이지만, 제품의 의사결정 구조를 그대로 드러낸다. 무엇이 가장 중요한 행동인지, 무엇이 보조 행동인지, 무엇이 위험한 행동인지 버튼 체계에서 드러난다. 그래서 버튼이 많다고 해서 선택지가 풍부한 것이 아니라, 오히려 우선순위가 흐려졌다는 신호일 때가 많다.

예를 들어 결제 화면에 "쿠폰 보기", "나중에 하기", "이전", "확인", "결제하기"가 모두 비슷한 크기와 색으로 놓여 있다면 사용자는 잠깐 멈춘다. 무엇을 먼저 해야 하는지 판단해야 하기 때문이다. 하지만 주된 행동 하나만 가장 강하게 보이고, 나머지는 한 단계 약하게 정리되어 있으면 화면은 훨씬 빨리 읽힌다.

버튼 시스템을 만들 때는 최소한 다음이 구분되어야 한다.

• 가장 중요한 행동을 담는 주 버튼

• 보조 선택이나 이동을 위한 보조 버튼

• 삭제, 해지, 초기화처럼 긴장을 동반하는 위험 버튼

• 지금은 실행할 수 없는 비활성 버튼

여기서 중요한 것은 모양의 화려함이 아니라 역할의 일관성이다. 어떤 화면에서는 파란색이 주 버튼이고, 다른 화면에서는 회색이 주 버튼이며, 또 어떤 곳에서는 테두리 버튼이 가장 중요한 행동을 맡고 있다면 사용자는 규칙을 학습할 수 없다. 제품마다 개성은 달라도, 같은 서비스 안에서는 행동의 위계가 안정적으로 보여야 한다.

버튼은 상태 설계도 중요하다. 기본 상태만 예쁘게 만들고 끝내면 실제 사용에서는 문제가 생긴다. 눌렀을 때, 로딩 중일 때, 성공했을 때, 실패했을 때가 모두 다르기 때문이다. 특히 로딩 상태가 빠지면 사용자는 같은 버튼을 여러 번 누른다. 버튼 하나를 설계한다는 것은 사실상 한 가지 모양을 정하는 일이 아니라 여러 상태의 흐름을 설계하는 일이다.

입력창은 데이터를 받는 곳이 아니라 불안을 다루는 곳이다

회원가입, 로그인, 배송지 입력, 카드 등록, 검색, 문의 작성처럼 제품의 중요한 순간은 대부분 입력창 위에서 벌어진다. 그런데 많은 팀이 입력창을 단순한 상자로 본다. 라벨만 붙이고 빈 칸만 만들면 끝이라고 생각하는 것이다. 실제로는 그 반대다. 입력창은 사용자의 망설임, 실수, 오해가 가장 자주 발생하는 장소다.

좋은 입력창은 사용자가 세 가지를 즉시 알게 해야 한다. 무엇을 넣어야 하는지, 어떤 형식으로 넣어야 하는지, 잘못 넣었을 때 어떻게 고치면 되는지다. 이 셋 중 하나라도 불분명하면, 사용자는 입력보다 해석에 더 많은 시간을 쓴다.

예를 들어 전화번호 입력창이 있다고 해보자. 자리 표시 문구만 있고 라벨이 없다면, 사용자는 휴대폰 번호인지 회사 번호인지 잠시 생각해야 한다. 형식 안내가 없으면 하이픈을 넣어야 하는지도 헷갈린다. 오류 메시지가 단지 "잘못된 형식입니다"로 끝나면 무엇을 어떻게 바꿔야 하는지도 알기 어렵다. 작은 혼란처럼 보이지만, 이런 경험이 쌓이면 사용자는 제품이 불친절하다고 느낀다.

입력창 패턴에서 특히 자주 무너지는 부분은 상태 일관성이다. 어떤 화면에서는 오류가 빨간 테두리로 보이고, 어떤 화면에서는 아래 문장만 바뀌며, 어떤 곳에서는 제출 후에야 문제가 드러난다면 사용자는 학습할 수 없다. 입력 방식이 다르더라도 원칙은 같아야 한다. 안내는 언제 보여줄지, 검증은 실시간인지 제출 후인지, 오류 메시지는 어디에 놓을지, 필수 입력은 어떻게 표시할지를 제품 차원에서 정해야 한다.

검색창도 입력창의 한 종류지만 성격은 다르다. 검색창은 정확한 데이터 수집보다 빠른 탐색이 목적이므로, 관대한 허용과 빠른 피드백이 더 중요하다. 반대로 결제 정보나 주민등록 관련 정보처럼 정확성이 중요한 입력은 자유로움보다 명확성이 우선이다. 같은 입력창이라도 맥락에 따라 패턴을 달리해야 한다는 뜻이다. 패턴화는 모든 것을 똑같이 만드는 일이 아니라, 같은 목적에는 같은 규칙을 적용하는 일이다.

카드는 화면을 정리해주는 상자이자 혼란을 숨기기 쉬운 상자다

카드는 요즘 거의 모든 서비스에서 등장한다. 상품 목록, 뉴스 피드, 숙소 검색, 대시보드, 프로젝트 관리, 채팅 목록까지 카드 없는 인터페이스를 찾기 어려울 정도다. 카드는 정보를 묶어 보여주기에 편리하고, 다양한 데이터를 유연하게 담을 수 있어 실무에서도 선호된다.

하지만 바로 그 유연함 때문에 쉽게 무너진다. 카드가 만능 상자처럼 쓰이기 시작하면, 제목 길이도 제각각이고 버튼 위치도 제각각이며 배지, 태그, 썸네일, 가격, 상태 정보가 뒤섞인다. 그러면 카드는 정보를 정리하는 도구가 아니라 복잡함을 포장하는 도구가 된다.

좋은 카드 패턴은 먼저 카드의 역할을 분명히 한다. 이 카드는 비교를 위한 카드인가, 탐색을 위한 카드인가, 현재 상태를 요약하는 카드인가, 즉시 행동을 유도하는 카드인가. 역할이 다르면 구조도 달라져야 한다. 상품 비교 카드와 할 일 관리 카드를 같은 템플릿으로 처리하면 안 되는 이유가 여기에 있다.

카드 설계에서 자주 놓치는 부분은 클릭 범위와 우선순위다. 카드 전체가 눌리는지, 내부 버튼만 눌리는지, 즐겨찾기 같은 보조 행동이 따로 있는지를 명확히 해야 한다. 카드 전체가 링크처럼 동작하면서 내부에 또 다른 버튼이 여러 개 있으면 사용자는 어느 영역이 어떤 행동을 일으키는지 헷갈린다.

실무에서는 카드를 만들기 전에 이 네 가지를 먼저 정리하면 좋다.

• 카드에서 가장 먼저 보여야 할 정보는 무엇인가

• 카드 하나당 주된 행동은 몇 개인가

• 정보가 길어질 때 무엇을 줄이고 무엇을 남길 것인가

• 목록 안에서 카드끼리 비교가 쉬운가

카드는 예쁘게 만드는 것보다, 반복될 때도 흐트러지지 않게 만드는 것이 더 어렵다. 서비스가 커질수록 카드 안에 담고 싶은 정보는 계속 늘어나기 때문이다. 그래서 카드 패턴은 처음부터 욕심을 덜어낸 구조로 만드는 편이 오래 간다.

모달은 집중을 돕기도 하지만 흐름을 끊기도 한다

모달은 사용자의 주의를 현재 작업에 집중시키는 강력한 도구다. 삭제 확인, 권한 안내, 간단한 옵션 선택, 빠른 수정처럼 본문 맥락을 크게 벗어나지 않는 작업에는 꽤 유용하다. 화면을 완전히 이동하지 않아도 되기 때문에 속도감도 있다.

문제는 모달이 너무 쉽게 남용된다는 점이다. 팀 입장에서는 새 페이지를 만들지 않아도 되니 편하다. 하지만 사용자 입장에서는 흐름이 갑자기 끊기고, 배경 화면과 현재 작업의 관계가 모호해지며, 닫았을 때 어디로 돌아가는지 불안해질 수 있다. 특히 모바일에서는 공간이 좁아 모달 안에 또 다른 스크롤이 생기거나, 키보드가 올라오면서 내용이 가려지는 문제가 자주 생긴다.

모달 패턴이 유효하려면 몇 가지 조건이 필요하다. 우선 작업이 짧고 분명해야 한다. 둘째, 닫아도 큰 손실이 없어야 한다. 셋째, 사용자가 지금 무엇을 결정하는지 제목과 본문만 보고 이해할 수 있어야 한다. 넷째, 확인과 취소의 차이가 명확해야 한다.

반대로 이런 상황이라면 모달보다 독립된 화면이 나을 가능성이 크다.

• 여러 단계를 거쳐야 하는 작업일 때

• 긴 설명이나 비교가 필요할 때

• 입력 항목이 많을 때

• 저장 여부, 이탈 위험, 다음 단계가 복잡할 때

모달은 작아서 쉬운 것이 아니다. 작기 때문에 더 엄격하게 써야 한다. 사용자의 집중을 빌려오는 대신, 빠르게 끝내줄 책임이 있다.

탭은 정리의 도구지만 숨김의 도구가 되어서는 안 된다

탭은 비슷한 성격의 정보를 나란히 두고 전환할 때 유용하다. 예를 들어 "상품 정보 / 리뷰 / 문의"처럼 서로 다른 내용을 한 공간에서 번갈아 보는 데 잘 맞는다. 설정 화면에서도 "계정 / 알림 / 보안"처럼 같은 수준의 항목을 구분하는 데 효과적이다.

하지만 탭이 남용되면 중요한 정보가 숨어버린다. 화면이 복잡하다는 이유로 일단 탭을 늘려놓고 보면, 실제로는 사용자가 탭의 존재 자체를 놓치는 경우가 많다. 특히 모바일에서는 탭 수가 많아지면 일부가 화면 밖으로 밀리고, 사용자는 스와이프 가능한지조차 모를 수 있다.

좋은 탭 패턴은 같은 수준의 내용만 묶는다. 하나의 탭은 상세 내용이고 다른 탭은 설정이며 또 다른 탭은 결제 버튼이라면 정보 구조가 섞인 것이다. 탭은 콘텐츠 전환 장치이지, 아무 요소나 우겨 넣는 서랍이 아니다.

탭에서 중요한 것은 현재 위치를 명확히 보여주는 것이다. 선택된 탭이 충분히 드러나야 하고, 전환 후 콘텐츠 변화가 즉시 이해되어야 한다. 탭을 눌렀는데 화면 변화가 미묘하면 사용자는 제대로 작동했는지 의심한다. 또한 탭마다 콘텐츠 양이 지나치게 다르면 어떤 곳은 비어 보이고 어떤 곳은 과밀해져 구조적 불균형이 커진다.

실무에서는 탭을 쓰기 전에 한 번 더 물어볼 필요가 있다. 이 정보들은 정말 동등한 수준인가. 사용자가 서로 비교하며 오갈 가능성이 높은가. 중요한 내용을 굳이 숨기고 있는 것은 아닌가. 탭은 많을수록 정교해지는 것이 아니라, 적을수록 선명해진다.

익숙한 패턴을 써야 하는 이유

많은 팀이 차별화를 원한다. 그래서 버튼 모양을 특별하게 만들고, 내비게이션 방식을 독창적으로 바꾸고, 카드 인터랙션에 새로운 장치를 넣고 싶어 한다. 물론 새로운 시도는 필요하다. 하지만 사용성이 중요한 제품일수록, 새로움은 조심스럽게 다뤄야 한다.

사용자가 이미 다른 서비스에서 수없이 학습한 패턴은 강력하다. 장바구니 아이콘, 하단 탭 바, 드롭다운 선택, 검색창, 뒤로 가기, 좋아요 버튼 같은 요소는 설명 없이도 빠르게 이해된다. 이것은 평범함의 문제가 아니라 인지 비용의 문제다. 익숙한 패턴을 쓰면 사용자는 기능을 배우지 않고 목적에 집중할 수 있다.

특히 금융, 커머스, 생산성 도구, B2B SaaS처럼 과업 중심의 서비스에서는 학습 비용이 낮을수록 좋다. 사용자는 제품의 창의성보다 예측 가능성을 원한다. 이체를 하거나, 일정을 등록하거나, 비용을 청구하거나, 계약서를 검토할 때는 "새로운 경험"보다 "실수하지 않는 경험"이 더 중요하다.

익숙한 패턴은 개성을 포기하라는 뜻이 아니다. 브랜드의 말투, 시각 스타일, 미세한 인터랙션, 정보 구성 방식에서는 충분히 차별화할 수 있다. 다만 사용자의 기본 기대를 깨뜨리는 방식으로 차별화하면, 인상은 남을지 몰라도 사용성은 흔들리기 쉽다.

새로운 UI 패턴은 왜 위험한가

새로운 패턴이 항상 나쁜 것은 아니다. 문제는 대부분의 새로운 패턴이 "정말 더 나아서"가 아니라 "달라 보이기 위해서" 도입된다는 점이다. 팀 내부에서는 신선하고 현대적으로 보일 수 있다. 하지만 사용자는 그런 의도를 이해하지 않는다. 사용자는 그저 빨리 끝내고 싶다.

예를 들어 버튼처럼 보여야 할 요소가 카드처럼 생겨 있고, 카드처럼 보이는 요소가 실제로는 토글이며, 토글처럼 보이는 것이 다음 화면으로 이동하는 구조라면 시각적 재미는 있을지 몰라도 행동 예측은 어려워진다. 특히 처음 쓰는 사용자는 한 번 더 생각하게 되고, 이 한 번의 멈춤이 누적되면 전환과 만족도를 동시에 깎아먹는다.

새로운 패턴을 도입해야 한다면 최소한 세 가지를 확인해야 한다. 첫째, 기존 패턴보다 분명히 나은 문제가 해결되는가. 둘째, 처음 쓰는 사용자가 설명 없이도 이해할 수 있는가. 셋째, 제품 전체로 확장했을 때도 일관되게 운영할 수 있는가. 이 중 하나라도 불안하다면, 새로운 패턴은 실험용 시안으로는 흥미로울 수 있어도 실제 제품의 기본 패턴이 되기에는 위험하다.

혁신은 낯설게 만드는 능력이 아니라, 더 적은 노력으로 더 큰 가치를 주는 능력이다. 패턴도 마찬가지다.

패턴 라이브러리는 디자이너의 편의가 아니라 팀의 공용 언어다

패턴 라이브러리라고 하면 많은 사람이 Figma 파일 안에 정리된 컴포넌트 목록을 떠올린다. 물론 그것도 일부다. 하지만 진짜 중요한 것은 시각 파일보다 규칙의 공유다. 어떤 버튼이 주 버튼인지, 입력 오류는 어떻게 보여주는지, 빈 상태에서는 어떤 구조를 쓰는지, 카드 안에는 무엇을 넣고 무엇을 넣지 않는지를 팀이 같은 언어로 이야기할 수 있어야 한다.

좋은 패턴 라이브러리는 화면을 빠르게 만드는 도구이면서, 동시에 논쟁을 줄이는 장치다. 매번 "이번엔 버튼을 둥글게 할까 네모나게 할까"를 논의하는 대신, "이 행동이 주 행동인가 보조 행동인가"를 먼저 이야기하게 만든다. 그 순간 논의의 수준이 취향에서 목적 중심으로 올라간다.

작은 팀이라고 해서 거대한 시스템이 꼭 필요한 것은 아니다. 오히려 처음에는 가볍게 시작하는 편이 낫다. 자주 쓰는 버튼 유형, 입력 상태, 카드 템플릿, 모달 구조, 탭 규칙 정도만 합의해도 품질이 빠르게 안정된다. 중요한 것은 문서의 양이 아니라 반복되는 의사결정을 줄이는 정도다.

패턴 라이브러리를 만들 때 실무적으로 꼭 남겨야 하는 것은 다음과 같다.

• 이 패턴은 언제 쓰고 언제 쓰지 않는가

• 기본 상태 외에 어떤 상태가 있는가

• 콘텐츠 길이, 오류, 비어 있음 같은 예외에서 어떻게 동작하는가

• 개발과 운영 단계에서 무엇이 자주 깨지는가

이 기준이 있어야 라이브러리가 그림 모음집이 아니라 실제 제품 운영 도구가 된다.

일관성은 똑같음이 아니라 예측 가능성이다

일관성이라는 말을 들으면 모든 화면을 똑같이 만들어야 한다고 오해하기 쉽다. 하지만 진짜 일관성은 형태의 복제가 아니라 기대의 안정성에 가깝다. 사용자가 비슷한 상황에서 비슷한 결과를 예상할 수 있어야 한다는 뜻이다.

예를 들어 버튼의 크기는 화면마다 조금 달라질 수 있다. 카드 안의 정보도 맥락에 따라 달라질 수 있다. 모달의 제목이나 탭의 수 역시 기능에 따라 달라질 수 있다. 하지만 주 행동은 늘 가장 강하게 보이고, 오류는 언제나 같은 방식으로 알려주며, 선택 상태는 어디서나 비슷하게 드러나야 한다. 사용자가 제품의 언어를 한 번 배우면 다른 화면에서도 통할 수 있어야 한다.

그래서 일관성은 오히려 예외를 다루는 방식에서 드러난다. 평소에는 잘 보이지 않지만, 로딩 중이거나 비어 있거나 실패했을 때 제품의 수준이 드러난다. 어떤 화면은 스피너만 돌고, 어떤 화면은 회색 박스가 뜨고, 어떤 곳은 아무 반응도 없다면 사용자는 같은 제품을 쓰고 있다는 느낌을 받기 어렵다.

좋은 시스템은 정상 상태보다 비정상 상태에서 더 빛난다. 사용자는 일이 잘될 때보다 예상과 다르게 흘러갈 때 더 많은 안내를 필요로 하기 때문이다.

작은 팀에서 바로 적용하는 방법

현실의 팀은 늘 바쁘다. 일정은 촉박하고, 화면은 계속 늘어나며, 사람은 부족하다. 그래서 "언젠가 디자인 시스템을 제대로 만들자"고 미루기 쉽다. 하지만 일관성은 거창한 프로젝트가 아니라 작은 합의에서 시작할 수 있다.

먼저 지금 제품에서 가장 자주 반복되는 화면을 모아보면 된다. 회원가입, 로그인, 목록, 상세, 결제, 설정처럼 핵심 흐름에 등장하는 화면들이다. 그다음 반복되는 요소를 추려보면 금방 패턴 후보가 나온다. 버튼은 몇 종류가 필요한지, 입력 오류는 어떻게 통일할지, 카드에는 어떤 정보 구조를 기본으로 둘지, 모달은 언제까지 허용할지를 정하면 된다.

이 과정에서 중요한 것은 완벽함보다 우선순위다. 모든 것을 한꺼번에 정리하려 하면 오래 못 간다. 반대로 핵심 플로우를 먼저 정리하면 사용자의 체감 품질이 빠르게 올라간다. 특히 전환과 오류율에 직접 영향을 주는 버튼, 입력창, 피드백 메시지부터 다듬는 편이 효과가 크다.

실무에서는 다음 순서가 비교적 잘 작동한다.

• 핵심 플로우에서 반복되는 요소를 찾는다.

• 요소별로 역할과 상태를 정리한다.

• 가장 자주 쓰는 조합부터 컴포넌트로 만든다.

• 실제 화면에 적용하며 예외를 기록한다.

• 예외가 반복되면 새 패턴으로 승격할지 판단한다.

이 순서가 중요한 이유는 처음부터 이론적으로 완벽한 시스템을 만들지 않게 해주기 때문이다. 패턴은 책상 위에서만 만드는 것이 아니라, 실제 화면의 문제를 해결하면서 다듬어져야 한다.

리뷰할 때는 예쁨보다 반복성을 보라

컴포넌트와 패턴을 리뷰할 때 가장 흔한 실수는 개별 화면의 인상만 보는 것이다. "이 카드 멋지네요", "이 버튼이 더 세련돼 보여요" 같은 평가는 나쁘지 않지만 충분하지 않다. 패턴은 한 화면에서 예쁜지보다, 여러 화면에서 버틸 수 있는지가 더 중요하다.

리뷰할 때는 이런 질문이 훨씬 유용하다.

• 이 요소는 다른 화면에서도 같은 역할로 반복될 수 있는가

• 상태가 바뀌어도 사용자가 의미를 놓치지 않는가

• 정보가 늘거나 줄어들 때 구조가 쉽게 무너지지 않는가

• 처음 쓰는 사람도 다음 행동을 예측할 수 있는가

• 개발과 운영 과정에서 유지하기 쉬운가

이 질문을 통과하지 못하면, 지금 당장은 근사해 보여도 곧 예외가 쌓이고, 화면마다 변형이 늘어나며, 결국 일관성이 무너진다. 반대로 조금 덜 화려해 보여도 반복성과 예측 가능성이 높다면 제품 경험은 오히려 더 좋아진다.

좋은 패턴은 사용자를 덜 공부하게 만든다

사용자는 제품을 공부하고 싶어 하지 않는다. 필요한 일을 끝내고 싶어 할 뿐이다. 컴포넌트와 패턴의 가치는 바로 여기서 드러난다. 잘 설계된 버튼은 설명 없이도 눌리며, 좋은 입력창은 실수해도 금방 회복하게 만들고, 정리된 카드는 비교를 쉽게 하며, 절제된 모달은 흐름을 끊지 않고, 명확한 탭은 내용을 숨기지 않는다.

결국 패턴화의 목적은 화면을 공장처럼 찍어내기 위해서가 아니다. 반복되는 경험을 안정시키기 위해서다. 제품이 커질수록 사람은 늘고, 기능은 많아지며, 예외는 복잡해진다. 이때 팀을 지켜주는 것은 뛰어난 감각보다 검증된 약속이다.

브랜드의 개성은 중요하다. 하지만 사용자가 길을 잃는 개성은 오래 사랑받기 어렵다. 먼저 필요한 것은 화면마다 바뀌지 않는 신뢰다. 버튼은 버튼답고, 입력창은 입력창답고, 카드는 카드답고, 모달은 모달답고, 탭은 탭답게 작동해야 한다. 그 단단한 기본 위에서야 비로소 스타일도 살아난다.

좋은 제품은 새로운 화면을 계속 만들면서도 낯설지 않다. 그 이유는 간단하다. 보이는 것이 반복되기 때문이 아니라, 이해하는 방식이 반복되기 때문이다. 바로 그 반복을 설계하는 일이 컴포넌트와 패턴의 본질이다.