Flutter를 사용하는 개발자와 협업할 일이 생겼다. 빠른시간내에 완성해야 하는 플젝이라 주요 아이콘 외에 시스템 아이콘은 머티리얼 아이콘을 사용하기로 결정해서 피그마 플러그인을 열심히 찾아보았다. 분명 머티리얼 아이콘 플러그인이 있을거야~~ Material Design Icons | Figma Community Figma Community plugin - Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through the entire list. Filter by category, change..

Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io 구글에서 만든 디자인 시스템인 Matrial Design(이하 머티리얼 디자인) 세번째 버전이 나왔다. 2와 다르게 3에서는 개인화 및 접근성이 향상되었다. 새로운 버전을 살펴보면 가장 먼저 Figma(이하 피그마) 템플릿 파일을 제공하는데 이걸 보면 스케치의 시대는 저버리고 피그마가 이제 본격 UI 메인툴로 자리잡게 된 것 같다.. 그 중에 접근성 향상을 위한..

웹 -> 앱으로 넘어갈 때 데이터 테이블의 디자인을 고민한 적이 있다. UI디자이너라면 앱 디자인 작업시 한번 쯤 겪는 고민이지 않을까 싶다.이번에 NFT플랫폼 외주를 진행하면서 모바일 화면에 들어가지 못하는 데이터를 한 눈에 보기 쉽게 간결하게 보여 줄 수 있을까 하여 데이터 테이블을 대체 할 수 있는 다양한 UI를 찾아보았다. 부동산/금융/암호화폐 등 다양한 금융관련 플랫폼에서는 데이터 테이블을 자주쓰는데 어떻게 하면 최대한 간결하고 직관적이게 보일 수 있는지 다양한 방법을 생각하고 디자인하는것 같다. 나는 UI 작업시 주로 구글의 material design을 차용하여 작업을 하기 때문에 오늘은 내가 주로 실무에서 사용하는 유형을 소개하려한다. https://material.io/ Material ..

2월달에 온다고 한달 걸린다고 한게 갑자기 2주만에 온다고 문자가와서 얼떨결(?)에 받아본 맥북프로 16인치!!!!! 메모리만 커스텀해서 주문했다. 교육할인 스토어에서 할인 받아 구매했음! 이렇게 메모리만 32기가로 업글해서 약 380만원대에 구매를 했고, 교육할인을 받지 않으면 아마 4백만원대에 구매 할 수 있을듯 싶다. 처음엔 M1 max으로 가려고 했으나 나는 3D와 고급 영상을 다루지 않기 때문에 M1 pro도 충분 할 것 같아서 선택했다. 난 원래 17년도였나 16년도 13인치 맥북프로를 쓰고있었음 문 앞에 두고갈줄 알았는데 비싼거라 그런지 미리 전화하고 대면으로 전달해주심, 그래서 바로 튀어나가서 택배 받았다. 박스포장도 너무 정성스러워.. 그래 캘리포니아 감성.. 충전기는 맥세이프로 자석처럼..

html의 안에다가 웹폰트 태그 써주면 됨! 구글 웹폰트 들어가서 link href 긁어와서 head에 넣어주고 css스타일에서 font:굵기 크기 '폰트이름'에서 밑에 폰트패밀리 이름 복사해오면 웹폰트 적용완료~~ 포토샵에서 슬라이스된거 저장하려면 웹으로 저장 슬라이스한것만 더블클릭해서 이름 만들어주고 쉬프트 눌러서 슬라이스 된것들만 클릭해서 저장하면 이미지 파일 만들어짐! 스케치만 쓰다가.. 올만에 포토샵 쓰려니까 낯설고도 새롭다..ㅎ

반응형 사이즈일때 영역잡은거 뒤쪽 배경 처리하는법 div으로 잡고 그 안에서 영역잡기 css으로가면 그 div에 width 100%주면됨 브라우저 사이즈 늘렸을때 뒤에 배경이 잘리지않음 그래서 header에 네비게이션 주는방법은 ul을 이용해서 주고 ul은 원래 수직정렬이니까 float:left로 수평정렬 해주고 text-align:center로 텍스트들 중앙정렬 해줌 그러면 상하가 중앙이 안되어있는데 그럴땐 lin-height이용해서 상하 중앙정렬 해주면 상하좌우 가운데로 옴 이렇게 영역잡고 레이아웃 제작하면됨 a href="경로" 해주면 링크 걸림 target넣어줘야 새창으로 열림 title 넣어줘야 웹접근성 완성 근데 a태그는 기본값이 밑줄+파란색폰트라서 a태그 폰트컬러 검정색, 텍스트 데코레이션 ..