[10/30 부트캠프] 카타, 피그마 활용법 (1) 4주차 강의, 개인 과제

 

프로덕트 디자이너 부트캠프 D-8 (2주차)

📌To Do List

* 카타: 랜딩페이지

* 피그마 활용법 강의 (1) 4주차 강의

* 4주차 개인 과제 (숙제)

 

---

 

01 카타: 랜딩페이지

어제 진행하지 못했던 랜딩페이지에 대해 팀원들 전체 레퍼런스를 둘러보며 토론하는 시간을 가졌다.

1시간 했더니 5명의 레퍼런스까지만 완료된 상태. 앞으로 5명 더 남음.

시간이 없어서 9:00 - 11:00까지 진행했다.

---

의견 1

- 타이틀만 봤을 때 정확하게 알지 못하는 정보를 하단 카드 내용(테크기본기, 경제 기본기, 1분 헤드라인)을 통해 어느정도 파악할 수 있었다.

- 서두: 사용자의 공감멘트 중요하다고 생각하는데 초반에 사용자의 고민을 언급하는 부분 좋다.

- 마지막 QR코드 사용함으로써 앱 다운 유도.

 

의견 2

- 의견 1에 반대. 타이틀에서 무슨 앱인지 정확한 파악 불가. 우측 고슴도치 캐릭터보다는 내용을 반영한 시각이미지 넣었으면 어땠을까?

---

의견 1

- 목적: 영화 예매인데 예매 14위, 1.7%인 것을 봤을 때 영화가 기대 안됨. 차라리 지워버리는게 낫겠다.. 

- pre EGG, Golden Egg가 무엇인지 파악불가. → CGV사용자만 알 수 있는 조준이 많이 보인다(+CTA버튼)

의견 2

- 영화는 리뷰가 중요하다고 생각. 하지만 남여성비와 연령이 있다. 과연 이 정보가 중요했을까? 차라리 이 자리에 리뷰평이 있다면?

의견 3

- CTA버튼이 과연 괜찮은가? 제일 왼쪽에 있는 저 아이콘은 뭔가싶다. 차라리 '지금 예매'만 있는 건?

 

---

의견 1

- 마지막 CTA버튼이 또 있어서(총 2번 등장) 한 번 해볼까? 하는 마음이 생길수도 있을 것 같다. 버튼 배치는 굿.

- 금액에 비해 사용자의 혜택이 없다는 느낌. 이탈률 높을 것.

---

의견 1

- 무신사같은경우 처음 80%강조한만큼 실망감이 커서 신규는 이탈률 높을 것. 앱 사용법에 대해 모를 수도 있을 것 같다.

- 기존 고객의 유입이 목적이라면 괜찮은 랜딩.
- 신규 고객을 우리 고객으로 전환할수 있도록 조금은 친절해야하지 않나?

 

---

💡랜딩페이지는 8초 안에 이탈이 결정된다고 한다.
💡다음 내용이 궁금하도록 스크롤이 될 수 있을만한 내용이어야 한다.

좋다고 생각한 이유: 실제 영어공부 목적으로 들어가본 랜딩페이지. 랜딩은 총 2가지 버전이 있었다.

일반적인 랜딩페이지보다는 처음 후킹 포인트가 아이패드인 랜딩에 더 꽂혔다. 아이패드 없는 사람으로서 저 아이패드로 공부하고싶은 마음. 타일러를 모델로 가져간 시점에 강의질은 좋을 거라는 판단이 섰다.

아쉬웠던 점은 타일러를 모르는 사람들을 위한 짧은 타일러 강의영상을 제공하지 않았다는 것이다.

 

의견 1

- 랜딩페이지는 8초안에 이탈한다고한다. 따라서 처음 후킹하는 건 좋다.

- 과연 0원이라는 게 진짜일 지 의심된다. 결국 마지막에 가격을 더 붙이는 경우 비일비재.

 

의견 2
- 유저 데이터 중 애플기기 0원이라는 CTA버튼 괜찮을까?

- 히어로 영역과 CTA버튼의 일관성 좋다.

 

의견 3
- 수강퀄리티 이점, 혜택 강조를 했어도 좋지 않았을까? 너무 아이패드만 강조한게 아닌가?

---

💡목적: 하나카드 발급해~
- 중요한 것: 혜택!

의견 1

- 슬라이더 배치 정말 잘했다. 사용자의 행동을 유도한 것. 얼마의 혜택을 받을 수 있는지 명확하게 알 수 있다.

 

의견 2

- 숫자 잘 모르는 사람도 쉽게 확인할 수 있다는 점에서 좋다.

의견 3

- 상담 시간과 고객센터: 랜딩 페이지를 나가서 따로 확인해야 하는 경우가 있는데 다 명시돼 있어서 좋다.

 

개인적으로 ... 토스 정말 열일하는거 아닌가 싶었다.

슬라이더 나온 순간 와..미쳤다는 생각

 

---

의견 1

- 다양한 책 구독 어플 사이에서 이 앱의 이점이 뭐냐?를 기준으로 봤다. 밀리의 서재는 기업의 신뢰성을 가져가서 '1위'를 강조함.

- 하지만 그 뒤에 내용이 너무 일반적이고 평범. 좀 더 밀리의 감성을 담은 텍스트, 문구였다면 어땠을까?

- CTA버튼 "구독하기 전에 첫 달 무료로 독서 시작": 진입장벽 낮아 부담X

- UI 가독성 좋다.

 

의견 2

- 메인: 우리 일상 곳곳에서 책을 읽을 수 있다는 메시지를 담은 일러스트 좋다. (버스에서도, 카페에 앉아서도 그 어디에서도!)

 

의견 3

- CTA버튼 문구 더 추가해서 테스트하면 좋겠다.

---

의견 1

- 상단에 어떻게 진행될 건지에 대한 순서 탭버튼 좋다. → 버튼인지 인지 안됨.

- 아쉬운 점: 1분 등록이 핵심인 것 같은데 상단 탭 바에서도 1분 캠페인 등록이라고 적혀있었다면 더 좋았을 것.

- 이 캠페인을 하면 어느 정도까지 끌어올릴 수 있을지에 대한 혜택이 빠진 느낌

 

의견 2

- 메인 히어로섹션 일러스트가 저게 맞는지? 타이틀과 맞는 시각이미지가 들어가야할 것.

 

의견 3

- 이용 가이드를 2번째로 넣는 게 맞을까? 어떤 내용인지 파악 하기 전에 캠페인 등록할 확률 없음. 너무 성급하다.

- 담고싶은 정보가 너무 많음. 가독성 떨어지고 이탈률 높아질 것.

- UI위계질서 정리X.

의견 4

- 노출있는 인플루언서 사진 비호. 

 

의견 5

- AI로 캠페인 했을 때의 장점 내용X.

 

 

2시간 동안 진행됐지만 어느정도 레퍼런스를 분석하는 감이 잡힌 느낌이다.

전체적으로 가면 갈수록 토론도 잘하고 말도 잘하는 캠프사람덜,,ㅎ

나중에 더 열띠게 말했으면 좋겠다 제 말에 반박해주세요 ㅠㅠ~~

---

02 피그마 활용법 (1) 4주차

 

📌컴포넌트

💡컴포넌트
- 파운데이션의 조합을 쌓아 만들어지는 구성품
피그마 캔버스 위에 있는 모든 개체를 의미하지만 상황에 따라 다르게 쓰일 수 있다는 점!

❓모양이 다르지만 다 같은 버튼이라고 불리는 이유?

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

❗유의점: UI를 비교하고 공부할 때 형태가 아니라 반드시 UI의 목적, UI의 기능에 초점두기!

 

[컴포넌트 종류]

1) 액션

2) 인풋

3) 인포메이션

4) 컨테이너

5) 네비게이션

6) 컨트롤

 

 

 

📌의사 상태(Pseudo-state)

💡의사 상태
- 컴포넌트의 가상의 상태 → 가상의 상태 가질 때 형태가 조금씩 변화할 수 있다.
- 기본 속성은 유지한 채, 상황에 따라 다른 형태와 모양을 가짐. 이런 다른 형태와 모양들.

버튼에 마우스 올라갈 때 색깔이 어두워짐. → 의사상태

 

[의사상태 종류]

hover, pressed, active, visited, link, focus, checked, disabled....

 

 

 

 

📌컴포넌트와 인스턴스

💡마스터 컴포넌트
- 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있게 해줌.
- 복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 해줌.

 

[마스터 컴포넌트 특징]

- 원본이기 때문에 변하지 않음.

- 마스터 컴포넌트 복제 시, 인스턴스가 생김.

 

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

위에 색칠된 도형이 마스터 컴포넌트, 빈 도형이 인스턴스

 

 

[마스터 컴포넌트와 인스턴스 관계]

1) 컴포넌트 수정 시, 인스턴스 바뀜.

2) 인스턴스 수정 시, 컴포넌트 변경X - 인스턴스 수정이 우선적이다!

3) 컴포넌트 지워도 인스턴스 남아있음.

- 인스턴스 편집 및 수정 시 컴포넌트 복구해야한다.

4) 연결 해제하면 인스턴스는 컴포넌트와 분리되어 일반 프레임으로 변함.

 

 

 

 

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

🤔배리언츠, 프로퍼티를 왜 써요?

- 더 많은 디자인을 효율적으로 하기 위해

 

 

💡배리언츠
- '변종' 이라는 뜻. 변화와 관련 있는 표현
- 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있다.

 

 

💡프로퍼티
- "속성'이라는 듯. 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용.

 

 

[배리언츠와 프로퍼티를 고르는 기준]

- 컴포넌트에 적용된 파운데이션 속성이 변하는지의 유무.

첫번째: 배경색, 텍스트 색상 모두 변함 → 파운데이션이 변함 → 배리언츠

두번째: 텍스트 스타일, 내부 간격 변함 → 폰트와 간격이 변함 → 배리언츠

 

 

아이콘 크기 색상 그대로, 간격 모두 그대로. 아이콘의 스타일만 바뀌었다. → 프로퍼티

✅ 배리언츠로 만들려면 아이콘의 크기나 색상이 바뀌어야함.

✅ 배리언츠, 프로퍼티 둘 다 유연하게 섞어 사용하고있다. 

 

 

[프로퍼티 종류] - 총 3가지

만드는 법: 개체를 컴포넌트로 만들고(ctrl + alt + K) Add property +버튼 클릭.

 

1) Boolean : Y or N (참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기)

- 컴포넌트 안에 있는 요소를 보이게 혹은 안보이게 하는 속성

 

 

 

2) Instance swap : 인스턴스를 다른 인스턴스로 교체하는 기능

 

 

3) Text : 텍스트 변경

적용방법

1. 컴포넌트 전체 선택 - Add property - Text
2. 변경할 텍스트 입력
3. 컴포넌트 안에 있는 개별 텍스트영역 선택(텍스트가 바뀌었으면 좋겠다 싶은 것)
4. 우측 Text패널에서 Create Text property클릭 - Text선택

 

프로퍼티 요약 (Property)
Boolean	껐다 켰다!!!!
Instance swap	인스턴스로 교체! 모양 교체!  ==> 얘 근데 어떻게 사용해?
Text	원하는 텍스트로 변경

 

 

 

 

📌버튼 컴포넌트

버튼 컴포넌트 참고!!!

머티리얼 디자인

우버 디자인 시스템

라이트닝 디자인 시스템

카본 디자인 시스템

 

💡버튼 컴포넌트
- '액션'에 해당하는 컴포넌트
- 누름으로써 중요한 동작을 수행

❗유의할 점
- 어포던스(Affordance) = 행동유도성
: 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야한다.
: 버튼 설계 시 누를 수 있다는 시각적인 힌트를 충분히 드러내야한다. 이걸 우리는행동을 유도하는 속성이라고 해서 행동유도성 즉 어포던스라고 부른다.
: 심미성 완성도보다 버튼의 목적을 우선 생각해서 설계해야함.

 

[버튼의 구조]

① 컨테이너(Container): 안에 있는 요소를 감싸고 있는 프레임- 버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 정해짐.

② 라벨/레이블(Label): 버튼의 행동을 안내- UI에서 사용자가 입력하는 글자 = 텍스트- UI가 사용자한테 '이렇게 하세요'라고 안내 = 라벨

③ 리딩 엘리먼트(Leading Element): 버튼 앞쪽에 위치하는 요소 (이끄는)

④ 트레일링 엘리먼트(Triling Element): 버튼 뒤쪽에 위치하는 요소 (뒤따르는)

 

🤔'앞'과 '뒤'가 무슨 뜻인가요?

* LTR (Left To Right)문화권: 왼쪽에서 오른쪽으로 읽고 쓰는 문화권 → 대한민국은 여기에 속함!

* RTR ( Right To Right)문화권: 오른쪽에서 왼왼쪽으로 읽고 쓰는 문화권

따라서 버튼에서도 왼쪽이 더 앞이기 때문에 리딩요소라고 부르고, 오른쪽이 뒤이기 때문에 트레일링 요소!

아랍에서는 그 반대라고한다.

 

 

[버튼의 종류]

1) 박스 버튼, 일반 버튼

 

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

 

3) 스플릿 버튼 : 주요 액션, 관련된 보조 액션을 제공해야 할 때 사용하는 버튼.

 

4) 텍스트 버튼

 

5) 레이즈드 버튼 (Raised Button): 평평한 레이아웃에 차원을 추가. 복잡하거나 넓은 공간에서 기능을 강조한다.

 

 

6) 토글 버튼 (Toggle Button): 두 가지 이상의 상태로 설정 변경

 

 

5번과 6번은 따로 찾아봤다. 컴포넌트 종류에 대해서 다시 한 번 찾아볼 필요가 있겠다.

---

🖥️실습: 버튼 만들기

1. 텍스트 생성
2. 오토레이아웃 적용
3. frame 배경색 설정(primary컬러로 설정)
4. 패딩값 주기 - (좌/우)24px, (상/하)16px
- 8배수 적용: 8px은 너무 커서 4배수 적용하기.
5. 곡률 - 16px (4배수 적용)
6. 프레임 이름: Button

✅ 버튼 제작 시 3개로 나뉜다. 위계 질서에 따라 만든다.
1. primary 버튼 (1순위)
2. secondary 버튼
3. tertiary 버튼

 

 

7. variant 컴포넌트로 만든다.
- (안에 있는 컴포넌트 말고) 점선 선택 - properties 이름을 priority로 변경. (=우선사항)

여기서 저번에 내가 헷갈렸던 개념! 다시 리마인드겸 해서 적어본다.

[배리언츠 만드는 방법 2가지]

1) 컴포넌트 만들기 - 프로퍼티에서 variant 클릭.
2) 2개의 프레임 이상 있을 경우 - create component set을 눌러도 variant그룹으로 묶인다.

이렇게 배리언츠를 만들었다.

 

8. variant 총 3개를 만들고 이름 설정
① 개별 컴포넌트 선택
② Primority - Primary, Secondary, Tertiary 이름 설정.
9. 각 네임에 맞는 컬러로 변경.
- Secondary: 밝은 컬러를 배경으로 , Tertiary: 회색조를 많이 쓴다.

Primary

Secondary, Tertiary 배리언츠의 이름을 설정해주었다.

 

컬러변경

10. Small 버튼 만들기

① 전체 점선 선택 - variants 추가
② Size: Large 이름 변경
③ 각 버튼 1개씩 더 추가해서 3개, 총 6개.
④ 새로 추가한 컴포넌트 - 3개 Size: Small 이름 변경
- 폰트스타일: Title/14px
- 좌우 패딩: 16px, 상하 패딩: 8px (Large 버튼이 "24px/16px"이었으니까 4배수 적용)
- 곡률: 8px  (Large는 12px이었으니까 -4해서 8px)

 

 

💡버튼이 가질 수 있는 의사상태
: Default, hover, pressed 등 다양하다. 실습에선 pressed만 만들것!
: 컴포넌트 의사상태 = 프로퍼티 이름 state

 

11. Pressed 의사상태 만들기
- 버튼 전체가 동일한 규칙으로 진해지는 게 좋다. 눌렀을 때 상태는 주로 어둡게 변함.
- 실습에선 한 단계씩 진하게 만들 것.
- TIP! 배리언츠가 많아졌을 때, 오토레이아웃으로 정리하면 깔끔해짐.

① 배리언츠 추가 - State: Default
② 개별 컴포넌트 6개 선택 - 복제해서 12개 만들기
③ 배리언츠 이름 - State: Pressed 변경
④ 색깔 진하게 변경

오토레이아웃까지 적용하여 완료!

12. Text 프로퍼티 만들기

① 컴포넌트 안의 "텍스트"만 모두 선택
- 쉬운 방법: 왼쪽 피그마 아이콘 - edit - select matching layers (ctrl + alt + A)
② 우측 패널 - Layer - 다이아몬드 안으로 화살표 들어가는 아이콘 - Name: Button Label

 

Text 프로퍼티까지 모두 제작 완료!

 

 

 

🤔근데 한 가지 생기는 의문점....

Q. 전체 점선 선택 시, 총 4개의 프로퍼티가 존재한다. 근데 개별컴포넌트 만들었을 때 3개의 프로퍼티만 존재. 왜????

 

이번엔 우리 팀슬랙에 질문해봤다

와우 10분안에 빠르게 해결할 수 있었다..♥️♥️

너무 속시원했다 시원하당!!!!! 감쟈감쟈합니다 ㅠㅠ 천재들이야 천재들

 

 

★ 결론!!!! ★

Q. 전체 점선 선택 시, 총 4개의 프로퍼티가 존재한다. 근데 개별컴포넌트 만들었을 때 3개의 프로퍼티만 존재. 왜????

A. 프로퍼티 선택 시, 배리언츠만 존재한다. 

프로퍼티 (불리언, 인스턴스 스왑, 텍스트)는 적용된 요소 요소를 선택해야 볼 수 있다.

예를 들어 아이콘 불리언은 컴포넌트 선택 시 안보이지만, 개별 요소인 아이콘'만' 선택했을 땐 보인다.

마찬가지로 텍스트 프로퍼티도 컴포넌트 선택 시 안보이지만, 개별 요소인 텍스트'만' 선택했을 때 보인다.

 

---

인스턴스를 하나 가져와 우측 패널에서 원하는대로 바꿀 수 있었다.

 

---

 

📌텍스트필드 컴포넌트

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

1. 머티리얼 디자인

2. 우버 디자인 시스템

3. 라이트닝 디자인 시스템

4. 카본 디자인 시스템

 

💡텍스트필드 컴포넌트
- 컴포넌트 종류 중 '인풋'에 해당
- 무언가를 입력함.

 

💡플레이스 홀더(Place Holder)
- 자리표시자
- 사용자가 입력해야 하는 예시 제공
- 입력하면 사라지고, 글자를 지우면 나타난다.

❗ 주의점: 입력값의 조건을 적지 않는 것을 권장.
ex. 별명 (4~10자 이내) ❌ / 예) 스파르타코딩클럽 ⭕
입력했을 때 어떤 조건이었는지 까먹을 수 있기 때문. 이럴 경우 조건은 Helper Text위치에 써야한다.

 

💡유효성 검사(=밸리데이션 체크, 밸리데이션)
- 입력한 텍스트가 유효한지 아닌지 검사
ex. 형식에 안맞게 입력했을 때 "입력한 텍스트에 문제가 있으니 다시 확인해주세요" 얘기해야함

 

[유효성 검사 하는 이유]

- 목적: 방해가 발생했을 때 자연스럽게 피하거나 해결하도록 조와주는 것.

텍스트 입력할때 자꾸 문제예요~ 틀렸어요 이렇게만 하면 짜증날것!

- 적절한 문구와 안내를 담당한다.

 

❗유효사항 안내 시 주의사항

- 인간은 부정적인 것에 거부반응을 보인다.

- 오류 발생 시 차선책, 해결책을 제안해서 부담이나 거부를 최소화해야한다.

- 최대한 긍정적인 방향으로 안내할 것.

 

---

실습: 텍스트필드 만들기

 

1. 텍스트 필드 만들기.

① 폰트스타일: Body/16px 적용.
② 오토레이아웃 적용 - Input Container 프레임 이름 변경
③ 플레이스 홀더 텍스트 컬러: 연한 회색 / 배경: 흰색
④ 상하좌우여백: 16px / 곡률: 16px / 테두리: 텍스트와 같은 색 적용
⑤ '라벨' 텍스트 생성 - Title/14px , 컬러: 진한 회색.
⑥ '헬퍼텍스트' 텍스트 생성 - Body/14px, 색상:플레이스홀더 색깔
⑦ 전체 선택 - 오토레이아웃 적용
⑧ 내부 아이템 사이 패딩: 4px (4배수니까)
⑨ 전체 오토레이아웃 선택 - 이름변경 "Text Field"
⑩ 라벨, 인풋 컨테이너, 헬퍼 텍스트 선택 - Fill로 변경 (Fill: 자식이 부모한테 맞춘다)
⑪ 인풋 컨테이너 선택 - '플레이스 홀더' 텍스트의 컨스트레인트: 가운데 왼쪽으로 정렬.
⑫ 컴포넌트 만들기 (ctrl + alt + K)

 

2. 배리언츠 상태값 설정
- 인풋 박스엔 여러가지 상태값이 필요한데 실습에서는 2가지만 추가할 것!
- 인풋 컨테이너를 딱 찍었을 때, 다 입력했을 때 2가지(총3가지)

① 배리언츠로 만들기
② State:Default - 오토레이아웃
③ 배리언츠 2개 추가해서, 3개 만들기.
④ 한 개는  State:Focused(입력대기상태) / 한 개는 State:Filled
⑤ Focused 컴포넌트: 라벨, 인풋박스 테두리 컬러 변경.
⑥ Filled 컴포넌트: 입력한 텍스트 내용, 입력한 텍스트 컬러

여기서 강사분께서는 인풋텍스트의 텍스트가 늘어남에 따라 인풋박스도 늘어나는 오토레이아웃을 적용하셨는데그렇게 해야하는 이유를 느끼지 못해서 실제 입력창처럼 인풋박스의 가로사이즈 고정했다.

 

3.Text 프로퍼티 적용

① '라벨' 텍스트 3개 선택 - 우측 패널에서 Text 프로퍼티 생성 아이콘 클릭 (Label:라벨)
② '플레이스홀더' 텍스트 2개 선택 - 우측 패널에서 Text 프로퍼티 생성 아이콘 클릭 (Placeholder:플레이스홀더)
③ '인풋텍스트' 텍스트 1개 선택 -우측 패널에서 Text 프로퍼티 생성 아이콘 클릭 (Input text: 인풋텍스)
④ '헬퍼텍스트' 텍스트 3개 선택 - 우측 패널에서 Text 프로퍼티 생성 아이콘 클릭 (Helper Text: 헬퍼텍스트)

4. 불리언 프로퍼티 적용
- 어떤 것을 보면 라벨과 헬퍼텍스트가 없는 경우가 있으니, 헬퍼텍스트에 불리언 프로퍼티를 적용해볼 것.

① '라벨' 텍스트 3개 선택 - 우측 Appearance 패널에서 프로퍼티 생성 아이콘 클릭 (Show Label:True)
② '헬퍼텍스트' 텍스트 3개 선택 - 우측 Appearance 패널에서 프로퍼티 생성 아이콘 클릭 (Show Helper text: True)

실습해보면서 알게된 것은 우측 text 프로퍼티 추가하면 상단의 text프로퍼티를 추가한 것,

우측 Appearance 프로퍼티 추가하면 불리언 프로퍼티 추가한 것....!!!

강의에선 Layer로 나오는데 업데이트 되면서 바꼈나보다.

 

이제 인스턴스 생성해서 원하는 대로 적용하면 된다!!

어오 이렇게보니까 헷갈리네 ㅋㅋㅋ ㅠㅠㅠ

 

 

 

✍️4주차 숙제

1. 버튼 컴포넌트

1) Size - Medium: 사이즈 배리언츠에 Medium을 추가해주세요.
- 폰트 스타일은 Title/16px, 여백은 상하로 12, 좌우로 20으로 적용해 주세요.
- 곡률도 적용했다면 라지와 스몰 사이의 값을 적용해 주세요. 만약 라지가 16, 스몰이 8이라면 미디움은 12겠죠?

 

2) State - Disabled: 누를 수 없는 상태를 나타내요. 비활성화된 상태는 색상을 모두 제거한 형태가 일반적이에요.
- 상태 배리언츠에 Disabled를 추가해 주세요.
- 프라이머리 버튼은 배경색을 Primary/100으로 변경해 주세요.
- 세컨더리 버튼은 텍스트 색상을 Primary/100으로 변경해 주세요.
- 터티어리 버튼은 텍스트 색상을 Gray/100으로 변경해 주세요.

 

심화과제
버튼 컴포넌트에 리딩 아이콘을 추가해주세요. 리딩 아이콘을 필요에 따라 껐다 켰다 할 수 있게 해주세요. 아이콘을 다른 아이콘으로 변경할 수 있도록 만들어 주세요.

 

- 버튼 컴포넌트 안에 아이콘 컴포넌트의 인스턴스를 넣고, 위치를 라벨 앞으로 변경해 주세요.

- 라지 버튼에 넣은 아이콘의 크기는 24, 미디엄은 20, 스몰은 16px로 적용해 주세요.

- 아이콘에 인스턴스 스왑 프로퍼티와 불리언 프로퍼티를 적용해 주세요.

- 버튼 컴포넌트의 간격을 8로 적용해 아이콘과 라벨이 8만큼 떨어져 있도록 만들어 주세요.

* 심화 과제: 왼쪽에 아이콘 추가, 불리언, 인스턴츠 스왑 적용. 아 인스턴스 스왑 적용법 모르는데. 

 

- 아이콘 파일 다운이 되지 않아 자체적으로 막 제작함..ㅋㅋㅋ

- 여기서 인스턴스 스왑은 인스턴스끼리만 변경 가능하다.

- 인스턴스를 리딩 아이콘으로 끌고오기

 

 

 

 

아오 혼자 해보다가 겨우 됐다. 이대로 하면 쏘 이지할 것이다

*인스턴스 아이콘을 다른 아이콘으로 바꾸는 방법 (인스턴스 스왑)

1. 아이콘을 만든다.

① 사이즈는 상관없다. 24px로 만들었음.
② 만든 아이콘 프레임 선택 - Create Multiple Component (개별 컴포넌트를 만든다) (배리언츠로 만들지마!!)
③ 오토 레이아웃으로 묶는다.

오토레이아웃이지만 하나씩 눌러보면 개별 컴포넌트로 구성돼있다.

2. 컴포넌트를 복제해서 버튼 컴포넌트의 Leading icon으로 넣는다.

① 해당 아이콘 컬러 변경.

 

그럼 자동으로 우측 상단에 저런 게 뜨는데 저거 누르면 만들어놨던 아이콘 스타일이 있음. 거기에서 변경하면 끄읕! (이게 맞나?)

 

 

이게 맞는지 모르겠다,, 내일 물어봐야지

 

 

2. 텍스트필드 컴포넌트

아오......어떻게든 하긴했는데 하... 이거.. 다시해야겠다 ...

인스턴스 스왑이랑 텍스트필드 컴포넌트... 진짜 ㅂㄷ이다 하...

 

 

---

 

캡쳐를 하는데 화면 색감이 자꾸 이상하게 흐릿하게 변해서 찾아봤다.

chrome://flags/#force-color-profile Force color profile 설정을 sRGB 수정 후 브라우저 재시작

 

 

TIL쓰는 시간이 너무 길어져서 강의를 제대로 못듣겠다...ㅋㅋㅋ

대신 꼼꼼히 보는 시간이었지만

하나하나 적는 게 많아서 빨리 못했던 것 같다.

빨리하는 것보다 제대로 아는 게 중요하니까 서두르지는 말자!