brunch

개발자의 출판일기 - 5. 책표지 3D 만들기

by Uncle Lee

책 표지 이미지를 넣으면 3D 모양의 책으로 보여주는 웹사이트를 만들었습니다.

기존에도 존재하는 사이트가 몇몇 있었지만 제가 원하는 방식으로 된 곳은 찾기 힘들더군요.

다 외국 사이트이기도 하고, 이번에 react도 배울겸 직접 웹사이트를 하나 제작했습니다.


https://startover01.mycafe24.com/book/


책 표지 인쇄할 때 쓴 이미지를 그대로 넣으면

착착 접어서 3D로 보여주는 겁니다.

book-mockup (15).png


책 사이즈를 고를 수도 있고, 마우스나 터치로 자유롭게 확대/축소, 회전이 가능하게끔 만들었습니다.

기본 제공되는 사이즈에서 변형을 줄 수도 있고, 책의 두께를 mm단위로 조절할 수 있습니다.

이미지를 다운로드 하면 png로 뽑을수도 있고요.

test2.png



카메라 화각을 조절해서 이렇게 감각적인 모습으로도 만들 수 있습니다.

book-mockup (16).png



처음에는 유니티라는 게임 엔진에 넣어서 텍스쳐로 씌울까 생각도 했는데 매번 그러기엔 좀 번거로웠고요,

블렌더나 스케치업 같은 3D 전용 프로그램을 써서 만들자니 이것도 너무 불편했습니다.

그래서 사용하기 편하게 웹사이트로 만들어서, 이미지 한장만 올리면 알아서 책 모양대로 덮어 써지는걸 만들게 되었네요. 어차피 책 모양은 거의 다 사각형이고 사이즈랑 제본 방법 정도만 달라질테니까요.


지금은 제일 흔하게 볼 수 있는 무선제본 방식의 책 모양만 구현해 놨는데,

나중에 양장본, 링제본같은것도 모델링 해서 구현해 놓으면

다양한 책의 모양을 미리보기 할수 있을것 같습니다.

keyword
작가의 이전글개발자의 출판일기 - 4. 글자가 왜 거칠어 보일까