WLOG

IT 기업 및 스타트업 Tech 블로그 모음 Google for Developers : https://developers.googleblog.com/ko/ Home - Google Developers BlogMobile Web AI Cloud AI Homepage Announcements Events The I/O journey continues in Bengaluru Google's I/O Connect event in Bengaluru highlighted India's contributions to AI and introduced new tools for app development, including AI agents for coding and tesdevelopers.googleblog.com Microsoft : https://tech.. 2024.07.17
[Figma] Figma Slides Config 2024에서 발표된 새로운 기능 중 하나인 Figma Slides에 대해 알아보자."Figma Slides는 Figma Design의 강력한 기능과 정확성을 사용하기 쉬운 프레젠테이션 도구와 결합하여 내러티브(서사)에 생기를 불어넣는 동시에 일관성을 향상시켜 줍니다." 1. 왜 만들었나? 디자이너와 팀원을 위한 프레젠테이션 도구로 활용하도록 만들었다.하지만 누구든 역할이나 디자인 경험 수준에 관계없이 Figma Slides를 사용하면 퀄리티 있는 슬라이드 구조를 쉽게 만들 수있다. 피그마를 사용하면서도 프리젠테이션 자료 제작이 필요할 때 바로 활용할 수 있어 유용하다. 2. Figma Slides 왜 사용할까? 템플릿을 선택하여 사용하므로 일관성 있는 프레젠테이션 템플릿을 쉽게 얻을 수 .. 2024.07.05
[ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기 UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다. 플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 1. 프로토파이 좌측 상단에 있는 Import 및디자인 툴을 클릭하면 해당 사이트가 열린다. 2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다. 완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다. ** 사전 준비 및 유의 사항 - UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. - 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능) 1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 .. 2024.01.31
[CSS] Grid : CSS Layout CSS Layout : Flex와 Grid CSS layout에는 Flex와 Grid가 있다. CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다. 둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다. 더보기 flexbox - container에 적용되.. 2022.10.02
CSS의 새로운 기능 (2022 구글 I/O 주요 기능) 2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적.. 2022.06.17
픽셀과 DP px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거.. 2021.10.31

티스토리툴바