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