Flik LAB

WebP를 쓰면 뭐가 좋아요? 개선 효과가 있나요?WebP를 쓰는 이유가 뭐에요?WebP가 뭐에요???WebP는 웹 최적화에 초점을 맞춘 포맷으로 효율성, 성능 개선, 호환성에서 강점이 있는데, 특정 사용 환경이나 요구 사항에 따라 실효성을 판단해야 한다. 아래는 WebP의 주요 실효성에 해단 분석이다.1. 성능 및 데이터 절감 효과효율성구글의 연구에 따르면, WebP는 JPEG 대비 약 25~34% 더 작은 파일 크기로, 동일한 화질을 제공한다.무손실 WebP는 PNG 대비 약 26% 더 작은 파일 크기를 제공하며, 투명 이미지에서도 효율적.파일 크기를 줄이면 네트워크 트래픽과 데이터 사용량이 감소하며, 모바일 환경에서 유리하다.실효성 사례유튜브: WebP를 도입해 썸네일 파일 크기를 줄였으며, 페이지..

이미지 파일에 대한 모든 것을 정리하며 기록해 본다. 이미지 파일이란 디지털 장치에서 사진, 그림, 그래픽을 표현하기 위해 사용되는 데이터 파일이다. 이미지 파일은 다양한 포맷으로 존재하며, 각각의 특성과 목적에 따라 사용된다. 파일 크기, 품질, 지원 기능 등이 포맷마다 다르기 때문에 목적에 맞는 포맷을 선택하는 것이 중요하다.이미지 파일의 대표적인 포맷으로는 JPEG, PNG, GIF, TIFF, WebP, BMP, HEIC, 그리고 SVG가 있다. 이들 포맷은 용도와 특성이 다 다르며, SEO나 웹 최적화, 디자인 작업, 또는 고품질 인쇄 등의 작업에서 각각의 역할을 한다.JPEG는 가장 많이 사용되는 이미지 포맷 중 하나다. 손실 압축을 통해 파일 크기를 줄이며, 사진과 같은 복잡한 이미지를 저장..

서론프론트엔드 개발을 하다 보면 서버리스 함수(Serverless Functions)를 사용하는 일이 잦다. 특히 Next.js에서는 pages/api 폴더에 함수만 작성하면 자동으로 서버리스 함수로 동작하는 것은 익숙한 사실이다. Vercel에 프로젝트를 배포할 때 Functions라는 기능으로 서비리스 함수를 구현하는 방식을 제공하는 것이 생각나서 한번 테스트 겸 작성을 해보았다.꼭 Next.js 프로젝트가 아니어도 프로젝트의 api 폴더 안에 작성된 함수 파일을 Vercel에서는 서버리스 함수로 인식하고 동작한다는 것이다. 단순한 HTML 파일만 있는 프로젝트에서도 서버리스 함수를 간단하게 구현해서 api를 만들 수 있다는 것이 가능하다. 간단한 사실이지만, 누군가에는 새로운 사실이 될 수 있을 것..

Working Copy는 iOS용 Git 클라이언트입니다. iPhone과 iPad에서 Git 리포지토리를 클론, 편집, 커밋, 푸시할 수 있는 앱을 찾던 중에 알게 된 앱입니다. 코드 편집기로 활용도 가능하기 때문에 repository를 클론 해둔 상태에서 간단한 코드 수정을 하는 용도로도 종종 활용하게 됩니다. 코드를 읽거나 편집하는 기능만으로도 다른 앱에 비해 좋다보니 단순히 코드를 보는 용도로도 많이 사용합니다. 요즘들어서는 git을 활용한 자동화를 실험중인데 ios shortcut을 지원해주는게 너무 좋습니다. 전 무료 기능을 1년이상 사용하다가 유료 결제를 했는데 한번 결제하면 평생 사용 가능하기 때문에 큰 부담은 되지 않았던 것 같습니다. 학생들을 위해 GitHub Student Develop..

지난 포스팅에서 소개했던 파이썬으로 이미지를 생성하는 코드입니다.이 코드는 현재 디렉토리의 .txt 파일 이름을 이용해 최대 3줄로 줄바꿈한 텍스트를 포함하는 128x128 크기의 검은색 썸네일 이미지를 생성하고, 이를 thumbnails 폴더에 저장합니다. 텍스트는 흰색으로 중앙에 배치되며, 텍스트 크기는 이미지에 맞도록 조정됩니다.이미지 생성에는 PIL이라는 라이브러리를 사용합니다.코드 실행 시 폴더에 이미 해당 이름의 이미지 파일이 있다면 새로 생성하지 않고 넘어갑니다. 최종적으로, .txt 파일마다 해당 텍스트가 표시된 썸네일이 저장되는 구조로 작동합니다.import osfrom PIL import Image, ImageDraw, ImageFont# Define the path for the th..

Intro이전에 Github Actions로 여러가지 자동화를 할 수 있는 것을 이야기 했는데 구체적인 예시를 소개하고자 합니다.Text 파일 업로드를 하면 해당 텍스트 파일을 기준으로 이미지를 생성해서 업로드 하는 Workflow입니다. 이번 포스팅에서는 각 줄을 좀 더 자세히 하나하나 설명을 적어보았습니다.작동방식텍스트 파일을 깃허브 레포에 커밋하면 파이썬 코드가, 해당 텍스트파일을 가지고 이미지를 만들도록 할 것입니다.어떻게 되는지 한번 보여드리겠습니다.아래 처럼 텍스트 파일을 만들어서 Push 하면.. Github Action이 돌아갑니다. 이미지 파일이 만들어집니다.조금 긴 텍스트는 잘리네요. 하지만 파이썬 코드를 수정해야 할 것 같은데 이번에는 넘어가겠습니다.파이썬 코드이 코드는 현재 디렉토리..

프론트엔드 개발을 하면서 가장 귀찮은 일 중 하나가 UI 코드를 짜는 것이다. 기능만 동작하게끔 화면에 아무렇게나 구현하라고 하면 쉽겠지만 대부분 실제 사용자의 경험과 디자인 컨셉 등을 반영하다 보면 만들기 까다로운 화면은 존재한다. 사실 꼭 고난도의 화면이 아니라도 같은 디자인 컨셉으로 매일 만드는 화면인데도 교묘하게 다른 구성요소 여백차이를 일일히 보면서 만드는게 지겨운 일이다. AI를 코딩에 활용하는 것은 이제 새롭지 않을 정도로 널리 활용되고 있다. Cursor 라는 IDE를 메인으로 쓰고 있고 gpt, claud도 유료 플랜을 구독하며 활용중이다. 사실 나는 Claud보다는 GPT를 주로 사용해왔는데 이번에 클로드를 써보고 나서 깜짝 놀랐다. 개발중인 앱 스크린샷을 클로드에 그냥 넣었더니 그대로..

Intro깃허브 액션으로 특정 작업을 등록해두면, 원하는 순간에 작업을 실행하도록 할 수 있습니다.보통은 push가 발생할때, pr이 등록될 때, tag가 올라올 때 등 이벤트를 기준으로 작업을 실행하는 것을 많이 활용하는데요.이번 포스팅에서는 특별한 이벤트가 없어도 주기적으로 작업을 실행하는 방법을 소개해보려고 합니다.이 방법으로 주기적으로 실행이 필요한 작업을 github actions를 활용해서 자동화하는데에 활용할 수 있습니다.주기적으로 업데이트 확인하기, 크롤링이나 데이터 수집, 로그 정리 등에 활용할 수 있습니다.crontab이란?crontab은 특정 시간에 특정 명령어를 실행하는 규칙을 설정합니다. crontab 을 사용하면 원하는 시간에 작업을 실행하게 할 수 있습니다.주로 시스템 관리나 ..

유사이미지 검색에 대해서 한번에 다 다룰 자신은 없지만 조금씩 정리해보려고 합니다.유사 이미지 검색의 개념유사 이미지 검색은 사용자가 입력한 이미지와 시각적으로 유사한 이미지를 데이터베이스에서 찾아주는 기술입니다. 이는 전통적인 텍스트 기반 검색과 달리, 이미지의 색상, 형태, 질감 등 시각적 특징을 분석하여 유사도를 판단합니다. 예를 들어, 사용자가 특정 상품의 이미지를 입력하면, 해당 상품과 유사한 디자인이나 색상의 다른 상품 이미지를 추천해주는 방식입니다.유사 이미지 검색의 원리와 작동 방식유사 이미지 검색은 주로 다음과 같은 단계로 이루어집니다.특징 추출: 입력된 이미지에서 색상, 형태, 질감 등의 시각적 특징을 추출합니다. 이를 위해 딥러닝 기반의 신경망 모델이 주로 사용됩니다.임베딩 생성: 추..

Streamlit이란?얼마전 AWS의 워크샵에 참여하면서 Streamlit을 처음 알게되었다. Streamlit은 Python 기반의 웹 애플리케이션 프레임워크로, 데이터를 시각화하거나, 머신러닝 모델을 공유하거나, 데이터 분석용 대시보드를 쉽게 만들 수 있게 도와주는 도구이다. 특히, Python 코드로만 웹 애플리케이션을 개발할 수 있는게 특징이다. html, javascript 를 전혀 작성하지 않아도 웹 어플리케이션이 뚝딱 만들어진다.Streamlit의 가장 큰 장점은 간결하고 직관적인 문법인데 Python으로 간단한 코드만 작성하면 대화형 웹 애플리케이션이 만들어진다. 코드를 수정할 때마다 실시간으로 애플리케이션이 업데이트되기 때문에, 개발 중간에도 결과를 바로바로 확인할 수 있다.UI 요소(버..