LOST ARK ARCHIVES

아크라시아의 모든 역사와 이야기가 여기에 잠들어 있습니다.

About Project

'Lost Ark Archives'는 스마일게이트 RPG의 MMORPG '로스트아크'의 방대하고 깊이 있는 세계관을 유저들이 보다 쉽고 몰입감 있게 탐험할 수 있도록 제작된 비공식 아카이브 웹사이트입니다. 복잡하게 얽힌 스토리, 매력적인 등장인물, 그리고 장엄한 레이드의 정보를 체계적으로 정리하여 한눈에 볼 수 있도록 제공합니다.

System Architecture

React 기반의 SPA(Single Page Application) 구조에 Supabase를 BaaS(Backend as a Service)로 결합하여, 서버리스 환경에서 효율적인 데이터 관리와 동적인 사용자 경험을 제공합니다.

System Architecture Diagram

Class Diagram

주요 컴포넌트 간의 관계를 시각화한 다이어그램입니다. App 컴포넌트가 중앙에서 상태를 관리하며, 각 페이지와 하위 컴포넌트들이 데이터를 전달받아 UI를 렌더링하는 구조를 보여줍니다.

Class Diagram

Key Features

로스트아크의 방대한 정보를 직관적이고 인터랙티브한 방식으로 탐색할 수 있도록 다양한 기능을 구현했습니다.

통합 검색

캐릭터, 보스, 스토리 등 아카이브 내 모든 데이터를 한 번에 검색하여 원하는 정보에 빠르게 접근할 수 있습니다.

Interactive UI

GSAP, Three.js 등을 활용한 Interaction Animation, 3D 카드, 동적 모달, 인터랙티브 맵 등 시각적 즐거움을 더하는 요소를 통해 정보 탐색의 몰입감을 높였습니다.

렌더링 방식 (CSR)

본 프로젝트는 React 기반의 SPA(Single Page Application)로, CSR(Client-Side Rendering) 방식을 채택했습니다. 사용자가 최초 접속 시 브라우저는 최소한의 HTML과 JavaScript를 다운로드하고, 이후 React가 동적으로 페이지를 렌더링합니다. 이 방식은 초기 로딩 후에는 서버 요청 없이 부드러운 페이지 전환이 가능해 네이티브 앱과 유사한 사용자 경험을 제공합니다.

커뮤니티 기능

Supabase를 연동한 건의 게시판을 통해 사용자들이 사이트 개선에 대한 의견을 남기고 소통할 수 있는 창구를 마련했습니다.

Tech Stack

최신 웹 기술을 적극적으로 활용하여 동적이고 반응성이 뛰어난 사용자 경험을 구현했습니다.

Front-End

  • React
  • JavaScript (ES6+)
  • CSS3

Back-End

  • Supabase

Libraries

  • GSAP
  • Three.js
  • Swiper.js
  • Vanta.js
  • crypto-js
  • react-youtube.js

Differentiation

공식 홈페이지와 차별화되는 지점과 이 프로젝트만의 독창적인 가치를 소개합니다.

공식 사이트와의 비교

로스트아크 공식 홈페이지는 게임 소식, 이벤트, 가이드 등 포괄적인 정보를 제공하는 '포털'의 역할을 합니다. 반면, 본 '아카이브'는 방대한 정보 중 '스토리'에 집중하여, 분산된 정보를 한곳에 모아 체계적으로 제공함으로써 Lore-Friendly한 경험을 선사하는 데 목적이 있습니다.

프로젝트의 독창성

단순 정보 나열을 넘어, 3D 카드, 인터랙티브 맵, 동적 애니메이션, 게임에서 제공하는 UI 등 게임의 분위기를 웹에서 느낄 수 있도록 시각적, Interactive 요소를 강화했습니다. 이는 정보의 전달력을 높이고 사용자의 몰입감을 극대화하는 핵심적인 차별점입니다.