[Figma] 피그마 활용 1-4

01. 컴포넌트

1. 컴포넌트의 개념

피그마 한정) 컴포넌트는 컨버스 위의 모든 개체 (맥락에 따라 다르게 해석)

즉, 디자인에서 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품

2. 컴포넌트를 분석, 비교할 때 유의할 점

* 컴포넌트의 모양이 아니라 기능이 중요한 이유

-> 분명히 버튼마다 모양도, 색상도 다른데 우리는 같은 버튼으로 인식

Q. 모양도, 색상도 다르지만 모두 ‘버튼’이라고 받아들이는 이유가 무엇일까?

-> 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문

=> UI를 비교하고 공부할 때는 UI의 목적, UI의 기능에 초점을 둬야 함 

3. 컴포넌트의 종류

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

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

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

4) 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트

5) 내비게이션 : 사용자가 페이지를 이동할 때 사용

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

02. 의사 상태(Pseudo-state)

1. 컴포넌트에게도 별명이?

컴포넌트의 기본 속성은 유지한 채, 상황에 따라 다른 형태와 모양을 하는 경우가 있는데

그런 다른 형태와 모양들을 의사 상태라고 표현 

2. 의사 상태의 개념

의사 상태에서 의사란 **가짜의, 가상의(pseudo: ‘수도’)**라는 뜻

의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용

예시) 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건,

실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것

마우스를 올리면 색상이 변하는 것 - 의사 상태

3. 의사 상태 설계 시 주의해야 할 것

의사 상태의 종류는 다양함(버튼에 마우스를 올렸을 때, 버튼을 눌렀을 때, 텍스트를 입력하려고 눌렀을 때, 체크박스를 눌렀을 때, 누를 수 없을 때 .. 등) 하지만 모든 경우에 의사상태를 적용할 수 있는 건 아님

예시) 컴포넌트마다 쓸 수 있는 것과 없는 것

버튼인데 체크된 것은 불가능하고, 체크박스가 링크인 건 존재할 수 없음

=> 컴포넌트에 의사 상태를 적용해서 만들 때는, 실제 구현할 개발자와 이야기를 많이 나눠서 구현 여부를 잘 논의하는 과정이 필수

03. 컴포넌트와 인스턴스

1. 마스터 컴포넌트

피그마에서 마스터 컴포넌트는 ❖ 아이콘

1) 마스터 컴포넌트?

마스터 컴포넌트는 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있게 해주고,

복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능

2) 마스터 컴포넌트의 특징

- 마스터 컴포넌트는 원본이기 때문에 변하지 않음

- 원본 그대로이기 때문에 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 됨

- 마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, 인스턴스가 생김

2. 인스턴스

인스턴스는 ◇ 아이콘이 붙어 있어요. 무언가의 복제본이라는 뜻

인스턴스는 마스터 컴포넌트의 복제본

- 마스터 컴포넌트를 복사하면 인스턴스가 생기고, 마스터 컴포넌트의 속성을 그대로 가짐

3. 마스터 컴포넌트와 인스턴스의 관계

(컴포넌트=>마스터 컴포넌트)

- 컴포넌트를 수정하면 인스턴스에도 반영됨

- 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음

- 컴포넌트를 지우더라도 인스턴스는 남아 있음 (인스턴스를 편집하거나 수정하려면 컴포넌트를 복구해야 함)

- 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경

04. 배리언츠와 프로퍼티

1. 배리언츠와 프로퍼티가 뭘까?

- 컴포넌트는 가상의 상태(의사상태)를 가질 수 있고 이 때 형태가 변화할 수 있음

(버튼에 마우스를 올렸을 때 배경색이 바뀌거나 투명도가 바뀌거나 ,,)

- 또한 컴포넌트 안의 요소가 바뀌는 경우들도 있음

(버튼에 마우스를 올렸을 때 화살표가 나온다거나 ,,)

- 배리언츠와 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능

2. 배리언츠와 프로퍼티는 왜 쓸까?

오토레이아웃 등 피그마 스킬을 응용해 컴포넌트를 만들고 인스턴스를 디자인에 적용하는 과정을 반복함

=> 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위해 배리언츠와 프로퍼티를 사용

3. 배리언츠(Variants)

💡 배리언츠는 ‘변종’ 이라는 뜻 _ 배리언츠의 **vari-**는 ‘변화’ 와 관련있는 표현

마우스를 올렸을 때, 누를 수 없을 때는 기본 상태의 배리언츠

컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능

- 배리언츠는 컴포넌트의 가상의 상태(의사상태)를 만들 때 사용

4. 프로퍼티(Property)

💡프로퍼티는 ‘속성’이라는 뜻

기본 상태 + 아이콘이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘의 스타일이 바뀌는 건 프로퍼티로 조정

- 프로퍼티는 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

5. 배리언츠와 프로퍼티를 고르는 기준

컴포넌트에 적용된 파운데이션 속성(색상, 간격, 폰트)이 변하는지 

=> 파운데이션 속성이 변하면 배리언츠, 안 변하면 프로퍼티

파운데이션 값이 바뀌었다면 배리언츠

💡버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트가 바뀜! 

=> 배리언츠로 만들어야 함 

파운데이션 값이 그대로라면 프로퍼티로 만들어야 함

💡 색상이나 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌진 않았다면?

=> 프로퍼티로 조정

6. 피그마 프로퍼티 알아보기

피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지

1) 👁️ Boolean

📌 Boolean(불리언)은 Y or N을 선택하는 형식.

- 참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기 모두 가능

• 컴포넌트 안에 있는 요소를 보이게 하거나 안 보이게 할 수 있는 속성
• 요소를 선택하면 레이어 패널에서도 설정

예시) 텍스트에 불리언 프로퍼티를 적용하면, 껐다 켰다 할 수 있음 

텍스트 선택 후 프로퍼티를 적용하면

 

텍스트를 껐다 켰다 할 수 있음

2) ◇ Instance swap

📌 인스턴스 스왑 기능은 인스턴스를 다른 인스턴스로 교체하는 기능

- 인스턴스를 인스턴스가 아닌 것으로 바꿀 수 없음

• 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 다른 인스턴스로 교체할 수 있는 속성
• 주로 아이콘, 버튼 등을 교체할 때 사용

💡아이콘에 인스턴스 스왑을 적용하면, 다른 아이콘으로 변경하기 쉬움

아이콘을 선택후 프로퍼티를 적용하면

다른 인스턴스로 대체

3) 𝐓 Text

📌 컴포넌트 안에 텍스트를 수정하기 용이하도록 속성으로 만들어줌

편집 가능한 텍스트로 속성을 설정해주면

패널에서 버튼의 텍스트를 편집할 수 있음

💡텍스트에 텍스트 프로퍼티를 적용하면, 텍스트 편집을 좀 더 용이하게 할 수 있음

05. 버튼 컴포넌트

🔗 버튼 컴포넌트 참고하기

머티리얼 디자인 →

All buttons – Material Design 3

우버 디자인 시스템 →

Base Design System

라이트닝 디자인 시스템 →

Buttons - Lightning Design System

카본 디자인 시스템 →

Carbon Design System

1. 버튼 컴포넌트의 정의

• 컴포넌트의 종류 중 액션에 해당하는 컴포넌트
• 버튼 컴포넌트는 누름으로써 중요한 동작을 수행하는 요소

* 컴포넌트 종류 6가지 - 액션 인풋 인포메이션 컨테이너 내비게이션 컨트롤 

2. 버튼 설계 시 유의할 점

행동 유도성 (Affordance)

상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다.

- 버튼을 설계할 때는, 누를 수 있다는 시각적인 힌트를 충분히 드러내야 함 

왼쪽이 오른쪽에 비해 더 선명함, 더 ‘버튼’답게 생김. 그에 반해 오른쪽은 누를 수 있는지 쉽게 알아차리기 어려움

- 행동을 유도하는 속성이라고 해서 행동유도성, 즉 ‘어포던스’ 라고 부름 

- > 버튼을 디자인할 때 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계

‼️버튼뿐만 아니라 모든 UI를 설계할 때 UI의 개념과 목적을 최우선으로 고려

3. 버튼의 구조

💡컴포넌트는 항상 구조 파악이 최우선

1️⃣ 컨테이너(Container)

안에 있는 요소를 감싸고 있는 프레임

💡 버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 정해짐

2️⃣ 라벨/레이블(Label)

버튼의 행동을 안내하는 글자

 📌 UI에서 사용자가 입력하는 글자는 텍스트, UI가 사용자에게 ‘이렇게 하세요’를 안내하는 글자는 라벨이라고 부름

3️⃣ 리딩 엘리먼트(Leading Element)

버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩(이끄는) 엘리먼트라고 부름 

💡 엘리먼트는 요소라는 뜻

4️⃣ 트레일링 엘리먼트(Trailing Element)

버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름 

4. 버튼의 종류

1) 박스 버튼, 일반 버튼 

• 우리가 일반적으로 아는 버튼
• 박스처럼 생겨서 박스(Box) 버튼이라고 부름
• 색상이 안에 꽉 차있어서 솔리드(Solid, 단단한, 꽉 찬) 버튼이라고도 부름

2) 아웃라인 버튼, 고스트 버튼, 엠티 버튼

• 테두리가 있고 속이 빈 듯한 형태의 버튼
• 테두리만 있어서 아웃라인(Outline) 버튼이라고 부르고, 유령처럼 속이 비어있어서 고스트(Ghost) 혹은 엠티(Empty) 버튼이라고도 부름

3) 스플릿 버튼 

• 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼
• 주요 액션과 보조 액션이 나뉘어 있어서 스플릿(Split, 쪼개진) 버튼이라고 부름 

슬랙 스플릿 버튼

4) 텍스트 버튼

• 배경색이나 테두리 없이 글자로만 이루어진 버튼
• 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용

5. 버튼 만들기

1) 기본 형태 만들기

📌 버튼의 기본 형태

기본적인 버튼은 위계, 크기, 상태 배리언츠를 가짐

이중 가장 기본이 되는 건 프라이머리, 라지, 디폴트 3가지 속성을 가진 버튼

1. 버튼의 라벨이 될 글자를 작성

2. 오토레이아웃으로 글자를 감싸기

3. 스타일을 적용

4. [선택] 필요한 경우 버튼의 곡률을 조정

5. 툴바 가운데 상단에 있는 Create component 클릭

6. 컴포넌트의 이름을 Button으로 변경

2) 배리언츠 만들기

(베리언츠 오토레이아웃 적용됨)

1. 위계 배리언츠 만들기

📌 위계(hierarchy, priority)

위계는 hierarchy(하이어라키) 혹은 priority(프라이어리티)라고 함 

 hierarchy는 계층이나 계급이라는 뜻이고, priority는 우선순위라는 뜻

- ‘얼마나 중요한 행동을 하기 위한 버튼인지’ 

- 우리 앱에서 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용

- 일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터티어리(Tertiary, 3순위)의 3단계

1) 컴포넌트를 선택하고, 우측 디자인 패널에서 프로퍼티 패널을 확인

2) 프로퍼티 패널의 + 아이콘을 눌러 Variants를 선택

프로퍼티 패널을 열어 배리언츠를 선택하면 단일 컴포넌트가 배리언츠 컴포넌트로 확장되면서, 배리언츠 항목이 추가됨

3) 프로퍼티 패널의 Property 1을 더블 클릭해서, Priority 라고 이름 변경

프로퍼티 이름을 더블 클릭하면 프로퍼티의 이름을 바꿀 수 있음

4) 컴포넌트 테두리 바깥의 + 를 2번 눌러서 총 3개의 버튼이 되도록 (복붙, 복제 가능)

한번 누를 때마다 하나씩 추가됨

5) 가장 맨 위에 있는 버튼을 선택하고, 우측 현재 배리언트(Current Variant) 패널의 Default라고 되어 있는 부분을 Primary로 변경

6) 두번째 버튼을 선택하고 같은 방식으로 Secondary, 세번째 버튼은 Tertiary

두번째 버튼은 Secondary 세번째 버튼은 Tertiary로 변경

7) 두번째 버튼을 누르고, 스타일을 적용 (밝은색이나 아웃라인으로)

📌 세컨더리 버튼은 프라이머리 버튼과 같은 포인트 컬러 팔레트를 사용해서 아웃라인 버튼으로 만들거나, 배경색을 포인트 컬러 팔레트에서 가장 밝은 색으로 사용하는 게 일반적

- 배경색을 포인트 색상의 50 색상으로 적용 (너무 흐리다면 100으로)

- 폰트 색상은 프라이머리 버튼에 사용한 배경색으로 적용

💡 프라이머리 버튼에 사용한 포인트 색상 배경색을 세컨더리 버튼의 글자에 적용

8) 세번째 버튼을 누르고, 스타일을 적용

📌 터티어리 버튼은 세컨더리 버튼과 유사한 컨셉으로 하며, 회색조을 활용해서 만드는 것이 일반적

- 배경색을 회색조 색상의 50 색상으로 적용 (너무 밝거나 흐리다면 100색상으로)

- 폰트 색상은 회색조 색상의 500~700 사이에서 충분히 진한 색으로 적용

완성

2. 크기 배리언츠 만들기

📌 크기(Size)

버튼의 크기는 일반적으로 Large, Medium, Small의 3가지 단계를 사용하지만, 제품 규모에 따라 사이즈를 하나만 써도 되고, 2개만 써도 되고, 3개 이상을 써도 상관없음

1) 컴포넌트를 선택하고, 컴포넌트 패널에서 배리언츠를 하나 더 추가

2) 배리언츠 작성 창에서 Name에는 Size, Value에는 Large

💡배리언츠 이름이 Size, 기본값이 Large인 배리언츠 속성을 추가하는 것

작성 후 Create property -> Size 항목이 생기고, 기본값으로 Large가 모두 적용

3) 버튼 3개를 모두 선택하고, + 아이콘 클릭

3개를 모두 선택하고 + 아이콘 -> 그럼 한번에 3개가 복사

4) 새로 추가한 버튼 3개의 Size를 모두 Small 이라고 변경

5) Small 버튼의 스타일을 적용

버튼 3개 모두 폰트를 Title/14px로 변경

(미디엄 사이즈도 만들어보고 싶다면 Title/16으로 적용)

좌우 여백을 16, 상하 여백을 8로 변경

(라지 버튼의 좌우 여백이 24, 상하 여백이 16이었으니 4씩 2번 뺀 16과 8로 적용. 미디엄 사이즈는 4를 한번만 뺀 20, 12로 적용)

곡률을 적용했을 경우, 4배수 단위로 2단계를 내려 주기

(만약 16으로 적용했다면, 16에서 4를 2번 뺀 8로 적용)

완성

3. 상태 배리언츠 만들기

📌 상태(State)

버튼이 가질 수 있는 의사 상태는 Default(Enable), Hover, Pressed, Disabled 등 다양하게 있지만, 실습에서는 버튼을 누르고 있는 상태, 즉 Pressed만 제작해보기 

1) 컴포넌트를 선택하고, 배리언츠를 하나 더 추가

2) 배리언츠의 이름은 State, 값에는 Default

(앞으로 컴포넌트의 상태를 다룰 때는 State)

3) 버튼 6개를 모두 선택하고, + 아이콘 클릭

4) 새로 추가한 버튼 6개의 State를 모두 Pressed라고 변경

5) 버튼을 누르고 있을 때의 스타일을 적용

📌 일반적으로 누르고 있을 때는 버튼의 배경색을 한 단계 더 진한 색으로 하는 편

버튼들 전체가 동일한 규칙으로 변할 수 있도록 해야 함

- 배경색을 한 단계씩 더 진한 색으로 변경 (우선순위가 같은 버튼끼리 선택하면 한번에 바꿀 수 있음)

완성

🍯 Tip

배리언츠가 들어있는 컴포넌트도 오토레이아웃을 적용 가능

- 컴포넌트 안에 여러 배리언츠가 있는 경우, 오토레이아웃을 이용하면 깔끔하게 정리

3) 프로퍼티 적용하기

1. 컴포넌트 안의 텍스트 레이어를 모두 선택

💡Ctrl(cmd)를 누른 채로 선택하면 컴포넌트 내부에 있는 레이어를 바로 선택 가능 

🍯 Tip

텍스트 레이어를 하나만 선택한 후, 피그마 메뉴에서 Edit → Select all matching layers를 누르면 컴포넌트 구조가 같은 경우에 한 해 동일한 레이어들을 한 번에 선택해줌

- 버튼 구조 안에 텍스트 레이어를 선택했기 때문에 이 컴포넌트 안에 있는 모든 버튼의 텍스트 레이어를 한 번에 선택 가능 

2. 텍스트 패널에서 ⎆ 아이콘 클릭

3. 프로퍼티 이름에는 Label, 값에는 버튼 텍스트라고 입력

완성

인스턴스 만든 후 색상, 텍스트 변경해보기

06. 텍스트필드 컴포넌트 

🔗 텍스트필드 컴포넌트 참고하기

머티리얼 디자인 →

Text fields – Material Design 3

우버 디자인 시스템 →

Base Design System

라이트닝 디자인 시스템 →

Input - Lightning Design System

카본 디자인 시스템 →

Carbon Design System

1. 텍스트필드 컴포넌트의 정의

• 컴포넌트의 종류 중 인풋에 해당하는 컴포넌트
• 인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트
• 그 중 텍스트필드는 가장 대표적인 UI

2. 텍스트필드의 구조

1️⃣ 인풋 컨테이너(Input Container)

글자를 입력하는 부분

2️⃣ 라벨/레이블(Label)

입력해야 하는 값이 무엇인지 알려주는 텍스트

3️⃣ 리딩 엘리먼트(Leading Element)

텍스트보다 더 앞쪽에 있는 엘리먼트

4️⃣ 트레일링 엘리먼트(Trailing Element)

텍스트보다 더 뒤쪽에 있는 엘리먼트

5️⃣ 헬퍼 텍스트(Helper Text)

유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

3. 플레이스홀더와 밸리데이션

1) 플레이스홀더

1-1) 플레이스홀더의 개념

• 플레이스홀더는 플레이스(자리를) + 홀더(지키고 있는 것)로, 한국말로는 **‘자리표시자’**
• 사용자가 입력해야 하는 예시를 제공하는 용도로 사용
• 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

1-2) 플레이스홀더를 쓸 때 유의할 것

• 플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장
• 플레이스홀더는 값을 입력하기 시작하면 사라짐
• 조건이 복잡하지 않은 경우에는 괜찮지만, 조건이 복잡하거나 어려운 경우에는 사용자가 입력 중에 조건을 까먹을 수도?
• 그렇게 되면 사용자는 쓰던 걸 지우고 다시 플레이스홀더를 봐야 하는 불편함
• 따라서 플레이스홀더에는 조건 대신 입력 예시를 넣기

📌 텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 적어주기

2) 유효성 검사

2-1) 유효성 검사의 뜻

• 텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사
• 예를 들어 이름에 특수문자가 있거나, 생년월일이나 핸드폰 번호에 숫자가 하나 더 있거나, 또는 이메일 형식이 맞지 않을 때, 사용자에게 ‘입력한 텍스트에 문제가 있으니 다시 확인해주세요’ 라는 이야기를 해줘야 한다는 뜻
•  **유효성 검사, 밸리데이션 체크(Validation Check)**, 밸리데이션

2-2) 유효성 검사를 하는 이유

• 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 역시 중요
• 텍스트를 입력했을 때, 자꾸만 문제가 있다고 방해한다면 사용자는 짜증이 남
• 그래서 이때, 적절한 문구와 안내로 사용자가 다시 행동을 완료할 수 있도록 유도
• 유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분

2-3) 유효성 검사 시 주의 사항

• 오류가 발생하더라도 자연스럽게 차선책이나 해결책을 제안함으로써 오류에 대한 부담이나 거부를 최소화
• 따라서 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내

4. 텍스트필드 만들기

1) 기본 형태 만들기

1-1) 텍스트 레이어를 하나 만들고, 플레이스홀더라고 입력

1-2) 오토레이아웃을 적용하고, 스타일을 적용

1-3) 인풋 컨테이너 위에 텍스트 레이어를 하나 만들고, 라벨이라고 입력

1-4) 풋 컨테이너 아래에 텍스트 레이어를 하나 만들고, 헬퍼 텍스트라고 입력

1-5) 라벨, 인풋 컨테이너, 헬퍼 텍스트를 오토레이아웃으로 묶고 컴포넌트로 만듦

1-6) 라벨, 인풋 컨테이너, 헬퍼 텍스트를 선택하고, 프레임 리사이징을 fill 로 변경

2) 배리언츠 만들기

2-1) 텍스트필드의 상태값

• 텍스트필드는 아무것도 입력하지 않은 상태가 기본 상태
• 마우스나 손가락으로 눌렀을 때, 입력할 수 있도록 활성화
• 그리고 글자를 입력하기 시작하면, 플레이스홀더가 사라지면서 글자가 채워짐
• 모두 입력하고 빠져나오면, 기본 상태와 유사하지만 플레이스홀더가 아니라 텍스트가 채워져 있음
• 이 모든 게 텍스트필드가 가질 수 있는 상태

2-2) 상태 배리언츠 만들기

1) 컴포넌트를 선택하고 배리언츠를 추가

2) 배리언츠의 이름은 State, 값은 Default로 입력

3) 컴포넌트 자체에 오토레이아웃을 적용하고 텍스트필드를 2개 더 추가

4) 새로 추가된 텍스트필드의 State 값을 각각 Focused, Filled 로 입력

5) 스타일을 적용

3) 프로퍼티 적용하기

3-1) 텍스트 프로퍼티

1) 라벨을 모두 선택하고, 텍스트 프로퍼티를 만들기

2) 플레이스홀더인 텍스트만 선택하고, 텍스트 프로퍼티를 만들기

3) 인풋 텍스트인 텍스트만 선택하고, 텍스트 프로퍼티를 만들기

4) 헬퍼 텍스트만 선택하고, 텍스트 프로퍼티를 만들기

3-2) 불리언 프로퍼티

📌 불리언은 앞에서도 알려드렸듯이, ON/OFF를 만드는 속성인데 텍스트필드의 경우, 라벨이나 헬퍼 텍스트가 없는 경우가 있음

- 그런 경우를 위해 라벨과 헬퍼 텍스트는 선택적으로 사용할 수 있도록 만들 수 있음

1) 라벨을 모두 선택하고 우측 디자인 패널에서 레이어 섹션의 ⎆ 아이콘 클릭

2) 불리언 프로퍼티로 만들기

3) 헬퍼 텍스트를 모두 선택하고 우측 디자인 패널에서 레이어 섹션의 ⎆ 아이콘 클릭

4) 불리언 프로퍼티로 만들기