<p>안녕하세요. 도서출판 결자해지에서 웹페이지 제작을 담당한 스텝 입니다. 대표 아니냐구요? 대표는 이제 잊어주세요.</p><p> </p><p>키보드밥을 먹고 사는 직업인지라, PDF 배포에 대해 말 나왔을 시기부터 해볼까했던 웹페이지 였습니다. 어짜피 관련 기술은 알고 있거나, 제가 찾아보면 된다란 느낌으로 무작정 합시다! 했습니다.</p><p> </p><p>우선 zip 파일 크기가 최소 51mb정도 되었고, 저희가 메인으로 쓰는 메일은 지메일 이었기 때문에 대용량 메일을 보내기가 좀 어려웠습니다. 드라이브에 넣고 링크를 걸자는 이야기가 나왔지만 이메일을 워터마크로 써서 최소한의 안전장치를 추가하자는 의견이 나온 이후, 메일로 보내기는 애매해졌죠.</p><p> </p><p>그래서 무작정 AWS (Amazon Web Service) 서버를 구축 했습니다. 마침 프로젝트가 전면 재택을 취하고 있어 짬짬히 서버와 코드를 짤 수가 있었어요. 소소하게나마 커피값이 서버로 들어갔지만 괜찮습니다. 포트폴리오 추가로 만들었다고 생각하겠습니다. nodeJS로 백엔드부터 프론트엔드까지 짜본건 처음이라 신선한 경험이었어요.</p><p> </p><p>여러분들의 각각의 email 마다 랜덤코드 5자리를 부여했습니다. 서버에는 랜덤코드로 각각의 폴더를 만든 후, 그 안에 zip파일을 넣어뒀어요. </p><p> </p><p>email이 지닌 랜덤코드와 url의 랜덤코드값이 일치해야지만 다운로드 페이지로 넘어갈 수 있다. 가 기본 골자입니다.</p><p>자세하게 이야기 해드리고 싶지만 지루해하실 것 같아, 후기에는 디자인 요소들만 꽉꽉 채워넣었습니다.</p><p> </p><p>기획 디자인 퍼블 백엔드 프론트엔드 DB 구축까지 제가 혼자 했는데, 디자인은 우리 호작질 전문! 디자인 2스텝의 힘을 조금 빌려 왔습니다.</p><p>도서출판 결자해지의 로고와 로또 페이지의 뒷 이미지는 디자인 2스텝의 작품입니다. </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/893f3313c507c9cd3733ddaa03c0190c5a7f07ea" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/893f3313c507c9cd3733ddaa03c0190c5a7f07ea" data-origin-width="1519" data-origin-height="827"></div><p> </p><p>컨셉은 이름에서 보이다 싶이 기요틴 파일이 퍼진 다크웹 이었습니다만, 디자인적으로도 광기가 엿보일 수 있어 꽤 괜찮은 프로젝트였다고 생각합니다.</p><p> </p><p>각 페이지 별로, 어떤 광기 컨셉을 지니고 있는지 알려드릴께요.</p><p> </p><p>1. warning page</p><p>미리쌤이 해커였다는 것에 착안된 페이지 입니다. dos 시절의 화면에서 착안한 페이지로, 특정 몇 url 에서 뜨는 페이지 입니다.</p><div class="imagegridblock" data-ke-type="imageGrid"><div class="image-container"><span data-url="https://t1.daumcdn.net/cafeattach/1Z4vS/92089a3ecdc02c9e4b4325f2b3739da4c6e4c84c" data-origin-width="996" data-origin-height="644" style="width:50.00%; margin-right: 10px;"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/92089a3ecdc02c9e4b4325f2b3739da4c6e4c84c" class="txc-image-grid"></span><span data-url="https://t1.daumcdn.net/cafeattach/1Z4vS/2c9f720256811d276948cb167222e435b360fcc9" data-origin-width="996" data-origin-height="644" style="width:50.00%; "><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/2c9f720256811d276948cb167222e435b360fcc9" class="txc-image-grid"></span></div></div><p>해킹을 들킨 것처럼 표현해봤는데 재밌게 봐주셨는지 모르겠네요.</p><p> </p><p>2. 404 혹은 403 에러페이지</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/2498e4e1e54a7db3283981f0344974900b9c5d7a" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/2498e4e1e54a7db3283981f0344974900b9c5d7a" data-origin-width="1874" data-origin-height="937"></div><p>잘못된 url을 치고 들어온 사람들을 위한 404 페이지 입니다만, 미리쌤 컨셉에 맞춰 403 즉 접근권한 없다는 것을 알려주는 페이지로 바꿔서 보여주는 페이지 입니다. 최대한 에러페이지도 다크웹이지만 예쁘게 보여드리고 싶었어요.</p><p> </p><p>3. error page</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/4d9396b82b69dc8fbef0c190d08b459dbd5a0f25" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/4d9396b82b69dc8fbef0c190d08b459dbd5a0f25" data-origin-width="768" data-origin-height="347"></div><p>아마 여러분들에게는 안보였을 화면이지만, error page도 예쁘게 디자인되어 있었습니다. 이 페이지도 미리쌤에 맞춰, 블루스크린으로 뜨게 해놨어요. 예, 저희 웹사이트의 기본 모토는 미리쌤이었어요. 미리쌤이라고 불러주신 분들 감사합니다 (와-칭-)</p><p> </p><p>4. event page - 구성카드</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/9e71816f638a0d4d84f79938fbb96f3ecdcd32ee" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/9e71816f638a0d4d84f79938fbb96f3ecdcd32ee" data-origin-width="952" data-origin-height="674"></div><p>이벤트 페이지의 첫 기획은, 구성물품들을 후원자 여러분에게 재밌게 보여주고 싶어서 시작된 기획이었습니다.</p><p>뒷면 배경은 빈센조 오프닝 중 트럼프 카드에서 따왔어요. 저희 리뷰에 엘리스 관련 리뷰와 트럼프 카드 관련 리뷰가 있어 구성카드로 트럼프 카드를 형상화하였고 이 것을 고스란히 밀실이란 이름으로 이벤트 페이지에 넣었었죠.</p><p> </p><p>트럼프 카드가 주인공이니 마우스를 카드에 올렸을 때, 카드가 뒤집어지도록 구성 했습니다. </p><p> </p><p>5. event page - pdf 미리보기</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/900da561fba14d801aef33421ee9da49ebffc603" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/900da561fba14d801aef33421ee9da49ebffc603" data-origin-width="768" data-origin-height="647"></div><p>저희 PDF 배포가 특이한 방식으로 이뤄지다 보니, 사전에 email을 확인하시라는 테스트 겸, PDF의 몇몇 페이지를 보여드리고 싶어서 기획한 이벤트 페이지 입니다.</p><p>똑같이 밀실이었기 때문에, 배경은 같은 트럼프 카드로 두었고, 나머지는 모두 PDF 배포 페이지와 동일하게 동작되도록 구성 했어요.</p><p>책의 PDF 버젼을 보여드리는 것이니, 책을 실제로 넘겨볼 수 있게 UI를 짰는데 구현이 잘 된 것 같아 다행입니다.</p><p> </p><p>6. PDF 배포 페이지</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/93f1f4f6305a73fc5bb0994fcb8658dfc1b1d208" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/93f1f4f6305a73fc5bb0994fcb8658dfc1b1d208" data-origin-width="1022" data-origin-height="836"></div><p>참고로 배포페이지가 가장 먼저 디자인 및 퍼블리싱이 끝난 페이지입니다. 기요틴 파일을 배포하는 것으로 컨셉을 잡고, 금가프라자 옆 이미 재개발이 시작된 부분과 함께 쓰여진 컷을 배경으로 넣었습니다.</p><p> </p><p>7. 다운페이지</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/81ab2e8e3affd2013695aa841ee8b7213dfe12a7" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/81ab2e8e3affd2013695aa841ee8b7213dfe12a7" data-origin-width="996" data-origin-height="579"></div><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/eb5d8bd59fe7343d2de463feb13cd78f5765ce48" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/eb5d8bd59fe7343d2de463feb13cd78f5765ce48" data-origin-width="996" data-origin-height="579"></div><p>다크웹 컨셉을 버리지 못해 뒷배경에 어지러운 코드들이 떠있는 배경이미지를 넣고, 파일 다운로드 박스를 가운데 둔 다운로드 페이지 입니다.</p><p>참고로, 55.34mb 는 실제 zip파일의 크기를 가져와 유동적으로 뿌리고 있답니다. 두번 전부 다운로드 기회를 소진하면, 센조의 라이터가 활활 타서 기요틴 파일을 불태웠다라는 컨셉입니다. 원랜 불바다를 보여드리고 싶었지만, 라이터로 만족했어요. 이 이상 나가면 광기의 리뷰북팀이라는 별명을 얻을 것 같더라구요.</p><p> </p><p>click me! 버튼은 디자인 2스텝님이 만들어주신 이미지 입니다. 언제 로또 페이지로 넘어가는 버튼을 넣을까 고민 하던 찰나에, 어짜피 다운은 다들 하실꺼니까! 하고 다운 페이지에 보이도록 삽입해놨어요. </p><p> </p><p>8. 비밀번호 힌트 페이지</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/c68c31cd1c90919c84c33ca9e651a3df999288e7" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/c68c31cd1c90919c84c33ca9e651a3df999288e7" data-origin-width="996" data-origin-height="644"></div><p>모스부호가 힌트입니다!!! 라고 알려드린 페이지입니다. 모스부호 많이 어려우셨나요...?</p><p>저희가 변명 아닌 변명을 하자면 원래 비밀번호, 크로스워드로 할려고 했습니다. 그래도 넌센스 식으로 줄이자고 한게 모스부호였는데, 많은 분들에게 혼란을 드린 것 같아 송구스럽네요.</p><p> </p><p>9. lotto 페이지</p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/4345575bf272244ed0ed19f6180a787d2ae40c6f" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/4345575bf272244ed0ed19f6180a787d2ae40c6f" data-origin-width="1280" data-origin-height="636"></div><p>스크레치 복권의 형식을 하자라고 마음먹고 이리저리 코드를 찾다가 마음에 든 코드를 찾아서 넣어둔 로또 페이지 입니다.</p><p>이 페이지가 장장 4시간 정도? 들어간 가장 많은 품이 든 페이지예요. 원래는 배경지의 가운데를 긁게 해드리고 싶었지만, 모바일대응이 전혀 안되어서 선회 했습니다.</p><p> </p><p>이 페이지는 모든 글자가 전부 이탈리어 입니다. lotto가 이태리어에서 온 것 아시나요? 그 내용을 듣자마자 선택한 기획이었는데... 다들 괜찮으셨는지 모르겠습니다.</p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/484e000c71012deda20d099630f48d18009eb7f2" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/484e000c71012deda20d099630f48d18009eb7f2" data-origin-width="1280" data-origin-height="634"></div><p>승리하리라! vincero! 이면 끝까지 긁었을 때, Andare! 안다레! (가!) 버튼이 뜨도록 했는데... 망한 UI 같습니다. UI UX 너무 어려워요... 가운데에 버튼이 뜨도록 했어야했나봅니다ㅠㅠ...</p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/7d29fbb19642e7dffb0fc7bbe7d957b3ddb290a7" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/7d29fbb19642e7dffb0fc7bbe7d957b3ddb290a7" data-origin-width="372" data-origin-height="803"></div><p>미당첨자 분들은 non 이 뜨도록 했습니다.</p><p> </p><p>눈치 채셨나요? PC버젼의 아름다운 로또 이미지를 모바일 분들도 보실 수 있게, 배경이미지를 돌려서 보이도록 했습니다.</p><p> </p><p>10. email</p><p> </p><p>저희의 속을 많이 썩힌 이메일... 구글 이메일 정책이 기본 무료사용자이면 한번에 보낼 수 있는 이메일 수가 제한되어있더라구요... 제가 커머셜 경험자였지만, 무료 계정으로 이메일을 보내본게 처음이라... 버벅여서 죄송했습니다...</p><p> </p><p>메일이 한번 락 걸려서 새로 파고... 10~12분씩 끊어서 보내야했을 때는 아찔 했어요. 14분을 보내면 꼭 누락되시는 분이 발생하더라구요.. 허허. 구글 나빠요. 대량 이메일 체크를 했어야했는데, 이메일 페이지가 발송 20분 전에 퍼블리싱이 끝나서 테스트를 못해봤던게 좀 아쉽네요. 이번을 반면교사 삼아야할꺼같습니다.</p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1Z4vS/ff2b9020ff709e69990ab0d2edc15cf8c6057a7e" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1Z4vS/ff2b9020ff709e69990ab0d2edc15cf8c6057a7e" data-origin-width="906" data-origin-height="1094"></div><p>이메일도 html로 퍼블리싱을 진행한 화면입니다. 여러분들에게 리뷰북이 파티가 되었음 해서 인싸파티를 그림으로 깔았고,</p><p>이왕 도서출판 결자해지라고 알려드렸으니, 기부금 영수증을 발행해드리면 좋을거 같아 진행한 디자인입니다.</p><p> </p><p>참고로 이메일 제목의 [빈센조를 사랑하는 사람들에게] 는, 이제 PDF를 보신 분들은 아셨겠지만 리뷰븍 제목입니다.</p><p>리뷰북 제목이기도 하고, 빈센조를 사랑하는 사람들에게 보내드리는 PDF이기때문에 찰떡이라 생각해서 해당 제목으로 보내드렸습니다.</p><p> </p><p>빈센조 까사노가 보낸, [빈센조를 사랑하는 사람들에게] 어떻게 괜찮으셨나요?</p><p>많은 분들이 좋아해주셔서 다행이었습니다.</p><p> </p><p>웹사이트를 처음 제작하자고 의견을 냈을때만해도 서버가 버텨줄 지, 여러분들이 좋아해주실지 고민이 많았는데... 재밌게 즐겨주신 분들이 계신거 같아 다행입니다.</p><p> </p><p>리뷰북에 대한 후기, 웹사이트에 대한 후기 등 트위터이던 인스타이던 혹은 빈센조를 사랑하는 사람들이 모인 커뮤이던 올려주시면 저희 팀원분들은 뿌듯해할거예요.</p><p> </p><p>그럼 아디오스~ </p><p> </p><p>ps. 참고로 url에 오타가 있습니다. 리뷰북팀 내에서 어쩌지..? 하다가 더 기요틴 스럽다라고 넘어가버렸는데, 이 또한 센조가 url 쉽게 못 알아채게 바꿔놨다란 리뷰북팀만의 컨셉이 되었네요. <a href="http://guillotinebyvinceozo.com/" target="_top" class="ke-link">http://guillotinebyvinceozo.com/</a> </p><p> </p><div class="figure-open" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Warning" data-og-description="Warning Page 해당 페이지는 22년 5월 5일 이후 오픈될 예정입니다. 드라마 <빈센조> 리뷰북 PDF 배포 대상자만 배포 페이지로 접근 가능합니다. 현재 4월 30일까지 1만원 이상 후원 시, PDF 배포 대상자" data-og-host="guillotinebyvinceozo.com" data-og-source-url="http://guillotinebyvinceozo.com/" data-og-url="http://guillotinebyvinceozo.com/"><a href="http://guillotinebyvinceozo.com/" target="_blank" data-source-url="http://guillotinebyvinceozo.com/"><div class="og-image" style="background-image:url(null)"></div><div class="og-text"><p class="og-title">Warning</p><p class="og-desc">Warning Page 해당 페이지는 22년 5월 5일 이후 오픈될 예정입니다. 드라마 <빈센조> 리뷰북 PDF 배포 대상자만 배포 페이지로 접근 가능합니다. 현재 4월 30일까지 1만원 이상 후원 시, PDF 배포 대상자</p><p class="og-host">guillotinebyvinceozo.com</p></div></a></div><p> </p><p> </p>
<!-- -->
첫댓글 퀴즈 푸는 것도 마냥 쉽지않아서 더 재밌었어요 덕분에 오랜만에 너무 즐거웠습니당😍 그동안 고생해주신 우리 추진팀여러분들 너무 감사합니다!!
url 오타 이제야 알았어요🤭
전문가의 솜씨가 느껴진다 했더니 역시나!! 덕분에 다운로드 받는것조차도 즐거웠습니다!
정말 엄청난 능력자이십니다. 서버를 구축하신다는 걸 전혀 상상치 못했어요👍
하나부터 열까지 엄청 신경쓰신게 보였어요. 처음 봤을때 제가 지금 뭘 보고 있는건가 눈을 의심했었죠ㅋㅋ 진짜 능력자이시다는ㅋㅋ
덕분에 눈이 즐거웠습니다. 감사합니다🍷