AskRenji

원본: projects/skill-lens/design/components/AskRenji/README.md

상태: Experimental(시험, 0.17), 접근성 △, 다크 ✓, 코드 ✗

시험(0.17): 렌지는 범위와 이유만, 최종 선택은 본인. 본인 선택(흰 카드, 보라 링)과 렌지 참고(바탕색 상자, 렌즈 점)를 모양으로 나눔

자기진단에서 누를 때만 렌지 레벨 추천을 범위(예: Lv 3~4)와 레벨마다 맞는 조건으로 보입니다. 하나만 보이면 결정처럼 읽혀서 범위로 둡니다. 최종 레벨은 본인이 고릅니다(P3, DEC-160, PM 2026-11-09).

쓰는 곳

자기진단의 스킬 한 개 단위.

구성(화면이 넘겨줄 것)

스킬, 실무자가 적은 한 일(선택), 렌지 답(범위와 레벨마다의 조건).

규칙

누르기 전에는 추천을 보이지 않습니다(고르는 사람의 판단이 먼저).
답의 꼴: "렌지 레벨 추천: Lv 3~4"(늘 맞닿은 두 레벨, 끝이면 Lv 1~2나 Lv 4~5) + 레벨마다 맞는 조건 한 문장씩 + "최종 레벨은 직접 선택해 주세요".
자동으로 고르지 않고, 추천과 다르게 골라도 경고하지 않습니다.
본인 선택(흰 카드, 보라 링)과 렌지 참고(바탕색 상자, 렌즈 점)는 모양이 다릅니다. 렌지 답이 흰 카드 위에 놓이게 합니다.
렌지는 1인칭을 쓰지 않습니다.

접근성

답은 aria-live="polite"로 알립니다.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Actions" height=330 subtitle="시험(0.17): 렌지는 범위와 이유만, 최종 선택은 본인. 본인 선택(흰 카드, 보라 링)과 렌지 참고(바탕색 상자, 렌즈 점)를 모양으로 나눔" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row2{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}.ph{width:390px;max-width:100%}.pc{width:880px;max-width:100%}.cap{font:600 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 6px}.ph-screen{padding:var(--space-5);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}</style><div class="sl sl-card stack" style="max-width:520px"><button class="sl-ask"><i class="sl-ask__lens"></i>렌지에게 묻기</button><div class="sl-ask__answer" role="status" aria-live="polite"><div class="sl-ask__head"><i class="sl-ask__lens"></i>렌지 레벨 추천: <span class="sl-ask__range">Lv 3~4</span></div><p>대시보드를 직접 만들었다고 적어 주셨어요. <b>Lv 3</b>의 설명과 가깝고, 팀에 가르친 적이 있다면 <b>Lv 4</b>도 맞아요.</p><div class="sl-ask__foot">최종 레벨은 직접 선택해 주세요.</div></div></div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.