에버리프: 공식 웹사이트와 EverWiki CMS

MapleStory Worlds 게임 에버리프의 소개·게임플레이 미디어·도감을 담은 공식 웹사이트를 만들었습니다. 최근에는 흩어진 게임 정보를 EverWiki로 정리하고, 운영자가 초안을 편집하고 발행할 수 있는 Supabase 기반 CMS로 확장했습니다.

담당 역할Next.js 공식 웹사이트와 EverWiki CMS 설계·개발

핵심 제약편집 중인 초안과 현재 공개된 문서를 분리하고 동시 편집으로 인한 덮어쓰기를 방지해야 함

해결 아키텍처Next.js 16과 Supabase로 EverWiki·공지·게임 데이터를 관리하는 통합 CMS 구성

검증된 결과공개 EverWiki와 게임 소개·뉴스를 연결한 공식 웹사이트

검증 가능한 증거 자료

EverWiki 공개 사이트

01.내가 맡은 역할

Next.js 공식 웹사이트와 EverWiki CMS 설계·개발
GitHub 로그인, 편집 권한, 콘텐츠 개정 이력과 발행 흐름 구현
게임플레이 미디어 구성, 반응형 랜딩과 소셜 유입 경험 개선

02.시작 당시 상황

게임의 규칙과 분위기를 플레이 전에 이해할 수 있도록 공식 소개 페이지와 홍보 미디어를 함께 구성했습니다.

도감과 가이드가 늘면서 코드 수정 없이 운영자가 콘텐츠를 관리하고, 검토 전 초안이 공개되지 않는 편집 흐름이 필요해졌습니다.

03.실제로 마주친 제약

[1]편집 중인 초안과 현재 공개된 문서를 분리하고 동시 편집으로 인한 덮어쓰기를 방지해야 함

[2]외부 문서·이미지를 가져올 때 출처와 첨부 파일을 확인하고 발행 전에 검토해야 함

[3]모바일·저속 네트워크·모션 감소 설정에서 영상이 탐색을 방해하지 않아야 함

04.내가 내린 주요 판단

Next.js 16과 Supabase로 EverWiki·공지·게임 데이터를 관리하는 통합 CMS 구성

GitHub 계정에 역할별 편집 권한을 부여하고 초안·발행 개정본을 분리해 발행 시점에 공개 데이터를 갱신

가져온 콘텐츠는 운영자가 검토한 뒤 반영하고 동시 발행 충돌을 검사

랜딩 영상과 갤러리를 화면·접근성 조건에 맞게 조정하고 일반 링크 클릭 분석 추가

이전 Heartbeat·Redis 상태 모니터링을 종료하고 관련 경로는 410 Gone으로 정리

[웹사이트 운영]게임 소개부터 EverWiki 콘텐츠 관리까지

게임 '에버리프(EverLeaf)'를 처음 만나는 방문자가 게임플레이를 살펴보고, 필요한 정보를 찾고, 최신 소식을 확인할 수 있도록 공식 웹사이트를 만들었습니다.

Next.js 16 App Router와 React 19로 반응형 Sky Portal 메인 화면, 게임플레이 미디어, 직업별 카드·몬스터 도감을 구성했습니다. 기기와 모션 설정에 맞춰 메인 영상 재생을 제한하고, EverWiki 폴더 탐색으로 게임 정보를 분류했습니다.

Supabase 기반 CMS에서 위키, 공지, 업데이트를 함께 관리합니다. GitHub 계정에 관리자·영역별 편집 권한을 부여하고, 초안과 공개본을 분리해 게시 전 변경이 공개 페이지에 노출되지 않도록 했습니다. 외부 자료는 운영자가 기존 문서와 비교하고 검토한 뒤 게시하며, 수정 이력과 기존 주소를 보존합니다.

에버리프 공식 타이틀 및 아트워크 배너

레트로 픽셀 아트와 클래식 타이포그래피를 결합한 홍보 비주얼

구현한 웹사이트와 콘텐츠 운영 기능

반응형 게임 소개와 키보드·터치로 탐색하는 미디어 목록
카드·몬스터 등 일곱 분류로 구성한 EverWiki
공지·업데이트 상세 페이지, RSS, 사이트맵
GitHub 계정별 편집 권한, 초안 복구, 게시·휴지통·복원
Discord 업데이트 자료의 검토·가져오기와 이미지 보존
소셜 채널별 랜딩 페이지와 개인정보를 최소화한 링크 분석

05.구현하거나 배포한 결과

공개 EverWiki와 게임 소개·뉴스를 연결한 공식 웹사이트
역할별 권한, 초안·발행본 분리, 개정 이력과 발행 충돌 방지를 포함한 CMS
반응형 히어로·갤러리와 개인정보를 최소화한 링크 클릭 분석

06. 실패 또는 남은 한계

CMS 병합과 공개 페이지 응답은 확인했으며, 실제 관리자 계정의 전체 편집·발행 흐름 검증과 외부 문서 이관 완료 여부는 별도입니다.
종료한 상태 모니터링은 현재 제공 기능에 포함하지 않습니다.

07. 다음 설계 및 개편 계획

검토를 거친 문서 이관과 운영자 편집·발행 흐름의 실제 사용 검증
도감·가이드 콘텐츠의 출처와 개정 이력 보완

08.사용 기술과 선택 이유

기술	선택 이유 및 적용 위치	실제 겪은 제약 및 배운 점
Next.js 16 & React 19	공식 사이트와 CMS의 공개·관리자 화면 구성	공개 콘텐츠와 편집 중인 상태를 분리
Supabase / PostgreSQL	문서·개정 이력·역할과 발행 상태 저장	권한 검사와 원자적 발행으로 일관성 유지
GitHub OAuth	운영자 로그인과 역할별 편집 권한	로그인 성공과 콘텐츠 수정 권한을 별도로 확인
Tailwind CSS & Vercel Analytics	반응형 레이아웃과 링크 사용 흐름 확인	모션·네트워크 조건과 개인정보 최소화 고려

다음 프로젝트ZzikSool — 사진에서 읽은 제품 정보와 실제로 마신 양을 구분하는 기록 경험

사례 연구 보기