✏️ 2024. 11월 21일 / 피그마 기초 4
🌍 미리보기
❄️ 피그마에서 만드는 글래스모피즘
✖️
피그마에서도 글래스모피즘 디자인을 만들 수 있어요.
우선 적당한 크기의 프레임을 하나 만들어주세요.
그 다음 적당한 크기로 원하는 도형을 그려 Fill을 #FFFFFF로 설정, 투명도를 10~20% 사이로 조정해주세요.
이후 배경으로 디자인을 넣어줄 도형으로 주변을 꾸며주신 후, 투명도를 넣었던 도형을 최상단으로 올려주세요.
레이어에서 위로 끌어올려도 되고, 단축키 Shift + Ctrl + ] 를 이용하셔도 됩니다.
맨위에 있는 도형에 드롭 쉐도우 효과를 주었는데요, 벌써부터 입체적인 느낌과 함께 투명한 유리판의 느낌이 납니다.
저는 여기에서 한번 더 효과를 추가해보겠습니다.
이제 여기에서 다양하게 원하는 색상으로 주위 도형을 꾸며주면,
취향에 따라 멋진 디자인을 만들어 볼 수 있습니다! 😊
🌞 Auto Layout에 대해 알아봅시다
✖️
오토레이아웃은 컨텐츠의 위치나 순서를 간편하게 옮길 수 있는 기능입니다.
마진이나 간격을 자동으로 설정해주기 때문에 굉장히 편리한 기능인데요.
그 쓰임을 잠깐 보여드리자면,
이런 버튼 아이콘을 글씨가 줄거나 많아지는대로 동일한 규격을 맞춰 크기가 변하도록 유동성 있게 적용되는 것이 바로 이 오토레이아웃입니다.
🌙 Auto Layout, 직접 설정해봅시다.
✖️
오토레이아웃을 조금 더 자세히 알아보기 위하여 도형 두개를 그려주었습니다.
그 다음 오토레이아웃을 적용시켜줄건데요.
📌 단축키 : Shift + A 를 활용하셔도 됩니다.
오토레이아웃을 적용하면 이렇게 패널도 오토레이아웃 패널로 변경됩니다.
레이어도 이렇게 변하게 되는데요.
여기에서 이제 바깥에 있는 프레임을 부모 프레임, 안에 있는 도형(오브젝트)를 자식 프레임이라고 생각해보겠습니다.
부모 프레임의 크기 조절 선택 값을 보면, Fixed와 Hug가 있습니다.
💡 Fixed의 특징은 자식 프레임이 늘어나더라도, 부모프레임이 고정시켜둔 밖으로는 벗어나지 못하게 하는 것이 특징입니다.
그렇다면 💡 hug, 안는다는 뜻인 것처럼 마치 부모가 자식을 안듯이 늘어나는 대로 안고 가는 것을 의미 합니다.
이제 반대로 자식 프레임을 한번 살펴보겠습니다.
자식프레임에는 Fixed와 Fill이 보이는데요.
💡 Fixed는 부모프레임의 크기에 관여받지 않고 고정시키는 값을 의미합니다.
💡 Fill은 부모프레임의 크기를 따라 맞춰가겠다라는 의미라고 보면 좋습니다.
따라서 부모프레임의 크기를 맞춰 갑니다.
그렇다면 부모프레임과 자식프레임 사이에 고정된 공간, 이것을 무엇이라고 부를까요?
이부분은 💡 Padding 패딩이라고 부릅니다.
💡 Alignment에서는 자식 프레임의 위치를 원하는 위치로 고정 정렬 시킬 수 있습니다.
Direction + Gap은 오브젝트의 정렬 방법을 정하는 부분을 생각하시면 좋은데요.
세로, 가로까지는 이해가 되지만 마지막 화살표에 대해 설명해드리겠습니다.
마지막 화살표는 💡 정렬이 일정 공간을 넘어갈때, 오브젝트의 아랫줄로 내린다 라는 설정 값입니다.
또, 오토레이아웃은 아주 편리한 기능이 하나 더 있습니다.
바로 💡 오브젝트를 하나 눌러준 후 방향키를 통해 오브젝트의 방향을 바꿔줄 수 있으며,
💡 오브젝트 간의 간격도 일정한 비율로 변경이 가능합니다.
이러한 오토레이아웃은 피그마를 사용하며 아주 유용하게 사용할 수 있으니, 참고하시면 좋을 것 같습니다.
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
