디자인 컴포넌트를 기능중심적으로 이해해야 하는 이유
디자이너라는 직업이 과거에는 시각화에 더 초점을 맞춘 직업이기도 했거니와, 디자이너에게 전략과 기획적인 역량이 중시되는 현 시점에서도 우리가 산출해야할 최종적인 결과물은 시각적 지표입니다. 시각 요소를 직접적으로 다룬다는 직업적 특성 때문인지 하나의 컴포넌트나 전체 인터페이스를 볼 때 여전히 시각적인 형태에 기반한 사고를 하며 잘못된 방식으로 사용을 하는 케이스를 많이 보았고 과거의 저 역시 그랬던 적이 있었습니다.
본론으로 들어가자면 저는 시각적인 형상을 취하고 있는 이 친구들을 단지 시각적인 관점으로만 바라봐선 안 된다고 생각하는 입장이에요. 오늘 작성하는 본 글에서 컴포넌트를 적재적소에 맞게 잘 사용하는 역량을 기르고 디자인 시스템에 대한 이해도 향상을 위해 다른 관점의 사고로 이들을 바라봐야 하는 이유에 대해 얘기를 나누고자 합니다.
제품은 대개 용도와 기능으로 기억된다.
맥락을 이해하기 쉽도록 우선 제가 숟가락을 하나 준비해서 이걸로 비유를 하려고 해요. 이걸 분해하여 숟가락을 이루는 요소들이 무엇인지 한 번 간단하게 설명드리고자 합니다.
숟가락이 좀 크죠..? ㅎㅎㅎ숟가락은 크게 두 갈래로 구조를 나눌 수 있는데 사용자가 손으로 쥐고 사용하기 용이하도록 길다랗게 설계된 손잡이 부분과 대상을 떠서 먹을 수 있도록 하기 위한 머리 부분으로 크게 나눌 수 있겠습니다. 숟가락이 무엇인지 모르시는 분들은 없을 거에요. 손으로 먹기 어려운 밥이나 국 등을 떠먹는 데 사용하는 물건이라고 누구나 떠올릴테죠. 숟가락의 손잡이 부분을 연상하고 이를 설명할 때 ‘손잡이는 길다랗고 평평한 형태이고..’ 식으로 구구절절 서술할 사람은 없지 않을까요?
이 숟가락이라는 예시 뿐만 아니라 모든 물건은 각자의 명확한 쓰임이 있으며 인간은 이 하나의 도구, 혹은 이 도구에 포함된 각 요소들이 필요한 때를 스스로 인지하고 상황에 맞게 사용하기 때문에 결국 물건은 형태보다는 쓰임새와 용도로 기억되는 것이 일반적입니다. 아무래도 디지털 환경에서 접할 수 있는 서비스들 또한 일종의 제품으로 불리는 것이 최근의 추세이니 만큼 이 제품군들을 이루는 디자인 컴포넌트 요소들 역시 자연스럽게 기능중심적인 관점으로 바라보았으면 좋겠습니다. UI 컴포넌트는 단순한 그래피컬한 형태만을 띄는 오브젝트에 지나기만 하는 것이 아니기 때문입니다. 유저가 제품을 통해 이루고자 하는 목적을 온전히 달성할 수 있도록 기능을 담아낸 요소이자 그 목적 달성을 위해 가장 먼저 만나게 될 접점이라는 것을 간과해선 안 되는 것이죠.
19세기 ~ 20세기 초반에 활동한 미국의 건축가인 루이스 설리번이 언급한 디자인 원칙이 있습니다. 바로 <Form follows function> 이라는 구절인데 직역하자면 형태는 기능을 따른다 라는 의미입니다. 저는 이 구절이 비단 건축 디자인에서만 통용되는 것이 아니라 인간 중심의 모든 디자인 제품에 적용할 수 있다고 믿는데요. 디자인의 아름다움은 기능에서 기인하는 것이며 모든 형태는 기능을 고려한 끝에 집약된 결과물 이라는 것이죠.
이런 걸로 밥 먹는다고 생각하니 진짜 끔찍합니다.간단한 예시를 위해 위에서 소개드린 숟가락을 다시 한 번 가져왔습니다. 이번엔 숟가락의 손잡이 부분이 아주 짧은 모양새를 취하고 있다고 가정을 해보죠. 숟가락이 이렇게 생기면 결국 ‘사람의 손으로 쥘 수 있다’ 라는 기능을 취할 수 없는 물건이 되어 아무런 쓸모가 없어지게 되지 않을까요? 결국 저는 루이스 설리번과 마찬가지로 기능에 대한 정의를 먼저 잘 다져놓아야 이에 합당한 좋은 형태가 나올 수 있다고 생각합니다.
기능을 알아야 오류를 방지한다.
서두에서 제가 언급했던 제 얘기처럼, 그 형태가 유사하여 겉으로만 보았을 땐 '얘넨 동일한 개념이 아닌가?' 싶은 친구들을 예시로 보여주고자 합니다.
사진 속의 Chips와 Button 컴포넌트가 아무래도 비슷하게 생긴 형태이고 눌러야 한다는 조건 자체가 동일하기 때문에 제가 응애였던 대학 시절에 헷갈렸던 대표적인 사례입니다. 알만한 분들은 다들 아시겠지만 이 둘은 사실 눌러서 작동시킨다는 액션만 동일할 뿐 컴포넌트가 언제 쓰이는지, 액션을 통해 이루고자 하는 목적이 무엇인지는 완전히 다른 것이죠. '과정보다 결과가 중요하다' 라는 말은 모두가 아실테죠? 과정은 액션을 의미하고, 결과는 액션을 통해 제품이 작동되는 것이라고 생각하시면 됩니다. 우리는 이 결과에 집중해야 합니다.
여러 컴포넌트를 배치하여 하나의 페이지를 그린다고 가정해 봅시다. 우리는 UI를 그릴 때 당연히 아무 생각 없이 그리지 않습니다. 요소가 언제/어떻게 사용되는 것인지, 작동 시 어떤 것이 일어나는지, 어디에 배치 되는지, 별도로 배리에이션 된 상태 값이 있는지, 사용 시 주의해야 할 사항이 있는지 등… 하나의 요소를 그리더라도 우리는 이처럼 많은 케이스와 변수를 생각할 수 밖에 없습니다. 이에 따라 고객이 다음 태스크로 넘어갈 수 있도록 하는 것이 목적인 Button과 특정 정보와 연관된 리스트를 보여주거나 고객이 선택한 조건을 필터링해주는 데에 쓰이는 Chips는 서로 다른 기능을 취하는 요소들이기 때문에 각각 다른 것을 고려할 수밖에 없을 것입니다. 이걸 고려하지 않으면 제품에 오류가 생겨서 올바르게 작동하지 않을 수 있기 때문이죠.
‘제품의 올바른 작동’ 이라는 목적은 개발자의 관점에서도 생각해 봄직 한데, 개발자는 기획자와 디자이너가 산출해낸 아이디어를 실제 제품으로 구현해 주는 중추의 역할을 하며 결국 이들의 궁극적인 목표는 제품과 기능이 온전히 작동되도록 하여 시장에 릴리즈 하는 거에요. 이 과정에서 자연스레 디자이너와 개발자는 떼려야 뗄 수 없는 사이가 되는 거고요. 이에 따라 누군가에겐 애석한 사실이 될 수 있겠지만 개발자의 입장에선 디자이너가 온 감각을 투여해서 특정 형태를 시각적으로 잘 만드는 행위,, 즉 그들에겐 심미성이 중요하지 않다는 겁니다. 심미적으로 형태를 잘 짜놓기만 했다고 그것이 제품의 올바른 작동을 보장하는 게 아니니까요.
또한 모바일의 시대가 도래한 후 이미 디지털 제품이 한참 전부터 상용화됨에 따라 어떤 상황에서 어떤 인터페이스를 사용하는 게 적합할지 어느 정도 정형화된 부분이 없지 않아 있습니다. 개발자 분이 프로덕트 개발 경험이 다수 있으신 분이라면 당연히 그들도 이러한 표준적인 패턴을 알고 있을 가능성이 클 것이고 우리가 상황에 맞지 않는 컴포넌트를 사용해서 개발에 넘길 경우 그들 입장에서 물음표가 발생할 수 있을 테죠. 때문에 제품이 작동되는 Logic을 잘 파악하고 이에 걸맞은 요소를 사용하는 것, 각 기능에서 파생될 수 있는 유즈 케이스까지 먼저 체크하는 자세를 갖춘다면 개발자 입장에서도 한결 좋을 거에요. 기능의 올바른 작동을 도모한다는 미션의 핏이 서로 맞춰지니 그만큼 일하기도 수월해지는 겁니다.
참고해보면 좋은 것들
사실 타 기업의 디자인 시스템만 살펴보아도 UI들이 사용되는 동향을 파악하는데 문제는 없습니다. 그 중에서도 특히 남다른 의미가 있는 사이트들을 두 가지 정도 가져와봤는데 참고하시고 도움이 되셨으면 좋겠습니다.
Component Gallery (https://component.gallery/)
대중적으로 많이 사용되는 컴포넌트들이 무엇이 있는지 잘 정리되어 있는 사이트입니다.
아무래도 제품의 유형에 따라 사용 되는 UI가 있고, 없을 수도 있기 때문에 하나의 기업의 디자인 시스템만 봐서 모든 종류의 컴포넌트에 통달하는 데에 무리가 갈 순 있는데 본 사이트는 디지털 환경에서 주로 보이는 거의 모든 유형의 컴포넌트들을 한데 모아놨다는 점에서 강점이 있다고 봅니다. 단순히 컴포넌트 리스트들만 나열한 게 아니라 각각이 무얼 의미하는지, 어떻게 사용되는지 잘 설명이 되어 있고 각 컴포넌트들이 정리된 여러 기업의 디자인 시스템 예시들까지 제공해 주어 강력히 추천드리고 싶은 사이트입니다.
Material Design (https://m3.material.io/)
흔히들 디자인 시스템계의 바이블이라고 말하는 그 유명한 머티리얼 디자인 시스템입니다. 타사의 디자인 시스템에 비해 머티리얼이 압도적인 이유는 제품의 스코프가 방대하여 그만큼 자료가 많은 것은 물론이고 컴포넌트의 정의, 유형, 맥락, 인터랙션 등.. 정말 사소한 것 하나 놓치지 않고 꼼꼼하게 정리 되어 거의 논문을 방불케 한다는 거에요. 머티리얼만 잘 읽어도 컴포넌트의 이해도 습득은 물론이고 디자인 시스템을 다루는 총체적인 노하우까지 얻을 수 있기 때문에 디자이너라면 반드시 참고해야 할 사이트라고 생각합니다.
마치며
우리가 어떤 사람입니까? 인간이 겪을 좋은 UX를 설계하는 사람 아니겠습니까? 기능이 올바르게 작동되도록 하는 건 좋은 User Experience의 가장 기본이 되는 조건입니다. 때문에 우리가 이걸 잘 다룰 줄 아는 것만으로도 제품을 이용하는 유저들 입장에서 긍정적인 경험이 될 수 있음은 물론 제품을 만들기 위해 내부에서 함께 고군분투 하는 동료들도 한결 편리해질 수 있다는 것을 염두 하시면 좋을 것 같습니다. 고객과 동료 양 쪽 모두의 UX를 고려하는 훌륭한 디자이너가 되는 거죠. 때문에 본 내용 역시 인간 중심으로 생각하는 UX의 근간에 입각한 관점으로도 바라봐주시면 좋을 것이라고 생각해요.
