애플이 사랑한 그 디자인, 글래스모피즘 카드 UI 1초컷 제작법 공개

글래스모피즘에 대하여 배워 보겠습니다

 

안녕하세요?

UI 관련 게시글을 뭘 발행할까 생각하다가, 몇 달 전 iOS에서 UI 체계를 글래스모피즘으로 완전히 바꾸어 버렸죠?

그래서 당황스러웠습니다... 사실 전 기존 iOS 디자인이 정말 마음에 들었거든요 (하지만 지금은 잘 쓰는 중)

아주 오래 전부터 글래스모피즘은 어디에나 있었지만, 사실 잘 사용되는 디자인은 아니었습니다

그러나... 애플이 판도를 뒤집었다는 사실

 

오늘은 애플이 제공하는 글래스모피즘을 구현하는 방법보다, 여러분들이 쉽게 만들 수 있는 유리 질감의 카드 디자인을 만드는 방법을 아주 기초부터 알려 드리도록 하겠습니다

글래스모피즘에 대하여 배워 보겠습니다

---

글래스모피즘이 뭐예요?

반투명 유리 효과를 활용하여 배경을 흐릿하게 만들고, 밝은 색상과 미묘한 테두리로 입체감을 주는 UI 디자인입니다

 

글래스모피즘을 콘셉트로 하는 여러 디자인을 하다 보면, 굉장히 세련되고 깨끗하고 순수한 디자인을 줄 수 있는데요

이 디자인은 어디에나 적용하기 쉽겠지만, 하나의 요소만 흐트러져도 전체가 밤티 되어 버리는 아주 까다로운 아이이기 때문에, 여러분이 레퍼런스를 찾으실 때 [글래스모피즘]을 검색하면, 대강 다 비슷하면서도 너무나도 개성 있고 세련된 디자인을 만나 보실 수 있습니다

 

아래의 사진처럼요

구글 검색 시 나오는 글래스모피즘 ui

 

그 말이 있잖아요... 누군가 하는 게 쉬워 보이면 그 사람이 개잘한다는 것...

그런 디자인이 글래스모피즘의 가장 큰 특징이라고 생각합니다

 

하지만, 이 GLASS답게, 도형을 반투명화하고 수치 조절만 잘해 주면, 쉽게 따라 할 수 있는 것또한 글래스모피즘 디자인 중 하나입니다.

 

따라서 오늘은 글래스모피즘을 이용한 카드 UI디자인을 실습하실 수 있도록 가져와 봤어요 따라오시죠

껌온~

---

💡카드 디자인 실습 Step by Step

*튜토리얼의 모든 과정은 Figma를 통해 이루어졌습니다

좌) step1 / 우) step2

 

Step 1

적당한 크기의 직사각형을 만들어 줍니다

 

Step 2

만든 직사각형에 원형 그라디언트를 생성하여 반투명하게 만들어 주세요

🚩 그라디언트를 적용한 후, 직선으로 생성된 그라디언트를 두 번째 사진처럼 대각선으로 바꾸어 주세요

 

좌) step3 / 우) step4

 

Step 3

반투명화된 직사각형에 외곽선(Stroke)를 추가하고, Step2와 똑같이 그라디언트를 적용해 주세요

🚩 외곽선의 그라디언트는 Liner Gradient, (기본)으로 적용

 

Step 4

이렇게 다 만들어진 직사각형에 Background Blur 효과만 적용하면 끝

 

어떤가요? 생각보다 간단하죠? 저도 튜토리얼 만들고 생각보다 간단해서 이걸 발행해도 되나;; 싶었는데, 이것이 글래스모피즘의 시작이니 그냥 Go 했습니다. 여러 가지로 응용할 수 있지요...

 

---

💡실습 완성 디자인

완성된 카드 디자인

 

 

이렇게 4단계만 거쳐 만든 카드 디자인입니다! 어두운 단색 배경에 그라데이션 도형을 넣으면 조금 더 시각적으로 도드라져 보이는 디자인을 만들 수 있습니다

 

---

💡응용 UI 디자인

 

그리고 이렇게 하나씩 만들어 놓은 카드 디자인을 변형하면서, 간단하게 이런 UI 디자인 레이아웃 또한 실습해 볼 수 있습니다

 

오늘 게시글도 도움이 됐길 바라며...~