말풍선 에디터를 출시했습니다

2026-01-31

이미지에 만화 스타일의 말풍선을 추가할 수 있는 웹 앱 "말풍선 에디터"를 출시했습니다.

죄송합니다. 이 웹 앱은 일본어만 지원됩니다.

어떤 앱인가요?

사진이나 일러스트에 만화 같은 말풍선과 대사를 추가할 수 있는 도구입니다.

사용할 수 있는 말풍선은 4종류입니다.

세로쓰기를 지원하므로 일본 만화다운 분위기를 낼 수 있습니다. 폰트도 11종류 중에서 선택할 수 있습니다.

스마트폰에서도 PC에서도 브라우저만 있으면 사용할 수 있습니다.

이미지는 서버로 전송되지 않습니다

"이미지를 업로드해야 하나요?"라고 걱정하시는 분도 계실 것입니다.

이미지는 절대 서버로 전송되지 않습니다.

프라이버시 걱정 없이 사용하실 수 있습니다.

사실 그건 공식적인 이유이고, 진짜 이유는 서버에 저장하는 기능이 있으면 외부에서 데이터가 유입되어 보안 고려사항이 급격히 늘어나기 때문입니다. 이미지에 뭔가 심어져 있지 않은지, 입력 폼 값으로 서버 침입 보안 홀이 생기지 않는지 등 여러 가지 귀찮은 일이 많아서 저장하지 않기로 했습니다.

요즘 브라우저 기능은 정말 대단하네요. 이미지도 브라우저 측에서 만들 수 있어서 서버에 데이터 입력, imagemagick이나 pillow로 편집, 클라이언트로 반환 같은 것을 할 필요가 없습니다.

개발에서 힘들었던 점

개발 비하인드 스토리를 조금 말씀드리겠습니다.

미리보기와 저장 이미지가 다른 문제

편집 중 모습과 저장된 이미지에서 말풍선 모양이 미묘하게 다른 현상에 시달렸습니다...

원인은 화면 표시(SVG)와 이미지 저장(Canvas)의 그리기 방법이 다르기 때문입니다. 특히 말풍선의 "꼬리" 굵기가 변하는 문제는 계산식을 여러 번 수정하고 나서야 겨우 해결했습니다.

웹 이미지 에디터는 쉽게 생각하기 쉽지만, 이것이 의외로 함정입니다. DOM 개념과 Canvas 개념이 다르기 때문에 이를 맞추는 처리에 엄청난 시간이 걸립니다. 만들다 보니 후반부터 "처음부터 네이티브 앱으로 만드는 게 더 편했을까?" 하는 생각이 들기도 했습니다.

PC·스마트폰 대응이 예상 이상으로 힘들었다

PC에서 작동하니까 스마트폰에서도 작동하겠지... 라고 생각했는데 안일했습니다.

• 리사이즈용 핸들(작은 사각형)을 손가락으로 탭할 수 없다
• 화면 크기가 다르면 말풍선 크기가 이상해진다

이것도 DOM 개념과 Canvas 개념이 다르기 때문에 말풍선 모양이 크기에 따라 완전히 달라집니다. 이미지 크기, 디스플레이 크기, 레티나 배율 모두 좌표가 다르기 때문에 계산으로 맞추려 해도 아무리 해도 미묘하게 맞지 않습니다. 결국 마지막에는 이미지 크기를 100%로 고정. 최종적으로는 줌 기능을 포기했습니다.

세로쓰기 "!"가 가로로 된다

은근히 골치 아팠던 것이 이것입니다.

세로쓰기로 "!"나 "?"를 입력하면 저장된 이미지에서는 가로로 표시됩니다. 원인을 조사해 보니 문자 회전 처리에서 "!"를 회전 대상에 포함시켜 버렸습니다.

회전이 필요한 문자(ー, 〜 등)와 그대로 그려야 할 문자(!, ? 등)를 세세하게 분류해서 해결했습니다. 이 시대에도 "문자"별로 순차 처리해야 한다니...

사용해 보세요

그래서 "이런 건 쉽게 만들 수 있겠지. 후딱 만들어보자"라고 생각했는데 그렇게 쉽지 않았네요. 이 나이에 이틀 밤샘은 정말 힘듭니다. 마감이 다가온 건 아니었지만, 코딩이 '탈'이 나면 먹고 자는 것도 잊어버려서... (웃음)

>> 말풍선 에디터 사용해 보기