[내일배움캠프 사전캠프] DAY.7 커리큘럼 설명회 / (3강) ~3-7강까지 수강완료

 

TIL. 2025/10/21

 

1. 오늘 학습 키워드

: 커리큘럼 설명회 / 컴포넌트와 인스턴스의 관계성을 배우고, 디자인 시스템, UI디자인 기본인 UI의 분류 체계에 대한 학습을 하였다.

 

 

1-1. 오늘의 학습 목표

- 커리큘럼 관련 설명회 (50분 진행)

- 3강 : ~3-7강.까지 강의 학습

-AI 디자이너 JD 분석 & 핵심역량 리서치 中 JD 수집 진행

 

 

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

:  마스터 컴포넌트와 인스턴스의 관계성을 알게되었으며, 디자인시스템의 구조와 필요한 이유, 구조와 원리에 대하여 배울 수 있었다. 

 

커리큘럼 관련 설명회

:커리큘럼에 관한 내용을 설명해주셨음.

커리큘럼 구성에 관한 내용

 

각 강의 당 내용 요약 정리

 

3-5강. 마스터 컴포넌트와 인스턴스

컴포넌트 : 구성품 / 파운데이션 요소들을 레고처럼 결합을 해서 UI로 만들어내는 것.
>즉, UI에서의 컴포넌트란? 화면을 디자인하기 위한 레고블록.(파운데이션 조합해 만들어지는 구성품)
> 코드 단위임.

마스터 컴포넌트(Master Component)
: 반복적인 디자인을 빠르게 하기 위해, 디자인을 복사해서 사용할 수 있도록 해줌 
>여러개로 복사된 디자인(개체)들을 원본인 디자인(개체)만 수정하면 한번에 수정,편집이 가능함.
>특징? 마스터 컴포넌트는 '원본'임. / 복제시, '인스턴스' 컴포넌트가 생성됨

인스턴스(Instance)
: 마스터 컴포넌트의 복제본, 컴포넌트의 속성을 그대로 이어 받음.
>인스턴스 먼저 수정시, 컴포넌트(원본)을 수정하면 변경사항이 인스턴스에 적용되지 않음.
>컴포넌트를 지워도 인스턴스는 남아있음 / BUT, 인스턴스를 편집하려면 컴포넌트를 복구해야함.
>컴포넌트와 인스턴스 분리 : Detach(디태치; 분리하다)→일반프레임으로 변경됨.

 

 

3-6강. 디자인 시스템의 이해

디자인 시스템이란?
-필요한 이유
: 웹사이트나 앱(프로덕트=제품)을 디자인할 때, 사용자들이 겪는 문제를 찾아 디자인을 개선하는 작업을 함.
BUT, 디자인 개선하는 작업에서 매번 디자인을 반복해서 수정하면 개선하는 작업이 어려워 질 수 있음. 
또한, 다양한 여러 사람들이 함께 일하는 과정에서 소통의 어려움도 생길 수 있음.
그렇기 때문에, UI에서 다른 디자이너와 같은 방법으로 만들고 쓸수 있으며, 개발자도 같은 생각을 할 수 있도록 체계가 필요하기 때문에, 디자인 시스템이 필요함.

-목적
①반복적인 UI를 미리 만들어 효율적으로 사용할 수 있음
②팀 전체가 같은 정도로 이해하여, 일관된 작업을 할 수 있음.

-UI키트와 디자인 시스템
UI키트
:사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것
EX)만약 요리에 예를 든다면, 요리 재료 목록만 있는 상태라고 볼 수 있음.

디자인 시스템
:UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서(문서의 형태여야함.)
EX)재료 목록과 다듬는 방법, 조리법까지 상세하게 나와 있는 요리책


디자인시스템의 구성요소와 원리
-디자인시스템 원리 :다양한 파운데이션 '요소'들>그를 활용한 컴포넌트로 이루어 규칙을 만들음. >UI를 만들음.
> 예를 들어 '버튼'의 요소 : 컬러/텍스트/아이콘 등등
>각각의 '요소'들 그 차체로는 기능을 가지고 있지X >UI를 만드는 기초재료
>요소+요소+요소+....= '버튼'이라는 UI로 결합해야, '눌러서 작동시킨다'라는 기능이 생김


참고자료(5)

https://m3.material.io/
:머티리얼 디자인 Material Design
>구글이 만든 구글의 디자인 시스템(UI의 설계에 있어서는 가장 복잡하고 정교한 디자인 체계)

https://designsystem.line.me/LDSM
:라인 디자인 시스템 Line Design System
>라인 메신저의 디자인 시스템(국어로 된 디자인 시스템 중에서는 완성도가 높음)

https://brunch.co.kr/@milliedesign/9
:밀리의서재 디자인 시스템 millie Design Library 2.0
>밀리의서재 디자인 시스템(피그마 파일 링크 첨부되어 있음)

https://www.lightningdesignsystem.com/2e1ef8501/p/85bd85-lightning-design-system-2
:라이트닝 디자인 시스템 Lightning Design System
>슬랙의 개발사인 세일즈포스에서 운영하는 디자인 시스템

https://designsystems.surf/
:디자인 시스템 DB Design System Database
>일리야 그레벤이라는 디자이너가 만든 디자인 시스템 디렉토리(수많은 전세계 디자인 시스템들의 문서를 확인할 수 있음)

 

그 외 채널> 구독 후 최신 디자인 자료 참고하기
썹픽
요즘 IT
브런치
링크드인

 

 

3-7강. UI 디자인 기본

UI의 분류 체계에 대하여 다룸.

-액션(Action)
: 사용자가 중요한 행동을 수행할 때 사용 / 버튼
인풋(Input)
: 사용자의 입력을 받을 때 사용 / 텍스트필드(셀렉트박스)
-인포메이션(Information)
: 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 / 토스트 메시지나 스낵바, 라벨
-컨테이너(Container)
:컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트 / 카드, 바텀시트, 리스트처럼 복잡한 구조
-내비게이션(Navigation)
: 사용자가 페이지를 이동할 때 사용 / 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바 등
-컨트롤(Control)
: 사용자가 설정이나 값을 수정할 때 사용 / 라디오, 체크박스, 스위치 등


*의사 상태(Pseudo State): 가짜,가상의 상태
EX) 버튼에 마우스를 올렸을 때, 색이 바뀌는 현상 > 버튼이 다른 것으로 바뀐것이 아닌, 버튼이 가진 가상의 상태를 나타내는 것임.

-주의해야 할 점
:의사 상태의 종류는 버튼에 마우스를 올렸을 때, 버튼을 눌렀을 때, 
텍스트를 입력하려고 눌렀을 때, 체크박스를 눌렀을 때, 누를 수 없을 때 등 다양한 경우가 있음..

:컴포넌트마다 쓸 수 있는 것과 없는 것이 있음>버튼인데 체크된 것은 불가능하고, 체크박스가 링크인 건 존재할 수 없음..(조금 이해안됨)

 

 

3. 학습하며 겪은 문제/해결방법

- 문제1.  AI 디자이너 JD 분석 & 핵심역량 리서치' 진행하기 위해 노션 복제를 하려고 했는데, 노션 복제 방법을 몰랐음.

>해결방법

: 팀원과 매니저님께 도움을 구함..

복제한 노션

 

해당 노션에 그냥 복제하여, 

링크복사!

 

제출할때 공유버튼에 있는 링크 복제하여 제출하면 된다고 설명 해주셨다.

 

 

 

4. 내일 학습 할 것은 무엇인지

: AI 디자이너 JD 분석 & 핵심역량 리서치 작성 완료하기 , 3강 강의 모두 듣고 난 후 과제 제출하기.