tft-pip-tools
아이폰에서 TFT(전략적 팀 전투)를 하면서 덱 가이드를 PiP(화면 속 화면)로 띄워 두는 웹 도구예요.
설치할 것 없이 사파리에서 페이지를 열고 버튼 한 번이면 됩니다.
👉 https://jihwan0102.github.io/tft-pip-tools/
사용법
- 아이폰 사파리로 jihwan0102.github.io/tft-pip-tools를 엽니다. 홈 화면에 추가해 두면 편해요.
- 덱 목록이 뜨고 위의 화면에 덱이 나올 때까지 기다립니다. 처음엔 10초쯤, 그 뒤 하루 동안은 바로 떠요.
- 보고 싶은 덱을 목록에서 누르거나 ◀ ▶ 로 고릅니다.
- PiP 시작을 누르면 덱 화면이 작은 창으로 떠요.
- 홈으로 나가서 TFT를 켜면 PiP 창이 게임 위에 그대로 남아 있어요.
PiP 창에서 덱 넘기기
- PiP 창의 ⏪ 10초 / ⏩ 10초 버튼 = 이전 덱 / 다음 덱이에요.
- PiP 창의 ⏯ (재생/일시정지) 버튼 = 요약 → 상세 → 아이템 → 증강 티어 → 요약 순서로 화면 전환이에요. 상세 화면에서 ⏪⏩를 누르면 상세 화면 그대로 덱만 바뀌고, 증강 티어 화면에서는 등급(실버/골드/프리즘) 페이지가 넘어가요.
- 창 크기는 핀치로 키우고 줄일 수 있고, 옆으로 밀면 잠깐 숨겨져요.
화면에 나오는 정보
- 티어(S~D)·순위·덱 이름, 평균 등수, 운영 방식(예:
7레벨 리롤, 빠른 9)
- 최종 배치 유닛 — 테두리 색이 코스트(회색 1 → 금색 5), 위에 **★★★**가 있으면 3성 목표
- 핵심 캐리 3명과 아이템 3개
- 활성화되는 시너지
- 상세 화면: 많이 쓰는 챔피언 배치(위쪽이 앞줄), 추천 상징(많이 쓰는 상징과 받는 챔피언별 평균 등수), 변형 덱(레벨별로 넣고 빼는 유닛과 평균 등수)
- 아이템 화면: 캐리별 아이템 1·2·3순위와 유물이 들어간 조합(주황 테두리 = 유물), 각각의 평균 등수
- 증강 티어 화면: MetaTFT 증강 티어표의 S·A를 등급별로, 아이콘은 등급 색으로. 아이콘은 게임 속 색 그대로 CommunityDragon에서 가져와요
데이터
- MetaTFT의 현재 패치 · 최근 3일 · 플래티넘 이상 통계를 써서, 사이트 기본 화면과 같은 순서·티어로 보여줘요.
- C티어까지만 보여줘요 (D티어 덱은 빼요).
- 한 번 받아서 만든 화면은 폰에 하루 동안 저장돼서, 다시 열면 바로 떠요. 하루가 지나면 새로 받아오고, 바로 새로 받고 싶으면 새로 받기 버튼을 누르세요.
동작 환경
- iOS / iPadOS 사파리 기준으로 만들었어요 (최신 버전 권장).
- 덱 화면은 브라우저 안에서 MP4 영상으로 만들어(WebCodecs) PiP로 띄워요. 영상을 만들 수 없는 브라우저에서는 실시간 스트림으로 대신 보여주는데, 이때는 PiP의 ±10초 덱 넘기기가 안 돼요.
- 아무 데이터도 서버로 보내지 않아요. 모든 처리는 내 폰 안에서 끝나요.
문제 해결
| 증상 | 해결 |
|---|
| PiP 시작을 눌러도 안 뜸 | 페이지를 한 번 새로고침하고, 로딩이 끝난 뒤 다시 눌러 주세요. 저전력 모드에서는 PiP가 막힐 수 있어요 |
| ±10초를 눌러도 덱이 안 바뀜 | 영상을 만들 수 없는 브라우저면 실시간 화면으로 대신 보여줘요. 페이지의 ◀ ▶ 를 써 주세요 |
| 아이콘 대신 글자만 보임 | MetaTFT 이미지 서버를 못 불러온 경우예요. 새로고침해 보세요 |
| PiP가 멈추고 아무 버튼도 안 먹힘 | 페이지를 다시 열어 주세요. 계속되면 새로 받기를 눌러 보세요 |
불러오기 실패 | MetaTFT API가 일시적으로 응답하지 않는 경우예요. 잠시 뒤 다시 열어 주세요 |
배포
- GitHub Pages:
main에 push하면 반영돼요.
- tft.jihwan.kim (개인 서버, nginx 정적 사이트
/etc/nginx/sites-available/tft.jihwan.kim): push 뒤 ./deploy.sh.
새 시즌·패치 때
증강 아이콘 목록(augment-icons.json)은 미리 만들어 둔 파일이라, 새 시즌이 시작되면 다시 만들어야 해요. 갱신 전에는 MetaTFT 아이콘을 등급 색으로 칠해서 대신 보여줘요.
python3 scripts/update-augment-icons.py
링크 미리보기(og.png)와 홈 화면 아이콘(apple-touch-icon.png)은 scripts/og.html을 고친 뒤 scripts/make-images.sh로 다시 만들어요.
MetaTFT 및 Riot Games와 관계없는 개인 프로젝트예요. 덱 데이터와 아이콘의 권리는 각 소유자에게 있습니다.
