내일배움캠프 UIUX 1일차 디자인 시스템과 UI, 컴포넌트

내일배움캠프 UXUI 1일차 TIL

2025.01.20

디자인 시스템과 UI, 컴포넌트

 

 

---

디자인 시스템

디자인 시스템이 필요한 이유

 

일관성 있는 디자인을 위해 디자인 시스템이 필요

반복적인 UI를 효율적으로 관리

팀 전체가 같은 정도로 이해

 

빠르게 디자인을 반복하면 UI를 매번 새로 만들기도 번거롭고, 이로 인해 문제가 무엇인지 파악할 시간이 부족해진다.

이를 해결하기 위해 UI를 만들어 놓고 사용하는데, 다른 디자이너와 개발자와 같이 일하기에 모두가 이해하고 똑같은 방법으로 사용할 수 있는 기준이 있어야한다.

 

디자인 시스템의 목적

반복적인 UI를 효율적으로 관리할 수 있다.

팀 전체가 같은 정도로 이해하여 일관되게 UI를 사용할 수 있다.

 

UI키트

사용하는 방법과 규칙은 없고, 단순히 UI를 모아둔 것

 

디자인 시스템

UI 구조와 쓰는 방법, 유의점까지 상세하게 적혀 있는 문서이다.

나도 중간에 ‘UI키트와 디자인 시스템이 뭐가 다른거지?’ 라는 생각이 들었었다.

단어와 문법으로 비유하자면 단어는 UI키트 문법은 디자인 시스템이다.

단어만 알고 있으면 의사소통은 어느정도 되겠지만, 정확한 설명을 할 수는 없다.

하지만 문법이 있다면 더 정확한 설명을 할 수 있을 것이다.

 

디자인 시스템의 장단점

장점

1. 시간과 비용이 줄어든다

2. 누가 만들어도 동일한 품질로 설계할 수 있다.

 

단점

1. UI를 모아 통일하는 과정이 매우 오래걸린다.

2. 필요한 것이 비해 UI가 과하게 많아질 수 있다.

3. 새로운 디자인을 해야할 때 소극적이게 된다.

 

디자인 시스템과 구성요소와 원리

파운데이션 요소들이 모여 UI를 구성한다.

 

액션: 사용자가 중요한 행동을 수행할 때 사용

인풋: 사용자의 입력을 받을 때 사용

인포메이션: 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용

컨테이너: 컴포넌트 여러개가 결합되어 하나의 덩어리를 이룬 것

내비게이션: 사용자가 페이지를 이동할 때 사용하는 하단 바

컨트롤: 사용자가 설정이나 값을 수정할 때 사용

 

의사상태

컴포넌트의 가상의 상태

버튼에 마우스를 올렸을 때 색이 바뀌는 것 -> 버튼이 가진 가상의 상태를 나타냄

---

UI 만들기 실습

버튼 컴포넌트

누름으로써 중요한 동작을 수행하는 요소이다.

행동을 유도하는 속성을 지닌다.

 

 

텍스트 필드 컴포넌트

컴포넌트의 종류 중 인풋에 해당하는 컨포넌트이다.

 인풋은 사용자가 무언가를 입력할 수 있게하는 컴포넌트이다.

 

오늘 피그마 강의를 들으면서 겪었던 것

몰랐던 내용을 배우는 거라 재밌기도 하였지만, 생각보다 컴포넌트와 관련해 알아야할 것들이 많아서 복잡했다. 

평소에 기억력이 좋은 편은 아니라서 실습할 때 용어들이 약간 헷갈렸다.

이를 해결하기 위해서 강의 자료를 여러 번 읽어보았고 덕분에 컴포넌트 구성에 대한 내용은 어느정도 익숙해진 것 같다.

 

오늘 강의를 들으면서 새롭게 알게 된 점

디자인 시스템이 무엇인지 알게 되었고 디자인 시스템과 UI키트의 차이점이 무엇인지도 알게 되었다.

또한 컴포넌트의 구성과 종류도 알게 되었다.

 

내일 할 내용

디자인카타

피그마 강의 4주차 강의를 들을 것 같다.

아티클 읽기