[내일배움캠프 사전캠프] DAY.8 (3강) 버튼, 텍스트 필드, 컨트롤 컴포넌트 학습 / (4강) 오프닝

TIL. 2025/10/22

 

 

1. 오늘 학습 키워드

버튼 컴포넌트

텍스트 필드

컨트롤 컴포넌트 中 체크박스/라디오 컴포넌트

 

 

1-1. 오늘의 학습 목표

- AI 디자이너 JD 분석 & 핵심역량 리서치 제출

- 3주차 강의 완료 후, 과제 제출

 

 

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

: 버튼 컴포넌트와 텍스트 필드, 컨트롤 컴포넌트( 체크박스/라디오 컴포넌트 )를 배우고 직접 실습하며, 학습함.

 

각 강의 당 내용 요약 정리

 

 

3-8강. UI 만들기 실습(1)

→폰트스타일을 잘못만들어서 3-4강 폰트스타일 만드는 강의 부분만 다시 들음.

 

*버튼컴포넌트 참고

https://m3.material.io/components/all-buttons  > 머티리얼 디자인

https://base.uber.com/6d2425e9f/p/756216-button/b/336373 > 우버 디자인 시스템

https://www.lightningdesignsystem.com/components/buttons/  > 라이트님 디자인 시스템

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

 

 

- 버튼 컴포넌트 정의

: 액션에 해당하는 컴포넌트 > 누름으로써 중요한 동작을 수행하는 요소

**행동유도성 : 행동을 유도하는 속성

>버튼은 버튼의 목적인, 누를 수 있다는 시각적인 힌트를 드러내야함.

 

 

-버튼의 구조

1)컨테이너(Container)
:안에 있는 요소를 감싸고 있는 프레임

2) 라벨/레이블(Label)
:버튼의 행동을 안내
> UI에서 사용자가 입력하는 글자는 텍스트 / 안내하는 글자는 라벨

3)  리딩 엘리먼트(Leading Element)
:버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩(이끄는) 엘리먼트

4) 트레일링 엘리먼트(Trailing Element)
:버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트

**앞/뒤 : 글자를 읽을때, 순서(LTR : Left to Right)

 

 

-버튼의 종류

1) 박스 버튼, 일반 버튼
: 일반적인 솔리드 박스 형태 버튼 > 중요도 높음

2) 아웃라인 버튼, 고스트 버튼, 엠티 버튼
: 테두리가 있고 속이 빈 듯한 형태 > 중요도 중

3) 스플릿 버튼
: 스플릿(Split, 쪼개진) 버튼 > 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용

4) 텍스트 버튼
: 테두리가 없는 글자로만 이루어진 형태 > 중요도 낮음

 

-----

-텍스트필드 컴포넌트

 

*텍스트필드 컴포넌트 참고

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

https://base.uber.com/6d2425e9f/p/51073e-text-field  > 우버 디자인 시스템

https://www.lightningdesignsystem.com/2e1ef8501/p/8268ee-input  >  라이트님 디자인 시스템

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

 

 

- 텍스트필드 컴포넌트 정의

: 컴포넌트 종류 中 인풋 : 무언가를 입력할 수 있는 컴포넌트

 

-버튼의 구조

해당 이미지 내용 참고

 

- 플레이스홀더와 밸리데이션

 

플레이스홀더

: 플레이스(자리를) + 홀더(지키고 있는 것) 

>사용자가 글자를 입력하면 사라지고, 글자를 모두 지우면 다시 나타남 / 입력해야 되는 예시 제공때 필요.

 

밸리데이션

: 유효성 검사 > 소통의 방해가 발생되었을때, 해결방안제시 또는 자연스럽게 피하여 사용자에게 소통을 더욱 원할하게 만들어줌

>즉, 적절한 문구와 안내를 담당함 : 매우 중요!!

>**주의 : 부정적 문구보다는 해결책을 제시하여 긍정적인 방향으로 사용자에게 안내

 

 

**버튼박스 / 텍스트필드 만들기(실습)

강의 실습 내용 직접 만들어보기

 

 

3-9강. UI 만들기 실습(2)

 

체크박스 컴포넌트

*체크박스 컴포넌트 참고

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

https://base.uber.com/6d2425e9f/p/83ffb9-check  > 우버 디자인 시스템

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

https://www.lightningdesignsystem.com/components/checkbox/ > 라이트님 디자인 시스템

 

- 체크박스 컴포넌트 정의

: 여러 선택지 중 1개 이상 선택시 사용하는 컨트롤 컴포넌트 / 일반적으로 라벨과 함께 쓰임

>의사상태 : 체크됨/ 체크되지 않음 : 2가지 상태

 

-체크박스 특징

1) 여러개 선택 가능 : 하나 선택시, 다른 선택지에 영향을 주지 않음.

2) 선택하지 않아도 가능 : 진행 유무와 별개, 아무것도 선택하지 않은 상태를 만들 수 있음

3) 하위항목들을 포함한 상위항목 : 하위항목 일부만 선택가능, 상위항목 선택시 모두선택

 

 

라디오 컴포넌트

- 라디오 컴포넌트 정의

: 여러 선택지 중 1개만 선택가능한 컨트롤 컴포넌트 / 일반적으로 라벨과 함께 쓰임.

>의사상태 : 

 

-라디오 특징

1) 하나 선택시, 이미 선택한 다른 선택지에 영향 > 여러개 동시 선택X

2) 반드시 하나 선택해야함.

 

 

**체크박스 / 라디오 컴포넌트 만들기(실습)

체크박스 / 라디오 컴포넌트

 

 

 

3-10강. UI 학습 시, 도움는 관점

:컴포넌트는 형태에 집중하면 안됨!

스파르타클럽 버튼

스파르타클럽 버튼들을 보며,스스로 답해보기▼

1. 버튼들의 색상, 형태에 차이가 있나요? 색상 형태 모두 다양하게 형성되어 있음.
2. 차이가 있다면, 어떤 차이가 있나요? 차이1) 색상 : 그레이, 블랙, 특정 핑크, 화이트 / 2) 폰트 크기와 색상 / 3)버튼 형태 : 곡률
3. 차이가 있음에도 우리는 왜 이들을 모두 ‘버튼’으로 인식할까요? 일반적으로 봐온 버튼의 형태여서..?

앞으로 우리는 UI를 기능주의적 관점으로 보아야 함.

>형태가 아닌 UI의 목적과 기능에 초첨을 두어 공부하자!

 

 

 

3-11강. 3주차 과제 제출

 

수강완료

 

 

-과제 : UI에서 사용할 기본적인 회색조 컬러 팔레트를 만들어 주기

Gray 컬러스타일을 만들어보는 과제

 

 

 

4-1강. 앞으로의 배울내용 언급

-컴포넌트 프로퍼티의 이해

-피그마에서 배리언츠와 프로퍼티를 만들고 관리하기

-컴포넌트 응용과 결합하는 과정 학습

 

의사 상태와 컴포넌트 프로퍼티

의사상태 : UI가 가질 수 있는 또 다른 형태를 칭함.

>프로퍼티 기능을 활용하여 컴포넌트에 의사 상태 기능을 반영하는 방법을 배울 것임. / 컴포넌트 안에 있는 글자와 아이콘을 다루는 방법

 

합성 컴포넌트와 네스티드 인스턴스

- 파운데이션+파운데이션=컴포넌트 > 앞서 배운내용

- 컴포넌트+컴포넌트 = 컴포넌트 : 합성컴포넌트

                                = 패턴 (EX. 로그인창)  

 

 

 

- AI 디자이너 JD 분석 & 핵심역량 리서치 제출

AI 디자이너 JD 분석 시트 완료

 

 

 

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

>금일 없음.

 

 

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

: 4강 이어서 학습하기, [캔바]콘텐츠 디자인 실습 / 배너디자인 기획서 제출