# material

tnstjd120

시작하기 전에 🛫 회사에서 디자인시스템을 만들고 있는 어느 날... 디자인 시스템내에 Button 컴포넌트의 클릭 효과를 *MUI 처럼 만들어 달라는 요청이 들어왔다. 버튼을 클릭할 때 클릭한 마우스 커서의 좌표값에 맞춰서 물결이 퍼지는 효과를 만들어야 했다. > *MUI란? 본래의 이름은 Material-UI라고 불렸었고, React 기반의 UI 라이브러리이다. MUI는 Google의 Material Design 가이드라인을 따르고 있으며, React를 사용하는 개발에 필요한 다양한 UI 컴포넌트를 제공해준다

ehgus8621

0. 개요 기존의 안드로이드 UI를 Compose를 사용하여 리팩토링를 하던 도중 @OptIn(ExperimentalMaterial3Api::class)를 붙여야 해결되는 문제에 봉착했다. 뭐가 다른지 봤더니 meterial3는 아직 실험용인 부분들이 있다. 만약 본인이 초심자라면 많은 reference를 찾을 수 있기 때문에 meterial버전을 낮추길 권장한다. 1. meterial Design이란? 구글이 모바일과 데스크탑 그리고 그 외 다양한 디바이스를 아우르는 하나의 일관된 디자인 가이드 라인을 공개했다. 그것이 바로 meterial Design 질감이 느껴지는 표현(tactile surfaces)와 대담하고 선명한 그래핑 디자인(bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 함 Material Design은 UI/UX 디자인을 사용자 친화적인 환경으로 구축할 수 있도록

7602kyj

앱 리뉴얼을 진행하며 새롭게 알게된 MaterialStateProPerty 인터페이스 TextButton, ElevatedButton, OutlinedButton 등 ButtonStyle를 활용할 수 있는 버튼 위젯에 사용된다. 공식문서 영상부터 예제까지 직접 수정해보면서 익혀보았다. 자주 쓰이는 메소드는 ,,, 버튼에 상태를 지속적으로 체크해주기 위해서 빌드 함수에다가 스타일을 반환 받는 함수를 쓰는 예제를 많이 확인 했는데, 재빌드할 때마다 그 함수를 실행하기 때문에 불필요한 재빌드가 일어날 수밖에 없다는 점은 아쉽다 .. _(+ 10분 뒤 다시 생각해보았을 때 ,, 위젯 안에서 MaterialStateProPerty 정의해도 빌드 되는 건 마찬가지라 함수화를 하거나 안 하거나 같을 것 같다 ... 내가 이해한 게 맞는지)

zer0vin

에디터에서 GameObject를 생성후 Renderer를 추가해서 material의 컬러 값을 변경했는데 아래와 같은 에러메세지가 떴다. > ⚠️ Instantiating material due to calling renderer.material during edit mode. This will leak materials into the scene. You most likely want to use renderer.sharedMaterial instead. 리소스릭이 발생하니 Renderer.material 대신 Renderer.sharedMaterial을 사용하라는 내용이다. Material <img src="https://velog.velcdn.com/i

tygerhwang

Calander(달력) 만들어 보기 Date Picker 만들어 보기 (Cupertino UI) 이번 글에서는 Calander를 만들어 보도록 하겠다. Flutter에서는 달력을 기본적으로 제공하고 있는데, 직접 만들어 보고 싶다면 글을 참고해서 나만의 달력을 만들도로 해보자. Cupertino 디자인의 달력을 원하면, 이전에 작성했던 글을 참고하길 바라며, 여기서는 Material 디자인 달력을 만들도록 하겠다. 글로벌 릴리즈 서비스라면 달력을 만드는 작업도 고난이도의 개발 영역으로 볼 수 있다. 국가마다의 공휴일이 다르고, Direction, DateTime 등 고려해야 할 사항이 너무 많다. 그래서 여기서는 대한민국을 기준으로 개발을 할 것이고, UI는 보여줄 수 있는 수준으로만 만들었다. 해당 코드를 가져다 커스텀해서 사용하셔도 되고, 로직만 가져다 사

dhoon

Sprite unity에서 2D 그래픽에서 사용되는 이미지 이미지와 속성을 저장 sprite 생성 방법 : gameobject에서 sprite renderer 컴포넌트 추가하기 or 2D object 사용 SpriteRenderer > sprite를 실제로 화면에 그리는 것 색상 정렬등을 설정 layer > 오브젝트 랜더링 순서 제어 낮은 순서부터 그려짐 sortingLayerName : 오브젝트가 속한 레이어 이름 sortingOrder : 순서 결정 커스터마이징 가능(add sorting layers) Material 오브젝트 표면의 외관이나 재질의 느낌을 결정 게임 오브젝트에 새로운 재질을 추가 이미지나 그래픽 등의 텍스처를 재질에 적용 재질의 다양한 매개 변수를 조정(색, 반사율, 투명도) shader :shader program을 이용해 랜더링 방식을 제어 changeMaterial > 게임 오브젝트에 접근하는 스크립

projaguar

intro Next.js 13의 새로운 기능인 'app Directory' 환경에서 Material UI (이하 MUI)를 적용하는 방법을 정리 합니다. 특별히 어려운 부분은 없고, 기록 차원에서 정리 하고자 합니다. Project 생성 MUI Package 설치 MUI 설정 구글 Roboto폰트와 Meterial Icon을 설정 합니다. MUI 테마 파일 생성 테마를 설정 합니다. 정의되어있지 않은 custom variables을 추가하여 사용할 경우, 타입스크립트(.ts)는 인터페이스를 다시 정의 해 주어야 해서 복잡합니다. 테마 만큼은 자바스크립트(.js)를 추천 합니다. layout.tsx 수정 'use client'를 추가하여 client component로 정의 하였습니다. 브라우저의 스타일 노멀라이즈 하기 위해 을 추가 하였습니다. MUI의 <ThemeProvider

kimphysicsman

1. 프로젝트 셋업 > 아래에서 작성한 프로젝트 이어서 작업 [230101 - TIL] DOM과 angular Module / Component [230102 - TIL] angular 기능모듈 라우팅 [230103 - TIL] angular service와 @skipself [[230104 - TIL] angular material dialog로 모달창 띄우기](h

kimphysicsman

1. 프로젝트 셋업 > 아래에서 작성한 프로젝트 이어서 작업 [230101 - TIL] DOM과 angular Module / Component [230102 - TIL] angular 기능모듈 라우팅 [230103 - TIL] angular service와 @skipself 2. 프로젝트 구조 > ng add @angular/material >

bluejoyq

발단 그냥 갑자기 생각나서 해봄. 코드 Cupertino Cupertino 사진 Material Material 사진

1000nion

자재평가 : 재고자산으로 관리되는 자재들, 회계뷰의 price control에 따라 결정됨( 기업내부에서 결정한 단가 ) Material and Accounting Documents Goods Movements GR, GI, TF 문서 생성시 자재문서 생성된다. 이후 회계적인 변화 발생하면 후속으로 회계문서 생성된다. 재고자산, GR/IR, 가격차이 계정 Invoice Verifivation 인보이스 관련 부분에서 자세한 설명 Material Valuation Scenario for standard price 표준 가격 (1) Starting Situation Opening balance 기초잔액 : total value(

coolguykeepgoing

어벤져스 전투장면에서 나온 블랙팬서의 이펙트를 관찰하여 언리얼엔진에서 메테리얼을 제작하는 과정을 공유합니다. 레퍼런스 블랙팬서가 대규모 전투중에 적들을 일망타진(?)했던 충격파를 예제로 자동화 기법에 대해 설명드리겠습니다. 예제구현 먼저 콘텐츠 브라우저에서 우클릭해서 메테리얼을 만들어줍니다. 레퍼런스를 자세히보시면 반투명한 반구체와 겉면의 충격파는 빛나는 재질을 띄고 있는 걸 확인할 수 있습니다.언리얼에서 반투명한 재질을 만들기위해선 몇가지 기본세팅을 거쳐야합니다. Blendmode: Translucent(투명) Shading model: unlit Translucent는 Opacity의 Value가 0과 가까울수록 불투명하지만 1에 가까울수록 투명해지는 특징을

coolguykeepgoing

Material Parameter Collection 블루프린트와 Material의 가교역할을 합니다. 특징 이 방식으로 쓰이는 매개변수는 Material 원본을 변경하기때문에 블루프린트에서 매개변수 값을 바꿨을 때 메테리얼을 공유하고 있는 다른 Material Instance에도 공통적으로 영향을 끼치는 한계점이 있습니다. 공유하는데 필요한 비용이 비싼 편이기 때문에 활성유무에 대한 Switch(분기점)을 만들어줘야합니다. 사용법 설명을 간단화하기 위해 Material Parameter Collection= MPC로 명명하겠습니다 메테리얼 그래프에서 MPC를 추가하고 블루프린트에서 MPC를 불러와볼건데요 콘텐츠 브라우저안에서 우클릭을 해서 '메테리얼>메테리얼 파라미터 컬렉션'을 생성합니다 MPC을 더블클릭합니다. 용도에 맞는 타입의(Scalar나 Vector)매개변수를 추가하고 사용정의 해주세요. 메테리얼에서 'Collection

coolguykeepgoing

Distance fields를 활용한 메테리얼 Distance field를 활용하면 사용자에게 인터렉티브한 효과를 주는 메테리얼을 만들 수 있습니다. 프로젝트 세팅 프로젝트 세팅> Mesh Distance field create 활성화하기 특정 상황에서 효율을 높일 수 있는 관련된 옵션을 덧붙이자면 8bit mesh distance field 16비트를 8비트로 변환해 메모리 소비량을 대폭 감소시켜줍니다 하지만 크거나 얇은 메쉬에는 아티팩트가 발생할 수 있으니 유의해 주세요 Compress mesh distance field 마찬가지로 메모리를 절약하지만 퀄리티는 소실되지 않습니다. 하지만 Level Streaming을 사용하면 로딩 시 부하가 발생할 수 있습니다. 레벨을 열 때 압축을 풀어야 하기 때문입니다 Distance field Near Surface Distance field Near Surface 함수를 활용해 잔물결이나 슬라임을

dishate

최근에 Expo를 통해 웹과 모바일 앱을 동시 지원하는 프로젝트를 개발하고 있습니다 React-Native Mui를 사용하고 있는데 style을 수정한 방법을 공유하고자 글을 작성합니다 문제 상황 Modal을 통해 사용자에게 정보를 보여주고 확인을 받고자 했습니다 React-Native Mui - Dialog를 사용하게 되었는데 해당 컴포넌트는 모바일에서는 가운데에 위치해있지만, 웹에서는 뷰포트가 아니라 전체 화면을 기준으로 가운데에 위치해서 스크롤을 내려야 Modal이 보이는 문제가 있었습니다 position을 absolute가 아니라 fixed로 바꾸면 해결이 되지 않을까 싶었는데 ide에도 style을 파라미터로 넘길 수 없고, 넘겨도 적용되지 않았습니다 코드 뜯어보기 node_modules/@react-native-material/core/

727207e

삽질만 2시간 분명 기본 빌트인 쉐이더에선 AlphaTest off 인가 이것만 해주면 알아서 Alpha 없애주는데... URP 에선 어떻게 하는가... 그러다 우연히 구글에서 발견을 했다 알파클리핑 버튼이 있더라 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ Opaque 에서도 알파값을 조절하기 위한 버튼이 따로 만들어져 있더라 누르면 Alpha와 Thre

kim_kile

1. 머터리얼 디자인이 뭘까? > Material is a design system created by Google 머터리얼 디자인은 구글의 디자인 시스템이다. 2. 머터리얼 디자인은 왜 머터리얼이라는 이름을 갖었을까? > Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink. > To replicate real products as closely as possible, each study identifies users, displays functional user flows, and applies real-world restrictions. (추측) 머터리얼 디자인은 물리적 현실을 은유적으로

akfldkskgorn

RigidBody : 물리효과(중력, 저항)를 받기 위한 컴포넌트 1) Mass : 무게, 수치가 높을 수록 충돌이 무거워짐 2) Drag : 공기 저항 3) Angular Drag : 회전 할 때 공기 저항 4) UseGravity : 중력 적용 여부 5) Is Kinematic : 외부 물리 효과 무시 Collider : 물리효과(충돌, 탄성)를 받기 위한 컴포넌트 1) Is Trigger : 충돌 적용 여부 2) Material : Physical Material 적용, 탄성, 마찰 조정 Material : 제질 컴포넌트, Project창 우클릭 -> New -> Metarial 1) Rendering Mode Opaque : 불투명, 일반 고체 Cutout : 투명 + 불투명, 그물망, 풀 ... Transparent : 투명, 플라스틱, 유리 ... Fade : 투명, 페이드 아웃, 홀로그램 2) Albedo : 빛 반사 정도, 색상

s00mm

pubspec.yaml 프로젝트의 메타데이터 프로젝트 버전, 사용환경, dart 버전, 각종 dependencies, 3rd party libarary 등을 정의 android / ios 폴더 각 플랫폼에 맞게 배포하기 위한 정보를 가지고 있음 test 폴더 dart 관련 코드를 테스트할 수 있음 lib 폴더 실제 작업이 주로 이루어지는 곳 코딩 시작 1. 코딩에 필요한 재료 준비 > #### material.dart 패키지 플러터 프레임워크, 기본 위젯과 요소(디자인, 테마 등)을 사용하기 위한 필수 패키지 cf. material desigh : 모바일, 데스크탑등 사용환경에 따라 일관된 디자인을

wlsgkq123

리액트에서 많이 쓰는 UI 라이브러리 설치 속성들은 https://mui.com/components 에서 참고하자 타이포그래피 (Typography) variant 적용될 태그 component DOM에 올라갈 태그 color 폰트컬러 gutterbottom 텍스트 밑에 마진이 생긴다 material에 styled componenet 적용하기 편하게 코딩하기 위해 익스텐션 vscode-styled-components 설치 테마설정 기본 설정 되어 있는 테마 : https://mui.com/customization/default-theme/#main-content 테마를 적용하고 싶은 컴포넌트 위에 ThemeProvider로 덮으면 된다. @mui/material/col