프로젝트 시작 배경
저는 반지의 제왕 시리즈를 아주아주 좋아해서 책도 사고 영화도 지금까지 최소 10번은 봤을 정도로 아주 빠져있답니다.
반지의 제왕은 '반지의 제왕' 시리즈 이외에도 '실마릴리온', '후린의 아이들', '끝나지 않은 이야기' 등 여러 권의 책이 많으며 양도 굉장히 방대하고 세계관에 등장하는 지역, 사건, 인물들은 정말 셀 수도 없습니다.
때문에 처음 입문하는 입장에서 책을 읽으면서 항상 이런 난관에 부딫혔습니다.
"얘가... 누구였더라..."
"여기는 어디였지... 뭔 사건이 있었더라..."
"얘는 누구 자식이였더라...ㅠㅠ"
그렇기에 저는 항상 한 페이지 읽을 때 마다 지도를 봐야 했고 인터넷에 검색하면서 읽었습니다.
저는 국내에도 반지의 제왕 세계관 팬들이 많아지기를 바라면서 지금, 그리고 훗날 반지의 제왕에 빠지게 될 분들을 위한 웹 페이지를 만들어보고자 하였고 이것이 제가 Story of Arda 프로젝트를 시작하는 배경입니다!!
기능들
제가 생각한 기능들은 다음과 같습니다.
지도 탐색
- 확대, 축소, 이동, 클릭, 드래그가 가능한 지도가 메인 화면에 떠 있습니다.
- 유저는 지도에 있는 지명을 클릭하여 해당 지역에 대한 정보를 확인할 수 있습니다.
- 정보는 지도 화면 주변에 카드 UI, 대시보드 형태로 뜨게 됩니다.
위 이미지 처럼 UI 구성을 해보았습니다 (디자인 문외한이라 이해 부탁드립니다ㅠㅠ)
각 카드를 클릭시 상세 정보 페이지로 이동하게 됩니다.
예를 들어 '곤도르' 가 적혀있는 카드를 클릭한다면
-> 곤도르에 대한 상세한 정보가 적힌 페이지로 이동합니다.
해당 페이지에는 곤도르에 대한 자료, 사진 등이 background로 뜨게 되고 관련 인물, 관련 사건, 등이 상세하게 기재됩니다.
위 그림에서 보이는 보라색 카드들은 지역과 관련된 인물들의 간략한 설명이 적혀있는 카드입니다. 해당 카드들은 Carousel 형태로 좌우로 자동 슬라이드됩니다.
게시판
유저들이 반지의 제왕 세계관에 관련하여 자유롭게 질문하거나 자신의 창작 게시글을 올리고 댓글, 좋아요 등으로 서로 소통할 수 있는 게시판이 있습니다.
아직은 기능들을 이렇게만 생각해 놨습니다.
저는 프론트엔드에 관심이 많은지라 해당 프로젝트는 제가 사용해보지 않은 프레임워크와 개발방식으로 접근하려 합니다.
-
Next.js
대시보드 UI인것과 별개로 홈페이지는 static한 데이터, 즉 유저에 특정된 데이터가 아니고 실시간으로 변하는 데이터도 아닙니다.
이런 경우에는 Server Side Rendering 전략이 더욱 효과적이고 Static Generating의 이점을 십분 살릴 수 있는 기능입니다.
하지만 게시판 기능의 경우 유저에 특정된 데이터들이 즐비하고 상호작용도 일어나므로 보여지는 데이터들 또한 실시간으로 변하게 됩니다.
위의 특징들을 종합해 봤을 때 React, Vue와 같은 SPA 프레임워크로는 한계나 단점이 뚜렷하다고 보여졌고 Next.js의 목적을 잘 살릴 수 있을 것이라고 판단하였습니다. -
TypeScript
지금까지 SSAFY에서 7주라는 짧은 기간의 팀 프로젝트 밖에 해본적이 없기에 TypeScript까지 도전할 용기가 나지 않아 사용해본적이 없습니다ㅠㅠ
이번 기회에 TypeScript를 제대로 공부하고 프로젝트에 적용함으로 더욱 효과적으로 공부해보고자 합니다. -
기능 추가가 용이한 개발 방식
최근 FrontEnd에서 유행하는 마이크로 프론트엔드 개발방식을 사용해보고자 합니다. 지도 기능, 게시판 기능만으로는 서비스가 허전하다고 생각하지만 아직 추가 기능으로 어떤것을 진행할 지 정하지 못하였습니다.
이런 상황에서 개발 할 때 이후 기능을 추가하기가 용이한 방식으로 진행하고자 합니다. 예를 들면 새로운 기능이 30%만 진행이 됐을 때도 배포를 하여 해당 30% 기능과 이전에 있던 기능(지도, 게시판)을 온전하게 사용가능한 형태로 개발하고자 합니다.
