AncomWiki

곽철용 짤 생성기 개발 후기 (Vue + HTML Canvas)

Properties1
description본문은 영화 '타짜'의 캐릭터 곽철용을 소재로 한 짤 생성기를 HTML Canvas API와 Vue.js를 사용하여 구현한 개발 과정을 설명합니다. DOM 캡처 라이브러리 대신 Canvas를 직접 조작하여 배경 이미지에 텍스트를 합성하는 방식을 선택했으며, Vue의 라이프사이클(mounted)과 ref를 활용하여 Canvas 컨텍스트를 획득하고 이미지를 렌더링하는 구체적인 코드 예시를 제시합니다.

9 min read

곽철용 짤 생성기 개발 후기 (Vue + HTML Canvas)

Source

  • Evernote/Inbox/『곽철용 짤 생성기』, 이렇게 만들어졌습니다 - 재그지그의 개발 블로그.md

Summary

본문은 영화 ‘타짜’의 캐릭터 곽철용을 소재로 한 짤 생성기를 HTML Canvas API와 Vue.js를 사용하여 구현한 개발 과정을 설명합니다. DOM 캡처 라이브러리 대신 Canvas를 직접 조작하여 배경 이미지에 텍스트를 합성하는 방식을 선택했으며, Vue의 라이프사이클(mounted)과 ref를 활용하여 Canvas 컨텍스트를 획득하고 이미지를 렌더링하는 구체적인 코드 예시를 제시합니다.

Key Points

  • 프로젝트 목적: 곽철용 밈 기반 짤 생성기 제작을 통한 HTML Canvas API 학습
  • 기술 스택: Vue.js (상태 관리), HTML5 Canvas API (이미지 합성)
  • 구현 방식: dom-to-image 등 라이브러리 대신 Canvas.getContext(‘2d’)를 사용하여 직접 그리기
  • 데이터 구조: 이미지 경로, 원본 대사, 표시 이름 등을 포함하는 객체 배열 관리
  • 렌더링 로직: Vue mounted 훅에서 Canvas ref 접근 후, Image 객체의 onload 이벤트에서 drawImage 실행

그래프 뷰