본문 바로가기
반응형

전체 글

피그마(Figma) 배경 제거(누끼 따기) 무료 플러그인(Plugin) ‘아이콘8 백그라운드 리무버(Icons8 Background Remover)’ 포토샵을 통해서 보통 진행하지만, 비트맵 이미지의 특정 영역을 제거하여 일명 누끼 따기라고 불리우는 특정 인물이나 사물만 남기고 나머지를 투명처리하는 작업은 꽤나 손이 많이 가는 일입니다. 포토샵을 켜면 더 정교하게 될 수도 있지만, 어느정도 간단한 수준에서의 배경 제거는 피그마의 플러그인을 통해서도 가능합니다. 특히 관련하여 무료이면서도 좋은 품질을 지니고 있는 플러그인도 많기 때문에 활용을 고려해 보는 것도 업무 효율성 차원에서 나쁘지 않을 것으로 보입니다. 소개하고자 하는 플러그인은 배경 제거 플러그인 중 신뢰도가 높은 편에 속하는 서비스로서 '아이콘8 백그라운드 리무버'라는 이름의 플러그인입니다. 아이콘8은 각종 디자인 리소스를 제공하는 서비스로도 유명한데, 피그마용 배경 제거 플러그인도 무료로 ..
ChatGPT(AI) 활용해서 UI/UX 디자이너 취업냉각기 극복하기 1. 신기술로 기술 향상하기AI 및 머신 러닝 기본 학습: AI와 ML이 UXUI 디자인에 어떻게 사용되는지 이해하도록 설명, 튜토리얼 및 리소스를 제공할 수 있습니다.업계 트렌드 업데이트 유지: 최신 기사, 연구 논문 및 UXUI의 신기술에 대한 뉴스를 큐레이팅하고 요약해드릴 수 있습니다.2. GPT 및 AI 도구 활용콘텐츠 생성: 아이디어 생성, 블로그 게시물 작성, 포트폴리오 설명 개선 및 프로젝트의 매력적인 카피 작성에 도움을 줄 수 있습니다.코드 지원: CSS, HTML, JavaScript 코드 조각 작성 및 디버깅을 지원하고, 빠른 프로토타이핑 도구 및 방법에 대한 지침을 제공할 수 있습니다.3. 강력한 온라인 존재 구축포트폴리오 업데이트: 포트폴리오 구조화, 상세한 사례 연구 작성 및 디자..
자바스크립트로 여러 CSS 클래스 추가하기 여러 클래스를 요소에 추가하려면 classList.add 메서드에 여러 인수를 전달하면 됩니다. 각 인수는 추가하려는 클래스를 나타냅니다. 다음은 그 방법입니다:기본 방법Element.classList.add('container', 'class1', 'class2', 'class3');배열과 apply 활용여러 인수와 함께 classList.add를 사용하여 여러 클래스를 직접 추가합니다.apply 메서드를 사용하여 배열에서 클래스를 추가합니다.스프레드 연산자(...)를 사용하여 배열 요소를 개별 인수로 펼쳐 classList.add에 전달합니다.const classes = ['container', 'class1', 'class2', 'class3'];Element.classList.add.apply(t..
아임웹: 디자인은 탁월하나, 커스터마이징과 확장성의 한계 최근 몇 년간 많은 사람들이 웹사이트 제작에 뛰어들면서 손쉽게 웹사이트를 만들 수 있는 플랫폼에 대한 수요가 급증하고 있습니다. 이러한 수요를 충족시키기 위해 다양한 웹사이트 빌더들이 등장했으며, 그 중에서도 한국의 아임웹은 비교적 인지도가 높은 편입니다. 그러나 아임웹을 사용해본 사용자들 사이에서는 그 장점만큼이나 단점에 대한 불만이 꾸준히 제기되고 있습니다. 이번 포스트에서는 아임웹의 장단점을 분석하고, 왜 아임웹이 장기적이고 확장 가능한 웹사이트 구축에는 적합하지 않은지에 대해 알아보겠습니다. 뛰어난 디자인 품질과 손쉬운 웹사이트 개설 아임웹의 가장 큰 장점 중 하나는 쉽게 웹사이트를 개설할 수 있다는 점입니다. 웹사이트 제작 경험이 전무한 사람도 직관적인 인터페이스를 통해 몇 번의 클릭만으로 멋진..
간단한 스크롤 내비게이션 만들기 (CSS+JS) See the Pen Simple Scroll Navigator by siimplelab (@siimplelab) on CodePen.코드 설명DOMContentLoaded 이벤트:DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 로드되고 파싱되었을 때 발생하며, 스타일 시트, 이미지, 하위 프레임의 로드를 기다리지 않습니다.document.addEventListener("DOMContentLoaded", ...)에 전달된 익명 함수는 DOM이 완전히 로드된 후에 내부 코드를 실행하도록 보장합니다.addClassOnScrollToSection 함수:이 함수는 특정 섹션이 보일 때 대상 요소에 클래스를 추가합니다.매개변수:sectionId: 모니터링할 섹션의 ID입니다.classNa..
프론트엔드 개발에 특화된 웹 브라우저 소개 프론트엔드 개발에 유용한 브라우저는 여러 가지가 있으며, 개발 경험을 향상시키는 도구와 기능을 제공합니다. 다음은 몇 가지 주목할 만한 브라우저입니다:구글 크롬:Chrome DevTools: 크롬의 내장 개발자 도구는 매우 강력하고 기능이 풍부합니다. 요소 검사, JavaScript 디버깅, 네트워크 성능 분석, 다양한 기기 및 화면 크기 시뮬레이션 도구를 포함합니다.Lighthouse: 웹 페이지의 품질을 향상시키기 위한 오픈 소스 자동화 도구입니다. 성능, 접근성, 프로그레시브 웹 앱, SEO 등을 위한 감사 기능이 있습니다.확장 프로그램: React Developer Tools, Vue.js devtools, Redux DevTools와 같은 많은 확장 프로그램을 사용할 수 있습니다.파이어폭스 개발..
window.onload vs DOMContentLoaded 둘 다 window.onload와 DOMContentLoaded는 문서가 로드된 후 JavaScript 코드를 실행하는 데 사용됩니다. 그러나 이 두 방법은 트리거되는 시점에서 중요한 차이가 있으며, 약간 다른 시나리오에서 사용됩니다.window.onloadwindow.onload 이벤트는 이미지, 스타일시트 및 iframe과 같은 모든 종속 리소스를 포함하여 페이지 전체가 완전히 로드될 때까지 기다립니다.외부 리소스가 완전히 로드될 때 스크립트가 필요할 경우 유용할 수 있습니다.DOMContentLoadedDOMContentLoaded 이벤트는 스타일시트, 이미지 및 서브프레임을 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생합니다.일반적으로 HTML이 로드되고 구문 분석되..
Mechvibes 소개: 키보드 눌렀을 때 소리 나도록 하기 개인화와 커스터마이징이 중요한 오늘날의 기술 세계에서, Mechvibes는 키보드 애호가들에게 필수적인 도구로 자리 잡고 있습니다. 게이머, 프로그래머 또는 기계식 키보드의 느낌과 소리를 사랑하는 사람이라면, Mechvibes는 타이핑 경험을 한층 더 즐겁게 만들어 줍니다. 이번 블로그 포스트에서는 Mechvibes가 무엇인지, 설치 방법, 그리고 최대한 활용하는 방법에 대해 알아보겠습니다.Mechvibes란 무엇인가요?Mechvibes는 키보드의 키 입력 소리를 사용자 맞춤형으로 변경할 수 있게 해주는 사운드 매퍼입니다. 타자기, 클래식 기계식 키보드, 또는 전혀 새로운 소리로 키보드를 입력하는 상상을 해보세요! Mechvibes는 이러한 소리를 스피커나 헤드폰을 통해 시뮬레이션하여, 만족스러운 청각적..
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바