색상 | 가져오기, AI 생성, 테스트 | FlutterFlow University

1. 디자인 시스템의 색상 설정 방법 및 색상 유형

• '테마 설정'에서 '색상'을 클릭하여 색상을 설정할 수 있다.
• 색상을 가져오거나 색상 팔레트를 생성하고 테스트하는 세 가지 방법이 있다.
• Figma나 다른 디자인 시스템에서 이미 가져왔다면 해당 색상이 표시될 것이다.
• 만약 가져오지 않았다면 브랜드 가이드라인에 맞게 색상을 수정하거나, 필요한 색상을 추가할 수 있다.
• 색상은 브랜드 색상, 유틸리티 색상, 액센트 색상, 시맨틱 색상, 그리고 사용자 정의 색상으로 구분된다.

1. 플러터로 라이트 모드와 다크 모드에 대비하여 색상을 설정하는 방법

• 라이트 모드에서 설정한 색상들을 다크 모드에 복제한다. 유틸리티 색상을 제외하고 동일하게 설정한다.
• 유틸리티 색상도 다크 모드에 뒤집어서 설정한다. 다크 모드에서는 색상을 뒤집게 되기 때문이다.
• 새로운 FlutterFlow 프로젝트를 설정할 때는 기본적으로 이 과정이 자동으로 수행된다. 다크 배경과 밝은 배경에 따라 텍스트 색상이 반대로 설정되어야 하기 때문이다.
• 마지막으로, 기타 색상들(브랜드 색상, 강조 색상, 의미론적 색상)을 검토하여 빛 모드와 동일한 시각적인 효과를 낼 수 있도록 조정해야 한다.

1. FlutterFlow에서 색상 팔레트 생성하는 방법

• FlutterFlow에서는 새로운 브랜드 색상 팔레트를 입력하는 방법 외에 색상 팔레트를 생성할 수 있는 세 가지 방법이 있다.
• 'Coolers'라는 서비스에서 팔레트를 가져 오거나, 이미지에서 얻어올 수 있으며, AI를 통해 생성할 수 있다.
• 'Coolers'는 수많은 색 도구를 제공하기 때문에 색상 팔레트를 생성하기 좋다.
• 따라서 'Coolers'에서 색상 팔레트를 얻기 위해 여러 가지 방법을 제공하는데, 그 중 한 가지는 'spacebar'를 눌러 팔레트를 순환시키는 방법이 있다. 또한 여러 가지 옵션으로 팔레트를 정렬하고 'UI colors'와 같은 검색 기능을 이용하여 색상을 찾을 수 있다.

1. FlutterFlow에서 색상 생성하는 두 가지 방법.

• 색상 팔레트를 마음에 들게 만든 후 export and code에서 해당 코딩 정보를 복사하여 FlutterFlow에서 import하여 사용 가능하다.
• 이미지에서 추출된 색상값을 보고 싶을 때에도 extract image에서 쉽게 사용 가능하다.
• 마지막으로, Extracted Colors에서 적합한 색상을 선택하여 palette를 생성할 수 있다.
• FlutterFlow에서 생성한 바이브랜드 컬러를 색상 값으로 사용하고 이후 불필요하다면 삭제할 수 있다.

1. 색생활을 관리하는 방법 및 테스트

• 색상 팔레트를 구성하는 방법은 기본색을 선택하고 배경색을 설정한 다음 완료를 클릭하는 것이다.
• 또 다른 방법은 AI를 사용하여 팔레트를 생성하는 것인데, AI를 통해 색조와 스타일에 따른 다양한 색상이 생성된다.
• 테스트를 통해 앱에서 색상이 잘 어울리는지, 대비 비율이 적절한지, 라이트 모드와 다크 모드에서 일관성 있는 브랜드 컬러인지, 색각 이상을 고려한지 확인한다.

1. 테마 설정 및 페이지 색 조정

• 맨 처음 필요한 것은 몇 개의 더미 페이지입니다.
• 다음으로 테마 설정으로 이동하여 첫 번째 페이지를 선택하여 작업을 진행합니다.
• 어두운 모드에서는 페이지 디자인에 대비하기 위해 보조 배경 색상을 조정해야합니다.
• 또한, 아이콘의 배경 색상도 브랜드 색상과 일치해야합니다.

1. 페이지 디자인에서 색상 조합을 테스트하는 방법

• 임시로 추가한 테스트 페이지에서 색상 테스트를 하고, 만족스러운 색을 찾으면 해당 페이지를 삭제해도 된다.
• 만족스러운 색상을 찾기 위해 페이지 한 개 더 추가하여 'product page'의 색 조합을 테스트해보면서, 밝기가 적절하지 않은 부분에서도 적합한 색을 찾는 방법에 대해 가르쳐주었다.
• 색상 조합을 찾는 것은 여러 단계를 거치는 일이며, 이 과정에서 추가되는 색상도 있다.
• 모바일 앱을 디자인함에 있어서 대비 비율의 중요성을 강조하며, 이 과정을 통해 우리 앱이 좀 더 멋지게 보이게 됐다.

1. 색상 일관성과 대비 비율이 중요하다.

• 색상 일관성을 확인하기 위해 빈 페이지를 생성하고 배경을 설정한다.
• 두 개의 컨테이너를 추가하여 밝은 배경과 어두운 배경을 구분한다.
• 각각의 컨테이너 안에 중앙에 요소를 배치한다.
• 색상의 밝기 값을 확인하여 대비 비율을 조절한다.
• 색상이 배경에 더 가까우면 더 부드러운 느낌이고, 배경과 대비가 크면 강렬한 느낌을 준다.

1. 배경색에 따라 적절한 대비 비율을 유지하고, 색맹에 대한 테스트를 실시하세요.

• 배경색에 따라 디자인한 경우, 대비 비율은 표준이 되어야 하며, 강조하고자 하는 색상을 약화시켜야 합니다.
• 배경색이나 글자색 또는 둘 다 조정하여 대비를 조절할 수 있습니다.
• 만약 대비를 약화시키고 싶다면 값을 조정하고, 테마 설정에 반영해야 합니다.
• 더불어, 색맹에 대한 테스트도 실시해야 합니다. 'Color Service'에서 제공하는 도구를 사용할 수 있습니다.

1. ️색盲 시뮬레이터를 활용하여 앱에서 색상 대비를 통해 구분할 수 있는 적절한 모습을 찾는 방법

• 선글라스를 씌운 색맹 모드로 색 대비를 시뮬레이션 할 수 있다.
• 색 대비는 앱에서 다른 요소들과 구별하기 위해 사용되므로 시뮬레이터에서 의도적으로 찾아볼 필요가 있다.
• 만약 색 대비가 감지하기 힘들 정도로 낮아진다면, 색 대비 조정이 필요하다.
• 대비가 높아질수록, 요소들 간의 차이를 시각적으로 구분하기 쉽다.
• 적절한 색 대비를 선택하면, FlutterFlow에서 색상 구성을 완료할 수 있다.

디자인 시스템에서 색상 설정 및 유형은?

'테마 설정'에서 '색상'을 클릭하여 색상을 설정할 수 있어요.

색상을 가져오거나 색상 팔레트를 생성하고 테스트하는 세 가지 방법이 있어요.

이미 가져온 경우에는 해당 색상이 표시됩니다.

가져오지 않은 경우 브랜드 가이드라인에 맞게 색상을 수정하거나 색상을 추가할 수 있어요.

디자인 시스템에서는 브랜드 색상, 유틸리티 색상, 액센트 색상, 시맨틱 색상, 그리고 사용자 정의 색상으로 구분됩니다.

플러터에서 라이트 모드와 다크 모드에 색상 설정하는 방법

라이트 모드에서 설정한 색상들을 다크 모드에 복제합니다.

유틸리티 색상을 제외하고 동일하게 설정합니다.

유틸리티 색상도 다크 모드에 뒤집어서 설정합니다.

다크 모드에서는 색상이 뒤집히기 때문입니다.

FlutterFlow를 새로 설정할 때는 이 과정이 자동으로 수행됩니다.

다크 배경과 밝은 배경에 따라 텍스트 색상이 반전되어야 하기 때문입니다.

마지막으로 브랜드 색상, 강조 색상, 의미론적 색상을 검토하여 라이트 모드와 같은 시각적인 효과를 낼 수 있도록 조정합니다.

FlutterFlow에서 색상 팔레트를 생성하는 방법?

FlutterFlow에서 새로운 브랜드 색상 팔레트를 입력하는 방법 외에 색상 팔레트를 생성할 수 있는 세 가지 방법이 있어요.

'Coolers'라는 서비스에서 팔레트를 가져 오거나, 이미지에서 얻어올 수 있으며, AI를 통해 생성할 수 있어요.

'Coolers'는 수많은 색 도구를 제공하기 때문에 색상 팔레트를 생성하기 좋아요.

따라서 'Coolers'에서 색상 팔레트를 얻기 위해 여러 가지 방법을 제공하는데, 그 중 한 가지는 'spacebar'를 눌러 팔레트를 순환시키는 방법이 있어요.

또한 여러 가지 옵션으로 팔레트를 정렬하고 'UI colors'와 같은 검색 기능을 이용하여 색상을 찾을 수 있어요.

FlutterFlow의 색상 생성 방법은?

FlutterFlow에서는 색상 팔레트를 만든 후 export and code를 통해 해당 코딩 정보를 복사해 FlutterFlow에서 사용 가능해요.

이미지에서 추출한 색상값도 쉽게 extract image에서 사용할 수 있어요.

마지막으로, Extracted Colors에서 적합한 색상을 선택하여 palette를 생성할 수 있어요.

생성한 색상값을 사용하고 이후에는 불필요하다면 삭제하면 돼요.

색상 팔레트를 구성하는 방법?

기본색을 선택하고 배경색을 설정한 다음 완료를 클릭하거나, AI를 통해 색조와 스타일에 따른 다양한 색상이 생성된다고 해요.

테스트를 통해 앱에서 색상이 잘 어울리는지, 대비 비율이 적절한지, 라이트 모드와 다크 모드에서 일관성 있는 브랜드 컬러인지, 색각 이상을 고려한지 확인한다는 것도 중요해요.

웹 페이지 디자인의 핵심 요소는?

몇 개의 더미 페이지부터 시작하는 것이 좋아요.

테마 설정으로 이동해서 첫 번째 페이지를 선택하여 작업을 진행해야 해요.

어두운 모드에서는 페이지 디자인을 위해 보조 배경 색상을 조정해야 하고, 아이콘의 배경 색상도 브랜드 색상과 일치해야 해요.

페이지 디자인의 색상 조합을 테스트하는 방법은?

임시로 추가한 테스트 페이지에서 색상 테스트를 해보고, 만족스러운 색을 찾으면 해당 페이지를 삭제해도 돼요.

만족스러운 색상을 찾기 위해 페이지 한 개 더 추가하여 'product page'의 색 조합을 테스트해봐요.

밝기가 적절하지 않은 부분에서도 적합한 색을 찾는 방법에 대해 배웠어요.

색상 조합을 찾는 것은 여러 단계를 거치는 일이며, 이 과정에서 추가되는 색상도 있어요.

모바일 앱을 디자인할 때, 대비 비율의 중요성을 강조하며, 이 과정을 통해 우리 앱이 더 멋지게 보이게 되었어요.

색상 일관성과 대비 비율의 중요성은?

색상 일관성을 확인하기 위해 빈 페이지를 생성하고 배경을 설정해요.

두 개의 컨테이너를 추가하여 밝은 배경과 어두운 배경을 구분하고, 각각의 컨테이너 안에 중앙에 요소를 배치해요.

색상의 밝기 값을 확인하여 대비 비율을 조절하면 됩니다.

색상이 배경에 더 가까우면 더 부드러운 느낌을 줄 수 있어요.

하지만, 배경과 대비가 크면 강렬한 느낌을 줍니다.

이렇게 색상 일관성과 대비 비율을 잘 조절하면 더 나은 디자인을 만들 수 있어요.

디자인 시 배경색과 대비비율 유지?

배경색에 따라 디자인한 경우, 대비 비율은 표준이 되어야 해요.

강조하고자 하는 색상을 약화시켜야 해요.

배경색이나 글자색 또는 둘 다 조정하여 대비를 조절할 수 있어요.

대비를 약화시키고 싶다면 값을 조정하고, 테마 설정에 반영해야 해요.

더불어, 색맹에 대한 테스트도 실시해야 해요.

'Color Service'에서 제공하는 도구를 사용할 수 있어요.

색감 장애를 위한 앱 디자인 방법

선글라스를 씌운 색맹 모드로 색 대비를 시뮬레이션 할 수 있어요.

앱에서 색 대비는 다른 요소들과 구별하기 위해 사용되므로 시뮬레이터에서 의도적으로 찾아볼 필요가 있답니다.

만약 색 대비가 감지하기 힘들 정도로 낮아진다면, 색 대비 조정이 필요해요.

대비가 높아질수록, 요소들 간의 차이를 시각적으로 구분하기 쉬워지죠.

이렇게 적절한 색 대비를 선택하면, FlutterFlow에서 색상 구성을 완료할 수 있답니다.

색상 | 가져오기, AI 생성, 테스트 | FlutterFlow University

Let's set up our colors in our design system. So come over here to your theme settings in the bottom left here and click on colors. And there are three types of things you can do with colors: you can import colors, generate a color palette, and test your color palette. So first, let's import our colors. Now, if you've either imported from Figma or connected a design system, that would be over here in this design system. And here's your Figma import. And we have a video link below if you need to do that.
You will have already imported your colors. In that case, you want to simply confirm that you have all the types of colors you need. That is, we've provided labels for common app color types like background colors, success, error, and warning colors. And it's easy to forget that you need some of these secondary utility-type colors. So you just want to review that you have all the colors you need. But if you haven't imported from Figma already or another design system, then you can just modify the colors to match your brand guidelines. And there are a couple of ways you can do that. You can go into this hex code value right here and just paste in your value and hit return. Or you can come into the color itself and put in whatever color value your brand. Guidelines specify, and then accept. It also, if you mess up, you have Command Z to undo, and Shift Command Z to redo. If you need more colors, you can just come up to this big 'Add Color' button and add another one right here..
And you can specify the name of your color and change the value however you need or delete any colors.  Now, we've divided the colors into five different color categories. We've got your brand colors, which are going to be your main brand colors. Then, we've got utility colors, and these are your text and your backgrounds. Then, we've got accent colors, semantic colors. That is, these are colors that you're going to use when you need some UI color for a system state. So let's say when some user action or an API call has been successful or errored out.
And then, finally, the last category will come in when you add another color, and that'll be custom colors. Now, one thing to note is that this is just to help you organize the color palette in your mind. But these categories don't restrict your designing in any way. You can use any color in any place that accepts a color. So there's no place where you can, like, only use utility colors.

Alright, so after you've set up your colors for light mode up here, you want to come down and... Set them up for dark mode and there are three steps. First, you want to duplicate all your colors so bring them down what you've set up in here identically down into your dark mode, except for your utility colors, and that's because in dark mode, these are going to be the things that are going to be reversed. That's the second step: bring down your utility colors, but reverse them..
Now, by default, when you set up a new FlutterFlow project, this will happen automatically because the whole idea of light and dark mode is one is on a light background and one is on a dark background, so the text needs to be the opposite color.  The third and final step is that you will need to check your other colors: your brand colors, your accent colors, and your semantic colors so that they optically look like they're light equivalent because normally, colors, logos, brand assets are designed on a light background and all of your colors won't have a lightness value at perfect 50 percent. So, in order for it to look like the same color, you'll need to make slight adjustments. We'll review how to review color contrast in our last step, testing.
But real quickly, so if you come into your primary color here and change the color type to HSL, you can see. So we've got a lightness value of 58. That is, it is 8 percent closer to pure white than pure black. So, when that's up against a light background, it'll have less contrast than against a black background. So it'll look like this, and you would want to change it slightly like this so they look the same but they're actually not.

Okay, so that's importing your brand color dollars. Now, if you don't have a color palette, FlutterFlow provides three ways to generate a color palette. That is, right here, you can generate it from a service called Coolers, you can extract it from an image, or generate it from an AI. So, let's first start out with Coolers..
Now, Coolers is a color app that provides tons of color tools.  So, let's jump over there and see what we've got available to us. So, to get or explore a palette, the most simplest way is to just press spacebar, and it's going to cycle you through a bunch of color palettes. You could also come into this menu right here and click explore, and you can see a lot of the most popular color palettes and sort them according to a bunch of helpful properties. You can also search. So, maybe you want to look for UI colors, and you can select it, and it'll load it into the main panel. Okay, great. So, let's close that.

Once you've got a palette you like, come here to export and code, and what you're looking for is this object right here, but you don't want that comma. You just want the actual object itself which will include the name of the color and the hex value. Okay, so let's copy that. Don't press copy because this will copy all the code here and all we care about is this object. Then let's jump back into FlutterFlow and we can just paste that in and import. And these are going to come in down here in your custom colors. So, if you want to use them for your main brand colors, you would just come in here, grab those values, and then paste them in. And then after you're done, you can just delete them because you don't need duplicate versions of those colors.
Okay, the second way to generate a palette is by extracting it from an image..
So, maybe you have an image that you really like the feeling of it, and you want your app to have that same feeling.  Well, you can come in here to extract image and grab an image you like. So, here, if you want to delete any of them, you can, but let's continue. And then this last step is mapping. So, what you want to do is come in, when you select the color, you can map it to the colors we just extracted from the image.

So, we've got this color as Our primary color and we want our background to be this lighter color and so on. And when you're done, you can just click done. The last way is to come in with generate with AI, and you have the full flexibility of AI that we've all come to know and love. So maybe I want a color palette from anthropology, awesome! And this is pretty cool because it gets the style, a lot of muted tones with a muted primary which is kind of like the magazine. And the other cool thing is that we have this very powerful interface to test it. So we can come and select a different page. Once again, we don't have another page set up, but you could do that here. You could see all the brand colors. You could refresh that query, so you get another variation on these. And you can come over here to this explore tab where it's giving you a bunch of different type and color variations generated from that query. So this is our current theme that is the one back here, not the one in here. And then we can see this was the one we are seeing in this screen right here..
But then we have a couple of different options, and so it switched out and gave us a different body type choice, and you can select this to see it and look through all of the different options.  Super cool, and of course this... It works with dark and light mode. All right, so I'm going to choose this one right here and save changes. Okay, so that's importing your palette and generating.
And the last step is testing it. So when we're testing our app, we're going to test for four things. First is just does it look good? Do these colors go well together when they're implemented in a design? Second, we're looking for contrast ratios. That is, when colors are stacked on top of each other, is there enough contrast? Are those elements distinguished enough? Third, we're looking for brand consistency with our colors. Specifically, are they consistent across light mode and dark mode? And lastly, we're checking for how our colors work with color blindness.

Okay, so the first thing that we need is we need some pages. We need some dummy pages. So let's just come over here and let's just grab a template page. And we're gonna grab this dashboard page right here. The name doesn't matter. And let's grab, let's say, a product page down here. Great! Now, we can go back to our theme settings and into "Explore Project Colors", and then let's select our first page we made. And that looks great! Now, of course, this is working like this because this page was set up with the primary color bound. Here, and here, and here. Etc..
And, you can of course go to the page and make adjustments.  We'll be doing that in a second. So, this page looks good. Now, let's check it in dark mode. And, we can see here we've got a problem. And, that is this secondary background on these cards right here doesn't have enough contrast with our primary background right here. So, let's come into our secondary background here and let's just bring it up a little bit. Beautiful! Now, we can see that they're actually cards. The next thing is we see that the backgrounds of these icons should match this brand color here. So, let's just save that change and go in here, go into our dashboard page. Select that little card and change this color to our primary color.

Beautiful! And the other one, great! And once you feel good about those colors, you can of course delete these pages because you're just using them to test your color palette. All right, let's look at one more page. So, come back in here, explore project colors. And, let's go to this products page. And, once again, this bottom sheet down here should probably be set to dark. So, let's just go in there and make that change. Come in here and grab this bottom button area and set it to secondary background. But that's not... Exactly right because the contrast ratio between this and the background is not great, and you've got some options here. You could add a greater drop shadow, maybe a border..
You could bump up the fill color here to be lighter, which maybe means that you need to add in additional color in your custom colors.  And this is the whole process of testing your colors. Like maybe you didn't realize you needed this tertiary background color. Okay, so this is great. Our app is looking good. We've tested our contrast ratios.

Now let's check for brand consistency with our colors. And here's a little trick I want to show you. So let's just create a blank page. We're just going to call this brand. Let's switch it to light mode. We're going to get rid of our app bar. We're going to add in two containers here. Let's just expand this first, and we're going to duplicate it. And let's take our column here and expand it. Okay, great. So one of these is going to be our primary light background, the other one is going to be our dark background, which will be our primary text because remember those are switched. And then inside each of these, we are going to add in another container. We're going to center it in the middle. So there we go. Let's just make it. A circle, give it a little bit more diameter, and let's just take our tertiary color. We're going to copy that and then paste it into this container. Beautiful, okay. So, we're really looking for two things here. One is that we're looking that our brand colors look consistent across dark and light, and second, we want the contrast ratio to be optically the same between the background and the foreground..
But why does that matter? Well, because that gives your app its distinct feeling.  Because if there's a huge contrast ratio, it's going to feel a little bit more punchy, as opposed to if the contrast ratio is smaller, it'll feel more subdued. And if we come into our tertiary color here and we check its lightness value, we can see it's at 65. So it's 15 closer to pure white. So you can think about it this way: this color is 15 closer to its background, as opposed to this against the dark. So this is a subtler feeling, and this is a punchier feeling.

And whatever you change will depend on what you primarily designed it for. So if you designed it on a white background, then this contrast ratio should be canonical. It should be the standard, so this punchier one you want to subdue. And of course, there are two ways to do that. You could change the... Background or this color or both, you can move them slightly towards each other. So if we want to remove these, closer we can just bring this down a little bit. Great. And so that feels a little bit more subtle. Now, this is an art. Get some feedback and once it feels good, that's great. Now, sometimes the difference won't be big enough that you want to make any serious changes. But if you do want to make the change, once you feel good about that contrast, then just copy this value in here and then go back to your theme settings. And in that dark mode, you would just come here and paste it in. Beautiful. All right..
The last testing thing that you should do is check for color blindness and there are a lot of tools out there, but that Color Service has a great one.  So let's jump back over there.

So, if you come into these sunglasses right here, it's going to give you a bunch of different types of color blindness to simulate. So, here is your palette up here and here's the simulated color palette down here and you can click through these, okay? But what are you looking for? The main thing you're looking for is that in the colorblind simulated palette, the contrast ratio, the difference between your colors, does not become so close to be. Indistinguishable because you use colors to make distinctions between things in your app. So, if they're no longer able to make that visual distinction, you might want to consider slightly altering your palette to make the contrast work for colorblindness. So, for instance, here you can see that there's quite a bit of contrast between these colors, and these are getting close to each other. Now, these are still different enough to be distinguished, but this is the type of thing that you want to look out for.
Alright, that's it! You've set up your colors in FlutterFlow...

피그마 가져오기 | FlutterFlow 대학

1. ️️ Figma에서 디자인에 대한 색상과 타이포그래피를 가져오는 방법

• Figma에서 디자인에 대해 기본 설정을 해야 색상과 타이포그래피를 가져올 수 있으며, 이를 올바르게 설정해야 한다.
• 기본적으로 Figma는 디자인에서 타입 스타일과 색상을 생성하지 않는다.
• FlutterFlow를 사용하여 가져올 것은 디자인의 텍스트 스타일과 색깔 스타일이다.

1. 포토샵 디자인 시스템에 오브젝트 디자인 관련 작업법 소개

• 디자인에서 발견한 로컬 스타일을 그대로 적용하면, 오브젝트와 함께 스타일이 금방 추가된다.
• 오브젝트를 선택한 후, 색깔 채우기를 클릭해 디자인에서 추가된 로컬 스타일을 확인한다.
• 이것을 디자인 시스템에 추가한 후, 이름과 스타일을 설정하여 디자인 시스템에 적용한다.
• 예시로 추가한 것이 색상과 텍스트 스타일이니, 필요한 디자인에 직접 적용할 수 있다.

1. UI 디자인을 통해 은행 앱을 구축하고 FlutterFlow에서 Figma 테마를 가져옴

• 다양한 웹과 모바일 페이지를 가진 은행 앱의 UI 디자인을 사용하여 실제 예시를 보여줌.
• FlutterFlow에서 피그마 테마를 가져올 때 URL과 액세스 토큰이 필요하며, 액세스 토큰은 피그마 대시보드에서 개인 액세스 토큰을 얻는 과정을 설명함.
• 피그마 테마로부터 가져온 색상을 색상 매핑하여 메인 테마 색상으로 지정하고, 타이포그래피 매핑을 통해 피그마의 글꼴을 매칭함.
• 이렇게 해서 Figma에서 가져온 색상과 글꼴이 모두 매핑되었음.

Figma에서 색상과 타이포그래피 가져오기

Figma에서 색상과 타이포그래피를 가져오려면, 색상과 타이포그래피에 대한 기본 설정을 하고 올바르게 설정해야 해요.

기본적으로 Figma에서는 타입 스타일과 색상을 생성하지 않아요.

FlutterFlow를 사용하여 가져올 수 있는 것은 디자인의 텍스트 스타일과 색깔 스타일뿐이에요.

포토샵 디자인 시스템에 오브젝트 디자인 추가하기

디자인에서 발견한 로컬 스타일을 그대로 적용하면, 오브젝트와 함께 스타일이 금방 추가돼요.

오브젝트를 선택하고 색깔 채우기를 클릭해 디자인에서 추가된 로컬 스타일을 확인하고, 디자인 시스템에 추가해요.

이름과 스타일을 설정해 디자인 시스템에 적용하면 필요한 디자인에 직접 적용할 수 있어요.

FlutterFlow에서 Figma 테마를 가져오기 위해서는 어떤 정보가 필요한가요?

다양한 웹과 모바일 페이지를 가진 은행 앱의 UI 디자인을 사용하여 실제 예시를 보여줘요.

FlutterFlow에서 피그마 테마를 가져올 때 URL과 액세스 토큰이 필요하고, 액세스 토큰을 얻기 위해서는 피그마 대시보드에서 개인 액세스 토큰을 얻는 과정을 설명해준대요.

피그마 테마로부터 가져온 색상을 색상 매핑하여 메인 테마 색상으로 지정하고, 타이포그래피 매핑을 통해 피그마의 글꼴을 매칭해요.

이렇게 해서 Figma에서 가져온 색상과 글꼴이 모두 매핑되었어요.

피그마 가져오기 | FlutterFlow 대학

In this video, I want to show you how to import colors and typography from a Figma theme. But before we do that, let me show you how it has to be set up in Figma for this import to work. So, by default, Figma doesn't generate type styles and colors from your design, and that's a good thing because typically, designers will be doing many iterations on the design, and so you'll have lots of colors and type styles that they were working with, which aren't going to make it into the final design. So, if you get a Figma file but it doesn't have all the type and colors set out correctly, here's how you do it. So, I'm just in a blank Figma file right here, and what we're looking for is these local styles right here. So, I could click on this right here and add a style. What FlutterFlow is going to import is the text styles and the color styles.

But because you're going to be working with a theme from your designers, let me show you how to add these from the designs themselves. So, let's say you've got a shape right here with a color, and let's just change it to something that's easier to see. You can see these local styles when nothing is selected, so when you select it, you see the properties. But you just need to unselect it, and then you can see your local. Styles, so what you want to do is select the object whose color you want to add to the design system. Go over to the fill and click on these four dots right here to open it up. Then you can just click on the plus sign to add it to your design system..
You can give it a color and create a style.  Now, if we deselect that, we can see in our design system that we now have color styles, including a red one. Let's do the same thing with typography. Let's select this text, put something in here, make it a little bigger, and zoom in. Again, go over to these dots right here, add the style, give it a name, and create a style. Now we have a text style as well as a color style. Okay, great. So that's all good.

But for input, let me use a fully fleshed out UI design to give a more real-life example of how this works. Here, I've got the banking app that we're going to be building with different pages for both web and mobile. Currently, nothing is selected, so you can see all the type and color options down here. And of course, if you want to delete any of these, just select it and press backspace or delete. Now, let's import this into our design system in FlutterFlow. We're going to need two things: the URL of the Figma file and... I need an access token. So, let me show you how to get that access token. You want to go back to your main Figma dashboard, and come up into the top right into your account and settings. And scroll down to personal access tokens. And this is going to be for our bank app, so just give it a name. It really doesn't matter what you call it. And when you hit enter, you'll be given your access token. You won't be able to see it again after you generate it, so make sure you copy it down. But you're probably only going to use it once..
So, let's copy this token, and now you're ready to go into FlutterFlow.  Alright. So, let's import our Figma theme. I'm going to put in that access token and the URL, and import the theme. This should just take a few seconds.
All right, so first it will handle the import of the colors. And so, here are all the colors that it took from those local styles. And so, even if you had excess colors in there you didn't want, you can get rid of them here before we map them into our main theme colors. Because in our next screen, we're going to do the mapping.
So, let's import and continue. And so, here's where we map it. So, what you want to do is you want to go into each color. So, this primary one right here, and you'll be able to search through those colors. These are. The ones from Figma, and so you can go down and select the ones that you want. And of course, you can add any utility colors you want and do your dark mode. Okay, that's great. Save and continue.
And once again, in these last steps, we're going to do the same thing but with typography. Remove any styles you don't want, continue, and now here's the mapping. So we've got Title One, and once again these are coming from Figma, and you can just map them how you want, boom! And when you're done, save and finish great, so now all our colors and all our type is mapped from Figma...

디자인 시스템 소개 | FlutterFlow University

1. FlutterFlow에서 디자인 시스템 구축의 중요성

• FlutterFlow에서는 두 가지 방법으로 빌드를 할 수 있다. 첫 번째는 그냥 뛰어들어서 놀면 되는 방식이다.
• 하지만 실제 앱을 만들 준비가 되었다면 디자인 시스템부터 설정하는 것이 좋다. 디자인 시스템은 앱에서 사용할 모든 요소를 미리 설정하는 것이다.
• 디자인 시스템을 먼저 설정하는 이유는 속도와 확장성을 제공하기 때문이다. 버튼을 디자인할 때 앱 전체에 있는 모든 버튼을 다시 디자인할 필요 없이 한 번 디자인하고 여러 곳에서 사용할 수 있다.
• 또한, FlutterFlow는 디자인 시스템 중심의 접근 방식으로 구축되었기 때문에 효율적으로 작업할 수 있다. 여러 디자인 시스템을 구축하고 프로젝트에 적용할 수 있다.
• 빌드 과정에서도 디자인 시스템을 참조하거나 값에 바인딩할 수 있다. 더 많은 디자이너와 개발자가 플러터플로우를 사용함에 따라 디자인 시스템 기능도 함께 성장한다.

FlutterFlow에서 디자인 시스템 구축이 왜 중요한가요?

FlutterFlow에서는 두 가지 방법으로 빌드할 수 있어요.

첫 번째는 그냥 뛰어들어서 놀면 되는 방식이에요.

하지만 실제 앱을 만들 준비가 되었다면 디자인 시스템부터 설정하는 것이 좋아요.

디자인 시스템은 앱에서 사용할 모든 요소를 미리 설정하는 거예요.

디자인 시스템을 먼저 설정하는 이유는 속도와 확장성을 제공하기 때문이에요.

버튼을 디자인할 때 앱 전체에 있는 모든 버튼을 다시 디자인할 필요 없이 한 번 디자인하고 여러 곳에서 사용할 수 있어요.

또한, FlutterFlow는 디자인 시스템 중심의 접근 방식으로 구축되어 있어서 효율적으로 작업할 수 있어요.

여러 디자인 시스템을 구축하고 프로젝트에 적용할 수도 있어요.

빌드 과정에서도 디자인 시스템을 참조하거나 값에 바인딩할 수도 있어요.

더 많은 디자이너와 개발자가 플러터플로우를 사용함에 따라 디자인 시스템 기능도 함께 성장해나갈 거예요.

디자인 시스템 소개 | FlutterFlow University

There are two ways to build in FlutterFlow. First is just jumping in and playing around and that's great. I do it all the time.
But when you're ready to start building a real app, you should start by setting up your design system. And you do that by coming into your theme settings on the bottom left here. Now, a design system is just setting up or pre-making everything that you're going to use in your app. Basically, anything that you will repeatedly use, you should set up in your design system first. And this covers everything from the smallest things like color and typography to larger elements like components like a form or header sections.
And the reason you want to set up your design system first is because this will give you two things: speed and scalability. It will give you speed because instead of having to redesign a button everywhere in your app where a button occurs, you can design it once and then just drop it in. In real practical terms, this means that instead of having to click 20 times to set up a that button every time, you can click once. And second, it gives you scalability. That is, when your app grows and you need another page, you already have the colors, the types, the components designed and built. Creating that new page is not like building a house brick by brick, but simply putting together a few rooms that were already pre-made. FlutterFlow was built with a design system-centric approach, and I mean two things by this..
First, the design system is integrated into every step of building your app.  Nothing is siloed or hidden, so you can work efficiently. That's why you'll see this set from variable symbol everywhere, because you can reference or bind values to your design system anywhere where you see it. So for instance, if you have a custom function in your design system that adds a prefix to a string, you could use it here with a simple text in an action or a back-end call, never having to rewrite it.
And second, as your team scales with more designers and developers building on FlutterFlow, our design system capabilities grow as well. Multiple design systems can be built and live in your organization that you can pull into different projects. And these design systems don't just include visual elements like colors, type, and components but whole API and code libraries. Alright, so let's jump in and start setting up our design system...

https://www.youtube.com/watch?v=ixSDNrOM3-I

 

Spline이란 무엇이며, 어떤 강의를 제공하나요?

Spline은 무한한 창의성을 부여할 수 있는 3D 디자인 도구이며, 3D UI 상호작용 무료 강좌가 있어요.

직관적인 사용법을 지닌 Spline으로 3D 디자인 스킬을 개선할 수 있으며, 인터랙션과 쉬운 코드 내보내기 기능을 제공합니다.

Spline은 맥, 윈도우와 태블릿과 완벽하게 호환되며, 브라우저에서 실행됩니다.

 

 

Spline를 사용하여 3D 디자인을 배우는 방법은?

Spline는 3D 설계 영역에서 상호작용, 조명, 재료, 그림자부터 3D 월드, 아이콘, 캐릭터 디자인까지 다루는 다양한 튜토리얼을 제공해요.

Spline 문서를 통해 핵심 기능을 자세히 알아볼 수 있고, 3D 디자인 상호작용, 재료, 카메라에 대한 자세한 내용도 찾아볼 수 있어요.

또한 Spline을 사용하여 상호작용 3D 에셋을 사용한 디자인 및 코드 랜딩 페이지를 설계하는 입문 과정과 ReactJS 사이트에 구현된 상호작용 3D 장면 구축 방법을 배울 수 있어요.

Spline 커뮤니티에서는 디자이너들과 연결되어 프로젝트에 영감을 얻을 수 있으며, 디자인을 수정하여 선호에 맞게 변형할 수도 있어요.

Spline을 사용한 3D 아이콘 제작 방법

Spline을 사용해 3D 아이콘을 만들려면 원형을 생성하고 회전시킵니다.

다음으로 사각형을 만들고 꾸며서 깊이를 추가하고, 모든 도형을 그룹화하여 처리를 용이하게 합니다.

마지막으로, 각 도형에 재질을 적용하여 색상과 조명 효과를 정의합니다.

3D 디자인에서 재질과 그림자 설정 방법은?

원의 재질은 소프트하고 매력적인 색으로, 조명 모드는 오버레이로 변경해요.

그리고 원 형상에 적용한 재질을 다른 세 개의 원에도 동일하게 적용해요.

사각형의 재질은 그라디언트 색으로 깊이 설정하고, 그림자 설정을 램버트로 변경하여 3D 효과를 부여해요.

원의 재질 설정을 만들면 디자인 일관성을 유지할 수 있어요.

마지막으로, 해시아이콘이 출시될 때 Play Mode를 통해 디자인을 미리 확인하고 상호작용할 수 있어요.

️피벗 재조정을 위한 Spline 3D 작업 방법은?

Spline 3D에서 그룹화된 객체를 작업할 때 피벗 위치가 예상대로 중앙에 정렬되지 않을 수 있어요.

그룹화된 레이어를 언그룹핑하고, 병합 도구를 사용하여 원하는 위치로 피벗을 재조정할 수 있어요.

중심에 선을 정렬하기 위해 각 축의 위치를 x0, y0, z0으로 설정하고, 스타일리시한 경사면 효과를 위해 평행면 갯수를 네 개로 설정해야 해요.

디자인에 개성을 더하기 위해 화면 배경색을 변경할 수 있어요.

Spline을 사용하여 다이나믹한 3D 아이콘을 만들 수 있고, 이러한 기술은 앱 디자인이나 데이터 시각화와 같은 다양한 프로젝트에 활용될 수 있어요.

구름 모양의 아이콘을 꾸며보려면 어떻게 해야 하나요?

재료 속성에서 구체를 선택하고, 'depth'로 색상을 변경해요.

새로운 레이어를 추가하여 'mat cap'을 선택하여 원하는 텍스처를 적용해요.

구름을 만들기 위해 3개의 구체를 하나로 합치고, 스칼핑 브러시를 사용하여 모양을 잡아요.

구름에 물방울을 추가하기 위해 실린더를 선택하고, 크기와 위치를 조정해요.

Spline 라이브러리를 이용한 3D 아이콘 꾸미기

Spline 라이브러리를 사용하여 재료를 선택해서 3D 아이콘에 적용하는 방법을 설명했어요.

파란색 빗방울 아이콘을 만들기 위해서는 재료를 수정하고 depth layer를 추가해야 해요.

다음으로, 3D 아이콘에 배경 카드를 추가하기 위해 사각형 모양을 만들고, 필요한 속성을 설정하였어요.

Spline 라이브러리에서 특별한 재료를 선택하여 배경 카드를 꾸몼다.

그룹을 만들고, 카메라 각도와 그림자를 조정하여 3D 장면을 개선했어요.

마지막으로, 온도 텍스트를 추가하고 필요한 조정과 설정을 진행하여 아이콘을 더욱 정보성있게 꾸몼어요.

날씨 애니메이션에 대한 설명은?

텍스트를 중복해서 생성해서 날씨 조건에 사용해요.

폰트 사이즈를 24로 변경하고, 정규 폰트 스타일을 사용하죠.

X100, Y30 위치에 날씨 텍스트를 배치해요.

Y축은 -130Z-5로 조절하면서, 수평 중앙에 위치시킵니다.

내용을 '소나기'로 바꾸고 투명도를 60으로 설정해요.

날씨 카드를 완성했어요.

태양에 애니메이션을 추가해서 회전시키죠.

States 패널에서 기본 상태와 State를 왔다갔다하며 변경사항을 확인할 수 있어요.

애니메이션을 실행하기 위해 이벤트 패널로 이동하고, '시작' 이벤트를 선택하고, 대상을 'sphere'로 설정해요.

4초 동안 ease-in-out 애니메이션을 설정해요.

미리보기 모드에서 회전을 확인할 수 있어요.

Sunbeam에 애니메이션을 추가해서 빛 바랜 광선 같은 움직임을 만들어요.

Cloner 패널에서 end 값 설정해요.

transition과 delay를 사용한 애니메이션을 추가해요.

Cylinder를 대상으로 설정하면 애니메이션을 미리볼 수 있어요.

구름에 부드러운 움직임을 추가해요.

offset 값을 설정해서 움직임을 생성해요.

 

Raindrop 애니메이션을 만드는 방법은?

 

이벤트 패널에 들어가서 '+' 아이콘을 클릭하여 이벤트를 추가해요.

시작 이벤트를 선택하고, 액션으로 전환을 선택하면 됩니다.

대상을 'Cloud'로 설정하고, transitions 1은 Base State, transitions 2는 State로 설정합니다.

6초 동안의 선형 애니메이션을 사용하고, 순서를 Loop infinity로 설정하여 애니메이션을 순방향 및 역방향으로 반복 재생합니다.

Raindrop 내부에 비가 대각선으로 떨어지고 사라지는 애니메이션을 만들기 위해 Raindrop의 색상을 진한 파란색으로 변경해요.

합성 모드를 'multiply'로 설정하여 빛깔 효과를 줍니다.

Raindrop을 비 내부로 위치시키기 위해 레이어를 선택한 후, Z 축을 따라 20도 회전시키고, X 위치는 -90, Y 위치는 20, Z 위치는 100으로 설정합니다.

그 후, State 패널로 이동하여 '+' 아이콘을 클릭하여 새로운 상태를 추가하고, Green Arrow를 선택하여 50단위로 아래로 이동시킵니다.

마지막으로 이벤트 패널에서 '+' 아이콘을 클릭하여 이벤트를 추가하면 더운 날씨에 재미있고 시원한 비 내리는 애니메이션 Raindrop이 만들어집니다

Spline에서는 어떻게 경로와 애니메이션을 추가할까?

Spline에서 만든 멋진 3D 아이콘을 세상에 자랑해 보세요.

이제부터는 프로젝트에 창의성을 추가하는 기술에 대해 알아보겠습니다.

3D 경로를 생성하고 해당 경로에 애니메이션을 추가하는 기본을 탐색합니다.

경로를 씬에 추가하는 방법을 알아보겠습니다.

여러 가지 방법으로 동일한 결과를 얻을 수 있습니다.

직사각형에서 경로를 생성하기 위해 모양에 있는 '경로로 변환'을 선택하세요.

포인트를 이용해 경로를 수정하고, 해당 경로에 따라 애니메이션을 추가하세요.

이제 비가 더욱 현실적으로 표현되며, 파일 이름을 지정하는 것을 잊지 마세요.

경로를 만들고 편집하는 방법 배우기

패스 포인트가 모두 보라색이면 경로값을 증가시켜 모든 포인트를 동시에 조정할 수 있어요요.

보라색 점들로 좌우로 연결된 경로 포인트만 편집할 수 있어요요.

타원 도구를 사용해 새로운 경로를 생성하고 이미지를 흉내내는 것도 가능하죠.

경로를 편집하고 점과 베지어 곡선을 조정하여 복잡한 디자인을 만들 수 있어요요.

SVG 파일을 직접 가져와서 패스 툴로 작업하거나 커스텀 디자인을 만들 수 있어요요.

경로 애니메이션에서 스무드한 움직임과 색상을 어떻게 조절할 수 있을까요?

경로의 교차점이 부드럽게 나오지 않으므로 핸들을 조절하여 부드러운 움직임을 얻을 수 있어요요.

경로에 그래디언트를 추가한 후에도 몇 가지 작은 문제가 남아있습니다.

첫 번째와 마지막 컬러가 다르더라도 극단부 끝에는 같은 색상이 나오게 하기 위해서는 첫 번째와 마지막 컬러 스탑에 같은 색상을 사용해야 해요요.

경로가 교차하는 부분에서 색상이 이상하게 섞이는 현상이 있다면 카메라 뷰를 조정하여 해결할 수 있어요요.

Option 키를 누른 상태로 마우스를 드래그하여 겹쳐지는 효과를 줄 수 있어요요.

경로 애니메이션이 완료되면 경로에 인터렉티브한 상태를 추가하여 멋진 애니메이션을 만들 수 있어요요.

애니메이션 간에 간격을 주기 위해 경로 사이에 지연 시간을 추가하도록 하죠.

경로 1에 애니메이션의 시작 이벤트에 경로 2로의 전환을 추가합니다.

이로 인해 두 번째 애니메이션은 첫 번째 애니메이션이 완료된 후 시작됩니다요.

3D 파도 애니메이션을 만드는 방법은?

Spline를 사용하여 웹 디자인, 제품 프레젠테이션 등을 높여주는 매력적인 3D 파도 애니메이션 제작 방법을 배울 수 있어요.

파도 애니메이션은 웹사이트의 주요 섹션에 매력적인 배경으로 사용되며, 방문자의 주의를 끄는 데 도움이 된대요.

또한 간단하고 우아한 제품 프레젠테이션에 사용하여 시각적인 매력을 더하는 것도 가능합니다.

wave를 처음부터 창조하는 과정은 튜토리얼에서 안내하고 있으며, Spline를 브라우저나 데스크톱 앱에서 열고 새 파일을 만들면 됩니다.

아름다운 파도 애니메이션을 만드는 방법은?

마감 효과를 위해 그래디언트를 사용하여 파도를 더욱 눈길 끄는 디자인으로 만들었어요.

첫번째 그래디언트에는 세 가지 색상을 추가하여 사용했고, 두번째와 세번째 그래디언트는 기존 그래디언트를 복제하여 색상을 수정했어요.

파도에 깊이감을 추가하기 위해 색상 램프를 사용하고, 각 그래디언트마다 적절한 블렌딩 모드를 설정해 시각적인 매력을 높였어요.

그리고 유리 파도 효과를 추가하여 파도에 신비로움을 더했어요.

Glass 타입을 선택하고 깊이 설정을 변경한 후, 유리 형태의 이미지를 적용시켰어요.

어떻게 유리 물결 효과를 적용하였나?

유리 물결은 투명해야 하는데 검은 색으로 보였기 때문에 블렌딩 모드를 적용하여 투명도와 밝기를 높였어요.

물처럼 생생한 외형을 만들기 위해 세세한 효과 조절을 실시하고, 소재의 효과 순서를 재정렬하여 더 어둡고 균일한 외관을 만들어냈어요.

또한 유리 모양을 조정하여 배경이 잘 보이도록 하고, 애니메이션을 적용하여 파도를 부드럽게 움직이도록 효과를 주었답니다.

3D 카드와 파랄랙스 효과를 만들기 위한 방법은?

3D 파랄랙스 효과를 사용하여 디자인에 깊이와 독특한 시각적 경험을 더할 수 있어요.

3D 카드를 만들기 위해서는 개별 요소들을 다른 깊이로 배열하고, 유리 레이어를 사용하여 숨겨진 배경으로 한 줄기 창문을 생성해야 해요.

이 섹션에서는 메인 카드를 만들고 유리 레이어를 사용하여 창문을 생성하는 방법을 알려드릴게요.

배경 이미지를 추가하고, 외부 공간의 3D 카드를 만들고, 조명과 유리 레이어 등을 적용해요.

또한, 텍스트 내용을 넣을 유리 레이어와, 유리 레이어 내부의 다른 요소들을 숨기기 위한 큐브도 추가할 수 있어요.

마지막으로, 사용자 상호작용을 향상시키기 위해 다양한 설정을 사용할 수 있어요.

3D 카드 완성하기 위한 설정 방법은?

원하는 크기로 조절하고, 꼭짓점을 20으로 설정해 크기를 조정합니다.

광원, 물질, 경계선을 레이어로 구성하고, 적절한 설정값을 적용합니다.

Portal 효과를 위해 배경 유리 레이어와 색상 레이어를 추가하고 3D 아이콘 디자인을 완성합니다.

Spline의 3D 카드와 컴포넌트를 만드는 방법은?

레이어 목록에서 방향성 라이트를 제일 위로 이동하여 강도를 1로 설정하고, 도구 모음에서 + 아이콘을 클릭하여 카메라를 추가해요.

3D 카드 앞에 카메라를 배치하고 위치를 250, 50, 100으로 설정하고, 플레이 설정으로 이동하면 자동으로 적용되지 않으므로, 카메라로 설정해야 해요.

또한, 오비트 제한을 활성화하고 상하좌우 값(15, 30)을 변경해줘요.

이제 3D 카드를 시각화하면 완성되었어요!

Spline로 3D 카드를 만들기 위해 어떤 작업을 해야 하나요?

지난 섹션에서 사용한 3D 카드 파일을 Spline에서 열어요.

텍스트를 생성하려면 툴바에서 T를 클릭하고 25나 다른 숫자를 입력해요.

크기를 260과 50으로 조정하고, 폰트 크기를 80으로 설정해요.

텍스트에는 현재 사용 중인 산세리프 폰트를 선택하고, 세미 볼드로 설정해요.

수평 및 수직 정렬은 Center로 설정해요.

소재 패널로 이동하여 현재는 조명을 숨기고, 색상을 흰색으로 변경해요.

이제 가격 옆에 통화 기호를 추가해요.

크기는 260과 30으로 조정하고, 폰트 크기는 40으로 설정해요.

웨이트는 세미 볼드로 설정하고, 가로와 세로 정렬은 다시 Center로 설정해요.

이번에는 색상을 흰색으로 하지만, 투명도를 30%로 줄여요.

동일한 단계를 반복하지 않기 위해 그냥 복제하기로 해요.

명령 키를 드래그하여 복제하고, 텍스트를 'Pro'로 변경하고 크기를 20으로 변경해요.

다시 복제하고 'per month build monthly'라고 텍스트를 변경해요.

크기는 17로 변경하고 규칙적인 웨이트로 설정해요.

3D 아이콘을 위로 이동시켜 공간을 확보한 다음, 모든 텍스트를 위로 이동시킵니다.

이제 레이어에 이름을 붙여요.

이제 아이콘이 필요해요.

SVG 아이콘을 찾아서 가져와요.

이제 불러온 아이콘을 씬에 끌어다 놓고, 카드에 아이콘을 배치해요.

일시적으로 아이콘을 보이지 않도록 색상을 흰색으로 변경하고 위치를 조정해요.

'per month build monthly' 아래에 텍스트를 복제하여 아이콘 옆에 배치하고, 텍스트를 'all courses and videos'로 변경해요.

수평 정렬은 왼쪽으로 설정하고, 색상의 투명도를 50으로 설정해요.

그런 다음 레이어에 이름을 붙여요.

아이콘과 텍스트를 선택하고 함께 컴포넌트로 만들어요.

주요 컴포넌트를 복제하여 두 개의 인스턴스를 만들어요.

'Type Course designs, source files and CER certificates and tests.'로 텍스트를 변경해요.

이제 버튼을 만들 차례에요.

툴바에서 직사각형을 클릭하여 시작하고, 기능 아래에 배치해요.

크기를 338x64로 설정하고, 모서리를 16으로 설정하고, extrusion은 12로 설정한 다음, bevel은 1로 설정해요.

3D 버튼과 가격 카드 디자인하기

3D 버튼을 만들기 위해 다양한 재질을 사용하고 불투명도와 블렌딩 모드를 조정했어요.

'Subscribe'라는 텍스트를 추가하고 크기와 폰트, 색상을 조정하여 디자인을 완성했어요.

다른 배경을 선택할 때 버튼에 반사 효과가 나타나지 않을 수 있다는 부분도 고려해야 해요.

또한, 가격 카드를 만들기 위해 버튼 컴포넌트를 생성하여 일괄적으로 수정이 가능하도록 했어요.

버튼에 다양한 변형을 적용할 수 있으며, 이는 메인 컴포넌트를 수정함으로써 일괄 적용됩니다.

마지막으로 텍스트 라벨을 'Create Account'로 수정하고, 컴포넌트를 체크하고 관리했어요.

버튼에 더 많은 변형을 추가하여 디자인을 더욱 다채롭게 할 수 있죠.

컴포넌트 사용의 장점과 스크린 리사이즈의 이해

컴포넌트를 사용하면 텍스트 정렬 문제 같은 수정사항을 한 번에 모든 카드에 적용할 수 있다는 장점이 있어요.

스플라인은 3D 씬 생성, 디자인 시스템, 아이콘 디자인 등에서 유연하게 사용되는 다재다능한 도구이에요.

스플라인과 컴포넌트는 3D 프로젝트에서 효율성, 일관성, 창의적 탐구를 촉진해줘요.

스크린 리사이즈 이벤트를 활용하여 다양한 스크린 크기에 적응하는 레이아웃을 만들 수 있는 유용한 도구이죠.

스크린 크기에 따른 설정 방법

캔버스 크기가 설정된 픽셀 값보다 작을 때는 'Less than' 액션이 작동해요.

캔버스 크기가 설정된 픽셀 값보다 클 때는 'More than' 액션이 작동하죠.

캔버스 크기가 지정된 범위 내에 있을 때는 'Between' 액션이 작동합니다.

모바일, 태블릿 및 데스크탑 각각에 대해 중단점을 생성해야 하며, iPad의 경우 세 번째 중단점 설정은 기본적으로 'between'으로 하고 값은 768과 1200 사이로 유지합니다.

전이의 외관을 선택하거나 지속 시간을 설정할 수 있고, 전이가 시작하기 전의 지연 시간을 정할 수도 있습니다.

각 전이 부분에 대해 속성을 조정하여 원하는 레이아웃을 높일 수 있어요.

어떤 애니메이션을 사용해 탭바를 연출할까?

Figma에서 디자인을 가져와서 아이콘을 애니메이션화시키고, Spline을 사용해 투명한 대리석처럼 떠다니는 플로팅 액션 버튼을 만들 거예요.

탭 바를 생생하게 보이도록 애니메이션을 적용하며, 상단부의 신용카드 디자인은 다루지 않지만 전체 디자인에 접근할 수 있어요.

그리고 Spline으로 인포트한 탭 바의 디자인을 조정하고 원하는 대로 정렬한 뒤, 파일에서 남은 부분은 삭제하고 남은 모양의 이름을 '탭 바 베이스'로 변경할 거예요.

3D 디자인에서 시각적인 효과를 부여하는 방법은?

윤곽에 유리 재질을 추가하고 블러 값을 20으로 설정하여 약간 흐릿한 또는 인화된 외관을 만들었어요.

두께를 20으로 조정하여 유리 재질이 상당한 두께를 가지도록 했구요.

굴절 값을 3으로 설정하여 이 유리 재질을 통과하는 빛이 약간 구부러지거나 왜곡되는 정도를 나타내요.

맷캡 재질을 추가하고, 맷캡 재질 선택의 왼쪽 상단 모서리에서 초기 옵션을 선택하여 재질의 외관을 세팅했어요.

재료의 불투명도를 30%로 조정하여 투명도 수준을 제어하고 다른 요소들을 부분적으로 표시하도록 했어요.

'스크린' 블렌딩 모드를 선택하여, 밝은 백그라운드 요소를 고조시키고 특정한 시각적 효과를 만들었어요.

어두운 셰이드인 이 칼라 코드를 가진 컬러 재질을 추가하고, 이 컬러에 30%의 투명도와 '오버레이' 블렌딩 모드를 적용했어요.

시각 효과를 향상시키기 위해 다양한 배경을 도입하였으며, 윤곽 효과로 언더바이의 요소와 조화를 이루게 했어요.

3차원 효과를 만드는 층감을 추가하였으며, 디자인에 맞게 Extrusion 값을 10으로 설정했어요.

Figma 아이콘 효율적으로 활용하는 방법은?

SF 심볼에서 가져온 아이콘을 아웃라인 스트로크로 변환하여 경로 애니메이션에 사용해야 해요.

이때, 아이콘을 다른 플랫폼에서도 사용할 수 있도록 스트로크로 변환하는 것이 중요해요.

프로젝트에 아이콘을 통합하고, 모든 아이콘을 패스로 변환해야 하는데, 아이콘 크기가 커질 수 있으므로 수동으로 크기를 조절해야 합니다.

탭이 제대로 위치되도록 전체 탭 바 이미지를 참조해야 하며, 아이콘과 텍스트를 그룹화하여 작업하면 편합니다.

또한 붙여넣기 옵션을 이용해서 대상 아이콘과 정확히 일치하게 새 아이콘을 위치시킬 수 있고, 탭 바 모서리를 둥글게 처리하여 이를 백그라운드와 시각적으로 조화롭게 만들 수 있습니다.

최종적으로 아웃라인 스트로크 생성과 매레리얼 블렌딩 모드와 불투명도를 조정하여 플로팅 액션 버튼을 효과적으로 디자인하는 것이 좋습니다.

이중 구와 탭을 만들면서 적용하는 과정은?

기존 구의 복제본을 만들고 재질을 조정하여 두 번째 구를 생성하고, 세 번째 재질인 '깊이(depth)'는 수평 그라데이션 효과를 위해 Y 위치를 조절하면요.

두 개의 구를 선택하여 하나의 그룹으로 묶은 다음 이름을 변경하고, 선택된 모양에 대해 네 가지 상태를 추가하여 교감성을 높입니다.

그리고 레이어 순서의 중요성과 디자인의 재질 속성에 대해 설명하며, 뒷 배경을 삭제하고 선택된 모양을 배치하고 회전시키고, 전체 요소를 애니메이션화하면서 아이콘 경로에도 경로 애니메이션을 적용합니다.

UI/UX 디자인에서 애니메이션이 적용되는 요소는 무엇인가?

탭 바, 아이콘, 아웃라인 등 다양한 요소들에 애니메이션을 적용해요.

각 탭의 아이콘 경로 애니메이션을 설정하는 반복적인 단계를 따라야 하며, 이벤트를 추가하고, 트리거를 선택하고, 액션을 트랜지션으로 설정해야 해요.

세 개의 탭에도 동일한 이벤트를 적용해야 하고, 각 트랜지션의 대상을 수동으로 조정해야 합니다.

아웃라인 형태에도 애니메이션을 적용할 수 있으며, 구체의 투명도를 설정해 변경을 나타낼 수 있습니다.

마지막으로 두 개의 구체에도 애니메이션을 적용하여 반복적인 움직임을 구현합니다.

디자인과 애니메이션 과정 설명 및 애니메이션 구현 방법

탭 바 그룹을 선택하여 전체 탭 바를 애니메이션화하고, 각각의 탭에 해당하는 아이콘을 표시할 때 경로 애니메이션을 설정해요.

첫 번째 전환의 대상을 '홈' 탭의 'play' 아이콘으로 설정하고, 두 번째 전환에서는 대상을 두 번째 탭인 '검색'으로 설정해요.

이와 같은 패턴으로 딜레이를 0.20초씩 늘려가며 각 전환을 설정하는데, 설정 탭의 경로는 '설정 1'과 '설정 2'를 포함하여 두 개의 경로로 이루어져 있어요.

마지막으로 '효과' 스위치를 켜서 장면에 다양한 효과를 적용하는데, 경로 애니메이션, 플로팅 액션 버튼 애니메이션, 그리고 탭 바의 선택된 상태가 원활하게 작동하는 것을 확인할 수 있어요.

변수를 이용한 경험 구현 방법

Spline에서 상호작용적인 경험을 구현하기 위해 변수에 대해 자세히 알아보고, 숫자, 텍스트, 부울 값 등의 종류와 사용법을 배우며, 세 가지 연습을 진행해요.

변수는 값이 변경되거나 수정될 수 있는 기반이며, 객체에 할당할 수 있는 자산으로 생각할 수 있어요.

또한, 이벤트와 결합하여 액션을 트리거하고 수학식으로 작동하는 조건부 로직을 구현할 수 있어요.

주어진 프로젝트에서는 변수 테이블을 열어 다양한 유형의 변수를 사용하여 객체를 관리하고 애니메이션을 적용해요.

수치 변수를 활용한 애니메이션과 전환 효과 적용하기

시간 변수를 사용하여 동적인 애니메이션과 전환 효과를 만들 수 있어요.

랜덤 변수를 활용하여 프로젝트에 무작위성과 예측 불가능성을 부여할 수 있어요.

카운터 변수를 사용하여 동적인 순서나 반복을 구현하는데 유용하며, 진행상황 표시줄에 적용할 수 있어요.

각 변수를 객체에 할당하고 애니메이션을 추가하여 더욱 생동감 있는 결과물을 만들 수 있어요.

변수 값이 변경될 때마다 액션이나 애니메이션을 트리거하기 위해 변수 변경 이벤트를 사용할 수 있어요.

실습 2에서는 어떤 내용을 다루나요?

실습 2에서는 디자인과 카메라 설정은 되어 있고, 변수에만 집중해요.

첫 번째 열을 설정하고 나면, 나머지 세 열도 동일하게 설정해요.

변수 테이블에서 변수를 생성해요.

숫자 변수와 문자열 변수를 추가하고 값을 설정해요.

변수를 객체에 할당해요.

텍스트 레이어와 컬럼 레이어에 각각 변수를 할당해요.

롤오버 시 열과 숫자가 일정 비율로 증가하는 애니메이션을 추가해요.

이 때, 조건부 액션을 사용해요.

Spline에서 시간 기반 변수를 설정하는 방법은?

Spline에서는 텍스트를 설정하고 변수 변경 이벤트를 추가해야 해요.

시간 변수를 사용하여 동적 애니메이션과 부드러운 전환을 만들 수 있어요.

시계, 타이머, 스톱워치로 분류되고 각각의 유형에 대한 속성 옵션을 선택할 수 있어요.

시간 변수를 텍스트에 할당하여 가변적인 웹 콘텐츠를 만들 수 있어요.

스크롤 기반 상호작용 및 씬 전환에 대한 지침을 학습하여 웹 디자인 프로젝트를 향상시킬 수 있어요.

스크롤 이벤트를 활용한 애니메이션 제작 방법은?

스크롤 이벤트를 통해 추가한 전환들이 진행돼요.

'스크롤 인터랙션 및 씬 연습'과 '스크롤 인터랙션 및 씬 데모 2 연습' 파일이 필요하다고 해요.

스크롤 인터랙션을 생성하려면 애니메이션을 적용할 요소가 필요해요.

카메라 위치 애니메이션과 상태 및 이벤트에 집중하는데, 카메라를 재설정하고 새로운 상태 'Screen Two'와 'Screen Three'를 추가해야해요.

스크롤 기반으로 씬 전환이 가능한 방법은?

카메라 속성은 그대로 유지하고, 스크롤 이벤트를 추가해야 해요.

스크롤 이벤트를 통해 웹 페이지를 스크롤할 때 전환과 애니메이션을 정의할 수 있습니다.

스크롤 이벤트에서는 전환을 트리거할 수 있는 액션 종류가 한 가지뿐입니다.

스크롤 이벤트는 특정 스텝 수를 스크롤하는 사용자에게 일어나는 이벤트를 정의합니다.

씬 전환을 구현하기 위해 오브젝트를 선택하고, 마우스 다운 이벤트를 추가해야 합니다.

iOS AR에 최적화된 3D 모델을 내보내는 Spline의 과정은?

Spline은 강력한 3D 디자인 도구로서, 쉽게 3D 모델을 USDZ 형식으로 내보낼 수 있게 해줘요.

이 섹션에서는 Spline에서 3D 객체를 내보내는 과정을 자세히 알아보며, iOS에 최적화된 AR 경험을 만들어볼게요.

트릭을 배워 AR을 위한 내보내기를 하기 전에, Spline의 직관적인 디자인 도구를 이용해 3D 모델을 만들어보세요.

원하는 디자인을 달성한 후, AR을 위한 내보내기를 진행할 차례에요.

내보내기 탭을 클릭하여 다양한 형식으로 내보내기를 할 수 있는 기능을 이용해보세요.

이 중에는 퍼블릭 URL 링크로의 내보내기, 코드 형태로의 내보내기, 이미지 형태로의 내보내기, 비디오 녹화 형태로의 내보내기, GLTF 형식으로의 내보내기 등이 있어요.

특히 iOSR Universal Scene Description은 애플이 개발한 파일 형식으로, 쉽게 iOS 기기의 AR 앱에서 볼 수 있는 3D 에셋을 생성할 수 있어요.

STL 3D 프린팅을 최적화하고 성능을 향상시키기 위한 내용은?

STL은 3D 프린팅이나 CAD에 일반적으로 사용되는 3D 형식이에요.

3D 모델의 성능을 평가하고 필요한 경우 최적화하는 것이 수출하기 전에 중요해요.

퍼포먼스 패널과 기타 기법을 사용하여 스플라인 장면을 최적화하는 방법을 안내하며, 톱니 모양을 사용하여 성능을 높이거나 로딩 시간을 줄이는 등 최적화할 수 있는 기회와 지침을 제공해요.

모델을 USDZ 형식으로 내보낼 때 최적화 및 제거 작업을 수행하는 방법도 알려줘요.

USDZ는 일부 기능만 지원하며, 고급 요소 및 기능은 지원하지 않아요.

상호작용, 애셋, 레이어 등을 사용할 수 없고, 간단한 재질과 텍스처만 지원해요.

다른 형식인 SCN, FBX 등을 사용하고 싶다면 압축 설정을 사용하고, 장면에 많은 객체를 추가하지 않도록 주의해야 해요.

AR를 통해 iPhone 또는 iPad에서 3D 모델을 경험하자

이제 USDZ 파일을 내 iPhone 또는 iPad에서 열 수 있게 되었어요.

자동으로 실행되는 AR 뷰어를 통해 모델을 실제 환경에 배치하고 상호작용할 수 있답니다.

직관적인 Spline 도구와 내보내기 옵션으로 웹사이트에 3D 모델을 가져올 수도 있구요, Framer로 Spline 3D 에셋을 웹사이트에 통합할 수도 있습니다.

코드를 활용해 3D 사이트를 출판하는 방법도 있답니다.

https://smartstore.naver.com/bestpiece/products/8449722780

출시된지 얼마 안된 제품이라서 아직 광고리뷰조차 없습니다.

아래는 다나와에 등록된 제품 정보입니다.

알파스캔 AOC U34E2M 울트라와이드 WQHD 100 시력보호 무결점 최저가 416,000원 자세히보기 판매점 : 4개 ㅣ 제조사 : 알파스캔 ㅣ 등록월: 2023.05.