[1주차 - Day2] 4. 그래픽 스타일의 응용

Chapter4. 그래픽 스타일의 응용

4-1) 컬러와 스타일

 

 

다른 사람들과 협업 시에는 색상 코드와 투명도 수치를 통해 공유해야 정확한 공유가 가능하다.

 

한 오브젝트에 색상 하나만 넣을 수 있는게 아니라 색상을 추가할 수 있는데 위에있는 색이 아래 있는 색을 덮는 것이기 때문에 위에 있는 색의 투명도가 100%이면 아래에 추가한 색상이 보이지 않는다.

 

 

영문 i를 누르면 색상 스포이드 기능을 사용할 수 있다.

 

자주 사용하는 색상을 스타일로 등록해둘 수 있다.

 

스타일을 등록하면 우측에 로컬 스타일로 내가 저장해둔 색상이 저장된다.

색상들은 그룹으로 묶어서 정리할 수도 있다.

 

 

 

 

tailwind color ganerator 플러그인을 실행시키면 단계별로 색상을 저장할 수 있다.

 

 

 

 

---

 

4-2) 토큰의 활용

 

 

 

토큰을 다운받아서 global에서 색상을 추가한다. (Import style)

그 다음 Light 버전과 Dark 버전을 추가하고 각각 테마에 맞는 색상을 설정한다.

Create style로 내보내기를 하면 이전에 만들어둔 사각형의 색상이 각각 Light모드와 Dark모드에서 설정된 색상으로 바뀌게 된다.

 

Light 모드 / Dark 모드

 

 

배경 Frame도 추가해서 다크모드로 변경시 배경 색도 어둡게 변하도록 수정했다.

 

 

---

 

 

 

 

4-3) 타이포그래피

 

텍스트는 클릭하는 방법과 드래그하는 방법이 있는데, 클릭으로 텍스트를 작성하면 작성한 글자에 딱 맞춘 박스가 생기지만 드래그로 만든 방식은 드래그한 크기만큼의 박스가 생기게 된다. 그래서 드래그의 경우 글자의 크기가 커졌을때 박스를 넘어가면 다음 줄로 글자가 내려가고 클릭으로 만든 경우 커진 글자 크기만한 박스로 사이즈가 변경된다.

 

한번 타이포그래피를 구현해두면 여러 페이지를 만들더라도 일관성을 유지하기 위해서 토큰을 사용한다.

 

 

---

 

 

4-4) 그라디언트의 활용

여러가지 색을 추가할 수도 있다.

컬러박스를 옮겨서 간격을 조절할 수도 있다.

 

그라디언트의 선의 길이와 방향을 조절할 수도 있다.

 

 

 

원에 그라디언트를 주고 Linear 대신 Radial로 설정하면 동그란 모양으로 그라디언트를 줄 수 있다.

 

 

 

 

 

---

 

 

 

4-5) 도형과 이펙트

그림자를 넣어줄 수 있다. 블러로 부드러운 정도를 조절하고 스프레드로 흩어지는 정도를 조절할 수 있다. x와 y는 그림자가 생기는 위치를 조절할 수 있다.

 

 

이너 섀도우를 주면 테두리 안 쪽으로 그림자가 생긴다.

 

 

왼쪽은 layer blur에 투명도 70%이고 오른쪽은 background blur에 투명도 60%이다.

background blur는 혼자서는 작동하지 않는다. layer blur는 혼자서도 작동한다.

 

 

 

 

속성값 복사하기 : command + alt + c

속성값 붙여넣기 : command + alt + v

속성값 붙여넣기 결과

 

 

---

 

 

4-6) 이미지와 플러그인

 

 

이미지 불러오기 : command + shift + k

파일에서 여러개의 이미지를 불러오고 싶을 땐 드래그 또는 shift키를 눌러서 여러 사진을 불러올 수 있다.

드래그앤 드랍도 가능하다.

 

 

도형을 만들어두고 사진을 불러온다음 도형 내부를 클릭하면 도형이 사진으로 채워진다.

 

사진을 불러와서 내부를 누르면 다른 사진으로 바꿀 수 있다.