디자인 시스템
디자인 시스템이 당신의 작업을 더 나아지게 하고 있나요?
작업 속도는 더 빨라지고, 일관성이 높아졌으며, 품질이 향상되었나요?
글의 개요
1. 속도
2. 일관성
3. 품질
이 글은 아래의 블로그를 요약하며 저만의 생각을 기록한 내용입니다.
디자인 시스템의 깨진 약속들(The broken promises of design systems)
매년 Figma에서 개최하는 Config에서 올해(2024)의 Config 영상 중 하나가 좋았어서(해당 영상) 이를 글로 정리하고자 해요.
minnimalism.medium.com
1. 속도 : 속도가 빠른 것이 좋은 것일까?
발표자와 같은 회사 다른 팀원이 특정 페이지를 제작하기로 했다. 발표자는 디자인 시스템을 사용해 약 12분이 걸렸고 다른 팀원은 약 2시간이 걸렸다.
결과는 당연했지만 결과물의 해석은 흥미로웠다.
다른 팀원이 한 결과물은 더 재미있는 UI가 포함됐기 때문이다.
다른 팀원은 2시간 동안 새로운 프로필 전화, 자주 사용하는 버튼 개선, 네트워킹 강조 그리고 하단 목록 간소화를 이뤄냈다.
발표자는 이런 말을 한다.
Great ideas never start with the system.
좋은 아이디어는 절대 시스템에서부터 시작하지 않는다.
그래서 디자인 시스템이 진정으로 좋은 디자인을 위한 도구가 되려면, 디자이너들이 창의적인 탐구를 충분히 할 수 있도록 더 많은 자유를 제공해야 좋은 결과 물이 나올 수 있다.
2. 일관성 : 일관성은 창작자의 창의성을 제한할까?
일관성의 부족은 제품의 신뢰성을 떨어트린다. 당신도 중구남방한 디자인 제품을 보면 이게 같은 브랜드의 상품인지, 서비스인지 의심이 갈 것이다.
만약 당신의 회사에 디자인 시스템이 있다면, 이런 일관성이 떨어지는 현상은 줄어들 것이다.
이와 같은 경험은 뇌의 인지 부담이 감소할 것이며, 사용자가 긍정적인 사용자 경험으로 받아들이기 때문에(시스템1이 작동하기 때문에) 편안함과 안정감을 제공하여 긍정적이 경험을 제공한다. 그 결과 사용자는 앱에 더 집중할 수 있으며 신뢰감을 갖는다.
Consistenct is coming at the cost of commoditization.
일관성은 상품화(획일화)의 대가를 치르게 된다.
그런데, 제품 디자인에서 이와 같은 의문은 중요한 포인트를 남긴다.
그 제품이 어떻게 느껴지는지, 그 제품이 사용자에게 어떤 의미를 전달하는지에 대한 질문과 고민을 품을 수 있다.
일관성과 표현은 동시에 이루어질 수 있다. 우리는 새로운 아이디어를 디자인 시스템 안에서 어떻게 표현할 수 있을지 고민해야 한다. 그래서 디자인 시스템이 단지 기능만 제공하는 것이 아니라 감정과 아이덴티티를 전달할 수 있도록 노력해야한다.
예를 들어 포트,
예를 들어, 라이트 모드 or 다크 모드가 아닌 핑크 모드
이처럼 회사는, 디자이너는, 프로젝트의 팀은 고객과의 감정적 연결을 만들고 그 차이를 남기고 기억에서 유지되는 것이다.
what’s different get’s remembered, and what’s remembered win.
3. 품질 : 무엇이 더 높은 품질 경험을 선사하는가?
품질은 매우 모호한 개념이다.
때로는 Dider Rams의 10가지 디자인 원칙처럼 ‘명확하고 가치 있고 의도적’이라는 정의를 따르기도 하고, Maslow의 욕구 단계 이론처럼 ‘안정성, 성능, 정밀성’ 같은 기준으로 평가되기도 한다. 혹은 제가 좋아하는 또 다른 정의는, 이전 상사였던 Josh가 말한 것처럼, ‘기대치를 초과하는 경험’, 즉 고객이 생각하지 못했던 수준으로 놀라운 경험을 제공하는 것이다.
그러나 여기 중요한 질문이 있다.
‘what role do Design system play in making higher quality experiences?’
‘디자인 시스템이 더 높은 품질의 경험을 만드는 데 어떤 역할을 하는가?’
예시, 프로필 화면에서 디자인 시스템을 이용해서 가장 별로인 프로필 화면을 만들어보는 실험을 했다.
작은 링크들, 전혀 쓸모없는 드롭다운, 그리고 이름을 바꾸는 오픈된 입력 필드가 보이시죠? 물론 이건 어리석은 실험이지만 제가 하고 싶은 말은 바로,
낮은 품질의 제품은 종종 나쁜 시스템 때문이 아니라 나쁜 결정의 결과이다. 왜냐하면, 건축 블록만으로는 충분하지 않기 때문이다. 컴포넌트만으로는 충분하지 않다.
Quality is an outcome of doing the right things.
품질은 올바른 과정을 실행한 결과이다.
발표자는 요리책에서 이러한 해결책을 찾았다.
레시피는 종종 다소 도달하기 어려운 최종 상태를 설정한 다음, 명확한 지침과 필요한 재료를 제공하면서도 약간의 창의적 여유를 준다. 레시피 북이 성공적인 이유는 품질은 곧 ‘올바른 과정을 실행한 결과’이기 때문이다. 그들은 재료만으로 훌륭한 요리를 만들 수 없다는 것을 인식이다.
그럼에도 디자인 시스템은 필요하다?!
퍼즐의 작은 부분들이 품질에 가장 큰 영향을 준다는 확신이 점점 커지고 있다. 예측 가능하고 식별 가능한 규칙들은 제품의 기본 요소, 확장 가능하고 재사용 가능한 실행 및 관리 구조로 구성된다. 이 모든 것이 결합되어 우리만의 ‘운영 체제(OS)’라고 부른다.
팀들이 고품질의 경험을 만들기 우해 피룡한 모든 것을 제공하는 통합적이고 확장 가능한 디자인 시스템이 필요하다. 그렇게 하지 많으면 타 팀에서(특히 큰 회사의 경우) 자기가 원하는 방식으로 디자인을 그려내기 때문이다.
여전히 디자인 시스템이 완전한 해결책이라고 할 수는 없지만, 그럼에도 최선의 대안이 되고 있다.
출처
디자인 시스템의 깨진 약속들(The broken promises of design systems)
매년 Figma에서 개최하는 Config에서 올해(2024)의 Config 영상 중 하나가 좋았어서(해당 영상) 이를 글로 정리하고자 해요.
minnimalism.medium.com
'UI' 카테고리의 다른 글
[UI / 여백의 미 ] 동양미술에서 말하는 '여백의 미'(Feat. white-space ratio) (1) | 2024.12.22 |
---|---|
[ 인지 / LandingPage ] 어떤 메인 UI가 더 편하게 읽힐까?(3개 홈페이지 비교) (1) | 2024.12.18 |
[UI]스켈렉톤 UI = Progress Indicator(Skeleton) (0) | 2024.01.24 |
[ FE/Broswer] Chrome 디버깅 1 : 버튼 (0) | 2024.01.06 |
[setProperty]pseudo class 값 변경하기 at tab UI (1) | 2023.12.13 |