[파이널 판타지14] - 방명록📖 백업 페이지 완성

블로그에 하우징 관련 게시글을 포스팅할 때마다 은근슬쩍 주택을 홍보하고 있긴 하지만 그래도 찾아오는 사람이 적은지라,

10페이지나 되는 방명록이 꽉 차는 일은 아주 먼 미래일 줄 알았는데 생각보다 방명록이 빠른 속도로 차고 있는 요즘이다.

 

방명록은 한 번 꽉 차면 새로운 방명록을 설치한다 한들 기존의 내용이 그대로 유지되기 때문에

새로 방명록을 작성하기 위해서는 기존의 것들을 눈물을 머금고🥺 삭제할 수 밖에 없다.

 

그래서 여태까지는 방명록이 꽉 찰 때마다 imgur라는 이미지 업로드 사이트에 비공개로 방명록 캡쳐본을 백업해뒀었다.

하지만 이렇게 백업해두면 나 혼자 밖에 보지 못하는데다, 여러개의 이미지로 분할되어 있기 때문에 보기도 매우 불편하다.

 

그래서, 생각한 것이 바로 방명록 백업 페이지.

 

지난주에 착수, 다소 밍기적(?) 거리긴 했지만 생각보다 빨리 완성할 수 있었다.

아래 두 개의 주소 중 편한 쪽으로 접속하면 된다.

 

▶  https://jaicychoi.github.io/messagebook 📖

 

---

제일의 목적은 방명록을 백업해두고 편하게 보는 것이지만, 심미적(?) 요소도 나름 신경써봤다.

 

우선은 페이지 디자인부터.

 

웹 디자인은 항상 Figma를 사용 중. 웹에서 동작하기 때문에 자동저장이 되는지라 따로 저장할 필요도 없고 다양한 기능에 비해 가볍기 때문에 작업하기에 아주 쾌적하다. Adobe 프로그램 보다 훨씬 가볍다!

PC 버전 시안. 최대 가로 해상도1200px로 두고 작업하였다. 주요 컬러는 인게임의 방명록 색상이 떠오르는 미색, 짙은 녹색, 갈색 계열로 잡았다.

대세는 모바일이다. 모바일에서 페이지를 열거나 PC에서 창 크기를 작게 줄였을 때도 대응 가능하도록 모바일 버전도 디자인했다.

그렇게 복잡한 기능이 있는 페이지를 만드는 건 아닌데다 작업하기 전부터 머릿속에 시안이 들어있긴해서😏 디자인은 금방 끝났다.

 

여담으로, 방명록은 영어로 Guest Book이지만 사이트 이름이 Message Book인 것은

인게임의 도도 방명록의 공식 영문명이 Message Book이라는 단순한 이유다.

 

'도도 방명록'의 글로벌 공식 영문명은 'Message Book Stand'.

 

---

디자인이 끝났으면 이제 코드로 구현하는 일만 남는다.

 

우선은 기능을 구현하기 전에 디자인한 것 그대로 웹에서 보여지도록 레이아웃을 잡고 이것저것 밑작업을 시작.

레이아웃 작업이 끝나면 본격적인 코딩 시작. 어디에 마우스를 올리거나 클릭했을 때 어떠한 동작이 실행된다던가 하는 기능적인 것들을 구현하는 작업. 사실 디자인 한 것 그대로 웹 상에서 보이도록 구현하는 일은 크게 어렵지 않다. 기능적인 면들을 구현하는 데서 뜻대로 풀리지 않아 고생하는 경우가 많은 편.

...하지만 이번에 작업한 건 아무래도 '방명록'이라는 데이터를 쌓아두는 사이트다보니

그동안의 쌓인 방명록들을 정리하는 데 시간이 제일 오래 걸린듯 하다(...)

 

---

틈틈히 쉬는 시간에 작업한 거라 정확하진 않지만 시안을 디자인하고 코드로 레이아웃을 잡는 데 하루 반 정도,

필요한 기능을 구현하고 마무리하는 데 이틀 정도 걸렸다.

그 와중에 매일 무작도 돌고 영식도 다녀왔다, 훗😁

  

이건 앞서 Figma로 작업한 1440px일때의 시안이고,

이게 같은 해상도의 실제 구현된 웹 사이트의 화면을 캡쳐한 것이다. 코드를 짜면서 시안에서 수정/추가 한 부분이 있기 때문에 살짝 디테일이 다르긴 하지만 이정도면 초기 시안과 크게 다르지 않게 만족스럽게 구현된 듯😊.

PC에서 창 크기를 다소 줄이거나 태블릿 PC에서는 이렇게 보일 것이다.

모바일 화면에서는 이렇게 보인다. 예시는 가로 해상도 480px일 때.

 

앞서 시안을 소개할 때도 언급했지만 대세는 모바일이고, 반응형이다. 창 크기를 줄이거나 늘이더라도 자연스럽게 보이도록 mediaquery 작업을 해줬다. 사실 코딩에서 작업이 제일 시간을 많이 잡아 먹는다😣.

사이트를 반응형으로 만들기 위해서는 디자인 초기 단계부터 요소들을 어떻게 배치할지,

어떤 요소를 어떻게 이동시키거나 보여주거나 감출지 모두 감안해서 제작해야하기 때문에 매우 번거롭다.

그래서 웹 사이트들을 보면 반응형이 아닌 곳들도 아직 매우 많고,

PC에서 보는 것을 권장한다거나 PC에 최적화되어 있다고 안내하는 곳들도 많다.

 

---

주택에 방명록을 남기고 간 사람들에게 항상 답변을 달아주는데, 본인들이 이후에 또 와서 그걸 확인하는지는 잘 모르겠지만...

 

혹시 내 주택에 방명록을 남기고 갔을 경우, 본인이 남긴 메시지 카드에 마우스를 올리면 카드가 180°회전하면서 내가 남긴 답변을 볼 수 있도록 만들어봤다.

나름 힘줘서 만든 기능인데 방명록이 좀 많은 달은 애니메이션이 다소 산만하게 보일 수도 있겠다😅.

 

같은 방식으로 프로필 사진에도 마우스를 가져가면 그림이 인게임 스크린샷으로 보이도록 해뒀다.

여담으로, 프로필 사진으로 사용된 그림은 예전에 어느 유저분께 받은 그림인데 이렇게 활용할 기회가 있어서 기쁘다😊.

 

나름 공들인 부분 중 하나인 메시지 카드들이 순차적으로 자연스럽게 등장하는 애니메이션. 메시지가 굉장히 많기 때문에 CSS만 사용해서는 엄청난 노가다가 되겠지만...

JS를 사용하면 단 몇 줄이면 끝난다는 사실! 이긴 하다만 코드를 더 간단하게 만들 수 있을 것 같은데 그렇다고 반복문을 또 돌리자니 코드 가독성만 더 떨어질 것 같아 관뒀다(이미 저 코드 바깥쪽에서 i값을 증가시키는 for문이 돌고 있는 중이다).

 

순차 애니메이션 외에 또 한가지 아쉬운 부분이 있다면 선택한 달의 방명록을 보여주도록 기능하는 코드. 2021년 따로, 2022년 따로, 2023년이 추가되면 같은 일을 하는 코드를 년도만 2023년으로 바꿔서 또 추가해줘야하는 번거로움이 있다.

하나의 코드로 줄일 수 없을까 싶어서 시도했더니 오히려 더 이상해져서(가능은 하지만 이해하기 쉬운 코드가 아니다!) 관뒀다.

 

페이지 뒤에서 일하고 있는 코드의 이런저런 부분들은 이용자들에게는 보이지 않기 때문에 치명적인 문제가 없는 이상

아무래도 상관없긴 하지만 페이지를 디자인/개발한 입장에서는 늘 아쉬운 부분이다🤔.

 

---

현재, 방명록을 보여주는 기준이 가장 최신의 것부터 보여주는 방식뿐인데

오래된 순서대로도 보여줄 수 있도록 정렬 방식 변경할 수 있는 기능을 추가할지 고민 중이다.

메시지를 배열로 넣어뒀으니 배열 순서만 거꾸로 출력하면 될 것 같은데 항상 그렇듯 코드는 짜보기 전까진 결과를 알 수 없다!😂🤣

 

( +2022.08.18 추가 )

쇠뿔도 단김에 빼라고, 추가해야겠다고 마음먹은 김에 최신순/과거순으로 보여주는 기능을 샤샥-(?)하고 추가했다.

 

기본값은 최신순이고, 과거순을 클릭하면 해당 달의 가장 오래된 방명록부터 보여준다.

더불어, 코드를 한 번 더 손 댄 차에 다소 애니메이션이 부자연스럽거나 보기 불편했던 사소한 부분들도 살짝 개선해뒀다.

 

---

이렇게 방명록 백업 할 수 있는 공간을 따로 만들어두긴 했지만 그래도 인게임에서 방명록을 삭제할 때는 아쉬울 듯 하다.

캡쳐한 이미지로 따로 백업해 두는 것도 여전히 할 듯 하고. 그럴 바엔 사이트를 만든 의미가 있긴 한건가?!

 

실수로 백업을 하지 않고 삭제를 해버린 메시지가 두어개쯤 있지만 그 외의 모든 메시지들은 사이트에 업로드 해 두었으며,

답변도 달려있으니 혹시 내 주택에 방명록을 적고 간 적이 있다면 한 번 확인해보길 바란다😏.