Utility(13)
-
[Chrome] 웹 개발자 도구 활용 가이드 - 기본편
크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아봅시다크롬 웹 개발자 도구 (Chrome DevTools)크롬 웹 개발자 도구는 구글 크롬 브라우저에 내장된 강력한 도구로, 웹 페이지를 실시간으로 검사하고 디버깅하며 성능을 분석할 수 있게 해 줍니다. 웹퍼블리셔와 개발자 모두에게 유용하며, 웹 페이지의 HTML, CSS, 자바스크립트 등 다양한 요소를 실시간으로 수정해 보고 테스트할 수 있습니다.개발자 도구 열기가장 빠르게 개발자 도구를 여는 방법은 키보드 단축키를 사용하는 것입니다. macOS 기준으로 단축키 option + cmd + i를 눌러 개발자 도구를 열 수 있습니다. ( windows 기준은 ctrl + shift + i )모바일 모드 전환모바일 디바이스 모드는..
2024.08.07 -
[Figma] 디자인 협업의 핵심 팁(Tip) : 피그마를 활용한 효율적인 공유 전략
피그마를 통해 팀원들과 효과적으로 협업하고 공유할 수 있는 몇 가지 주요 기능들에 대해서 알아봅시다. 공유 링크상단 메뉴바 우측을 보시면 Share(공유하기) 버튼을 클릭해 주세요. Copy link(링크 복사하기) 버튼을 클릭하시면, 공유할 수 있는 링크가 복사됩니다. 또 Email(이메일)을 통해, 디자인 파일 링크를 쉽게 공유할 수 있습니다. 공유하려는 사람의 권한을 설정할 수 있어 편집 가능(can edit), 보기 전용(can view)의 권한을 부여할 수 있습니다. 이메일 입력창에 초대하려는 팀원들의 주소를 입력하고 invite(초대하기) 버튼을 클릭하여 디자인 파일을 공유해 보세요. 공유된 링크가 누구나 접근 가능(Anyone with the link)하도록 기본 설정되어 있습니다..
2024.05.18 -
[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해
VSCode는 Microsoft에서 개발한 가벼우면서 강력한 오픈 소스 코드 편집기로, 다양한 플랫폼에서 널리 사용되고 있습니다. 이 글에서는 VSCode의 핵심 기능 중 하나인 단축키 설정하는 방법에 대해 다뤄보려고 합니다. 사용자 정의 단축키 설정하기 단축키는 작업을 빠르게 수행하고 생산성을 향상하는 데 중요한 역할을 합니다. 키보드 조작을 통해 마우스로 수행하는 작업보다 훨씬 효율적이며, VSCode에서는 다양한 기능에 대한 단축키를 제공하여 개발자의 작업 효율을 높일 수 있습니다. 사용자가 정의하는 단축키 설정 방법에 대해서 알아보겠습니다. 설정 > 바로 가기 키 왼쪽 하단에 설정 아이콘 > 바로 가기 키 클릭하세요. 키 바인딩 리스트 창이 띄어집니다. 각 키 또는 키 조합에 할당된 작업 또는 명..
2024.03.30 -
[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)
웹퍼블리셔로서 웹사이트나 앱의 사용자 경험을 향상하기 위해 디자이너와 협력하여 다양한 디자인 요소를 구현합니다. 이미지는 이러한 디자인 요소 중 하나로, 올바른 형식과 해상도로 이미지를 추출하는 것은 웹사이트나 앱의 성능과 사용자 경험에 직접적으로 영향을 미칩니다. 이번 포스팅 글에서는 이미지 추출의 기준과 피그마를 활용한 이미지 추출 방법에 대해 알아보겠습니다. 이미지 추출의 기준? PNG - 이미지를 여러 번 저장하거나 압축해도 품질이 손상되지 않습니다. - 예를 들어 로고(Logo)나 아이콘(Icon)같이 투명한 배경이 필요한 경우 사용됩니다. JPG - 압축률을 조정하여 파일 크기를 줄일 수 있습니다. 따라서 이미지 파일 크기를 최소화해야 할 때 유용합니다. - 사진이나 복합적인 이미지를 저..
2024.03.29 -
[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기
Photopea의 Content-Aware 기능은 작은 결함들을 보정하는 데 있어 손쉽게 도와주는 기능입니다. 이 기능을 통해 작업의 결과물을 보다 완성도 있게 만들 수 있는데요~ 이 기능에 대해서 알아봅시다. 앞서 포스팅된 글에서는 Photopea의 주요 기능을 간략히 살펴보았습니다. 자세한 내용이 궁금하시다면 아래의 링크를 확인해 주세요! [Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아) 포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우 dev-chim.tistory.com Content-A..
2024.03.25 -
[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)
포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우저만 있다면 언제 어디서나 접근할 수 있어 편리하며, 다양한 이미지 편집 작업을 수행할 수 있습니다. 이제 포토피아의 기능과 장점을 자세히 알아보도록 하겠습니다. Photopea 그래픽 디자인 편집기 바로가기 아래의 링크를 클릭하여 Photopea 디자인 편집 도구를 사용해 보세요. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. Photopea | Online Photo Editor ✕ Photopea: advanced photo editor Free onl..
2024.03.23