[Day 21] Variable 세팅

📍목차
1. Variable
2. 세팅 방법 / 전환 방법
3. UI 전체 최종 실습

오늘 실습에 영혼을 뺏겻당....

---

1. Variable

• 추상적인 시각적 아름다움을 구체적으로 수치화하는 과정 → 디자인~개발 과정에서 생기는 변화와 반영 오류를 최소화할 수 있다.
• 단계별로 참조하는 구조이기 때문에 수정이 용이함 → 초기값 하나만 변경하면 초기값이 적용된 모든 대상들에게 변경사항을 일괄 적용할 수 있다.
• 구조적인 사용방식을 통해 커뮤니케이션에 용이함 → 개발자가 의미를 추론하기 용이하다.

** 다크모드와 라이트모드의 같은 연두색이 들어가더라도 완전히 같은 색을 사용하지 않을 수 있다.

---

2. 세팅 방법

---

3. UI 최종 실습

• Light/Dark 모드 버튼 복습
• 화면 만들어보기
• 프로토타입을 활용하여 모드 전환 해보기

버튼 variable 세팅

화면 제작 variable 세팅

 

• 지금까지 배운 내용들을 활용하여 어플 UI 클론 만들기

레퍼런스 (CGV)

클론 실습

컨포넌트 설정

 

→ 오토레이아웃 활용

→ 컨포넌트 만들어서 인스턴스로 제작

→ Constraints L+R로 반응형

→ 그리드를 활용하여 여백 4/8의 배수로 맞추기

등등....

 

전체 화면 다 하기는 힘들어서 하나만 골라서 만들었다....

 

★ [피드백] ★

 

배운게 많아서 다 활용한건지는 모르겠지만 생각나는거 이것저것 써보면서 만들고 나니까 재미도 있고 짧은 기간동안 성장한 것 같아서 기분이 좋다!!!
완성 퀄리티가 좋은건지는 모르겠지만 ㅎㅎ..