d5b86c5f89
- login/learner-home/session-review/professor/admin/settings - session-v2(밝은 에디토리얼 톤으로 재제작, 기존 어두운 stage 대체) - 전부 동일 디자인 토큰(세이지틸+테라코타), 윤찬 철칙 준수
706 lines
38 KiB
HTML
706 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vignette — 설정 시안</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css">
|
||
<style>
|
||
/* =====================================================================
|
||
Vignette — 설정(Settings) 화면 시안 (단일 파일, 인라인 CSS)
|
||
토큰: DESIGN_CONCEPT.md §3 그대로 적용. 외부 의존 = Pretendard CDN 1개.
|
||
철칙: border-left 0 · 이모지 0(아이콘 inline SVG) · 카드덤프 0 ·
|
||
에디토리얼 미니멀 · 순흑/순백 금지 · 강조는 weight/tint/kicker/dot ·
|
||
한 화면 한 그룹 · 넉넉한 여백.
|
||
===================================================================== */
|
||
:root{
|
||
/* 중성 베이스 */
|
||
--paper:#FBFAF8; --paper-2:#F4F2EE; --surface:#FFFFFF;
|
||
--neutral-100:#ECEFF1; --neutral-150:#E5E1DA; --neutral-200:#D5DBDE; --neutral-400:#98A4A9;
|
||
--ink:#1C2A2A; --ink-2:#5A6663; --ink-3:#93A09C; --hair:#E5E1DA;
|
||
/* 악센트 */
|
||
--accent:#3E7A6E; --accent-deep:#316257; --accent-tint:#EEF4F2; --accent-bright:#5F968B;
|
||
--clay:#B0735C; --clay-deep:#94604C; --clay-tint:#F6F0EC;
|
||
/* 의미색 */
|
||
--pos-text:#2C6E49; --pos-solid:#3B8C5E; --pos-tint:#E8F3EC;
|
||
--warn-text:#8A5A00; --warn-solid:#C28A2C; --warn-tint:#FAF1E0;
|
||
--crit-text:#A8352C; --crit-solid:#C4453A; --crit-tint:#FAEAE8;
|
||
--info-text:#2E5A7A; --info-solid:#3C7299; --info-tint:#EAF1F6;
|
||
--bg-stage:#1E2724;
|
||
/* 별칭 */
|
||
--text-on-accent:#FBFAF8;
|
||
--focus-ring:rgba(62,122,110,.45);
|
||
/* 폰트 */
|
||
--font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
|
||
--font-num:"Pretendard Variable","JetBrains Mono",ui-monospace,monospace;
|
||
/* spacing */
|
||
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
|
||
--radius:8px; --radius-sm:6px; --radius-lg:12px;
|
||
--shadow-sm:0 1px 2px rgba(28,42,42,.05);
|
||
--shadow-md:0 4px 14px rgba(28,42,42,.07);
|
||
--ease-out:cubic-bezier(.22,.61,.36,1);
|
||
--maxw:1080px;
|
||
}
|
||
/* 교수자 역할 accent 오버라이드 (인디고-블루: 감독) */
|
||
body[data-role="instructor"]{ --accent:#3A5BA0; --accent-deep:#2F4A86; --accent-bright:#5478C4; --accent-tint:#EAEFF7; --focus-ring:rgba(58,91,160,.40);}
|
||
*{margin:0;padding:0;box-sizing:border-box;}
|
||
html,body{height:100%;}
|
||
body{
|
||
font-family:var(--font-sans); background:var(--paper); color:var(--ink);
|
||
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
|
||
letter-spacing:-0.01em; line-height:1.6;
|
||
}
|
||
.tab-num{font-variant-numeric:tabular-nums;}
|
||
|
||
/* ============ 공통 헤더 (톱바) ============ */
|
||
.topbar{
|
||
height:56px; background:var(--surface); border-bottom:1px solid var(--hair);
|
||
display:flex; align-items:center; gap:var(--sp-6);
|
||
padding:0 var(--sp-7); position:sticky; top:0; z-index:10;
|
||
}
|
||
.wordmark{display:flex; align-items:center; gap:10px; flex:none;}
|
||
.wordmark .gl{width:24px; height:24px; flex:none;}
|
||
.wordmark .nm{font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
|
||
.wordmark .nm .dot{color:var(--accent);}
|
||
.topnav{display:flex; align-items:center; gap:var(--sp-2); margin-left:var(--sp-5);}
|
||
.topnav a{
|
||
font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none;
|
||
padding:7px 12px; border-radius:var(--radius-sm);
|
||
}
|
||
.topnav a:hover{color:var(--ink-2); background:var(--paper-2);}
|
||
.topnav a.on{color:var(--ink); font-weight:600;}
|
||
.topbar .spacer{flex:1;}
|
||
.role{
|
||
display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
|
||
padding:6px 12px; border-radius:999px; background:var(--accent-tint); font-weight:500;
|
||
}
|
||
.role .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}
|
||
.who{display:flex; align-items:center; gap:10px;}
|
||
.who .av{
|
||
width:32px; height:32px; border-radius:50%; background:var(--accent);
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:var(--text-on-accent); font-size:13px; font-weight:600;
|
||
}
|
||
.who .nm{font-size:14px; font-weight:600; color:var(--ink);}
|
||
|
||
/* ============ 페이지 헤더 ============ */
|
||
.pagehead{max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-7) 0;}
|
||
.pagehead .kicker{
|
||
font-family:var(--font-num); font-size:12px; font-weight:600;
|
||
letter-spacing:0.08em; color:var(--accent);
|
||
display:flex; align-items:center; gap:8px; margin-bottom:10px;
|
||
}
|
||
.pagehead .kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
||
.pagehead h1{font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.3;}
|
||
.pagehead p{font-size:16px; color:var(--ink-2); margin-top:8px; max-width:560px;}
|
||
|
||
/* ============ 레이아웃: 좌측 섹션 내비 + 우측 폼 ============ */
|
||
.shell{max-width:var(--maxw); margin:0 auto; padding:var(--sp-6) var(--sp-7) var(--sp-8);
|
||
display:grid; grid-template-columns:228px 1fr; gap:var(--sp-7); align-items:start;}
|
||
|
||
/* 좌측 섹션 내비 (sticky) */
|
||
.sectnav{position:sticky; top:88px; display:flex; flex-direction:column; gap:2px;}
|
||
.sectnav .gk{
|
||
font-family:var(--font-num); font-size:11px; font-weight:600; letter-spacing:0.08em;
|
||
color:var(--ink-3); padding:0 12px var(--sp-3); text-transform:uppercase;
|
||
}
|
||
.sectnav a{
|
||
display:flex; align-items:center; gap:11px; text-decoration:none;
|
||
font-size:14.5px; font-weight:500; color:var(--ink-2);
|
||
padding:10px 12px; border-radius:var(--radius); transition:background .14s var(--ease-out);
|
||
}
|
||
.sectnav a:hover{background:var(--paper-2);}
|
||
.sectnav a.on{background:var(--accent-tint); color:var(--accent-deep); font-weight:600;}
|
||
.sectnav a svg{width:18px; height:18px; flex:none; stroke:currentColor; opacity:.85;}
|
||
|
||
/* 우측 폼 컬럼 */
|
||
.forms{display:flex; flex-direction:column; gap:var(--sp-7); min-width:0;}
|
||
|
||
/* 폼 그룹 (카드 = 톤차로만 분리, border 헤어라인만) */
|
||
.group{
|
||
background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
|
||
padding:var(--sp-6); box-shadow:var(--shadow-sm);
|
||
}
|
||
.group > .gh{margin-bottom:var(--sp-5);}
|
||
.group .gh .gt{font-size:20px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
|
||
.group .gh .gd{font-size:14px; color:var(--ink-2); margin-top:5px;}
|
||
|
||
/* 폼 필드 한 줄 (라벨 좌 / 입력 우, 넉넉한 행간) */
|
||
.field{
|
||
display:grid; grid-template-columns:200px 1fr; gap:var(--sp-5);
|
||
padding:var(--sp-5) 0; border-top:1px solid var(--paper-2);
|
||
}
|
||
.field:first-of-type{border-top:none; padding-top:var(--sp-2);}
|
||
.field .flab{display:flex; flex-direction:column; gap:4px;}
|
||
.field .flab .l{font-size:14.5px; font-weight:600; color:var(--ink);}
|
||
.field .flab .h{font-size:13px; color:var(--ink-3); line-height:1.5;}
|
||
.field .fin{display:flex; flex-direction:column; gap:8px; min-width:0;}
|
||
|
||
input[type=text], input[type=email], select, textarea{
|
||
width:100%; font-family:var(--font-sans); font-size:14.5px; color:var(--ink);
|
||
background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--radius-sm);
|
||
padding:11px 13px; line-height:1.5;
|
||
}
|
||
textarea{resize:vertical; min-height:84px;}
|
||
input:focus, select:focus, textarea:focus{
|
||
outline:none; border-color:var(--accent); background:var(--surface);
|
||
box-shadow:0 0 0 3px var(--focus-ring);
|
||
}
|
||
input::placeholder, textarea::placeholder{color:var(--ink-3);}
|
||
select{appearance:none; -webkit-appearance:none; cursor:pointer;
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A09C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||
background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px;}
|
||
|
||
/* 프로필 헤더 (아바타 + 이름 + 역할 배지) */
|
||
.profile{display:flex; align-items:center; gap:var(--sp-5);}
|
||
.profile .big{
|
||
width:64px; height:64px; border-radius:50%; flex:none;
|
||
background:var(--accent); display:flex; align-items:center; justify-content:center;
|
||
color:var(--text-on-accent); font-size:24px; font-weight:600;
|
||
}
|
||
.profile .meta{display:flex; flex-direction:column; gap:4px;}
|
||
.profile .meta .n{font-size:18px; font-weight:600; color:var(--ink);}
|
||
.profile .meta .e{font-size:14px; color:var(--ink-2);}
|
||
.profile .meta .badges{display:flex; gap:8px; margin-top:5px;}
|
||
.tag{
|
||
display:inline-flex; align-items:center; gap:6px;
|
||
font-size:12px; font-weight:600; letter-spacing:0.02em;
|
||
padding:4px 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-deep);
|
||
}
|
||
.tag .d{width:5px; height:5px; border-radius:50%; background:var(--accent);}
|
||
.tag.muted{background:var(--paper-2); color:var(--ink-2);}
|
||
.tag.muted .d{background:var(--ink-3);}
|
||
|
||
/* 버튼 */
|
||
.btn{
|
||
font-family:var(--font-sans); font-size:14px; font-weight:600; cursor:pointer;
|
||
border-radius:var(--radius); padding:10px 18px; border:1px solid transparent;
|
||
display:inline-flex; align-items:center; gap:8px; transition:all .14s var(--ease-out);
|
||
}
|
||
.btn svg{width:16px; height:16px; stroke:currentColor;}
|
||
.btn.primary{background:var(--accent); color:var(--text-on-accent);}
|
||
.btn.primary:hover{background:var(--accent-deep);}
|
||
.btn.ghost{background:var(--surface); color:var(--ink-2); border-color:var(--hair);}
|
||
.btn.ghost:hover{background:var(--paper-2); color:var(--ink);}
|
||
.btn.danger{background:var(--surface); color:var(--crit-text); border-color:var(--crit-tint);}
|
||
.btn.danger:hover{background:var(--crit-tint);}
|
||
.btn.sm{padding:8px 14px; font-size:13px;}
|
||
|
||
/* 라디오/세그먼트형 역할 표시 (읽기전용 스타일) */
|
||
.rolepick{display:flex; gap:10px; flex-wrap:wrap;}
|
||
.rolepick .opt{
|
||
flex:1; min-width:130px; border:1px solid var(--hair); border-radius:var(--radius);
|
||
padding:13px 15px; cursor:pointer; background:var(--surface);
|
||
}
|
||
.rolepick .opt.on{border-color:var(--accent); background:var(--accent-tint);}
|
||
.rolepick .opt .t{font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px;}
|
||
.rolepick .opt .t .d{width:7px; height:7px; border-radius:50%; background:var(--neutral-200);}
|
||
.rolepick .opt.on .t .d{background:var(--accent);}
|
||
.rolepick .opt .h{font-size:12px; color:var(--ink-3); margin-top:4px;}
|
||
|
||
/* 토글 스위치 */
|
||
.toggle{position:relative; width:42px; height:24px; flex:none; cursor:pointer;}
|
||
.toggle input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
|
||
.toggle .tr{position:absolute; inset:0; background:var(--neutral-200); border-radius:999px; transition:background .16s var(--ease-out);}
|
||
.toggle .kn{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .16s var(--ease-out);}
|
||
.toggle input:checked + .tr{background:var(--accent);}
|
||
.toggle input:checked + .tr + .kn{transform:translateX(18px);}
|
||
.toggle input:focus-visible + .tr{box-shadow:0 0 0 3px var(--focus-ring);}
|
||
|
||
/* 알림 행 (라벨 + 설명 + 토글) */
|
||
.optrow{display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--paper-2);}
|
||
.optrow:first-of-type{border-top:none;}
|
||
.optrow .ot{flex:1;}
|
||
.optrow .ot .l{font-size:14.5px; font-weight:600; color:var(--ink);}
|
||
.optrow .ot .h{font-size:13px; color:var(--ink-3); margin-top:3px; line-height:1.5;}
|
||
|
||
/* 페르소나 진입 — 리스트 (격자 아님, 세로 행) */
|
||
.personalist{display:flex; flex-direction:column; gap:10px;}
|
||
.pcard{
|
||
display:flex; align-items:center; gap:var(--sp-4);
|
||
padding:var(--sp-4); border:1px solid var(--hair); border-radius:var(--radius);
|
||
background:var(--surface);
|
||
}
|
||
.pcard:hover{border-color:var(--neutral-200);}
|
||
.pcard .face{
|
||
width:48px; height:48px; border-radius:50%; flex:none; overflow:hidden; background:var(--bg-stage);
|
||
}
|
||
.pcard .pinfo{flex:1; min-width:0;}
|
||
.pcard .pinfo .pn{font-size:15px; font-weight:600; color:var(--ink);}
|
||
.pcard .pinfo .pm{font-size:13px; color:var(--ink-2); margin-top:2px;}
|
||
.pcard .pinfo .ptags{display:flex; gap:7px; margin-top:7px; flex-wrap:wrap;}
|
||
.pchip{font-size:11.5px; font-weight:500; color:var(--ink-2); background:var(--paper-2); padding:3px 9px; border-radius:999px;}
|
||
.pchip.clay{background:var(--clay-tint); color:var(--clay-deep);}
|
||
.pcard .pact{display:flex; gap:8px; flex:none;}
|
||
.iconbtn{
|
||
width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--hair);
|
||
background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.iconbtn svg{width:16px; height:16px; stroke:var(--ink-2);}
|
||
.iconbtn:hover{background:var(--paper-2);}
|
||
|
||
/* 새 페르소나 만들기 진입 행 */
|
||
.addrow{
|
||
display:flex; align-items:center; gap:var(--sp-4); margin-top:14px;
|
||
padding:var(--sp-4); border:1px dashed var(--neutral-200); border-radius:var(--radius);
|
||
background:var(--paper-2); cursor:pointer; text-decoration:none;
|
||
}
|
||
.addrow:hover{border-color:var(--accent); background:var(--accent-tint);}
|
||
.addrow .pl{
|
||
width:36px; height:36px; border-radius:50%; flex:none; background:var(--accent);
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.addrow .pl svg{width:18px; height:18px; stroke:var(--text-on-accent);}
|
||
.addrow .at{font-size:14.5px; font-weight:600; color:var(--ink);}
|
||
.addrow .ah{font-size:13px; color:var(--ink-3); margin-top:2px;}
|
||
|
||
/* 페르소나 파라미터 슬라이더 (난이도) */
|
||
.slider{display:flex; flex-direction:column; gap:8px;}
|
||
.slider .track{height:5px; border-radius:3px; background:var(--paper-2); position:relative;}
|
||
.slider .track .fill{position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--accent-bright);}
|
||
.slider .track .knob{position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); box-shadow:var(--shadow-sm);}
|
||
.slider .scale{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3);}
|
||
.slider .scale .on{color:var(--accent-deep); font-weight:600;}
|
||
|
||
/* 음성 선택 (라디오 행) */
|
||
.voicelist{display:flex; flex-direction:column; gap:8px;}
|
||
.voice{
|
||
display:flex; align-items:center; gap:var(--sp-4);
|
||
padding:13px var(--sp-4); border:1px solid var(--hair); border-radius:var(--radius);
|
||
cursor:pointer; background:var(--surface);
|
||
}
|
||
.voice.on{border-color:var(--accent); background:var(--accent-tint);}
|
||
.voice .rad{width:18px; height:18px; border-radius:50%; border:2px solid var(--neutral-200); flex:none; position:relative;}
|
||
.voice.on .rad{border-color:var(--accent);}
|
||
.voice.on .rad::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);}
|
||
.voice .vinfo{flex:1;}
|
||
.voice .vinfo .vn{font-size:14.5px; font-weight:600; color:var(--ink);}
|
||
.voice .vinfo .vd{font-size:12.5px; color:var(--ink-3); margin-top:2px;}
|
||
.voice .play{
|
||
width:34px; height:34px; border-radius:50%; flex:none; border:1px solid var(--hair); background:var(--surface);
|
||
display:flex; align-items:center; justify-content:center; cursor:pointer;
|
||
}
|
||
.voice .play svg{width:15px; height:15px; stroke:var(--accent); fill:var(--accent);}
|
||
.voice .play:hover{background:var(--accent-tint);}
|
||
|
||
/* 동의/개인정보 행 (상태 텍스트 + 동작) */
|
||
.consent{display:flex; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-5) 0; border-top:1px solid var(--paper-2);}
|
||
.consent:first-of-type{border-top:none; padding-top:var(--sp-2);}
|
||
.consent .ci{flex:1;}
|
||
.consent .ci .ct{font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px;}
|
||
.consent .ci .ct .st{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;}
|
||
.consent .ci .ct .st.ok{background:var(--pos-tint); color:var(--pos-text);}
|
||
.consent .ci .ct .st.pending{background:var(--warn-tint); color:var(--warn-text);}
|
||
.consent .ci .ch{font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.55; max-width:480px;}
|
||
|
||
/* 콜아웃 (정보/주의, 좌측바 없음) */
|
||
.callout{border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); display:flex; gap:12px;}
|
||
.callout.info{background:var(--info-tint);}
|
||
.callout .ico{flex:none; width:18px; height:18px; margin-top:1px;}
|
||
.callout .ico svg{width:18px; height:18px;}
|
||
.callout.info .ico svg{stroke:var(--info-solid);}
|
||
.callout .ct{font-size:13.5px; line-height:1.6;}
|
||
.callout.info .ct{color:var(--info-text);}
|
||
.callout .ct strong{font-weight:600;}
|
||
|
||
/* 그룹 푸터 (저장) */
|
||
.gfoot{display:flex; justify-content:flex-end; gap:10px; margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--paper-2);}
|
||
|
||
/* 위험 구역 (로그아웃/탈퇴) */
|
||
.group.peril{border-color:var(--crit-tint);}
|
||
|
||
@media (max-width:880px){
|
||
.shell{grid-template-columns:1fr;}
|
||
.sectnav{position:static; flex-direction:row; flex-wrap:wrap; gap:6px;}
|
||
.sectnav .gk{display:none;}
|
||
.field{grid-template-columns:1fr; gap:10px;}
|
||
.topnav{display:none;}
|
||
}
|
||
@media (prefers-reduced-motion: reduce){
|
||
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body data-role="instructor">
|
||
|
||
<!-- ============ 공통 헤더 ============ -->
|
||
<header class="topbar">
|
||
<div class="wordmark">
|
||
<svg class="gl" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="#3A5BA0" stroke-width="2"/>
|
||
<circle cx="12" cy="12" r="4" fill="#3A5BA0"/>
|
||
</svg>
|
||
<span class="nm">Vignette<span class="dot">.</span></span>
|
||
</div>
|
||
<nav class="topnav">
|
||
<a href="#">세션</a>
|
||
<a href="#">내담자</a>
|
||
<a href="#">리뷰</a>
|
||
<a href="#" class="on">설정</a>
|
||
</nav>
|
||
<div class="spacer"></div>
|
||
<span class="role"><span class="d"></span>교수자</span>
|
||
<div class="who">
|
||
<span class="av">정</span>
|
||
<span class="nm">정민서</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ 페이지 헤더 ============ -->
|
||
<div class="pagehead">
|
||
<div class="kicker"><span class="dot"></span>설정</div>
|
||
<h1>계정과 시뮬레이션 환경을 관리합니다</h1>
|
||
<p>프로필, 알림, 가상 내담자 페르소나, 음성, 개인정보 동의를 한곳에서 조정하세요.</p>
|
||
</div>
|
||
|
||
<!-- ============ 레이아웃 ============ -->
|
||
<div class="shell">
|
||
|
||
<!-- 좌측 섹션 내비 -->
|
||
<nav class="sectnav" aria-label="설정 섹션">
|
||
<div class="gk">설정</div>
|
||
<a href="#account" class="on">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
|
||
계정
|
||
</a>
|
||
<a href="#notify">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M10.3 21a2 2 0 0 0 3.4 0"/></svg>
|
||
알림
|
||
</a>
|
||
<a href="#persona">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20c0-3 2.5-5 5.5-5s5.5 2 5.5 5"/><path d="M17 9h4M19 7v4"/></svg>
|
||
페르소나
|
||
</a>
|
||
<a href="#voice">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="21"/></svg>
|
||
음성
|
||
</a>
|
||
<a href="#privacy">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
|
||
개인정보
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- 우측 폼 -->
|
||
<div class="forms">
|
||
|
||
<!-- (1) 계정 -->
|
||
<section class="group" id="account">
|
||
<div class="gh">
|
||
<div class="gt">계정</div>
|
||
<div class="gd">프로필과 역할, 로그인 정보를 관리합니다.</div>
|
||
</div>
|
||
|
||
<div class="profile" style="margin-bottom:var(--sp-5);">
|
||
<div class="big">정</div>
|
||
<div class="meta">
|
||
<div class="n">정민서</div>
|
||
<div class="e">minseo.jung@hanshin.ac.kr</div>
|
||
<div class="badges">
|
||
<span class="tag"><span class="d"></span>교수자</span>
|
||
<span class="tag muted"><span class="d"></span>심리상담학과</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="flab"><span class="l">표시 이름</span><span class="h">학습자·동료에게 보이는 이름입니다.</span></div>
|
||
<div class="fin"><input type="text" value="정민서"></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">이메일</span><span class="h">로그인 및 알림 수신 주소.</span></div>
|
||
<div class="fin"><input type="email" value="minseo.jung@hanshin.ac.kr"></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">소속</span><span class="h">학과·기관 표기.</span></div>
|
||
<div class="fin"><input type="text" value="한신대학교 심리상담학과"></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">역할</span><span class="h">권한 범위가 달라집니다. 변경은 관리자 승인이 필요합니다.</span></div>
|
||
<div class="fin">
|
||
<div class="rolepick">
|
||
<div class="opt"><div class="t"><span class="d"></span>학습자</div><div class="h">상담 연습·내 리뷰</div></div>
|
||
<div class="opt on"><div class="t"><span class="d"></span>교수자</div><div class="h">페르소나 제작·학습자 감독</div></div>
|
||
<div class="opt"><div class="t"><span class="d"></span>관리자</div><div class="h">기관 운영·계정 관리</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gfoot">
|
||
<button class="btn ghost">변경 취소</button>
|
||
<button class="btn primary">저장</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 로그인 / 위험 구역 -->
|
||
<section class="group peril">
|
||
<div class="gh">
|
||
<div class="gt">로그인 및 세션</div>
|
||
<div class="gd">현재 기기와 보안을 관리합니다.</div>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">비밀번호 변경</div><div class="h">마지막 변경: 2026년 3월 12일</div></div>
|
||
<button class="btn ghost sm">변경</button>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">다른 기기에서 로그아웃</div><div class="h">현재 3개 기기에서 로그인 중입니다.</div></div>
|
||
<button class="btn ghost sm">전체 로그아웃</button>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">로그아웃</div><div class="h">이 기기에서 Vignette를 종료합니다.</div></div>
|
||
<button class="btn danger sm">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||
로그아웃
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- (2) 알림 -->
|
||
<section class="group" id="notify">
|
||
<div class="gh">
|
||
<div class="gt">알림</div>
|
||
<div class="gd">언제, 무엇을 받을지 정합니다. 과한 알림은 끄는 편을 권합니다.</div>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">학습자 세션 완료</div><div class="h">담당 학습자가 회기를 마치면 알립니다.</div></div>
|
||
<label class="toggle"><input type="checkbox" checked><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">안전 신호 감지</div><div class="h">세션 중 위기 신호가 포착되면 즉시 알립니다.</div></div>
|
||
<label class="toggle"><input type="checkbox" checked><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">주간 리뷰 요약</div><div class="h">매주 월요일, 담당 학습자 진척 요약을 메일로 보냅니다.</div></div>
|
||
<label class="toggle"><input type="checkbox"><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">제품 소식</div><div class="h">기능 업데이트·연구 노트.</div></div>
|
||
<label class="toggle"><input type="checkbox"><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- (3) 페르소나 설정 진입 (교수자) -->
|
||
<section class="group" id="persona">
|
||
<div class="gh">
|
||
<div class="gt">가상 내담자 페르소나</div>
|
||
<div class="gd">학습자가 상담 연습할 가상 내담자를 만들고 편집합니다. 외형·음성·성격·난이도를 조정해 시나리오를 설계하세요.</div>
|
||
</div>
|
||
|
||
<div class="personalist">
|
||
<div class="pcard">
|
||
<div class="face">
|
||
<svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
|
||
<rect width="48" height="48" fill="#2E3A36"/>
|
||
<path d="M10 48 C10 39 16 34 24 34 C32 34 38 39 38 48 Z" fill="#3C4A45"/>
|
||
<path d="M15 22 C15 14 19 11 24 11 C29 11 33 14 33 22 L33 30 C33 38 29 41 24 41 C19 41 15 38 15 30 Z" fill="#E8C9A8"/>
|
||
<path d="M14 23 C14 14 18 10 24 10 C30 10 34 14 34 23 C31 18 27 17 24 17 C21 17 17 18 14 23 Z" fill="#2B2723"/>
|
||
<circle cx="20.5" cy="24" r="1.5" fill="#3A2E26"/><circle cx="27.5" cy="24" r="1.5" fill="#3A2E26"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pinfo">
|
||
<div class="pn">서연</div>
|
||
<div class="pm">17세 · 고2 · 우울 호소 청소년</div>
|
||
<div class="ptags"><span class="pchip">teen</span><span class="pchip clay">방어적</span><span class="pchip">난이도 중상</span></div>
|
||
</div>
|
||
<div class="pact">
|
||
<button class="iconbtn" aria-label="편집">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
|
||
</button>
|
||
<button class="iconbtn" aria-label="복제">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pcard">
|
||
<div class="face">
|
||
<svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
|
||
<rect width="48" height="48" fill="#2E3A36"/>
|
||
<path d="M10 48 C10 39 16 34 24 34 C32 34 38 39 38 48 Z" fill="#46504C"/>
|
||
<path d="M16 22 C16 15 19 12 24 12 C29 12 32 15 32 22 L32 29 C32 36 29 39 24 39 C19 39 16 36 16 29 Z" fill="#D8B594"/>
|
||
<path d="M16 19 C16 13 19 11 24 11 C29 11 32 13 32 19 C29 16 27 16 24 16 C21 16 19 16 16 19 Z" fill="#3A332C"/>
|
||
<circle cx="20.5" cy="24" r="1.5" fill="#3A2E26"/><circle cx="27.5" cy="24" r="1.5" fill="#3A2E26"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pinfo">
|
||
<div class="pn">강현우</div>
|
||
<div class="pm">34세 · 직장인 · 번아웃·불안</div>
|
||
<div class="ptags"><span class="pchip">adult</span><span class="pchip">회피적</span><span class="pchip">난이도 상</span></div>
|
||
</div>
|
||
<div class="pact">
|
||
<button class="iconbtn" aria-label="편집">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
|
||
</button>
|
||
<button class="iconbtn" aria-label="복제">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="addrow">
|
||
<span class="pl"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
<div>
|
||
<div class="at">새 가상 내담자 만들기</div>
|
||
<div class="ah">외형·음성·성격·난이도를 설계해 시나리오를 추가합니다.</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- 편집 진입 시 보이는 파라미터 미리보기 (서연 편집 펼침 예시) -->
|
||
<div style="margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--paper-2);">
|
||
<div class="kicker" style="font-family:var(--font-num); font-size:11px; font-weight:600; letter-spacing:0.08em; color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-5);">
|
||
<span style="width:6px;height:6px;border-radius:50%;background:var(--accent-bright);"></span>편집 중 · 서연
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="flab"><span class="l">연령대 외형</span><span class="h">눈 크기·턱선·실루엣이 연령대에 맞춰 조정됩니다.</span></div>
|
||
<div class="fin">
|
||
<select>
|
||
<option>청소년 (teen)</option>
|
||
<option>청년 (young adult)</option>
|
||
<option>성인 (adult)</option>
|
||
<option>노년 (senior)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">시작 정서</span><span class="h">세션 초반의 기본 정서 상태.</span></div>
|
||
<div class="fin">
|
||
<select>
|
||
<option>불안 (고각성·부정)</option>
|
||
<option>우울 (저각성·부정)</option>
|
||
<option>중립·라포</option>
|
||
<option>저항·방어</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">호소 문제</span><span class="h">학습자에게 제시될 배경 시나리오.</span></div>
|
||
<div class="fin"><textarea>2주째 지속되는 무기력과 등교 거부. 최근 성적 하락과 또래 관계 위축을 경험. 자기개방에 소극적이며 방어적.</textarea></div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">저항 강도</span><span class="h">높을수록 라포 형성이 어렵습니다. 라포가 쌓이면 세션 중 점차 완화됩니다.</span></div>
|
||
<div class="fin">
|
||
<div class="slider">
|
||
<div class="track"><div class="fill" style="width:60%"></div><div class="knob" style="left:60%"></div></div>
|
||
<div class="scale"><span>낮음</span><span class="on">중상</span><span>높음</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="flab"><span class="l">음성 (voice_id)</span><span class="h">내담자 발화에 사용할 목소리.</span></div>
|
||
<div class="fin">
|
||
<select>
|
||
<option>soft-young-fem · 부드럽고 높은 톤</option>
|
||
<option>calm-adult-fem · 차분한 여성</option>
|
||
<option>steady-adult-male · 안정적 남성</option>
|
||
<option>warm-senior · 느리고 따뜻한</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gfoot">
|
||
<button class="btn ghost">미리듣기</button>
|
||
<button class="btn primary">페르소나 저장</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- (4) 음성 -->
|
||
<section class="group" id="voice">
|
||
<div class="gh">
|
||
<div class="gt">음성</div>
|
||
<div class="gd">시연·미리듣기에 쓰이는 기본 목소리를 고릅니다. 페르소나별 음성은 위에서 따로 지정합니다.</div>
|
||
</div>
|
||
|
||
<div class="voicelist">
|
||
<label class="voice on">
|
||
<span class="rad"></span>
|
||
<div class="vinfo"><div class="vn">서린 · soft-young-fem</div><div class="vd">부드럽고 높은 톤 · 청소년 내담자에 적합</div></div>
|
||
<span class="play" aria-label="미리듣기"><svg viewBox="0 0 24 24" stroke-width="0"><polygon points="6 4 20 12 6 20"/></svg></span>
|
||
</label>
|
||
<label class="voice">
|
||
<span class="rad"></span>
|
||
<div class="vinfo"><div class="vn">하경 · calm-adult-fem</div><div class="vd">차분한 여성 · 표준 성인 톤</div></div>
|
||
<span class="play" aria-label="미리듣기"><svg viewBox="0 0 24 24" stroke-width="0"><polygon points="6 4 20 12 6 20"/></svg></span>
|
||
</label>
|
||
<label class="voice">
|
||
<span class="rad"></span>
|
||
<div class="vinfo"><div class="vn">도현 · steady-adult-male</div><div class="vd">낮고 안정적 · 남성 내담자</div></div>
|
||
<span class="play" aria-label="미리듣기"><svg viewBox="0 0 24 24" stroke-width="0"><polygon points="6 4 20 12 6 20"/></svg></span>
|
||
</label>
|
||
<label class="voice">
|
||
<span class="rad"></span>
|
||
<div class="vinfo"><div class="vn">정인 · warm-senior</div><div class="vd">느리고 따뜻한 · 노년 내담자</div></div>
|
||
<span class="play" aria-label="미리듣기"><svg viewBox="0 0 24 24" stroke-width="0"><polygon points="6 4 20 12 6 20"/></svg></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="field" style="margin-top:var(--sp-5); border-top:1px solid var(--paper-2);">
|
||
<div class="flab"><span class="l">말하기 속도</span><span class="h">기본 발화 속도(rate). 1.0이 표준입니다.</span></div>
|
||
<div class="fin">
|
||
<div class="slider">
|
||
<div class="track"><div class="fill" style="width:46%"></div><div class="knob" style="left:46%"></div></div>
|
||
<div class="scale"><span>0.8×</span><span class="on">0.96×</span><span>1.2×</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- (5) 개인정보 / 동의 관리 -->
|
||
<section class="group" id="privacy">
|
||
<div class="gh">
|
||
<div class="gt">개인정보 및 동의</div>
|
||
<div class="gd">상담 연습 기록의 보관과 활용 범위를 직접 관리합니다.</div>
|
||
</div>
|
||
|
||
<div class="callout info" style="margin-bottom:var(--sp-5);">
|
||
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="8" r="0.6" fill="currentColor"/></svg></span>
|
||
<span class="ct">세션 음성·자막은 <strong>학습 목적 슈퍼비전</strong>에만 쓰이며, 가상 내담자와의 대화이므로 실제 내담자 개인정보는 포함되지 않습니다. 보관 기간이 지나면 자동 삭제됩니다.</span>
|
||
</div>
|
||
|
||
<div class="consent">
|
||
<div class="ci">
|
||
<div class="ct">슈퍼비전용 녹음 보관 <span class="st ok">동의함</span></div>
|
||
<div class="ch">담당 교수자가 회기말 리뷰에서 음성을 다시 들을 수 있도록 회기 녹음을 보관합니다.</div>
|
||
</div>
|
||
<label class="toggle"><input type="checkbox" checked><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
<div class="consent">
|
||
<div class="ci">
|
||
<div class="ct">연구·모델 개선 활용 <span class="st pending">검토 필요</span></div>
|
||
<div class="ch">비식별화된 대화 데이터를 평가 AI 개선 연구에 활용합니다. 동의는 선택이며 언제든 철회할 수 있습니다.</div>
|
||
</div>
|
||
<label class="toggle"><input type="checkbox"><span class="tr"></span><span class="kn"></span></label>
|
||
</div>
|
||
|
||
<div class="field" style="border-top:1px solid var(--paper-2);">
|
||
<div class="flab"><span class="l">기록 보관 기간</span><span class="h">기간이 지난 회기 기록은 자동 삭제됩니다.</span></div>
|
||
<div class="fin">
|
||
<select>
|
||
<option>90일 (권장)</option>
|
||
<option>30일</option>
|
||
<option>180일</option>
|
||
<option>학기 종료 시</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">내 데이터 내보내기</div><div class="h">내 모든 세션·리뷰 기록을 PDF·JSON으로 받습니다.</div></div>
|
||
<button class="btn ghost sm">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
내보내기
|
||
</button>
|
||
</div>
|
||
<div class="optrow">
|
||
<div class="ot"><div class="l">모든 기록 삭제</div><div class="h">복구할 수 없습니다. 진행 전 한 번 더 확인합니다.</div></div>
|
||
<button class="btn danger sm">기록 삭제</button>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|