찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다.작년 7월에 2024 피그마 config 관련 포스팅을 했던 것 같은데올해 또 와.. 소리나게 바뀌었어요 일단 아주 정리 잘된 youtube링크를 공유할게요 영상을 보고 정리를 해보면 1. 피그마 신제품 발표 개요피그마가 신제품 네개를 출시함발표된 제품은 피그마 디자인, 피그잼, 슬라이드, 데브모드 등특히 피그마 사이트는 디자인 시안을 바로 웹사이트에 발행할 수 있는 기능을 제공함2. 성능 개선 및 디자인 시스템성능이 33% 개선되었음내년 초에는 디자인 시스템 아키텍처를 재작성할 계획임3. 그리드 기능오토레이아웃의 진화된 기능으로, 디자인 시 레이아웃과 그리드를 쉽게 설정할 수 있음4. 피그마 사이트피그마 사이트는 디자인한 내용을 웹에 직접 퍼블링할 수 있는 기능을 제공함 (미쳤..

안녕하세요 찐망고입니다.웹디자인개발기능사 문항이 올해부터 많이 바뀌어서 시험본 제자들과 SNS의 댓글로 취합을 해보고 전자책을 만들어볼까 했는데요 (무료배포예정)아무래도 취합된 자료가 많지 않아 일단 블로그에 공유 해봅니다. PART1은 기초 데이터 및 프로토타입 설계관련 문항이고 총 40문제입니다. 1. 다음 중 웹디자인 프로젝트의 기초데이터로 가장 적절한 것은?a) 광고비b) 사용자 요구사항c) 회계 보고서d) 회사 내부 인사정보더보기사용자 요구사항은 웹디자인의 방향을 결정짓는 핵심 기초데이터기초데이터 = 사용자 요구, 시장 분석, 기술요건 광고비는 마케팅 예산에 해당하고, 웹디자인의 기능/구조를 결정짓는 기초정보는 아님 회계보고서는 회사의 재무 정보로, 디자인이나 사용자 경험 설계에는 직접적인 ..

안녕하세요 찐망고 입니다.새롭게 개편된 웹디자인개발기능사 필기시험 출제 목차를 총정리해볼게요. 1. 프로토타입 기초데이터 수집 및 스케치 웹디자인 프로젝트를 시작하기 전, 기초 데이터를 수집하고 아이디어를 시각적으로 정리하는 과정입1-1. 기초 데이터 및 레퍼런스 수집 웹디자인 프로젝트를 수행하기 위해 필요한 정보와 레퍼런스를 조사하는 단계1) 기초데이터와 레퍼런스 데이터 수집기초데이터: 프로젝트 주제와 관련된 핵심 정보를 수집합니다.사용자 요구사항 조사시장조사 및 트렌드 분석경쟁사 분석기술적 요구사항(HTML, CSS, JS, 프레임워크 등)사용자 행동 데이터(사이트 방문 기록, 클릭 데이터 등)레퍼런스 데이터: 디자인 및 UI/UX 개선을 위한 자료를 조사합니다. 기존 웹사이트 사례 분석UI/UX 디..

안녕하세요 찐망고입니다.이번에 인크루트웍스 클론 프로젝트를 진행하는 학생이 만든 사이트를 보다가 발견한 버튼인데요.민산스 폰트를 포스팅하게 만든 그 사이트가 맞구요!마우스오버효과를 주면 버튼 색상이 부드럽게 바뀌는게 너무 예쁘더라구요!그래서 직접 HTML, CSS, JavaScript로 구현해 보았습니다  학생이 클론한 사이트 입니다. (3개월 후 삭제예정) AI로 검증하는 채용솔루션, 인크루트웍스인크루트웍스 채용솔루션으로 더 똑똑하고 빠르게 채용하세요! 기업채용에 최적화된 지원자관리,평가관리,면접관리,인재검증 등 다양한 솔루션을 제공합니다.phj00006.mycafe24.com 버튼 그라데이션 애니메이션은 영상으로 확인해주세요 (클론한 작업물) 마우스를 올리면 위에 그라데이션이 왼쪽에서 오른쪽으로 지나..

안녕하세요 찐망고입니다.역시나 머터리얼 디자인 시리즈를 이어가며 접근성에 관련된 컬러에 대해 자세히 알아보겠습니다. Color and Contrast Color and Contrast (색상과 대비) 색상과 대비는 사용자가 앱의 콘텐츠를 보고 이해하고, 올바른 요소와 상호작용하며, 동작을 이해하도록 돕는 데 사용될 수 있습니다.   More accessible color (더 접근성 있는 색상) 색상은 분위기, 톤, 중요한 정보를 전달하는 데 도움을 줄 수 있습니다. 주 색상, 보조 색상, 강조 색상을 신중히 선택하면 사용성이 향상됩니다. 요소 간 충분한 색상 대비는 시력이 약한 사용자도 앱을 쉽게 사용할 수 있도록 돕습니다.   Contrast ratios (대비 비율)색상 대비는 사용자가 다양한 ..

안녕하세요 찐망고입니다. 웹디자인에서 리스트형태로 나열된 레이아웃들 자주 보게 되죠? 이때, 단순히 박스와 텍스트만 배치하면 다소 밋밋하거나 정보를 효과적으로 전달하기 어려울 수 있습니다. 이런 경우에는 UI아이콘을 활용해 보는 것을 추천합니다. 아이콘은 단순히 장식용이 아니라, 사용자가 각 섹션의 내용을 직관적으로 이해할 수 있도록 돕는 중요한 요소인데요. 간단한 이미지 하나만으로도 사용자는 페이지의 구조와 각 항목의 의미를 쉽게 파악할 수 있고, 한눈에 필요한 정보를 확인할 수 있게 됩니다. 아이콘을 디자인할 때는 백터형태로 제작하는 것이 좋습니다. SVG(Scalabel Vector Graphics)포맷은 해상도에 관계없이 크기를 자유롭게 조절할 수 있기 때문에 어떤 디바이스나 화면 크기에서도 선명..

안녕하세요 찐망고입니다. 피그마가 업데이트 이후 툴바나 패널이 조금 바뀌었어요.오토레이아웃이나 컴포넌트, 베리언트, 컨스트레인트 등도 조금 바뀌었지요.영상을 만들면 조금 편할 거 같은데 왜 저는 아직도 텍스트로 포스팅을 하려고 하는 걸까요.옛날사람이라 그럼... 이전 글 참고 해주시고 포스팅을 이어할게요. 피그마 컴포넌트, 베리언트 (Component, Variants)안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일uiweb.tistory.com 피그마에서 컴포넌트와 베리언트는 디자인 시스템을 효율적으로 관리하고 재사용성을 높이는..

안녕하세요 찐망고 입니다.이포스팅은 Apple의 기본 영문 글꼴인 SF-Pro폰트를 Windows환경에서 사용할 수 있도록 돕기위해 작성하였습니다.디자인을 하다보면 Windows에서 Apple폰트가 필요할때가 있잖아요. https://developer.apple.com/fonts/ Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps.developer.apple.com 물론 이사이트에서 폰트를 다운 받을 수 있지만,dmg파일은 또 따로 zip프로그램을 받아 압축을 풀어야 하는 점.. ttf파일을 공유합니다      otf파일은 용량이 큰 ..

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 hover할때 밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요. 마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.duiweb.tistory.com 오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다. 예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.     CSS코드h2 { color..

와 찐망고입니다..다른 발 빠른 분들에 비하면 조금 늦은 포스팅인데요.. 피그마가 업데이트를 했어요 이번엔 꽤 아주 훌륭한 내용들이 많은데 각각 업데이트된 내용을 피그마로 직접 작업 후 포스팅 하려다가 ㅎㅎㅎ그럼 시간이 더 걸릴 것 같아 올해 컨퍼런스 요약된 주요 업데이트 내용을 포스팅해보려 합니다. Figma Config 2024 컨퍼런스는 6월 26일부터 27일까지 샌프란시스코에서 열렸으며,디자이너와 개발자를 위한 혁신적인 기능과 업데이트를 발표했습니다. 일단 youtube 링크부터  youtube내용을 정리해 보면 Figma AI ( search for simillar명령어 ) 완성된 디자인(app)의 기존 피그마 파일 찾기 (01:44):  이미지 업로드로 유사한 디자인 파일 탐색 변경할 수 있음..