main-image
[디자인사이트 12월호] 훌륭한 디자인 시스템 예시 : TOP 8
2021년 9월 23일작성
881 명 읽음

Airbnb 및 Uber와 같은 많은 회사들이 이미 그들만의 고유한 디자인 시스템을 전환하여 사용하고 있습니다. 

특히 글로벌 규모로 운영되고 있는 브랜드의 경우에는, 업계 내의 끊임없는 혁신으로 경쟁사와 차별화하고 사용자 환경을 개선하는 데 있어 디자인 시스템은 필수적인 요소입니다. 

반복 및 재사용 가능한 구성요소를 최대한 활용하여 워크플로우에서 디자인 시스템을 만든 브랜드들은 팀 간의 속도, 영감 및 효율성을 높일 수 있습니다. 

유의할 점은 패턴 라이브러리나 코드 및 UI 요소 모음만 있다고 해서 완성된 디자인 시스템으로 취급되지 않는다는 것입니다. 디자인 기본적인 측면에서 종합적인 디자인 시스템에는 더 많은 것들이 있으니까요. 

즉, 일반적인 디자인 시스템에 대해 자세히 알아보고, 추가 영감을 위한 성공과 가치를 창출하기 위해서 이미 디자인 시스템을 활용하고 있는 다른 기업들의 몇 가지 훌륭한 예시들을 확인해 보도록 하겠습니다. 

디자인 시스템이란 정확히 무엇인가요? 

디자인 시스템은 디자인 회사가 가질 수 있는 모든 UI 리소스 모음을 제공합니다. 여기에는 필요한 코드, 문서, 페이지 스크린숏 및 이미지 예제, 디자인 지침, 관련 도구, 문서 및 기사, 스타일 가이드, 재사용 가능한 구성 요소 및 철학, 기타 전반적인 웹 디자인 워크플로우에 유용한 모든 디지털 자산들이 포함됩니다. 

그런 다음 이러한 디자인 시스템은 온라인 웹 사이트로 호스팅 되며 브랜드에서 결정하는 대로 공개 및 내부 요소가 될 수 있습니다. 

디자인 시스템은 적용 가능한 지침들과 예제, 스타일 가이드 및 코딩 지침, 그리고 UI 키트의 일부로서 동시에, 귀중한 문서 역할을 하는 방대한 데이터 라이브러리라고 생각할 수 있습니다.

기업들은 왜 디자인 시스템을 만들고 있나요? 

개발자, 디자이너, 엔지니어, 제품 관리자 등 회사 제품 팀의 모든 구성원이 함께 모여 로고, 색상, 언어 및 코드에 이르기까지 디지털 프로덕트 자산의 기존 부분을 논의하고 매핑합니다. 그런 다음, 아 궁극적인 마스터플랜을 작성하기 위해 협업하고 사물을 정확히 어떻게 제시되어야 하는지(디자인 및 코딩) 설명합니다. 

이러한 방식을 채택하면 모든 팀들은 시각적 참조, 도구, 기사, 패턴 및 데이터 라이브러리에 대한 하나의 완전한 출처 소스(*디자인 시스템이 업계에서 단일 정보 소스라고 불리는 이유가 있음.)를 갖게 됩니다. 이를 통해 작업이 일관화되고 균일하게 유지되기 때문에 모든 단일 구성 요소를 동일한 페이지에 표시할 수 있습니다. 이는 디자인 시스템의 궁극적인 목표입니다. 

디자인 시스템의 사용 방법 및 구현 요소입니다. 

디자인 시스템을 구현하고 개발하는 경우, 개발자는 재사용 가능한 구성요소 및/또는 라이브러리에서 복사하는 데 필요한 모든 것들이 있을 때, 반복적인 코드 조각에 시간을 낭비할 필요가 없어집니다. 

마찬가지로, 디자이너는 디자인 프로세스의 속도를 높이기 위해 색상, 로고, 머리글, 바닥글 및 기타 필수 기호와 같은 표준 디자인 및 UI 요소 라이브러리가 존재하기에, 처음부터 다시 새로 랜딩 페이지를 디자인할 필요가 없습니다. 

또한 마케터들은 시스템에 필요한 모든 것이 있을 때, 뉴스레터의 어조와 템플릿을 반복적으로 작업할 필요가 없어집니다.

디자인 시스템에서 무엇을 배울 수 있을까요? 

대부분의 디자인 시스템은 일반적인 설정 패턴(Setup Patterns)을 따르고 있습니다. 
디자인 시스템은 종종 주요 카테고리와 함께 상위의 전개 기능을 제공하는 경우가 있습니다. 디자인, 코드, 언어, 구성 요소 같은 것들입니다. 

이러한 각 주요 카테고리에는 아토믹 디자인 구조(*Atomic Design Structure)를 최대한 활용하여 보다 자세히 의논할 수 있는 하위 카테고리들이 나타납니다. 예를 들어 볼까요, 타이포그래피, 색상, 양식, 배너 등이 하위 카테고리가 될 수 있겠네요. 

이 직관적인 전개 구조에 따르면 디자인 측면에서 모범 사례에 대한 귀중한 정보를 얻을 수 있을 것 같습니다.


최신 아티클
thumbnail
[크리에이터 인터뷰] 고민을 해결하는 디자인, 빨간공 크리에이터
인터뷰 요약빨간공 크리에이터님은 대학생 시절, 디자인 실력 향상과 재정적 목표 달성을 위해 툴디 크리에이터로 참여했습니다.비주얼 브랜딩과 모션 그래픽 디자인에 강점이 있으며, 디자인을 통한 고객 문제 해결에 큰 가치를 느낍니다.툴디의 창작 리워드 시스템을 통해 지속적인 동기부여를 받고 있으며, 앞으로도 창작자들에게 더 큰 가치를 제공하고자 합니다. ​ 창작의 세계에서 빛나는 빨간공: 툴디 크리에이터의 여정 이제, 본격적으로"빨간공" 이라는 브랜딩에 집중하려고 해요! 창작의 세계에서 자신만의 색깔을 찾아가는 여정은 늘 새롭고 도전적입니다. 창작자로서 콘텐츠의 품질에 대한 고민, 그리고 고객과의 끊임 없는 소통을 통해 세상이 필요한 디자인을 만들어 내는 것이 중요한데요!오늘은 이러한 관점에서 끊임 없이 고민하는 크리에이터분과 이야기를 나누고자 합니다.​바로, 눈에 띄는 빨간공처럼 독특한 디자인으로 툴디 크리에이터 생태계에 자리 잡은 빨간공 크리에이터님의 이야기입니다.​​​Q. 툴디에 거주하시는 많은 창작자에게 자기 소개를 부탁드릴게요!​안녕하세요, 여러분. 저는 일상의 단조로움 속에서도 눈에 띄는 빨간공처럼, 독특하고 개성 있는 디자인을 추구하는 크리에이터, 빨간공입니다. 저는 현재 툴디에서 '수퍼브 크리에이터'로 활동 중에 있어요! 운이 좋게도 저는 툴디가 세상에 나온 지 얼마 되지 않아 합류하게 되었는데요! 툴디 크리에이터팀과 계속 소통하며 창작활동을 해 온 결과, 감사하게도 수퍼브 크리에이터로 활동할 수 있게 되었습니다!​저는 툴디 생태계에서 한 가지 달성하고자 하는 목표가 있어요! 아무래도 많은 분들이 디자인에 대해 두려운 마음을 가졌을 거라고 생각해요. 그런 분들을 위해 저의 콘텐츠로 여러분의 창작 활동에 실질적인 가이드와 영감을 제공하는 것이 큰 목표입니다. 이를 통해 툴디 안에서 만들어지는 모든 창작 과정에 즐거움과 가치를 더하고 싶어요!​ 세련된 빨간공님의 워크스테이션, 보이는 템플릿은 인기가 많은 햄버거 템플릿?!​​Q. 그렇군요! 툴디 서비스 초반에 합류하게 된 결정적 계기가 궁금해요!​사실 제가 툴디 크리에이터로 활동을 시작하게 된 것은 대학교 디자인과를 휴학하고 있던 시절로 거슬러 올라갑니다. 당시 저스스로 고민이 굉장히 많은 시기이기도 했는데요! 창작 관점에서 보면, 디자인을 통해 제 실력을 한 단계 업그레이드시키고 싶었고, 실력을 쌓아 당시에 마주했던 재정적인 부담을 덜고자 했습니다. 달리 말하면 돈을 벌고 싶었던 마음이 있었어요! (웃음)툴디 서비스를 처음 접하고 크리에이터 생태계에 대해 설명들었을 때 '두 마리 토끼를 다 잡을 수 있겠다!'라는 생각이 강하게 들었고 눈을 떠보니 어느새 툴디 크리에이터로 신청하고 있었어요! 아주 다행스럽게도 저는 현재 툴디 크리에이터로 활동하면서 이 두 마리 토끼를 모두 잡고 있구요, 그 당시 결정이, 지금 돌이켜보면 제 인생에서 가장 현명한 선택 중 하나였다고 자신 있게 말할 수 있습니다.​​Q. 그렇군요! 툴디 서비스 초반에 합류하게 된 결정적 계기가 궁금해요!​사실 제가 툴디 크리에이터로 활동을 시작하게 된 것은 대학교 디자인과를 휴학하고 있던 시절로 거슬러 올라갑니다. 당시 저스스로 고민이 굉장히 많은 시기이기도 했는데요! 창작 관점에서 보면, 디자인을 통해 제 실력을 한 단계 업그레이드시키고 싶었고, 실력을 쌓아 당시에 마주했던 재정적인 부담을 덜고자 했습니다. 달리 말하면 돈을 벌고 싶었던 마음이 있었어요! (웃음)툴디 서비스를 처음 접하고 크리에이터 생태계에 대해 설명들었을 때 '두 마리 토끼를 다 잡을 수 있겠다!'라는 생각이 강하게 들었고 눈을 떠보니 어느새 툴디 크리에이터로 신청하고 있었어요! 아주 다행스럽게도 저는 현재 툴디 크리에이터로 활동하면서 이 두 마리 토끼를 모두 잡고 있구요, 그 당시 결정이, 지금 돌이켜보면 제 인생에서 가장 현명한 선택 중 하나였다고 자신 있게 말할 수 있습니다.​​​ 웹용 콘텐츠부터 인쇄용 디자인까지, 다양한 방면에서 창의적인 템플릿을 제공하는 빨간공 크리에이터​​ Q. 빨간공님의 창작은 정말 다채로운데요! 본인이 생각하는 전문 분야가 있을까요?​저는 현재 비주얼 브랜딩*과 모션 그래픽 디자인** 분야에서 활동하고 있습니다. 이 두 분야는 제가 창작 생활을 하면서 가장 열정을 느끼고, 가장 자신 있어하는 분야입니다.​특히 툴디에서는 비주얼 브랜딩 디자이너로 활동하고 있는 것 같아요! 제가 템플릿으로 작성하여 업로드하는 비주얼 브랜딩을 통해 브랜드의 정체성과 메시지를 시각적으로 전달하는 것에 도움을 드리고 싶습니다. 추후에 툴디 에디터가 더 업그레이드 된다면 정적인 이미지에 생명을 불어넣는 모션 그래픽 콘텐츠를 통해서 더 많은 고객들에게 큰 즐거움을 드리고 싶어요!​ 비주얼 브랜딩*디자인 가이드를 수립하고 로고나 심볼을 만드는 등의브랜드 경험을 설계하는 표현 요소를 개발하는 것​모션 그래픽**움직임(Motion)과 그래픽(graphics)의 합성어로,디지털 이미지에 아이디어를 더해 영상으로 메세지를 전달하는 것​​​​Q. 디자인에 대해 깊은 통찰을 하시는 것 같아요! '디자인'이라는 주제에 대한 빨간공님의 생각이 궁금해요!​디자인에 대한 저의 관점은 점점 시간이 지나면서 크게 바뀐 것 같아요. '진화'하는 쪽으로 말이죠. 과거에는 단순히 눈에 보기 좋은 것, 예쁜 것이 전부라고 생각했었지만, 수많은 외주 프로젝트와 고객과의 협업을 통해 디자인이 단순한 미적 요소를 넘어서는 깊은 의미를 가진다는 것을 깨달았습니다. 디자인은 고객이 직면한 문제를 해결하고, 그들의 목표를 달성하는 데 기여하는 중요한 수단입니다. 이러한 관점에서 디자인은 창의적 해결책을 제시하는 과정이며, 이 과정을 통해 우리는 더 나은 세상을 만들어 갈 수 있습니다. 다행히 디자인에 대한 저의 생각이 툴디팀이 가진 가치와도 비슷한 것 같아 뿌듯해요!​​​Q. 툴디 생태계는 어떤가요? 창작활동에 특히 좋다고 생각하는 것이 있나요?​툴디 크리에이터 생태계에서 단연 돋보이는 것은 다양한 리워드 시스템이 작동하고 있다는 것이죠! 툴디는 정말 크리에이터들의 합당한 수익을 위한 많은 고민을 하는 것처럼 느껴져요!​그 중에서도 저를 가장 매료시킨 것은 바로 '창작 리워드 시스템'입니다. 툴디에서 뗄레야 뗄 수 없는 아주 좋은 제도로 많은 크리에이터분들이 칭찬하는 시스템이죠! 창작 리워드 시스템은 판매를 통한 보상이 아닌 창작을 통한 보상을 제공한다는 점에서 대한민국에서 가장 매력적인 크리에이터 시스템이라고 생각해요! (리워드 시스템 참고)​창작자로서의 제 활동에 대한 직접적인 보상을 제공함으로써, 매일매일 창작에 대한 새로운 동기부여를 부여합니다. 또한 창작자들이 자신의 작업에 더 많은 시간과 노력을 투자하도록 격려하며, 이는 곧 더 높은 퀄리티의 콘텐츠로 이어집니다. 아! 물론 누구나 받는 것은 아닙니다! 툴디에서 깊은 고민과 창작활동을 이어가는 수퍼브 크리에이터 등급이 되셔야 창작 리워드를 받으실 수 있어요!​ 빨간공님의 요소는 다채로운 색상과 입체감으로 많은 사랑을 받고있어요!​ Q. 앞으로 툴디에서 어떤 창작 활동을 보여주실 예정인가요?​최근에 저는 다니던 직장을 그만두고 '빨간공'이라는 브랜드에 집중하기로 결정했습니다. 진정한 디지털 노마드, 창작가로써 새로운 한 발을 내딛었죠! 여유가 많아진만큼 이를 통해 제가 제공할 수 있는 콘텐츠의 범위를 확장하고, 퀄리티를 높이는 데 집중하려 합니다.또한, 제 블로그를 통해 툴디를 처음 접하는 분들과 새로운 크리에이터들을 위한 유용한 인사이트와 팁도 공유드릴 예정이에요! 제가 지난 2년 간 툴디에서 활동하며 얻은 경험과 지식을 다양한 분들과 나눔으로써, 우주 최고의 창작자 커뮤니티가 될 그 날까지 기여하고 싶습니다.​​​Q. 앞으로 크리에이터님의 콘텐츠를 활용할 창작자들에게 한 마디 부탁드립니다.​제 콘텐츠를 사용해주시는 모든 창작자 분들께 진심으로 감사드립니다. 저는 매일 크리에이터센터에 접속해 제가 소유한 콘텐츠 사용량을 지속적으로 체크하고 있는데, 꾸준히 사용해주셔서 감사한 마음입니다. 진심으로 여러분의 지속적인 관심과 사용은 저에게 큰 힘이 됩니다.​전 정말 만나보지도 못한 다양한 분들의 창작 여정에 조금이나마 기여할 수 있다는 것에 정말 큰 자부심을 느끼고 있습니다.앞으로도 여러분의 창작 활동에 실질적인 도움이 될 수 있도록, 여러분이 갖고 계신 고민을 더 쉽게 해결해 드릴 수 있도록 다양하고 창의적인 콘텐츠를 꾸준히 제공하기 위해 노력하겠습니다. ​​​​
thumbnail
[새로운기능] 창의적인 툴디 : 생성형 AI 기능 탐험하기
안녕하세요!우주 최고의 디자인 플랫폼, 툴디(tooldi) 입니다!​ 우주 최고의 디자인 플랫폼이 되고자 툴디(tooldi)는 다양한 디자인 경험을 고객 여러분께 제공하고자 지금 이 순간까지도 혁신의 노력을 다하고 있습니다. 누구보다도 신속하고 빠르게 새로운 기능을 보여드리고 싶은 툴디팀은 얼마 전 대담한 발걸음을 내디뎠습니다. 그것은 바로! 생성형 AI(Artificial Intelligence, 인공지능)을 이용한 이미지 제작 기술의 도입니다.​​이미 전 세계적으로 열풍인 AI 기술이 인류를 어떻게 이롭게 할 것인가에 대한 고민이 깊어지고 있는 시기입니다. 오로지 창작자, 그리고 크리에이터 여러분만 주시하고 있는 툴디는 향후 발전하게 되는 AI 기술을 어떻게하면 우리 창작자분들과 크리에이터분들께 유용하게 제공될 수 있을지에 대해서만 고민 중에 있습니다. 이번에 출시되는 생성형 AI 기술은 여러분이 몇 마디의 프롬프트 설명만으로도 전문가 수준의 창작을 진행하실 수 있도록 도와드리며, 이로 인해 다소 높았던 디자인 창작의 장벽을 허물고 여러분의 생각 속 잠재되어 있는 창의력을 새로운 차원으로 끌어 올릴 수 있게 도와드립니다!​​​툴디에서 아주 아름다운 한국적인 여성 모델을 추출해내었습니다!​​​툴디 생성형 AI 기술이란?​생성형 AI 이미지 기술은 창작자가 입력한 텍스트 설명, 즉 프롬프트를 바탕으로 새로운 이미지를 생성하는 인공지는 기술입니다. 이 기술은 복잡한 알고리즘과 대규모 데이터셋을 활용하여 창작자 여러분의 요구 사항을 분석하고 이를 시각적 요소로 변환합니다. 툴디의 이 기능은 친화적인 인터페이스와 결합하여 다소 어려워 보이는 생성형 AI 이미지 기술을 누구나 손쉽게 사용할 수 있도록, 누구나 원하는 이미지를 신속하게 만들어 낼 수 있게 해줍니다.​​​툴디 생성형 AI 사용방법 생성형AI 메뉴는 요소메뉴 아래, 텍스트 메뉴 위에 존재해요!​툴디 접속 : 툴디 웹사이트에 접속하여 로그인합니다. 만약 계정이 없다면 회원가입 또는 퀵로그인 기능을 이용하여 로그인 합니다.에디터 오픈 : 메인 페이지 우측 상단에 '디자인 시작'버튼을 클릭하여 툴디 에디터를 오픈합니다.생성형 AI 메뉴 선택 : 사이드메뉴에서 생성형 AI 메뉴를 클릭 합니다. 해당 메뉴는 요소 메뉴 아래, 텍스트 메뉴 위에 존재합니다.프롬프트 입력 : 머릿속에 그리신 이미지에 대해 간단하면서도 구체적인 설명을 입력합니다. 여기서 간단하면서 구체적인 설명이라함은, 짧은 호흡의 문장을 콤마(,)로 구분하여 최대한 다수 작성하는 것을 말합니다. 예를 들어 [갈색의 고양이의 뒷모습, 평화로운 해변, 일몰을 바라보는 고양이]과 같은 설명 말이죠.스타일 선택 : 예술적 기법 관점에서 해당 이미지가 어떻게 표현되어야 하는지 선택하는 과정입니다. 툴디에는 25가지의 스타일 프리셋이 존재하며 썸네일을 보고 여러분이 원하는 기법의 스타일을 선택하시면 됩니다.비율 선택 : 정사각, 가로형, 세로형 3 가지 비율 중 하나를 선택할 수 있습니다.이미지 생성 버튼 클릭 : 입력한 프롬프트, 설정한 스타일, 선택 비율에 기반해 툴디 AI가 작업을 시작하며, 몇 초 내로 결과물을 제공합니다.수정 : 만들어진 결과물에 추가적인 프롬프트 설명이 필요할 경우, 프롬프트 내용을 보완하여 다시 추출할 수 있습니다.캔버스에 적용 : 완성된 결과물을 클릭하면 캔버스에 삽입됩니다. 생각보다 간단하게 이미지가 추출되었습니다! 툴디에서는 원하는 생성형 AI 이미지를 신속하게 만들어낼 수 있습니다.​​​​툴디 생성형 AI를 창의적으로 활용하는 팁​단문의 반복적인 구체적 설명 사용 : 구체적인 내용을 장문으로 작성하면 AI가 이해하기 힘듭니다! 특히 한국의 언어인 한글체계는 AI가 이해하기 정말 어려운 언어이므로 간단한 설명을 각각 다르게 작성하여 반복하여 설명해주는 편이 좋습니다.스타일 명시 : '스타일 없음'을 선택하는 것보다 내가 원하는 방향의 스타일 프리셋을 지정하는 편이 훨씬 좋습니다. 툴디 AI는 스타일이 지정될 경우 여러분이 작성한 프롬프트보다 더 앞선 것을 결과물로 보여줄 수 있습니다!반복적인 시도 : 툴디 AI가 이미지에 대해 더 많은 탐구를 할 수 있도록 반복적 시도를 해보세요! 월에 제공되는 무료 사용횟수를 모두 소진하셨다구요? 툴디 Pro를 구독하시면 엄청나게 많은 사용 횟수를 제공해 드립니다 >>> 더 많은 생성횟수를 얻으려면?! : 툴디 Pro 구독하러 가기​생성형 AI 이미지 추출에서 프롬프트 작성은 정말 중요하죠!​활용사례​소셜미디어 콘텐츠 : 소셜미디어에 독특하고 매력적인 생성형 AI 이미지가 삽입된 템플릿을 만드세요! 툴디에는 인스타그램, 유튜브, 페이스북 등 다양한 형태의 템플릿 사이즈를 제공하고 있습니다.초상권이 해결된 모델 이미지 : 초상권, 저작권에서 자유로운 모델 이미지를 제작하세요! 여러분의 제품을 더욱 돋보이게 만들어 줄 수 있습니다.개인 프로젝트 : 소설, 삽화, 개인블로그 이미지, 커스텀 선물카드 디자인 등 다양하게 활용해 보세요!​ ​지금 에디터를 열고 툴디 생성형 AI 기능을 바로 사용해 보세요! >>>바로 사용하기​​​