[내일배움캠프 사전캠프] DAY.10 (4강) 합성 컴포넌트와 네스티드 인스턴스 / 배너 디자인 기획

TIL. 2025/10/24

 

1. 오늘 학습 키워드

: 합성 컴포넌트 / 네스티드 인스턴스 / 탭 컴포넌트

 

1-1. 오늘의 학습 목표

- 피그마 4주차 강의 수강 완료 > 과제 제출

- [피그마]배너 디자인 기획

 

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

 

4-7강.합성 컴포넌트와 네스티드 인스턴스

 

- 합성 컴포넌트
①일반적 : 파운데이션 요소들의 결합 > '컴포넌트'의 결합 > 패턴
②컴포넌트 + 컴포넌트 > 컴포넌트 > 합성 컴포넌트
③컴포넌트 + 파운데이션 > 컴포넌트 > 합성 컴포넌트
*구성 : 바텀시트(밑에서 올라오는 것들), 다이얼로그(팝업창), 리스트(목록), 카드(썸네일), 탭(전환 가능) 등 복잡한 구조임.


- 네스티드 인스턴스
: 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작할 수 있도록 도와주는 속성
=감싼 인스턴스

(EX.) 팝업 알림창 (상위 컴포넌트) + 버튼(하위 컴포넌트)


(실습) 탭 컴포넌트
- 정의 : 현재 화면의 전환해주는 요소 = 현재 화면의 컨텍스트를 다른 컨텍스트로 전환시켜주는 것
           (네비게이션에 포함되는 컴포넌트)
- 구조 : '개별 아이템인 탭 메뉴 + 메뉴를 모아 만드는 탭' 으로 이루어져 있음

** 탭은 선택된것과 선택되지 않은 것을 명확하게 사용자가 구분할 수 있어야함.

 

 

실습때 진행한 탭 창 만들기

 

*Create component set : 선택한 프레임들을 한 컴포넌트에 베리언츠로 묶어줌

(탭 컴포넌트 - 참고자료)

https://m3.material.io/components/tabs/overview > 머티리얼 디자인

https://base.uber.com/6d2425e9f/p/2345e5-tabs > 우버 디자인 시스템

https://carbondesignsystem.com/components/tabs/usage/ >카본 디자인 시스템

https://www.lightningdesignsystem.com/2e1ef8501/p/1152cf-tabs > 라이트닝 디자인 시스템

 

 

4-8강.컴포넌트 합치고 분리해보기

 

컴포넌트들을 하나로 결합하고, 그 안에 새로운 컴포넌트를 추가하고, 분리하는 것을 배움.

>해당 컴포넌트에 결합했다가, 분리하면 레이어 이름이 변경되는 점! 잊지말기

해당 강의 실습 이미지

 

 

4-9강. 4주차 과제 제출

4주차 강의 끝!

4주차 과제 끝!

 

 

[피그마]배너 디자인 기획 - 진행 중

 

https://www.notion.so/2960c49b817080a6ba6be613bea79414?source=copy_link

 

 

 

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

 

문제1. 불리언 프로퍼티 적용을 베리언츠로 잘못 이해해서 시간이 지체되었다..

불리언 프로퍼티 창

 

> 해결 : 지난 강의들을 다시 참고하여 해결하였다..

 

 

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

: 피그마 5주차 강의 이어서 듣기 / [피그마] 배너 디자인 기획안 제출 / [피그마] 배너 디자인 제작 후 제출 / 피드백 신청하기