버튼 안의 아이콘은 죄가 없어
벡터 정리나 Flatten이 중요한 게 아니다
피그마에서 버튼 컴포넌트를 만들다 보면 한 번쯤은 이런 순간을 만나게 된다. 아이콘 컴포넌트를 따로 만들고, 그 아이콘을 버튼 안에 넣고, 버튼 색상에 맞춰 아이콘 색도 같이 바뀌도록 설정해 두었는데, 어느 날 갑자기 버튼 인스턴스에서 아이콘을 바꾸자 색상이 전혀 따라오지 않는 상황이다. 어제까지만 해도 잘 되던 게 오늘은 안 되고, 설정을 다시 열어봐도 딱히 잘못 건드린 기억은 없고, 결국 “왜 이러는지 아시는 분 계실까요?”라는 질문을 오픈채팅방에 올리게 된다.
이때 많은 답변이 기술적인 해결책으로 쏟아진다. 아이콘 레이어 이름을 Vector로 맞춰야 한다거나, 그룹을 모두 풀고 flatten 해야 한다거나, 속성이 완전히 동일해야 한다는 이야기들이다. 실제로 그 조언을 하나씩 적용하다 보면 어느 순간 문제는 해결된다. 하지만 이상하게도 비슷한 문제는 얼마 지나지 않아 다시 발생한다. 해결은 했지만, 왜 그런 일이 벌어졌는지는 여전히 명확하지 않은 상태로 남기 때문이다.
이 문제를 단순히 피그마 버그나 툴 숙련도 부족으로 치부하면 다음 단계로 넘어가기 어렵다. 사실 이 현상은 기술 문제가 아니라 컴포넌트를 설계할 때 역할을 어디까지 분리했는지에 대한 결과에 가깝다. 아이콘이 버튼 안에 들어가 있다는 사실만으로, 아이콘이 버튼의 색상 정책을 따라야 할 이유가 자동으로 생기지는 않는다. 피그마는 그렇게까지 친절한 도구가 아니다.
버튼 컴포넌트의 역할은 상태에 따라 배경과 텍스트, 아이콘의 색을 일관되게 제어하는 데 있다. 반면 아이콘 컴포넌트의 역할은 형태를 안정적으로 유지하고 재사용 가능하게 만드는 데 있다. 이 두 역할이 충돌하는 순간이 바로 아이콘 컴포넌트를 버튼 안에 그대로 넣어버렸을 때다. 아이콘이 이미 자기만의 색상 속성을 가지고 있다면, 버튼 입장에서는 그걸 덮어쓸 권한이 없다. 버튼이 시키는 대로 움직이지 않는 아이콘은 말을 안 듣는 게 아니라, 이미 다른 역할을 맡고 있는 상태인 셈이다.
그래서 이 문제를 근본적으로 피하려면 기술적인 트릭보다 먼저 생각해야 할 질문이 있다. 이 아이콘은 정말 독립적인 컴포넌트여야 하는가, 아니면 버튼의 일부로서만 존재해야 하는가라는 질문이다. 모든 아이콘을 무조건 컴포넌트로 만드는 습관은 오히려 시스템을 복잡하게 만든다. 버튼 안에서만 쓰이는 아이콘이라면, 그 아이콘은 버튼의 책임 아래에 있어야 하고, 색상 또한 버튼이 통제하는 것이 더 자연스럽다. 반대로 여러 맥락에서 쓰이는 아이콘이라면, 버튼이 아이콘의 색을 제어하려는 시도 자체가 잘못된 설계일 수 있다.
이 지점에서 많은 디자이너가 헷갈린다. 그러면 재사용성은 포기해야 하느냐는 질문이 뒤따르기 때문이다. 하지만 재사용성과 만능 컴포넌트는 다른 이야기다. 재사용성을 확보한다는 것은 모든 경우의 수를 하나의 컴포넌트에 집어넣는 것이 아니라, 각 컴포넌트가 맡은 책임을 명확히 나누는 데 가깝다. 버튼은 버튼답게, 아이콘은 아이콘답게 행동하도록 만드는 것이 결국 유지보수 비용을 낮춘다.
실무에서 컴포넌트가 무너지는 순간은 대부분 “편하니까”라는 이유로 역할을 흐릿하게 만들었을 때 찾아온다. 처음에는 빠르게 만들 수 있지만, 인스턴스가 늘어나고 팀원이 늘어날수록 그 흐릿함은 오류와 질문으로 돌아온다. 그리고 그 질문은 다시 오픈채팅방에 올라온다. 왜 색이 안 따라오느냐는 질문의 형태로 말이다.
이 글을 읽고 있다면, 다음에 비슷한 문제가 생겼을 때 flatten 단축키부터 누르기 전에 한 번만 더 생각해보면 좋겠다. 지금 이 컴포넌트가 어떤 책임을 지고 있는지, 그리고 그 책임이 다른 컴포넌트와 겹치고 있지는 않은지 말이다. 피그마에서 많은 문제는 기술이 아니라 역할을 다시 정리하는 순간 풀리기 시작한다.
