강의

멘토링

커뮤니티

디자인 · 아트

/

UX/UI

디자인 시스템 - 스타일 파운데이션

스타일 파운데이션은 색상, 간격, 폰트 등 디자인의 기본을 체계화해 작업 시간을 줄이고 결과물의 완성도를 높입니다. UI가 정돈되지 않아 고민하거나 협업에서 일관성을 잃고 있다면, 이 강의를 들어보세요. 초보 디자이너도 실무에 바로 활용할 수 있는 기초와 체계를 배울 수 있습니다.

(4.9) 수강평 8개

수강생 65명

  • DX Lab

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 디자인 시스템의 기초 개념과 중요성을 이해할 수 있어요.

  • 품질을 높이는 스타일 파운데이션의 활용법을 배웁니다.

  • 색상 팔레트를 구성하고 확장하는 컬러 시스템을 익힙니다.

  • 4의 배수, 8의 배수 등 간격 설정 원리를 이해할 수 있습니다.

  • 다양한 디바이스 해상도에 맞춘 이미지 표현법을 배웁니다.

 

스타일 파운데이션

디자인 시스템의 시작, UI 디자인의 핵심

많은 기업이 디자인 시스템을 도입하며 더 나은 제품을 만들어가고 있습니다.

제품은 점점 더 복잡해지고, 팀원들은 다양한 역할과 도구를 사용합니다.

이 과정에서 일관성과 효율성을 유지하는 일이 큰 도전 과제가 됩니다.

디자인 시스템은 이런 문제를 해결하기 위한 강력한 도구입니다.

 

디자인 시스템은 이런 문제를 해결하기 위한 강력한 도구

그 중에서도 핵심은 바로 스타일 파운데이션입니다.

스타일 파운데이션은 색상, 간격, 글꼴 등 가장 기본적인 시각적 언어를 정리하고 통일합니다.

우리가 매일 겪는 협업의 비효율, 디자인의 불일치, 유지보수의 혼란을 줄이고

더 나은 결과를 빠르게 만들어낼 수 있습니다.

이 강의에서는 스타일 파운데이션이 왜 중요한지,

이를 어떻게 활용할 수 있는지를 쉽게 설명해드립니다.

스타일 파운데이션이 없다면?

스타일 파운데이션이 없다면?

엑스아이콘 색상, 간격, 폰트 크기 등이 매번 새로 정의되며 중복 작업이 발생합니다.

엑스아이콘 디자이너, 개발자, 기획자가 다른 기준으로 소통하며 혼란이 커집니다.

엑스아이콘 프로젝트가 확장될수록 일관성을 잃어 사용자가 피로감을 느낍니다.

스타일 파운데이션이 없다면?

스타일 파운데이션이 있다면?

체크아이콘 모든 팀원이 공유된 규칙을 따라 빠르고 정확하게 협업할 수 있습니다.

체크아이콘 디자인이 효율적으로 재사용되며, 유지보수 시간과 비용이 대폭 줄어듭니다.

체크아이콘 제품의 시각적 품질이 한결 같아 사용자가 더 신뢰감을 느낍니다.

체크아이콘 불필요한 반복 작업과 수정에 들이는 시간이 줄어 개발 생산성이 높아집니다.

이런 고민이 있다면, 들어보세요.

고양이아이콘

“왜 2배수, 3배수 이미지를 써야 하는지 모르겠어요.”

높은 DPR 환경에서 이미지를 선명하게 표현하는 방법과 그 이유를 강의에서 상세히 배울 수 있습니다.

고양이아이콘

기준 해상도를 정하는 게 막막해요. 어디를 기준으로 잡아야 할까요?”

다양한 디바이스에 대응하려면 데이터 기반으로 기준 해상도를 설정해야 합니다.

그 과정을 실무 중심으로 알려드립니다.

고양이아이콘

그리드? 어디서부터 시작해야 할지 감이 안 와요.”

그리드의 기본 개념부터 8의 배수를 활용한 그리드 계산법을 알려드립니다.

고양이아이콘

“글자 크기와 행간을 어떻게 설정해야 가독성이 좋아질까요?”

폰트가 작거나 빽빽해 보이면 가독성이 떨어질까 걱정되셨나요?

컨텐츠 유형에 맞는 글자 크기와 적정 행간을 설정하는 방법을 배워보세요.

고양이아이콘

“왜 4의 배수8의 배수로 간격을 설정해야 하는지 모르겠어요.”

하프 픽셀 문제를 해결하고 완성도 높은 디자인을 만드는 법을 배워보세요.

고양이아이콘

디자인 토큰이 뭐고, 왜 필요한지 모르겠어요.”

디자인 토큰이 이해하기 어려우셨나요?

이 강의에서는 디자인 토큰의 개념과 필요성을 쉽게 설명해드립니다.

디자인 시스템, 쉽게 시작하세요.

1

디자인 고민 해결의 실마리를 제공합니다

왜 간격을 4의 배수로 설정해야 하는지와 같은 디자인을 하며 생기는 고민을 명확히 풀어줍니다. 배운 내용을 바로 실무에 적용할 수 있어 시간 낭비 없이 문제를 해결할 수 있습니다.

2

디자인 시스템을 부담 없이 배우기 좋습니다

디자인 시스템이라는 거대한 개념을 "스타일 파운데이션"이라는 핵심 부분부터 배우기 때문에, 처음 접하는 사람도 부담 없이 시작할 수 있습니다.

3

초보자도 이해할 수 있는 쉬운 설명과 예시입니다

복잡하게 느껴질 수 있는 디자인 토큰, 그리드 시스템, 해상도 설정 등을 쉽고 명확하게 설명해 누구나 이해할 수 있습니다. 디자이너뿐 아니라, 기획자나 개발자도 디자인 시스템에 대한 이해도를 높이는 데 도움이 됩니다.

체크아이콘 이론 100%

 자세하게 디자인 시스템에 대해 설명합니다.

체크아이콘 강의 PDF

교재를 제공합니다.

이런 내용을 배울 수 있어요.

Section 1
디자인 시스템
디자인 시스템이란?

1.1 디자인 시스템이란?

디자인 시스템에 대한 알기 쉬운 예시와 설명을 통해 디자인 시스템 개념을 이해할 수 있습니다.

디자인 시스템이란?

1.2 디자인 시스템의 구조

디자인 원칙, 스타일 파운데이션, 컴포넌트 및 패턴 라이브러리, 컨텐츠 가이드라인, 접근성 가이드라인, 디자인 토큰의 역할과 활용 방법을 알 수 있습니다.

Section 2
스타일 파운데이션
디자인 시스템이란?

2.1 스타일 파운데이션이란?

스타일 파운데이션의 개념과 필요성, 그리고 장단점과 지속적인 관리의 중요성을 이해할 수 있습니다.

디자인 시스템이란?

2.2 디자인 토큰이란?

디자인 토큰의 개념과 체계를 이해하고, 디자인 토큰을 왜 사용하는지 예시를 통해 알 수 있습니다.

디자인 시스템이란?

2.3 해상도

해상도의 개념, 논리적 해상도와 물리적 해상도의 차이, DPR의 역할을 이해할 수 있습니다. 기준 해상도 설정법을 배워 다양한 디바이스에 대응할 수 있습니다.

디자인 시스템이란?

2.4 그리드

그리드의 기본 개념을 익히고 그리드 계산법과 다양한 디바이스에서의 활용 방식을 터득할 수 있습니다.

디자인 시스템이란?

2.5 간격

하프 픽셀 문제를 방지하고 일관성 있는 디자인을 구현하기 위한 간격 설정 방법을 배울 수 있습니다.

디자인 시스템이란?

2.6 색

색의 의미와 역할에 대해 이해하고, 컬러 팔레트와 시멘틱 컬러의 구성 방법을 배웁니다.

디자인 시스템이란?

2.7 타이포그래피

타이포그래피의 중요성에 대해 이해하고, 타이포그래피 요소와 글자 스타일 구성 요소를 배울 수 있습니다.

디자인 시스템이란?

2.8 높이

높이(Z축)를 활용해 요소의 중요도를 표현하고, 다양한 높이 구분 표현법과 사용 사례를 이해할 수 있습니다.

디자인 시스템이란?

2.9 아이콘

일관성을 유지하기 위한 아이콘 디자인 원칙을 배울 수 있습니다.

디자인 시스템이란?

2.10 이미지

이미지 비율과 크기를 통일하여 다양한 기기 환경에서 품질 저하 없이 표시하는 방법을 배웁니다.

디자인 시스템이란?

2.11 모서리 반경, 테두리, 그림자

모서리 반경, 테두리, 그림자의 기준을 설정하여 일관성을 유지하는 방법을 배울 수 있습니다.

예상 질문 Q&A

Q. 비전공자도 들으면 도움 되나요?

A. 전공과 무관하게 디자인 실무를 모르는 모든 이에게 도움됩니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

A. 별도로 없습니다.

Q. 툴은 어느 정도로 다뤄야 하나요?

A. 툴을 사용하지 않습니다. 실습 강의가 아닙니다.

수강 전 참고사항

학습 자료 : 교재 PDF 제공

 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 포트폴리오에서 UI의 체계를 보여주고 싶은 취준생

  • 디자인의 기초를 제대로 다지고 싶은 신입 디자이너

  • 디자인 시스템이 어려운 현업 디자이너

안녕하세요
입니다.

157

수강생

22

수강평

2

답변

5.0

강의 평점

2

강의

저는 이해하기 쉬운 컨텐츠가 좋은 컨텐츠라고 믿습니다.
실무에 직접적으로 도움이 되는 좋은 컨텐츠를 만드는 데 주력하고 있어요.
제가 만든 컨텐츠가 실무에 도움이 된다는 피드백을 받을 때마다 큰 기쁨을 느낍니다.

 

DX Lab 공식 유튜브
🅱
DX Lab 디자인 블로그

커리큘럼

전체

16개 ∙ (2시간 1분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

8개

4.9

8개의 수강평

  • shinyroon1728님의 프로필 이미지
    shinyroon1728

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Tôi cảm thấy nền tảng của mình vững chắc hơn nhờ phần giải thích chi tiết về hệ thống thiết kế. Tài liệu thiết kế bạn cung cấp cũng được sắp xếp gọn gàng nên rất dễ xem.

    • dxlab
      지식공유자

      Chào bạn Ga-young! Cảm ơn bạn vì những đánh giá quý giá. 😊 Tôi đã cố gắng để bạn có thể dễ dàng hiểu về hệ thống thiết kế và thật tự hào khi nó hữu ích cho bạn! Tôi cảm thấy rất xứng đáng khi đã chuẩn bị tài liệu bài giảng một cách cẩn thận nhờ những phản hồi mà bạn đã cho. 😭😭 Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • dbstn76589521님의 프로필 이미지
    dbstn76589521

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Nó chứa thông tin thực sự hữu ích từ quan điểm của người mới bắt đầu thiết kế. Các tập tin sách giáo khoa được sắp xếp rất đẹp nên tôi rất vui khi tham gia khóa học mà không hề đắn đo. Nội dung được sắp xếp gọn gàng nên tôi nghĩ sau này tôi sẽ xem thường xuyên khi học thiết kế! Cảm ơn!

    • dxlab
      지식공유자

      Chào 윤수님! Cảm ơn bạn vì những đánh giá quý giá. ☺️ Tôi đã cố gắng để ngay cả người mới bắt đầu cũng có thể dễ dàng hiểu được, và tôi rất vui khi bạn thấy nó hữu ích! Tôi cảm thấy có động lực hơn khi bạn nói rằng bạn sẽ tiếp tục sử dụng các tệp tài liệu học tập. 😭😭 Chúc bạn tiếp tục học thiết kế một cách vui vẻ! Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • ryuwoong님의 프로필 이미지
    ryuwoong

    수강평 4

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    Tài liệu rõ ràng, dễ nhìn. Chỉ ra những yếu tố thiết yếu cần nhớ. Nếu nhà phát triển xem thì có thể chiếm lợi thế khi tranh cãi với nhà thiết kế chăng? (Đùa thôi 🙃)

    • dxlab
      지식공유자

      Chào RyuWoong! Cảm ơn bạn rất nhiều vì những đánh giá quý giá. 😊 Thật may mắn khi bạn thấy tài liệu gọn gàng và dễ xem! Tôi đã cố gắng tập trung vào những điểm chính và tôi rất vui vì điều đó đã được truyền tải tốt. 😆 Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • dkim270039님의 프로필 이미지
    dkim270039

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    • namsooklee9294님의 프로필 이미지
      namsooklee9294

      수강평 3

      평균 평점 4.7

      4

      31% 수강 후 작성

      Đây là một bài gi강 được tổng hợp rất hữu ích và dễ tiếp cận. Được cấu trúc để có thể hiểu rõ sự cần thiết của hệ thống thiết kế~

      • dxlab
        지식공유자

        Xin chào namsook lee Cảm ơn bạn đã để lại đánh giá quý báu. 😊 Tôi đã tạo ra khóa học này để mọi người có thể tiếp cận một cách dễ dàng, và tôi rất vui vì ý định đó đã được truyền tải tốt. Tôi sẽ tiếp tục suy nghĩ về những nội dung hữu ích cho công việc thực tế. Chúc bạn có một ngày tốt lành! ☀️

    월 ₩340,632

    5개월 할부 시

    ₩80,300

    DX Lab님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!