다섯 대륙 여러 문명권의 49개 신화·전설 계열에서 신과 영웅, 몬스터 322명을 조각상, 회화, 유물 자료 330점으로 살펴보고, 신화 속 유물 74점을 비밀 전시실에 모은 세계 신화 도서관입니다.
데모 바로 보기 · 어드민은 /admin에서 데모 계정으로 둘러보기를 누르면 됩니다. · 디자인 시스템(Storybook)
프로젝트 상태: 개발 중인 포트폴리오 프로젝트입니다. 데이터와 업로드 이미지는 Supabase(Postgres, Storage)에 저장하고, 환경 변수가 없으면 메모리 목업으로 동작합니다. 자료 이미지는 모두 Wikimedia Commons의 퍼블릭 도메인·CC 라이선스 자료이며, 저작자와 라이선스는 아래 출처에 모았습니다.
| 첫 화면 |
신화 계열 목록 |
 |
 |
| 신 색인 |
계열 상세 |
 |
 |
| 비밀 전시실 |
유물 상세 |
 |
 |
| 어드민 대시보드 |
어드민 편집 |
 |
 |
| 신 상세 |
신 찾기 |
 |
 |
| 모바일 홈 |
모바일 신 상세 |
 |
 |
| 화면 |
내용 |
| 홈 |
악보를 닮은 첫 화면(스크롤하면 자료 필름이 흐르고 재생선 위 계열이 콜라주로 펼쳐짐), 오선 한 줄마다 계열을 놓은 목록과 대륙 거르기, 마우스를 따라다니는 미리보기가 있는 신 색인 |
| 계열 상세 |
계열 소개, 대표 자료, 속한 신 목록, 신들의 계보(배우자와 자식, Ark에 있는 신으로 연결), 다음 계열로 이동 |
| 신 찾기 |
이름·별칭·관장 영역으로 찾고 대륙과 분류(신·영웅·몬스터·그 밖의 존재, 몬스터는 신수·영수·몬스터 등급)로 거르기. 결과 개수를 화면 낭독기에 알리고, 검색 상태를 주소로 공유합니다. |
| 신 상세 |
별칭과 관장 영역, 소개, 가족(부모·배우자·자식·형제자매), 탈것·동반자, 지닌 유물, 소장 자료(분류·시기·소장처·해석 메모), 같은 계열의 다른 신 |
| 비밀 전시실 |
묠니르·아이기스·구사나기의 검·천부인·성배처럼 신과 영웅이 쥐었던 신화 속 유물 74점. 전시 목록을 신화 계열별로 묶고, 어두운 진열장에 한 점씩 놓고 힘과 그 힘이 치르게 한 대가를 함께 보여 주며, 유물마다 기원·문헌·지닌 이를 담은 상세 화면이 있습니다. |
| 어드민 |
계열·신·자료·유물·작품·계보 관리와 이미지 업로드(Radix Themes). 관리자 비밀번호로 로그인하면 저장할 수 있고, 데모 계정은 둘러보기만 합니다. 저장하면 공개 화면에 바로 반영됩니다. |
| 영향 아카이브 |
신화의 영향을 받은 게임·애니메이션·소설을 스와이프 갤러리로 보여 줍니다. 작품 이미지의 저작권을 확인하기 전까지 기능 플래그로 숨겨 둡니다. |
화면을 옮길 때는 계층을 따라 들어가면 새 화면이 옆에서 밀려 들어오고(drill), 같은 깊이는 겹쳐 바뀝니다(fade). 모든 등장 애니메이션과 화면 전환은 동작 줄이기를 켜거나 세로 띠의 움직임 설정을 끄면 멈추고, 자바스크립트가 없어도 내용이 보입니다.
| 구분 |
사용 기술 |
| 프레임워크 |
Next.js 16 (App Router, Cache Components), React 19, TypeScript |
| 구조 |
Feature-Sliced Design v2.1 |
| 스타일·연출 |
CSS Modules, Lenis(부드러운 스크롤), SSGOI(화면 전환), Cinzel·Nanum Myeongjo·Courier Prime(한글 본문은 운영체제 명조) |
| 어드민 |
Radix Themes, Server Actions, zod, sharp(이미지 줄이기) |
| 품질 |
ESLint(import 정렬, FSD 계층 규칙), Steiger(FSD 구조), Prettier, husky + lint-staged, Vitest + React Testing Library, Storybook 스토리 테스트(axe), Playwright E2E(axe), eslint-plugin-jsx-a11y, size-limit, Lighthouse CI |
| 모니터링 |
Sentry(DSN이 있을 때만), web-vitals |
| 데이터 |
Supabase (Postgres, RLS, Storage), Vercel Cron(무료 프로젝트 깨우기) |
| 문서 |
Storybook 10 (@storybook/nextjs-vite) |
Node.js 22(.nvmrc)와 pnpm이 필요합니다.
nvm use
corepack enable pnpm
pnpm install
cp .env.example .env.local # 로컬 Supabase 값으로 채웁니다 (아래)
pnpm db:start # 로컬 Supabase (Docker 필요, 마이그레이션·시드 자동 적용)
pnpm dev # http://localhost:3000, 어드민은 /admin
pnpm db:start가 출력하는 API_URL과 SECRET_KEY를 .env.local의 SUPABASE_URL, SUPABASE_SECRET_KEY에 넣고 ADMIN_PASSWORD를 정합니다. 비워 두면 메모리 목업으로 동작하고, 어드민은 데모 계정으로 둘러보기로 들어갈 수 있습니다. 로컬 개발은 운영 데이터베이스를 쓰지 않습니다. .env.local에 로컬 Supabase를 적었다면 pnpm build 전에도 pnpm db:start가 필요합니다.
| 명령 |
설명 |
pnpm build / pnpm start |
프로덕션 빌드 / 실행 |
pnpm storybook |
Storybook 개발 서버 (http://localhost:6006) |
pnpm lint / pnpm lint:fsd |
ESLint / FSD 구조 검사(Steiger) |
pnpm typecheck |
타입 검사 |
pnpm test |
단위 테스트 |
pnpm test:storybook |
모든 스토리 렌더링과 접근성 검사 |
pnpm test:e2e |
프로덕션 빌드의 실제 화면 검사 (먼저 build 필요) |
pnpm size / pnpm lhci |
번들 크기 예산 / Lighthouse 점수 기준 검사 (먼저 build 필요) |
pnpm test:e2e:local-db |
이미지 업로드 E2E (로컬 Supabase 필요) |
pnpm db:push / pnpm db:seed:generate |
Supabase 마이그레이션 적용 / 시드 SQL 만들기 |
pnpm images:resolve |
Wikimedia Commons에서 자료 이미지와 라이선스 정보를 다시 받기 |
pnpm credits |
자료 데이터에서 그림 출처 전체 목록(docs/credits.md) 다시 만들기 |
환경 변수와 전체 규칙은 개발 가이드를 참고하세요.
e2e/ E2E 테스트와 README 스크린샷 촬영
public/images/ 자료 이미지 (Wikimedia Commons)
scripts/ 자료 이미지·라이선스 정보 받기, 시드 SQL 만들기
supabase/ 마이그레이션(스키마·RLS·Storage), 시드
src/
├─ app/ Next.js 라우트 (_pages를 다시 내보내기만 함)
├─ _app/ 루트·사이트·어드민 레이아웃, 전역 스타일
├─ _pages/ 홈(악보 무대·계열 목록·신 색인), 계열, 신, 신 찾기, 아카이브, 404, 어드민 화면(편집 폼)
├─ widgets/ 세로 띠와 메뉴, 바닥글, 신 카드 목록, 어드민 틀
├─ features/ 어드민 로그인
├─ entities/ 계열(pantheon), 신(figure), 자료(exhibit), 작품(work)
├─ shared/ 등장 애니메이션 UI, 손글씨 주석, 어드민 입력 부품, 세션, 저장소(Supabase·목업)
└─ proxy.ts /admin 접근 제어
| 문서 |
내용 |
| 개발 가이드 |
FSD 구조, 디자인 토큰, 데이터와 이미지, 어드민, 환경 변수, 접근성, 테스트 |
| 시퀀스 다이어그램 |
공개 화면 조회, 어드민 로그인, 저장과 캐시 갱신, 이미지 업로드 |
| 출처 전체 목록 |
자료 그림 330점의 저작자·사용 허락·원본 |
| 버전 기록 |
버전별 변경 내용 |
화면에는 그림마다의 출처를 적지 않고 여기에 모읍니다. 공개 화면의 바닥글에 있는 '자료 출처'가 이곳으로 잇습니다.
| 자료 |
저작자 |
사용 허락 |
원본 |
| 자료 그림 330점 (조각상·회화·유물) |
그림마다 다름 |
퍼블릭 도메인 249점, CC0 47점, CC BY 10점, CC BY-SA 18점, 그 밖의 자유 이용 6점 |
Wikimedia Commons (전체 목록) |
| 작품 일러스트 (어드민에서 올림) |
각 작품의 저작권자 |
허락을 받아 실음 |
작품 갤러리의 이미지마다 권리 표기와 원본 |
| Cinzel 글꼴 (영문 제목) |
The Cinzel Project Authors |
SIL OFL 1.1 |
NDISCOVER/Cinzel |
| Nanum Myeongjo(나눔명조) 글꼴 (한글 제목) |
NHN Corporation(현 NAVER), 디자인 폰트릭스(FONTRIX) |
SIL OFL 1.1 |
Google Fonts |
| Courier Prime 글꼴 (영문·숫자) |
The Courier Prime Project Authors |
SIL OFL 1.1 |
quoteunquoteapps/CourierPrime |
Nanum Pen Script(나눔손글씨 펜) 글꼴 (주석 글자만 남긴 nanum-pen-notes.woff2) |
NHN Corporation(현 NAVER), 디자인 산돌커뮤니케이션 |
SIL OFL 1.1 |
Google Fonts |
| 신·계열 소개 글 |
직접 쓴 글 (나무위키 등으로 사실을 확인하고 문장은 옮기지 않음) |
— |
— |
작품 일러스트와, 어드민에서 더하거나 이미지·출처를 고친 자료 그림은 데이터베이스에만 있어 이 표와 전체 목록에 둘 수 없습니다. 그래서 그런 이미지만 화면에 권리 표기·출처와 원본을 함께 보여 줍니다. 공유 이미지에 보이는 조각상·그림도 위 자료 그림입니다.
