1.9 KiB
1.9 KiB
파일-화면 매핑 가이드
/
- 진입 파일:
index.html - 화면 역할: 시리즈 선택 홈 화면
- 사용자 행동:
- 언어 선택
- 시리즈 카드 클릭
- 연결 파일:
i18n/translations.<lang>.json: 제목, 설명, 시리즈명script/navigation.js: 공통 네비게이션 오버레이style/output.css: 공통 스타일
/cardList.html?series=<seriesKey>
- 진입 파일:
cardList.html - 화면 역할: 카드 검색, 필터링, 수량 선택, 키 카드 지정
- 사용자 행동:
- 검색어 입력
- 색상/타입/트리거 필터
- 카드 수량 조절
- 키 카드 지정
- 덱 결과 페이지 이동
- 연결 파일:
datas/<seriesKey>.js: 현재 시리즈 카드 원본 데이터images/<seriesKey>/: 카드 이미지 원본i18n/translations.<lang>.json: 버튼/문구 번역script/navigation.js: 공통 네비게이션
/result.html
- 진입 파일:
result.html - 화면 역할: 선택한 덱 미리보기 및 이미지 저장
- 사용자 행동:
- 덱 이름 입력
- 출력 스타일 선택
- 고화질 저장 토글
- PNG 다운로드
- 연결 파일:
localStorage.selectedCards또는cards쿼리스트링: 덱 데이터 소스images/<seriesKey>/: 결과 이미지 렌더링 대상i18n/translations.<lang>.json: 결과 화면 번역
공통 보조 파일
script/navigation.js: 오버레이 메뉴 생성 및 이동 처리i18n/i18n.js:data-i18n기반 공통 번역 적용style/style.css,style/navigation.css,style/output.css: 공통/페이지 스타일
초보자용 이해 포인트
- 이 프로젝트는 프레임워크 앱이 아니라 HTML 파일 3개가 직접 화면 역할을 나눠 갖는 구조다.
- 카드 정보는
datas/에, 실제 카드 이미지는images/에 따로 있다. - 화면에서 보이는 한 장의 카드는 "데이터 파일의 객체 1개 + 이미지 폴더의 파일 1개" 조합으로 만들어진다.