그리고 두 번째 숙원사업. 웹사이트 만들기! 사실 웹사이트 만들기도 출판사를 시작할 때부터 염원했던 일인데요. 그동안은 웹사이트를 노션 페이지를 활용해 간단하게 만들었었는데요. 이번에 제대로 마음먹고 제작을 해 보았어요. 그것도 개발자 없이, 템플릿 구매 없이, 하나부터 열까지 직접 하나씩 만드는 방식으로요!

물론 쥬쥬베휴먼은 코딩이라곤 하나도 모르는 사람인데요. 우연히 바이브코딩으로 간단한 웹사이트를 만드는 수업을 발견하고 바로 신청하게 됩니다. 그런데 그 수업에선 분명 4시간 만에 웹사이트를 만들 수 있다고 했거든요? 하지만 쥬쥬베휴먼은 4시간 동안 정말 간단한 뼈대만 겨우 잡고 돌아왔어요. (체감상으론 앞으로 40시간도 부족할 것 같았어요 ㅎㅎㅎ)

그리고 시작된 코딩과의 고독한 싸움 (아니 부탁과 애원). 마침 워크숍 다음 날부터 3일간 고성으로의 워케이션이 잡혀있던 쥬쥬베휴먼은 그 3일 동안 밥 먹고 자는 시간을 빼곤 오로지 웹사이트 개발에 혼신을 다하게 되어요. 구성을 하고, 폰트를 고르고, 색을 고르고, 정보를 채우고, 버그를 잡고, 버그를 잡고, 버그를 잡고....

왜 이 분이 그렇게 벌레를 잡으셨는지 이해가 돼... 버그는 그때그때 잡아야 하더라고요..!

(출처: yj.builder 님 스레드)

그렇게 하나부터 열까지, 그러니까 허허벌판에 기둥 세우고, 시멘트 바르고, 지붕 올리고, 인테리어까지 모두 올 셀프로 진행한 저희의 첫 공식 웹사이트를 공개해요, 우리 집에 초대할게요!

포인트 (1) 움직여볼 수 있는 책들!

홈 화면 속 책들은 드래그해서 움직여볼 수 있어요. 새로고침을 하면 랜덤 정렬로 바뀌어 새로운 배치도 볼 수 있고요. 또 궁금한 책은 클릭하면 해당 책의 소개 페이지로 바로 이어집니다. 아! 그리고 우리의 웹사이트는 매일매일 정리하는 집이라, 하루의 첫 접속은 꼭 정돈된 배치로 여러분을 맞이한답니다.

포인트 (2) 한국어와 영어!

출판사의 웹사이트는 해외에 출판사를 소개할 때 특히 더 많이 사용되어요. 그래서 저희도 한국어와 영어 버전 모두 만들었는데요. 동일한 문구를 번역한 경우도 있지만, 서로 다른 디테일을 지닌 경우도 있어요. 특히 영문 책 소개 하단에는 일부 샘플 번역이 있는 책들의 경우, 샘플 번역도 함께 올려놓았답니다!

포인트 (3) 재밌는 컬러 배치

어떤 페이지의 배경은 사과대추색이고, 또 어떤 페이지의 배경은 흰색이에요. 각각 상단과 하단의 메뉴에 커서를 올릴 때, 흰색과 사과대추색으로 교차되어 나타나고요. 이렇게, 각 페이지의 색상, 라인과 글자의 색상, 커서를 올리거나 클릭할 때의 색상들을 모두 하나하나 지정해 만들었어요.

포인트 (4) 숨은 디테일들

사이트의 주소창에 함께 보여지는 작은 아이콘부터, 링크를 전달할 때 보여지는 썸네일, 홈 화면에서 슬라이드로 움직이는 문구와 가장 아래에 마우스를 가져가면 보이는 크레딧 문구까지, 모두 하나하나 디테일을 넣으려고 애썼어요. 웹사이트를 구경하며 잘 보이진 않지만, 자세히 보면 보이는 재미를 찾아보셔요!

+아직 오픈 초기라 혹시 모를 오류가 있을 수도 있어요! 만약 오류를 발견한다면, 제보해 주세요! 버그 잡이가 출동합니다!!

이렇게 웹사이트에 초대하니, 꼭 집들이를 한 기분이네요. 웹사이트 제작에 재미를 붙였으니 종종 재밌는 기능과 디테일을 추가해 놓을게요. 가끔 생각나면 들르는 친한 친구네 집처럼, 생각날 때 종종 들려주셔요!