User:Pjzeta: 두 판 사이의 차이

내용 삭제됨 내용 추가됨

인라인

2026년 6월 5일 (금) 15:11 기준 최신판

코덱스 아이콘 라이트 모드 개선안 비교

각 방안을 라이트/다크 배경에 고정해 나란히 표시. 실제 적용 시에는 틀:CodexTable/styles.css에 CSS 한 줄을 추가하는 방식.

방안	라이트 배경	다크 배경	비고
A. 현재 (보정 없음)			라이트에서 아이콘 소실
B. 다크 칩 — 그라데이션			양 테마 동일 CSS, 인게임 UI 느낌. 테마 분기 불필요
C. 다크 칩 — 단색 + 테두리			B보다 평면적, 다크에서 테두리로 칸 구분 명확
D. 외곽선 강화 (drop-shadow)			16px 스탯 아이콘에 쓰는 방식. 면적 큰 흰 영역 내부는 여전히 흰색
E. 반전 (invert, 라이트 한정)			라이트에서만 반전 적용 가정. 테마 3종(라이트/다크/OS 자동) 분기 CSS 필요, 반투명 픽셀 회색 번짐 가능

@@ 1번째 줄: / 1번째 줄: @@
+== 코덱스 아이콘 라이트 모드 개선안 비교 ==
-히어로 자체 문서 — 이미지 기반 레이아웃 비교.
+각 방안을 라이트/다크 배경에 고정해 나란히 표시. 실제 적용 시에는 <code>틀:CodexTable/styles.css</code>에 CSS 한 줄을 추가하는 방식.
+{| class="wikitable" style="word-break:keep-all;"
-<div style="border:1px solid #ccc; padding:1em; margin:1.5em 0; border-radius:4px; background:#fafafa;">
+! 방안 !! style="min-width:240px;" | 라이트 배경 !! style="min-width:240px;" | 다크 배경 !! 비고
-'''옵션 1. 단일 갤러리 (세계관 패턴 그대로)'''
+|-
+| '''A. 현재''' (보정 없음)
-<gallery mode="packed" widths="150" heights="180">
+| style="background:#ffffff; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
-파일:라벡 포트레이트.png|[[라벡|라벡 보긴스]]
+| style="background:#14181f; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
-파일:세네스 포트레이트.png|[[세네스|세네스 펠그리브]]
+| 라이트에서 아이콘 소실
-파일:인호 포트레이트.png|[[인호|인호]]
+|-
-파일:모리 포트레이트.png|[[모리|쿠로가네 모리]]
+| '''B. 다크 칩 — 그라데이션'''
-파일:토린 포트레이트.png|[[토린|토린 아이언우드]]
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-파일:스칼리오네 포트레이트.png|[[스칼리오네|스칼리오네]]
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-파일:베스퍼 포트레이트.png|[[베스퍼|베스퍼]]
+| 양 테마 동일 CSS, 인게임 UI 느낌. 테마 분기 불필요
-파일:위페이 포트레이트.png|[[위페이|셴 위페이]]
+|-
-파일:마케나 포트레이트.png|[[마케나|마케나 아마디]]
+| '''C. 다크 칩 — 단색 + 테두리'''
-파일:율 포트레이트.png|[[율&선하|율 & 선하]]
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-파일:님지 포트레이트.png|[[님지|님지]]
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-파일:파이퍼 포트레이트.png|[[파이퍼|파이퍼 에레스]]
+| B보다 평면적, 다크에서 테두리로 칸 구분 명확
-파일:디아드 포트레이트.png|[[디아드|디아드]]
+|-
-</gallery>
+| '''D. 외곽선 강화''' (drop-shadow)
-</div>
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-<div style="border:1px solid #ccc; padding:1em; margin:1.5em 0; border-radius:4px; background:#fafafa;">
+| 16px 스탯 아이콘에 쓰는 방식. 면적 큰 흰 영역 내부는 여전히 흰색
-'''옵션 2. 클래스별 갤러리 4섹션'''
+|-
+| '''E. 반전''' (invert, 라이트 한정)
-== 전사 ==
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-<gallery mode="packed" widths="150" heights="180">
+| style="background:#14181f; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
-파일:라벡 포트레이트.png|[[라벡|라벡 보긴스]]
+| 라이트에서만 반전 적용 가정. 테마 3종(라이트/다크/OS 자동) 분기 CSS 필요, 반투명 픽셀 회색 번짐 가능
-파일:세네스 포트레이트.png|[[세네스|세네스 펠그리브]]
+|}
-파일:인호 포트레이트.png|[[인호|인호]]
-파일:모리 포트레이트.png|[[모리|쿠로가네 모리]]
-파일:토린 포트레이트.png|[[토린|토린 아이언우드]]
-파일:스칼리오네 포트레이트.png|[[스칼리오네|스칼리오네]]
-</gallery>
-== 암살자 ==
-<gallery mode="packed" widths="150" heights="180">
-파일:베스퍼 포트레이트.png|[[베스퍼|베스퍼]]
-파일:위페이 포트레이트.png|[[위페이|셴 위페이]]
-</gallery>
-== 마법사 ==
-<gallery mode="packed" widths="150" heights="180">
-파일:마케나 포트레이트.png|[[마케나|마케나 아마디]]
-파일:율 포트레이트.png|[[율&선하|율 & 선하]]
-파일:님지 포트레이트.png|[[님지|님지]]
-</gallery>
-== 원거리 ==
-<gallery mode="packed" widths="150" heights="180">
-파일:파이퍼 포트레이트.png|[[파이퍼|파이퍼 에레스]]
-파일:디아드 포트레이트.png|[[디아드|디아드]]
-</gallery>
-</div>
-<div style="border:1px solid #ccc; padding:1em; margin:1.5em 0; border-radius:4px; background:#fafafa;">
-'''옵션 3. flex div + thumb (고플레이어 스타일)'''
-<div style="display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:15px; border:1px solid #ccc;">
-[[파일:라벡 포트레이트.png|100px|thumb|link=라벡|라벡 보긴스]]
-[[파일:세네스 포트레이트.png|100px|thumb|link=세네스|세네스 펠그리브]]
-[[파일:인호 포트레이트.png|100px|thumb|link=인호|인호]]
-[[파일:모리 포트레이트.png|100px|thumb|link=모리|쿠로가네 모리]]
-[[파일:토린 포트레이트.png|100px|thumb|link=토린|토린 아이언우드]]
-[[파일:스칼리오네 포트레이트.png|100px|thumb|link=스칼리오네|스칼리오네]]
-[[파일:베스퍼 포트레이트.png|100px|thumb|link=베스퍼|베스퍼]]
-[[파일:위페이 포트레이트.png|100px|thumb|link=위페이|셴 위페이]]
-[[파일:마케나 포트레이트.png|100px|thumb|link=마케나|마케나 아마디]]
-[[파일:율 포트레이트.png|100px|thumb|link=율%26선하|율 & 선하]]
-[[파일:님지 포트레이트.png|100px|thumb|link=님지|님지]]
-[[파일:파이퍼 포트레이트.png|100px|thumb|link=파이퍼|파이퍼 에레스]]
-[[파일:디아드 포트레이트.png|100px|thumb|link=디아드|디아드]]
-</div>
-</div>
-<div style="border:1px solid #ccc; padding:1em; margin:1.5em 0; border-radius:4px; background:#fafafa;">
-'''옵션 4. Navpills (대문 nav 스타일)'''
-{{Navpills
-|page1 = 라벡 | text1 = 라벡 보긴스 | image1 = 라벡 포트레이트.png
-|page2 = 세네스 | text2 = 세네스 펠그리브 | image2 = 세네스 포트레이트.png
-|page3 = 인호 | image3 = 인호 포트레이트.png
-|page4 = 모리 | text4 = 쿠로가네 모리 | image4 = 모리 포트레이트.png
-|page5 = 토린 | text5 = 토린 아이언우드 | image5 = 토린 포트레이트.png
-|page6 = 스칼리오네 | image6 = 스칼리오네 포트레이트.png
-|page7 = 베스퍼 | image7 = 베스퍼 포트레이트.png
-|page8 = 위페이 | text8 = 셴 위페이 | image8 = 위페이 포트레이트.png
-|page9 = 마케나 | text9 = 마케나 아마디 | image9 = 마케나 포트레이트.png
-|page10 = 율&선하 | text10 = 율 & 선하 | image10 = 율 포트레이트.png
-|page11 = 님지 | image11 = 님지 포트레이트.png
-|page12 = 파이퍼 | text12 = 파이퍼 에레스 | image12 = 파이퍼 포트레이트.png
-|page13 = 디아드 | image13 = 디아드 포트레이트.png
-}}
-</div>
-<div style="border:1px solid #ccc; padding:1em; margin:1.5em 0; border-radius:4px; background:#fafafa;">
-'''옵션 5. 카드 그리드 (이름+클래스 텍스트)'''
-<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:15px; padding:15px;">
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:라벡 포트레이트.png|140px|link=라벡]]<div style="font-weight:bold; margin-top:5px;">[[라벡|라벡 보긴스]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:세네스 포트레이트.png|140px|link=세네스]]<div style="font-weight:bold; margin-top:5px;">[[세네스|세네스 펠그리브]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:인호 포트레이트.png|140px|link=인호]]<div style="font-weight:bold; margin-top:5px;">[[인호|인호]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:모리 포트레이트.png|140px|link=모리]]<div style="font-weight:bold; margin-top:5px;">[[모리|쿠로가네 모리]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:토린 포트레이트.png|140px|link=토린]]<div style="font-weight:bold; margin-top:5px;">[[토린|토린 아이언우드]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:스칼리오네 포트레이트.png|140px|link=스칼리오네]]<div style="font-weight:bold; margin-top:5px;">[[스칼리오네|스칼리오네]]</div><div style="color:#666; font-size:0.85em;">전사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:베스퍼 포트레이트.png|140px|link=베스퍼]]<div style="font-weight:bold; margin-top:5px;">[[베스퍼|베스퍼]]</div><div style="color:#666; font-size:0.85em;">암살자</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:위페이 포트레이트.png|140px|link=위페이]]<div style="font-weight:bold; margin-top:5px;">[[위페이|셴 위페이]]</div><div style="color:#666; font-size:0.85em;">암살자</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:마케나 포트레이트.png|140px|link=마케나]]<div style="font-weight:bold; margin-top:5px;">[[마케나|마케나 아마디]]</div><div style="color:#666; font-size:0.85em;">마법사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:율 포트레이트.png|140px|link=율%26선하]]<div style="font-weight:bold; margin-top:5px;">[[율&선하|율 & 선하]]</div><div style="color:#666; font-size:0.85em;">마법사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:님지 포트레이트.png|140px|link=님지]]<div style="font-weight:bold; margin-top:5px;">[[님지|님지]]</div><div style="color:#666; font-size:0.85em;">마법사</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:파이퍼 포트레이트.png|140px|link=파이퍼]]<div style="font-weight:bold; margin-top:5px;">[[파이퍼|파이퍼 에레스]]</div><div style="color:#666; font-size:0.85em;">원거리</div></div>
-<div style="text-align:center; padding:10px; border:1px solid #ddd; border-radius:8px;">[[파일:디아드 포트레이트.png|140px|link=디아드]]<div style="font-weight:bold; margin-top:5px;">[[디아드|디아드]]</div><div style="color:#666; font-size:0.85em;">원거리</div></div>
-</div>
-</div>