<div id="readability-page-1" class="page"><div>웹에서 돌아가는 3D에 관심이 많다. 평면적인 웹페이지들이 대부분인데, 입체적이면 아무래도 눈이 더 가기 마련이니.&nbsp;나도 그런 것에 혹하는 1인이라 뭘 만들 때도 Three.js를 많이 사용하는 편이다.(입체적으로 막 돌아가면 기분이 조크든요)최근에 Three.js 를 이용해서 만든 페이지 두 개 소개한다.<h2 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;피키위키 캔김치 브랜드 사이트&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h2&quot;}">피키위키 캔김치 브랜드 사이트</h2>언젠간 어딘가에는 쓰겠지 싶어서 캔김치 3D 모델링을 미리 만들어뒀었다.게임 회사 다니는 친구에게 참치회 사주기로 하고 부탁... 을 하고 아직 못 사줬네 (TMI)그 모델링을 피키위키 웹 페이지를 만들 때 사용한 것.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/mYlws5cauNErGwcDVPHMlo520Y4.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;966&quot;,&quot;height&quot;:&quot;644&quot;,&quot;originalName&quot;:&quot;SE-59871264-beb4-491f-9633-aa909756ea30.jpg&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/mYlws5cauNErGwcDVPHMlo520Y4.jpg" data-filename="SE-59871264-beb4-491f-9633-aa909756ea30.jpg"></div>피키위키 캔김치의 디자인이 워낙 예쁘기도 하고,비율도 귀여워서 사진만으로는 표현이 잘 안 되었다.(사진으로 표현이 된다고 해도 3D를 사용했겠지만 ㅋ)<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/VlNC6kBPANiCwwoEUKqzeqFvGhA.png&quot;,&quot;caption&quot;:&quot;모델링 맵핑 소스&quot;,&quot;width&quot;:&quot;2048&quot;,&quot;height&quot;:&quot;2048&quot;,&quot;originalName&quot;:&quot;can_hot.png&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/VlNC6kBPANiCwwoEUKqzeqFvGhA.png" data-filename="can_hot.png">모델링 맵핑 소스</div>실제 캔을 찍을 때 사용했던 ai 소스를 받아서 맵핑 소스로 만들었다.CMYK 대용량 ai 디자인 파일이 있어서 아주 선명한 3D 모델이 나와줬다.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/eyS6bWHB33rHWXXIelSImbC30Nw.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;2304&quot;,&quot;height&quot;:&quot;1678&quot;,&quot;originalName&quot;:&quot;&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/eyS6bWHB33rHWXXIelSImbC30Nw.png"></div>초초선명 깔끔. 라이팅에도 신경을 좀 써줬다.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/ZhB65DqKSDHeJTMjkf2PohCYZBI.png&quot;,&quot;caption&quot;:&quot;김치캔 하나에 86KB !&quot;,&quot;width&quot;:&quot;994&quot;,&quot;height&quot;:&quot;520&quot;,&quot;originalName&quot;:&quot;스크린샷 2022-11-24 오후 6.48.26.png&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/ZhB65DqKSDHeJTMjkf2PohCYZBI.png" data-filename="스크린샷 2022-11-24 오후 6.48.26.png">김치캔 하나에 86KB !</div>김치캔 모델링 하나에 맵핑 소스 세 가지 (오리지날, 매운맛, 훈제맛) 맵핑 소스를 사용하여클릭 시 이미지 맵만 교체 되도록 처리.실제 페이지는 위에서 볼 수 있다.내용이 많지 않은 페이지라 원 페이지로 구성했다.실제 캔김치 구매는 네이버 스마트 스토어에서 가능.<h2 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;피키위키 김치 뉴타운 게임&quot;}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h2&quot;}">피키위키 김치 뉴타운 게임</h2>레트로 갬성을 자극하는 초간단 게임을 하나 만들었다.좌, 우 버튼만 누르면 되니 남녀노소 누구나 즐길 수 있음!과거 피처폰 시절 유명했던 니편내편 스타일. 이미 하나의 장르가 되어버린!게임은 이벤트로 활용을 할 수도 있고, 브랜드 홍보를 위해 쓰일 수도 있겠다.지금은 구매 링크 배너만 넣어놓은 상태.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/UXX3PecpCXdNZji9ypL80nU4qhc.png&quot;,&quot;caption&quot;:&quot;초기 프로토타입과 최종 결과물&quot;,&quot;width&quot;:&quot;1004&quot;,&quot;height&quot;:&quot;778&quot;,&quot;originalName&quot;:&quot;스크린샷 2022-11-24 오후 7.19.33.png&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/UXX3PecpCXdNZji9ypL80nU4qhc.png" data-filename="스크린샷 2022-11-24 오후 7.19.33.png">초기 프로토타입과 최종 결과물</div>굉장히 2D 스러운 게임인데 Three.js를 사용했다.바닥과 벽만 네모네모로 만들어서 맵핑한 게 전부고 아이템들은 이미지다.&nbsp;카메라 무빙은 없지만 사실 다른 3D 작업을 할 때와 똑같다.카메라가 설치되어 있고, 나름 조명도 몇 개나 설치되어 있음!게임 아이템들은 아이패드에서 그렸다. 도트 스타일로.양배추가 제일 귀엽. (치즈도 있다)<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/gGjiDB8GRWRNYq5hZZqiAzPeJlc.jpg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;1200&quot;,&quot;height&quot;:&quot;630&quot;,&quot;originalName&quot;:&quot;banner.jpg&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/gGjiDB8GRWRNYq5hZZqiAzPeJlc.jpg" data-filename="banner.jpg"></div>유튜버 영국남자가 피키위키 김치와 치즈를 이용한 김치 토스트를영국에서 판매해서 기사까지 나왔던 적이 있어서처음에는 게임 이름을 '졸리 토스트 스토어'로 할까 했었는데...<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;최종적으로 &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;\u0027김치 뉴타운\u0027&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;으로 결정!&quot;}]}">최종적으로 '김치 뉴타운'으로 결정!레트로 갬성을 잘 살린 이름 같아서 만족스럽다.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/1q2y/image/blpdeZ3PFphh1Jst7wr0Sy2gM4c.png&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;1290&quot;,&quot;height&quot;:&quot;1334&quot;,&quot;originalName&quot;:&quot;스크린샷 2022-11-24 오전 11.25.21.png&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1q2y/image/blpdeZ3PFphh1Jst7wr0Sy2gM4c.png" data-filename="스크린샷 2022-11-24 오전 11.25.21.png"></div>내가 개발을 했지만 난 50만점대가 최고점.현재 1위는 340만점...도대체 어떻게 그 점수가 나오는거지?게임은 위 링크에서 해보실 수 있음!PWA를 적용해 놓아서 스마트폰이나 PC 배경화면에 아이콘 설치도 가능함.<p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;많은 분들이 &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;color&quot;:&quot;#ec4c6a&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;\&quot;피키 위키 김치는 어디서 구매가 가능한가요?\&quot;&quot;}]}],&quot;styleType&quot;:&quot;bold&quot;}]}">많은 분들이 "피키 위키 김치는 어디서 구매가 가능한가요?"...라고 물어보실 것 같아서 링크를 남김</div></div>

전기환

웹에서 돌아가는 3D에 관심이 많다. 평면적인 웹페이지들이 대부분인데, 입체적이면 아무래도 눈이 더 가기 마련이니. 나도 그런 것에 혹하는 1인이라 뭘 만들 때도 Three.js를 많이 사용하는 편이다. (입체적으로 막 돌아가면 기분이 조크든요) 최근에 Three.js 를 이용해서 만든 페이지 두 개 소개한다.    피키위키 캔김치 브랜드 사이트 언젠간 어

Three.js로 웹부터 게임까지 - 피키위키 캔김치를 위한 노오력

댓글