개발
말풍선 짤 편집기 사이트 제작
by
왜 만든거에요?
이미지위에 대사나 글씨를 적고싶으면 일반적으로 이미지 편집기(그림판, 포토샵 등)를 통해 작업을 진행하곤 한다.
근데 간단한 대사 한두줄적자고 포토샵을 키자니 포토샵이 무료도 아니고...
그림판으로 하자니 퀄리티가 좀 떨어진다.
무엇보다 폰에서 하기도 힘들고말이다.
그래서 만들어보았다.
온라인 말풍선 편집기!
뭐 하는 거에요?
말그대로 이미지위에 말풍선을 그리는 편집이다.
거두절미하고 예를 들어본다면,
여기 엄청 귀여운 라이덴 콘이 있다.
근데 나는 이 콘을 사용하되 대사를 바꿔 보고 싶었다.
그래서 '말풍선 편집기'를 쓴다면?
따란-! 이렇게 일 좀 하라는 라이덴 콘으로 바뀌는것이다.
그래서 어떻게 써요?
후후 일단 아래 링크를 타고 들어가보자
말풍선 짤 편집기
손쉽게 이미지위에 말풍선을 그리고 텍스트를 적을 수 있는 온라인 편집기입니다.
https://erulabo.com/speech-bubble-editor
여기에 들어가면 이런 화면을 볼 수 있을꺼다.
그렇다. 일단 이미지에 말풍선을 붙이려면 그 '이미지'가 있어야한다.
그럼 '파일선택'을 통해 적당한 이미지를 선택해보자.
그럼 이미지 아래로 여러가지 옵션을 설정할 수 있는게 나올꺼다.
순서대로 "Step 2. 말풍선 그리기" -> "Step 3. 텍스트 설정하기" -> "Step 4. 이미지 합성하기" 이다.
자 순차적으로 해보자.
일단 말풍선의 대략적인 위치를 정하기위해 업로드된 이미지에 마우스/터치로 드래그 앤 드롭으로 박스를 그려보자.
오 벌써 그럴듯한 말풍선 박스가 그려졌다.
그리고 아래 말풍선 옵션값을 조정하면서 사이즈나 패딩, 외곽선 굵기 색상을 바꿔보자.
그 다음으로는 "Step 3. 텍스트 설정"에 가서 내가 원하는 글을 입력해보자.
그리고 아래로가서 "Step 4. 말풍선 합성 및 추출"에서 말풍선과 이미지를 합치는 작업을 한다.
"말풍선 합성"버튼을 클릭하면 합성결과가 그 아래에 보이게되고, "합성 이미지 다운로드"를 누르면 이미지가 다운로드된다!
실제로 합성된 결과와, 이거 어떻게 만듦?
당-연히 GPT형님의 도움을 받아...
흠흠... 기술적인 부분을 좀 말하자면 HTML5의 Canvas 기능으로 만들어 보았다.
이미지 파일이 업로드되면 그 이미지를 화면에 임시로 랜더링하고 그 랜더링된 이미지와 같은 canvas 크기를 정의한다.
그리고 드래그 앤 드롭으로 박스를 그리는 이벤트, 각종 옵션값이 변경될때 캔바스를 다시 그리는 이벤트 등을 구현하고, 마지막으로 캔바스 내용을 data/image 로 변환해 출력하면 된다.
말이야 쉬운데 나두 기능하나하나 계속 조율해가면서 변경하면서 진행했다.
요걸 만들면서 세운 제일 큰 목적이 "백단 리소스를 사용 안하고 구현하기" 였고 그걸 기준으로 최대한 HTML5와 javascript 처리로만 구현하려고 시도했다.
여러모로 결과물은 괜찮게 나와서 주변 지인분들한테도 테스트해봤더니 정말 재밌게 쓰고 계신다 ㅎㅎ
결론
HTML5 대단해!!
#JavaScript #블로그
7
개의 댓글
에루샤
1년 전
1년 전
이미 만들어진 재미있는 짤이나 이미지에 내가 원하는 대사를 끼워넣는 기능이 있으면 좋을거 같아서 Canvas 공부겸 만들어본 말풍선 편집기입니다.
이미지처리는 오직 브라우저에서만 지원하고 여러분의 이미지는 서버에 저장되지않습니다.
재밌고 즐겁게 사용해주셨으면 좋겠네요~
답글
고양만두
1년 전
@에루샤
커뮤니티, 블로그, 채팅창 등 다양하게 곳에서 응용해서 사용할 수 있을 것 같아서 마음에 들어요. 원하는 짤을 쉽게 만들수 있다니 최고!
답글
고양만두
1년 전
와우~ 말풍선 편집기 개쩌네요! 잘쓰겠습니다!
답글
훈트초코
10달 전
ㅋㅋ이걸로짱구짤만듬ㅋ
답글
에루샤
10달 전
10달 전
@훈트초코
빨리 짤 하나 만들고 싶을때 써먹기 좋죠 ㅋㅋ
답글
우람
7달 전
오 이거 넘 좋아요. 말풍선을 2개나 그 이상 넣을 수 있으면 더욱 좋겠어요. 바이브 코딩으로 저도 만들어봐야겠슴다.
답글
에루샤
7달 전
7달 전
@우람
괜찮은것 같네요!
이게 바로 코딩의 재미죠~
답글