탐구하는 취르미

[Utility] 미리캔버스로 인스타 릴스 썸네일 쉽게 만드는 방법

인스타그램 릴스나 유튜브 쇼츠를 제작할 때 영상만큼 중요한 것이 썸네일이다. 콘텐츠의 첫인상을 결정하는 요소인 만큼 눈에 잘 띄는 제목과 통일된 디자인이 필요하다.그렇다고 매번 디자인 프로그램을 사용해 처음부터 작업하기에는 번거로울 수 있다.이번 글에서는 미리캔버스에서 숏폼·릴스용 무료 템플릿을 찾아보고, 직접 썸네일을 편집한 뒤 PNG 이미지로 저장하는 방법까지 정리해 보려고 한다.1. 미리캔버스미리캔버스는 다양한 디자인 템플릿과 이미지, 글꼴, 그래픽 요소를 제공하는 온라인 디자인 플랫폼이다.블로그 썸네일, 인스타그램 피드, 카드뉴스, 유튜브 썸네일, 프레젠테이션 등 여러 콘텐츠를 제작할 수 있다.무료 요금제로도 시작할 수 있으며, 일부 프리미엄 템플릿과 콘텐츠, 기능은 유료 요금제가 필요하다. ..

증권·금융 관련 프로젝트를 작업하다 보면 주가 변동, 투자 수익률, 자산 비중 등 다양한 데이터를 시각적으로 표현해야 하는 경우가 많다.차트는 복잡한 수치를 직관적으로 전달하고, 데이터의 흐름과 변화를 쉽게 파악할 수 있도록 도와주는 중요한 UI 요소다.최근 Vue3 + Nuxt 기반의 증권 프로젝트를 진행하면서 Highcharts를 활용해 막대 차트, 스택형 차트, 도넛 차트 등 다양한 데이터 시각화 UI를 구현했다.처음에는 데이터를 차트로 출력하는 정도였지만, 디자인 시안에 맞춰 작업하다 보니 막대 너비와 간격, 그라데이션, 툴팁, SVG 라운드 처리 등 생각보다 많은 옵션을 다루게 되었다. 이번 글에서는 실제 프로젝트에서 자주 사용했던 Highcharts의 주요 속성과 커스터마이징 방법을 정리해 보..

최근 AI를 활용한 콘텐츠 제작에 관심이 생기면서 다양한 도구를 하나씩 사용해보고 있다.블로그와 숏폼 콘텐츠를 제작하다 보면 썸네일이나 카드뉴스처럼 반복해서 만들어야 하는 디자인 작업이 꽤 많다.매번 처음부터 디자인하기보다는 일정한 템플릿을 만들어두고 사진과 텍스트만 교체하면 훨씬 효율적이지 않을까?그러다 ChatGPT에서 Figma를 연결해 디자인 작업을 요청할 수 있다는 것을 알게 됐다.이번에는 ChatGPT와 Figma를 연결하고, 실제로 편집 가능한 썸네일 템플릿 제작을 요청해 본 과정을 정리해보려고 한다. ChatGPT와 Figma를 연결하면 무엇을 할 수 있을까? Figma: The collaborative canvas for design, code, and AIFigma is the canv..

웹 퍼블리싱 작업을 하다 보면 이미지 안의 특정 영역만 클릭되도록 만들어야 하는 경우가 있습니다.예를 들어 이벤트 페이지에서 이미지 속 버튼 영역만 클릭하거나, 배너 이미지의 특정 영역마다 서로 다른 링크를 연결해야 할 때 사용하는 것이 바로 HTML 이미지맵(Image Map)입니다.보통은 온라인 이미지맵 생성 사이트를 이용하지만, 사내망이나 보안 환경처럼 인터넷 사용이 제한된 PC에서는 이런 사이트를 사용할 수 없는 경우가 많습니다.그래서 이번에는 별도 프로그램 설치 없이 사용할 수 있는 오프라인 이미지맵 좌표 추출기를 직접 만들어보겠습니다.HTML 파일 하나만 만들어두면 Chrome이나 Edge에서 바로 실행할 수 있습니다. HTML 이미지맵이란?HTML 이미지맵은 하나의 이미지 안에 여러 개의 클..

이미지 위에 API나 서버에서 전달받은 데이터를 특정 위치에 표시해야 할 때, 반응형에서도 좌표가 안정적으로 유지되도록 잡는 방법을 정리해 봤다. 반응형 이미지 위 absolute 좌표, vw보다 %가 잘 맞았던 이유이벤트 페이지를 작업하다 보면 한 장의 이미지 위 특정 위치에 숫자나 텍스트를 올려야 하는 경우가 있다.특히 단순한 고정 문구가 아니라, API나 서버에서 전달받은 데이터가 화면에 동적으로 뿌려지는 경우, 해당 값을 이미지의 특정 좌표에 정확하게 표시해야 할 때가 있다.예를 들어, 이미지 위에 현재 참여 인원이나 응모 수처럼 계속 바뀌는 데이터를 표시한다고 해보자. 디자인 시안의 기준 크기는 360 × 244px이고, 이미지가 화면 크기에 따라 줄어들면 그 위에 올라간 텍스트도 같은 위치를 ..

Vue 프로젝트를 작업하다 보면 props, v-if, v-for, slot 같은 문법을 정말 자주 만나게 된다.처음에는 각각 따로 외우다 보니 헷갈렸는데, 실제로 컴포넌트를 하나 만들어보면서 정리해 보니 결국 핵심은 하나였다.부모가 데이터를 내려주고, 자식 컴포넌트가 그 데이터를 이용해 화면을 만든다.이번 글에서는 Vue3 + TypeScript 환경에서 자주 사용하는 컴포넌트 기본 개념을 정리해 본다.1. Props - 부모에서 자식으로 데이터 전달하기Vue에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 props를 사용한다. 예를 들어 부모 컴포넌트에서 다음과 같이 값을 전달할 수 있다. 자식에서는 전달받을 값의 타입을 정의한다. 2. text="값"과 :text="값"의 차이아래 코..