Jake의 블로그

# ffmpeg를 사용해서 웹에 첨부하기 좋게 영상을 변환하는 방법 소개 - 본 포스팅에서는 FFMpeg 라이브러리를 활용하여 간단하게 동영상을 웹에 포함시킬 수 있는 작은 용량의 포맷으로 변환하는 방법을 소개하려고 합니다. (출처: https://avioli.github.io/blog/post/ffmpeg-for-web-videos.html) # ffmpeg를 설치 방법 - 설치 방법은 https://ffmpeg.org/download.html 에서 자신의 운영체제에 따라 다운로드 받으시면 됩니다. 아래의 예시들은 MacOS 기준으 명령이기 때문에 FILENAME.mov로 되어있습니다. 자신의 경로, 파일 명으로 교체하시면 됩니다. # 변환 방법 - MP4 - 높이 720px에 24fps로 변경하기 f..

# svg-spinner와 react-svg-spinner를 활용한 가벼운 로딩 아이콘 만드는 방법 - 웹 개발을 하다보면, 항상 필요하게 되는 요소 중 하나가 스피너 입니다. UI 프레임워크를 사용하는 경우에는 해당 프레임워크에서 스피너를 제공하기도 하지만, 만족스럽지 않은 경우가 많습니다. 그러다보니 결국 직접 스피너를 만들게 되는 경우가 많습니다. 오늘 포스팅은 이런 경우에 도움이 되는 팁입니다. # 사용법 - SVG파일로 사용하실 분이라면 아래의 페이지에 접속해서 마음에 드는 스피너를 찾은 후에 다운 받아서 사용하시면 됩니다 GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) A collect..

# Chrome 브라우저를 활용한 블루투스 상태 정보 확인하기 - 블루투스와 같은 하드웨어 관련 개발에 있어서 가장 필수적인 일은, 연결 상태 등의 기본 정보를 확인 하는 것입니다. 그리고 더 나아가 장치의 고유 주소라던지, 현재 연결 가능한 장치 목록 등을 볼 수 있으면 큰 도움이 됩니다. 물론 운영체제가 기본적으로 제공하는 기능 들을 사용할 수 있지만, 이런 소프트웨어들은 사용자들의 장비 연결을 돕는 일이 주된 역할이기 때문에, 최소한의 정보만 보여주게 디자인 되어 있다는 단점이 있습니다. 오늘 포스팅에서는 이런 경우에 도움이 될만한 간단한 팁을 소개해 드립니다. # 사용법 - 크롬에서 "chrome://bluetooth-internals"를 붙여 넣으시면 됩니다. 그러면 크롬 브라우저에 내장된 페이..

# Hero Patterns를 사용해서 원하는 패턴 백터 이미지를 만드는 방법 - 웹 디자인에서 패턴은 배경을 꾸미거나, 디자인적인 요소를 추가할 수 있는 좋은 방법 중 하나입니다. 그러나 패턴을 직접 만드는 것은 개발자에게 쉬운 일이 아니기 때문에, 어설프게 추가하느니 빼버리게 되는 경우가 다반사입니다. 오늘 포스팅에서는 이럴 경우에 하나의 선택지가 될 수 있는 사이트를 소개하려고 합니다. tailwindcss를 접해보신 분들이라면, 해당 문서에서도 소개가 되어 있기 때문에 이미 익숙하실 수도 있습니다 # 웹 사이트 https://heropatterns.com/ Hero Patterns | Free repeatable SVG background patterns for your web projects h..

# Webtoon AI Painter-Beta - 오늘 포스팅에서는 네이버에서 현재 베타로 서비스 중인 웹툰 AI 페인터를 소개하려고 합니다. 실제로 채색하고 리터치한 결과물들을 웹 상에서 보게 되었는데, 결과물이 꽤 퀄리티가 좋았습니다. 여러모로 유용하게 사용할 수 있지 않을까 싶네요. # 가입하기 - 웹툰 AI 페인터를 사용하기 위해서는 가입 및 로그인이 필요합니다. 소셜 로그인을 진행하면, 가입 절차도 진행하게 됩니다 # 사용방법 - 가입을 완료하면, 아래와 같은 메인화면이 보입니다. 좌측에 툴바가 보이고, 아래에는 네이버 웹툰 샘플 스케치들이 있으니, 채색 결과가 궁금하신 분들은 한 번 샘플을 채색해보셔도 좋을 것 같습니다 - 저는 원작자의 동의를 구해서 아래의 이모티콘을 채색해 보았습니다. (참..

# Stable Diffusion을 Krita에서 사용해보자 - Stable Diffusion을 이용해서 생성한 이미지는 높은 퀄리티의 결과물을 제공하지만, 실제로 완전히 자신이 원하는 것과는 거리가 있고, 또 손과 같은 부위는 표현이 잘 되지 않기도 합니다. 그래서 포토샵과 같은 편집 프로그램에서 이를 편집하는 과정이 필요합니다. 이러한 일련의 과정에서 포토샵 등에서 Stable Diffusion을 플러그인으로 제공하기 시작했고, 아래의 영상에서 보면, 자신이 선택 영역에만 Stable Diffusion을 활용해서 원하는 지형 또는 형태, 요소, 느낌 등을 생성해서 배치 및 편집해서 자신 만의 결과물을 만들어 내는 방식으로 활용하고 있습니다. 오늘은 이러한 플러그인 중 하나인 Krita 플러그인의 설치..

# Stable Diffusion AI 사용 방법 - 최근 AI를 사용해서 그린 그림들의 결과물이 엄청나게 좋아지면서, 이에 대한 글이나 영상을 많이 보셨을 것 같습니다. 본 포스팅에서는 Stable Diffusion AI를 사용해서 이미지를 만드는 과정을 소개하려고 합니다. 개발을 하시는 분들이라면, 금방 사용하실 수 있을 것 같습니다. # 사용 방법 - 해당 소스코드는 Stable Diffusion를 위한 Gradio라는 라이브러리를 호출하기 위한 Web UI인데, 이를 로컬에서 받아서 사용할 수 있습니다. 저는 이 소스코드를 사용하였고, Window 환경에서 진행 하였습니다. GitHub - AUTOMATIC1111/stable-diffusion-webui: Stable Diffusion web U..

# 픽셀 팔레트 사이트 - Lospect - 픽셀을 찍을 때 팔레트를 정하는 것은 항상 고민이 되는 일입니다. 자신만의 팔레트를 만들어 쓸 수 있다면, 제일 좋겠으나, 직접 팔레트를 만들기 어렵다면, Lospec 사이트에서 적절한 팔레트를 골라서 쓰는 것도 좋은 방법입니다. 본 포스팅에서는 Lospec에서 팔레트를 골라서 사용하는 방법을 소개합니다. # 사용 방법 - 아래의 사이트에 접속합니다 Lospec - Free tools and resources for people making pixel art, voxel art and more Free online tools for people creating pixel art and other low-spec art. lospec.com - 사이트 상단 메뉴..

# Askipy - Youtube Screenshot Note - 본 포스팅에서는 유튜브 및 웹에서 스크린 샷을 찍고 필기를 할 수 있게 도와주는 무료 Chrome 확장 툴 Askify입니다 # 설치 방법 - Chrome 웹 스토어에서 Askify를 검색해서 설치하거나, 아래의 링크를 눌러서 설치하시면 됩니다 Askify - Youtube Notes Take Notes From Youtube chrome.google.com # 사용방법 # Youtube에서 사용하는 방법 - Askify를 설치하고 나면, 아래와 같이 유튜브 제목 하단에, 두 개의 메뉴 버튼이 추가됩니다. 'Public Note'를 사용할 경우, 영상에 포함되어 있는 자막을 자동으로 가져와서 노트를 만들어줍니다. 'Take Notes'를..

# Coolors로 나만의 팔레트를 만들어보자 - 서비스를 기획하거나 앱을 개발할 때 컬러를 정하는 일은 고민거리 중 하나입니다. 적당한 색을 몇 개 골랐는데 서로 어울리지 않는다거나, 몇 일 지나서 보니 마음에 들지 않는 경우도 있습니다. 본 포스팅에서는 이런 문제를 해결해 줄 Coolors라는 서비스를 소개하려고 합니다 # Coolors 사이트 Coolors - The super fast color palettes generator! Generate or browse beautiful color combinations for your designs. coolors.co # Coolors 사용방법 - Coolors에서 제공하는 다양한 기능이 있겠으나, 가장 애용하는 기능은 팔레트 생성 기능입니다. 사용..