💡 25-05-12 (월)
요즘 'Motivation'이란 앱을 사용중이다
매일 상단알림으로 동기부여/위로 말을 전해주는 어플인데 참으로 도움이 많이 된다
하기 싫고 나태해질거 같을때 알림이 뜨면 바로 정신차리게 되는거 같다
"느리게라도 앞으로 나아가는 것은 멈춰 있는 것보다 낫습니다."
▪️ 컴포넌트 - 기준 (속성 정의) -> 공통요소이고 앞으로 재사용할것들
▪️ 인스턴스 - 실제 사용,반복 사용 (속성 사용)
클리핑 마스크 다시 한번 복습 (control + command + M)
1️⃣ 이미지 > 도형 순서로 맞춘 다음 마스크 적용해준다
2️⃣ 도형 색깔을 바꾸고 싶으면 Fill 값에서 바꿔준다
-> 만약 이미지가 안 보인다면 순서 확인해주기!!
디자인 시스템이란?
: UI의 모든 구성 요소와 원칙을 정리해 놓은 시스템
-> 디자인 일관성을 유지, 작업속도 향상
앱과 웹사이트는 수많은 페이지로 구성되기 때문에 UI 화면을 빠르고 대규모로 제작해야 할 필요성이 커지고 있다. 이러한 상황에서 디자인 시스템은 필수 요소가 된다!
많은 기업들이 자신만의 고유한 디자인 시스템을 가지고 있다 (구글,애플...)
↗️ https://creative.starbucks.com/
스타벅스의 브랜드 아이덴티티를 시각적으로 표현한 공식 디자인 가이드 사이트이다
(참고하면 좋을듯..!)
구글 머티리얼 디자인
https://m3.material.io/
Material Design은 구글이 만든 디자인 시스템이자 디자인 언어이다
▶︎ 현대적인 디지털 경험을 더 직관적이고 일관되게 만들기 위해 개발됨
애플 휴먼인터페이스 가이드
https://developer.apple.com/kr/design/
Apple의 Human Interface Guidelines (HIG)는 사용자에게 일관되고 직관적인 경험을 제공하기 위해 만든 공식 디자인 가이드라인이다
▶︎ 디자이너와 개발자가 Apple 생태계에 맞는 앱을 만들 수 있도록 도와주는 핵심 문서
디자인 시스템이 필요한 이유
1️⃣ 일관성 있는 사용자 경험
버튼, 컬러, 타이포그래피, 아이콘 등의 시각적 요소들이 정해진 규칙 안에서 반복되기 때문에 사용자 입장에서는 익숙하고 자연스럽게 느껴지는 UI/UX가 된다
2️⃣ 디자인 & 개발 효율성 향상
👤 디자이너
이미 정의된 컴포넌트를 조합만 하면 되기 때문에 처음부터 다시 디자인할 필요가 없어서 효율적인 작업이 가능
👤 개발자
디자인 시스템에 따라 컴포넌트를 재사용할 수 있어서 빠르고 정확한 개발이 가능
3️⃣ 팀 간 협업이 쉬워진다
▪️ 디자이너, 개발자, 기획자가 같은 언어로 소통하게 된다
▪️ 디자인 시스템이 하나의 공통 래퍼런스 역할을 하므로 오해가 줄어든다
4️⃣ 쉬운 유지보수
디자인 수정이나 브랜드 리뉴얼이 필요할 때 디자인 시스템만 업데이트하면 전체 제품에 자동으로 반영되거나 일괄 수정이 쉬워진다
5️⃣ 브랜드 아이덴티티 강화
모든 제품과 서비스에 걸쳐 통일된 이미지와 목소리를 전달할 수 있어서 브랜드 신뢰도도 함께 올라간다
베리언트
: 하나의 컴포넌트에 여러 상태를 묶어서 관리하는 기능
▶︎ 베리언트 하는 기준은 같은 디자인인데 차이점이 보일때 한다
-> 스타일과 속성이 다른 경우 일일히 컴포넌트를 만들어서 사용하는 것보다는 유사한 종류의 컴포넌트를 세트로 묶어서 사용하는 것이 훨씬 효율적이다
(프로젝트를 진행하다 보면 생각보다 많은 컴포넌트를 만들어 사용함)
▪️ 컴포넌트는 같지만 색상이 다른 Lignt 모드와 Dark 모드
▪️ 같은 용도지만 크기를 small - medium - large
처음에 디자인 하기전 경우의 수를 생각해야 한다 🤔
- 아이콘의 유무
- 색상 차이
▶️ 쓸 아이콘들 모두 가져와 컴포넌트화 하기 > 프로퍼티 속성을 정의해주기
컴포넌트화 > 베리언트화 > 프로퍼티(속성) 지정 > 4가지 속성 존재
✔️ variant : 같은 디자인에서 색상,사이즈 변경
✔️ boolean : 보임/안보임 설정
✔️ instance swap : 인스턴스 다른걸로 교체
✔️ text : 텍스트 변경
⭐ 베리언트 하는 방법 ⭐
버튼이름 작성 > 패딩값,래디어스 적용 > 컴포넌트화(command + option + K)
다이아몬드(베리언트) 클릭하면 프로퍼티 생성 > 각각 선택하여 Rename에서 이름 변경과 프로퍼티 이름 변경
(굳이 rename 아니어도 됨)
에셋에서 확인해보면 사진처럼 나타난다
만약 텍스트도 추가하고 싶다면 ⤵︎
텍스트 더블클릭 > 프로퍼티 설정 기능인 육각형 버튼 클릭 > 텍스트 추가
(컴포넌트 각각 적용시켜줘야함)
이렇게 텍스트까지 추가된것을 볼 수 있다
다음은 아이콘 + 텍스트 베리언트를 해보자
버튼이름 + 아이콘 작성 > 패딩값,래디어스 적용 > 컴포넌트화(command + option + K) > 아이콘 더블클릭 후 Appearance에서 육각형 버튼 선택 후 추가
에셋에서 확인해보면 아이콘 유무를 선택할 수 있다 (Boolean)
내가 원하는 아이콘을 변경하고 싶다면 instance Swap를 통해 아이콘 추가해주면 된다
⭐️ ⭐️ ⭐️ '아이콘 + 텍스트' 컴포넌트화 할때 아이콘은 컴포넌트에서 가져온 인스턴스여야한다 -> 컴포넌트화 되어야 함!
Swap instance 는 다른 아이콘으로 교체하는것인데 내가 원하는 아이콘으로 바꾸고 싶다면 그 아이콘들도 컴포넌트화가 되어야한다 ⭐️ ⭐️ ⭐️
-> Swap instance 위치 파악하기
컴포넌트에 프로퍼티 주기 (실습)
첫번째에 오퍼시티를 0%으로 바꿔준 다음 컴포넌트화 (command + K) > 베리언트 적용 > 두번째에는 오퍼시티를 10%으로 변경 > 프로퍼티 이름 설정 (status-hover)
에셋에서 인스턴스를 가져와보면 프로퍼티가 잘 적용되었다는걸 확인할 수 있다
➕ Hover : 마우스를 살짝 갖다댔을때 색깔이 변하면서 사용자한테 알려주는 것
➕ 다른 사람한테 공유할때 can edit해야 상대방이 수정이 가능하다
✔️ command + K : 플러그인 열람
✏️ 컬리 앱 / 올리브영 회원가입 버튼 / 스타벅스 화면 컴포넌트화 적용하기
두줄로 하고 싶으면 auto layout - flow - Wrap 선택하기
select matching layers를 선택하면 컴포넌트에서 같은 레이어가 선택된다
-> 컴포넌트, 모든 인스턴스를 수정할 수 있다
오토레이아웃은 겹치는게 안돼서 position - ignore auto layout을 눌러준다
✔️ option + H : 중앙 배치
☑️ Figma에서는 겹쳐진 요소 위에서 클릭하면 가장 위에 있는 요소만 선택되는데 Command 누른 채로 클릭하면 마우스 아래에 있는 개별 요소를 바로 선택할 수 있다
-> 카드 컴포넌트 안에 텍스트/아이콘/배경 박스가 있을 때 그냥 클릭하면 컴포넌트 전체가 선택되지만, Command 누르고 클릭하면 텍스트 하나만 바로 선택 가능하다
☑️ x값은 왼쪽부터 떨어진 지점을 나타낸다
-> 마진값 넣어주기
