Shadows In Compose | Jetpack Compose Tips

ADHITHYA RAMAKUMAR: Users love apps with depth, dimension, and realism.

이러한 사전 설정을 계속 활용할 수 있지만, 역사적으로 인기 있는 디자인 도구에서 제공하는 세밀한 제어를 위한 간단한 방법이 부족했습니다.

One of the easiest, yet effective, ways to achieve this is shadows.

하지만 최신 Compose API를 통해 이제 두 가지 강력한 새 수정자인 drop shadows와 inner shadows를 사용하여 뛰어난 정밀도를 얻을 수 있습니다.

For a long time, our mechanisms for rendering shadows were constrained to different elevation levels.

앞으로 몇 분 동안, 우리는 기초적인 높이를 넘어 그림자를 통해 진정으로 즐거운 사용자 인터페이스를 구축할 것입니다.

While you can still leverage these presets, they historically lacked a straightforward bot for fine-grained control that you have in popular design tools.

좋습니다. 시작해 봅시다.

However, our latest Compose APIs now grant us a great level of precision with two new powerful modifiers, drop shadows and inner shadows.

[음악 재생 중]

In the next few minutes, we will go beyond rudimentary elevation to construct truly delightful user interfaces, all through shadows.

앞으로 몇 분 안에, 우리는 기본적인 높이감을 넘어서, 오직 그림자를 통해서 정말로 매력적인 사용자 인터페이스를 만들어 볼 거예요.

All right, let's dive in.

좋아요, 시작해 볼까요.

[MUSIC PLAYING]

[음악 재생 중]

Typically, design specs for shadows revolve around four fundamental parameters.

일반적으로 그림자에 대한 디자인 사양은 네 가지 기본적인 매개변수를 중심으로 이루어져요.

These include the x and y offsets, the blur radius, the spread, and, of course, the color.

여기에는 x, y 오프셋, 블러 반경, 퍼짐, 그리고 물론 색상이 포함돼요.

The drop shadow modifier provides an interface for you to control each of these aspects through its shadow parameter.

드롭 섀도우(drop shadow) 수정자는 이 모든 측면을 그림자 매개변수를 통해 제어할 수 있는 인터페이스를 제공해요.

Let's look at how to use drop shadow. The radius parameter dictates the softness and diffusion of your blur.

드롭 섀도우를 사용하는 방법을 살펴볼게요. 반경(radius) 매개변수는 블러의 부드러움과 확산을 결정해요.