작성일 댓글 남기기

웹툰처럼 상세페이지 세로영상을 자동화하기

영상편집을 프로그램으로 처리

웹툰처럼 상세페이지 세로영상을 자동화하기 

보통 상세페이지 작업은 세로로 아주 길게 작업을 합니다. 카드뉴스는 스윕으로 이미지를 보여주는 방식이지만 웹툰처럼 길게 연결해서 보는 형식인데 숏폼에서는 이런 방식을 영상화 하려면 이미지를 잘라서 트랜지션을 하거나 재편집을 해야합니다.

그 시간이 꽤 오래 걸리고 조금씩 그럴듯하게 만들려면 너무 긴 이미지는 편집하긴 힘듭니다. 조절하기도 어렵고 그래서 전부 프로그램으로 작업을 했고 카메라를 고정하고 이미지를 움직이면서 줌인, 줌아웃 틸트업 다운 형식의 기능을 주안점으로 만들었습니다.

물론 앞으로 기능을 더 추가하겠지만 일단 3D공간에서 고정된 카메라에 종이를 사람들이 움직이는 것 같은 느낌입니다, 마치 오토바이는 고정되어있고 사람들이 나무를 들고 계속 움직이는 것 같은 촬영기법입니다. 가끔 틱톡에 올라오는 것처럼 이제 한 장의 이미지에서 레이어를 추출해서 강제로 입체화해서 움직일 때 조금씩 다른 방향으로 움직여서 카메라 효과를 극대화 할 생각입니다.

요즘에는 기술적으로 불가능한게 별로 없어서 착시나 약간의 영상이펙트로 눈에 띄는 무언가를 할 수 있습니다. 이제 URL 에서 이미지를 전부 추출하고 핵심이 되는 메시지, 폰트, 말풍선, 집중선 등 웹툰 효과 같은 것을 넣을 생각입니다.

저희 회사처럼 실용서를 하는 회사는 컷별로 이동을 하거나 설명을 하는 페이지에는 이미지와 설명이 겹쳐 나오는 페이지들이 있습니다. 만화뷰어, 잡지뷰어에 이어 전자책용도로 아예 새로 기능을 추가해서 작업을 하려고 다양한 기술적 검토를 하고 있습니다.

주말 반납 후다음 단계로 넘어갑니다.

작성일 댓글 남기기

간단한 도형 퍼즐 한글 획수 맞추기 초성 퍼즐게임

간단한 도형 퍼즐 한글 획수 맞추기 초성 퍼즐게임 프로토타입 작업중입니다.

아주 간단한 사각형 샘플을 만들었고 이제 다른 도형, 선 그리고 이미지 등등을 결합하는 퍼즐을 작업하고 있습니다. 그리고 이 선들은 모두 획수를 따라 그리는 용도 입니다.

갯수는 지금 4개지만 한글 조합 프로그램을 모두 작업해놔서 이런저런 요소를 집어 넣고 다시 그림을 그려주는 게임입니다. 교육적 요소도 있지만 칠교처럼 서로 다른 것을 맞추는 놀이로도 가능할거예요.

겨우 숫자 누르는 것이지만 갯수가 많아지고 힌트에 해당하는 것을 보여주고 뭔가인지 맞춰야 하는 부분도 넣을 예정이고 애니메이션 효과랑 효과음을 추가하면 간단한 학습게임 정도는 될거 같아요.

저는 눈알을 달 생각입니다. ^^

초성 ㅊ 자가 나오고 따라쓰는 획수를 보여줄 거예요. 당연히 한글 조합으로 온전한 글자도 표현합니다.

드래그앤 드롭하거나 회전하는 도형 놀이도 가능하겠지만 그건 나중에 하겠습니다.

그리고 생각난 것까지만 하고 틱톡 이펙트하우스나 해야할거 같아요.

원래 다른거 하다가 잠깐만 한 머리식히는 프로젝트가 머리가 아파요.

작성일 댓글 남기기

출판사 판매데이터로 만드는 게임 +영상 2

데이터 기반의 출판사 위젯 숏폼 동영상 자동화

도서 판매순위로 다시 영상을 만드는 것을 만들고 있습니다.

곧 3벌로 나뉘어 각 브랜드별 도서 순위 사이트로 제작할 예정입니다.

이 링크는 샘플 사이트라서 본 사이트에 연동하지 않았지만 원래는 알라딘 링크, 오늘 판매 순위를 가지고 링크는 쿠팡으로 보내는 작업을 한 것입니다. 어디로 보내건 그건 선택하면 되는 옵션이라서 일단 이 샘플은 이런거구나 정도로 생각하시면 될거 같습니다.

https://bookfactory.kr/topic/19544 에 있는 정보를 불러와서 https://a1bbs.com/svgani/svgani.html 가 만들어집니다.

어떤 URL도 상관없고 도서 리스트가 있으면 다시 재구성해서 책 정보를 재구성할 수 있습니다. 예를 들어 노션, 구글 스프레드시트 등 데이터화 할 수 있는 것이라면 어떤 파일 포맷도 가능합니다.

옛날 블로그 위젯 같은 기분이겠지만 내가 선택한 책을 내 홈페이지에 달아 놓거나 여러가지 작업을 할 수 있게 할 목적으로 만든 것을 엉뚱한 일을 하느라 잠깐 작업마무리를 못했는데 이제 내가 선택한 도서를 내 페이지에 달거나 숏폼 영상과 링크로 플랫폼에 공유할 수 있는 영상제작으로 바꿔 작업하고 파트너스, TTB 등 쿠팡, 알리 익스프레스 같이 에필리에이트를 지원하는 업체들과 함께 할 수 있으리라 봅니다.

그리고 비슷한 형식으로 워드프레스 우커머스 쇼핑몰을 아예 자동으로 저가격 + 저가격을 만드는 구매 옵션을 준비중입니다. 출판사 홈페이지도 이제 바꿔야겠습니다.

https://www.tiktok.com/@a9press/video/7357142981251550481 예전에 만들고 뒤로 미뤄둔 프로젝트 당신의 책장! 

책만드는 것은 일단 뒤로 미루고 하고싶은 것 먼저 해볼 생각입니다. ^^

틱톡이 확실하게 늘고 있습니다. 오늘 열심히 등록하겠습니다.

작성일 댓글 남기기

pdf + epub3새로운 전자책 뷰어를 제작

새로운 전자책 뷰어를 제작하고 있습니다. 폰에 맞춰 영역을 지정하고 실시간 한글 폰트를 교체해버립니다. pdf + epub3 가 될 예정입니다.

흐린 부분은 휴대폰에서 아예 안나옵니다. 영화감독이 편집하듯 줌인, 줌아웃 영상편집하듯 한 장의 이미지에서 연출이 가능합니다.

이미 작업된 폰트를 저희 대체폰트로 이미지를 재가공할 수 있습니다. 저작권에 문제가 없는 폰트로 대체해야 업로드 지원되는 국내 유통사에 무조건 지원해줘야 합니다.

주말이니 프로젝트 마무리 하겠습니다.

작성일 댓글 남기기

출판사 판매데이터로 만드는 게임 +영상

출판사 판매데이터로 만드는 게임 +영상 앞으로 출판사 도서 미니게임, 데이터 베이스 연동 판매 가시화 등 

영상을 자동생성하는 프로그램을 개발하려고 합니다. 웹기반 3D로 제작중이예요~ 도서 판매 정보를 가져와서 영상을 만들었습니다. 

도서 판매순위가 나오는 것은 해당 URL에서 가져와서 그런 것이며 이 URL 은 예스24 사락의 도서리스트, 알라딘의 블로그의 도서리스트 데이터를 가져와서 구성할 수도 있습니다.

그냥 게시판에 예스나 알라딘의 URL을 넣으면 그게 도서 정보를 끌어와서 영상으로 만들거나 도서정보를 끌어다 Tiktok, 쇼츠, 릴스 등에 올릴 수 있는 영상이 생성됩니다.

이거 만드는데 시간이 꽤 걸렸습니다.

그리고 지금은 그동안 회사에서 쌓아왔던 도서 판매 와 관련되 서평들을 모두 모아서 영상으로 제작할 생각입니다. 그동안 3만개의 서평이 쌓여있는데 이중에 별 필요없는 배송관련 내용을 제외하고 글 같은 형태의 서평은 많이 줄어들거예요.

42,238개의 저희 출판사 도서관련 서평들이 있는데 이 것을 DB에서 릴스영상으로 업로드할 수 있게 영상을 만들고 자동화를 할 예정입니다.

그리고 다시 링크를 퍼트리면서 콘텐츠를 살려야겠죠. 그동안 안한 이유는 귀찮아서… 이제 URL기반으로 서지정보 영상을 뽑아내는 것을 하려고 합니다. 그리고 동시에 전자책 만드는 무언가도 한꺼번에 합니다. 

슬슬 먹고 살 다음 단계로 ~

작성일 댓글 남기기

bone 폰트를 잠깐 개발해서 보고 있습니다.


bone 폰트를 잠깐 개발해서 보고 있습니다. 기존 폰트를 읽어서 뼈대에 해당하는 것을 추출하고 다시 획을 3D애니메이션 할 때 쓰는 bone 을 입혀 한글을 뼈로 만들어서 움직이게 하고 있습니다.

한글서체의 기본 글자의 뼈에 해당하는 중심점을 찾습니다. 스트로크로 폰트만드는 작업을 할 때 필요하기도 하고 현재 가장 문제가 되고 있는 글자를 똑바로 쓰지 않는 손글씨의 원점인 기본 획을 찾아내기 위해 만들었습니다.

구분된 글자를 기준으로 다시 OVAL, Line, Square, 등의 기본 도형에 대한 부분을 추출해서 xml 로 대체할 예정입니다. 바로 전에 만든게 초성, 중성, 종성의 위치값을 찾는 것이라면 이번에는 글씨의 기본인 선의 각도 획의 형태를 찾아내는 것입니다.

두깨는 나중일이지만 일단 이 부분만 중점적으로 학습하고 있습니다.

기계학습을 통해서 조금 고민을 하게 되는 것은 비슷한 알고리즘이 되지 않을까 하는 것입니다. 대신 애니메이션이나 새로운 유형의 글자를 만들 때 재미있는 결과물로 확장할 수 있으리라 생각되기는 합니다. 논문 더 봐야할거 같아요 ^^

아무리 엉망으로 써도 bone 추출후 다시 한글폰트로 만들 수 있습니다. 벡터로 만들어 놓은 것을 감안하면 폰트가 조금 달라지지만 손글씨가 아닌 폰트가 됩니다

작성일 댓글 남기기

책 360도 회전하는 영상을 자동으로 생성하는 방법

악당의 명언 완전판 360도 회전하는 영상을 자동으로 만들고 있습니다. 

3D를 하시는 분들이라면 뭐 그런것도 할 수 있지 라고 생각하실겁니다. 출판사가 서점에 제공하는 표지, 책등, 뒷표지를 가지고 알라딘이나 예스에서 입체감이 있게 나타나게 하는 것은 다 보셨겠지만 그와 유사한 방법으로 영상을 추출하는 것입니다.

온라인 서점에 도서정보에 제출하는 3가지 표지 파일… 사실 책에 나머지 부분을 촬영해서 써야하지만 URL만 넣으면 책이 나오게 하는 서비스를 생각하고 있습니다.

{

    “title”: “악당의 명언”,

    “author”: “손호성 지음”,

    “isbn”: “9791158951788”,

    “description”: “15년간 트위터와 페이스북 등 SNS(소셜 네트워크 서비스)에 기록한 글 중에 가장 많은 공감을 얻었던 내용을 엄선 5개의 주제, 19개 카테고리로 나눠 정리한 책이다. 이번 완전판은 출간이후 7년간 페이스북 페이지…”,

    “image”: “https://image.aladin.co.kr/product/35273/93/cover500/k242934457_1.jpg”,

    “url”: “https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=352739368″,

    “itemId”: “352739368”,

    “pages”: “502”,

    “width”: “128”,

    “height”: “188 (B6)”,

    “weight”: “502”

}

책의 너비 높이 두께를 유추해서 측정하고 다른 책과 함께 비교할 수 있게 구성할 예정입니다. 알라딘 URL 이 들어간건 알라딘 도서 메타정보를 사용하고 있습니다.

일단 3d관련 라이브러리가 몇가지가 있는데 그것 중에 three.js 를 가지고 책을 만들고 y 축을 기준으로 360 회전하는 가상의 턴테이블을 만들어 돌립니다.

스크린레코딩하는 기능을 구현하고 그걸로 화면 촬영하면 영상에 사용할 수있는 클립이 완성됩니다. 그다음에 녹음하거나 책에 대한 소개 같은 것을 하시면 됩니다. 출판사라면 표지, 책등, 뒷표지를 가지고 쉽게 영상제작이 가능합니다.

프로그램으로 조금 개발해서 출력하는 것을 해보려고 했는데 일단 다음에 완성도가 조금 높은 것을 해보려고 합니다.

한두권이 아니라 책장에 도서정보나 서평정보를 읽어주는 영상을 자동으로 매 시간마다 뽑아낼 생각입니다. AI 같은거 안써도 그냥 프로그래머블한 생각으로 영상을 대량으로 만들 수 있습니다.

분야별 베스트셀러 라거나 아니면 출판사 베스트셀러 등 데이터를 기반으로 하는 영상, 블랜더3D로 도서 판매 순위 변화를 보여주거나 다양한 데이터 기반 영상을 만들 수 있습니다.

https://www.yes24.com/Product/Goods/139595822

작성일 댓글 남기기

레이아웃 자동화 만화효과음 폰트 만들기

주말 다 반납하고 제작한 만화효과음 레이아웃 추출 기능을 대부분 완성했고 반대 작업도 하고 있습니다. 초성, 중성, 종성 한벌만 쓰면 이세상 모든 폰트레이아웃으로 만화효과음 폰트가 그려집니다. 인디자인 대체폰트가 그냥 만들어지기는 하는데 같은 모양이라고 하지 않았습니다. 같은 것도 만들 수는 있지만 일단 그건 예외로 하고 

이 결과물은 여러가지 학습결과물로 글자 자소 디자인체계를 바꿀 수 있습니다. 가로, 세로, 모든 획을 구분해서 나눈 다음에 이미지에서 특별한 값을 추출해서 벡터로 깔끔하게 연결하는 Stroke 방식으로 안그려도 대충 그려도 찾아낼 수 있습니다. 각도별로 다 다른 값을 가진 이미지를 생성할 수 있기 때문입니다.

제가 요즘 점선으로 된 무언가를 그리면 외곽이 모두 연결되고 꾸밈하는 글자의 부리. 획의 삐침 등을 색상으로 구분해 두면 그걸 너비에 맞춰서 디자인을 붙여가는 방식을 생각하고 있습니다.

만화효과음은 방향에 따라 다른 느낌을 주기위해 작가가 손을 대는 경우가 많은데 아예 그럴필요없이 방향별로 폰트를 다 생성할 수 있습니다. ttf 나 otf 같은 파일이 아니라 svf 로 만화 그리는 에디터에서 직접 수정하는 것도 가능하게 됩니다.

예를 들어 기존 글꼴이 있다면

글꼴의 레이아웃에 초성, 중성, 종성을 그려주면 폰트가 생성됩니다.

벡터로 그린 것 이외에 다른 방식도 가능합니다. 그냥 비트맵인 포토샵이나 코믹스튜디오에서 작업하면 이미지를 벡터화하여 폰트로 만들 수 있습니다.

집중해서 기능적인 부분을 마무리하고 아이패드 프로크리에이터에서 개별 폰트의 레터링을 제작할 수 있는 템플릿을 그대로 한글폰트로 만들 수 있게 하면 되지 않을까 합니다.

초성, 중성, 종성만 그리면 다양한 레이아웃으로 바로 폰트 1000개 가이드폰트 및 템플릿을 만들 수 있습니다. GPU가 필요합니다. 제 머리로는 이제 한계예요 ?!?

작성일 댓글 남기기

OpenCV, tesseract 등 도입으로 한글폰트 레이아웃 재구성

OpenCV, tesseract 등 도입으로 한글폰트 레이아웃 재구성

일단 어떤 폰트건 다시 재구성해서 한글을 구분된 레이아웃으로 분리했습니다. 그리고 글리프별 레이아웃을 기반으로 한 데이터를 재구성할 수 있도록 표준화된 json 파일로 구성하고 svg 로 내보내기 할 수 있게 구성했습니다.

반대로 몇몇 유형의 글자를 쓰면 초성, 중성, 종성을 분리해서 다시 조합하고 특정한 폰트의 레이아웃 정보를 적용하면 새로운 폰트가 생성됩니다.

그동안 손글씨를 특정 패턴에 의해 제작하는 방식을 만들었다면 이번에는 방식으로 폰트제작을 해보려는 중입니다.

글자별로 인식하는게 다르긴한데 그래도 모든 글자를 검토해서 뽑는 것에는 문제가 없습니다. 다만 ㅎ 같은 글자가 2벌로 나눠져서 ㅗ ㅇ 이 부분을 어떻게 처리해야 하나 고민중입니다.

그냥 폰트 만드는데 도움되는 실험이었습니다.