feat(docs): 전체 페이지 레이아웃 시안 추가
- login/learner-home/session-review/professor/admin/settings - session-v2(밝은 에디토리얼 톤으로 재제작, 기존 어두운 stage 대체) - 전부 동일 디자인 토큰(세이지틸+테라코타), 윤찬 철칙 준수
This commit is contained in:
Yun Chan
parent
204726f707
commit
d5b86c5f89
8 changed files with 3723 additions and 486 deletions
341
docs/mockups/login.html
Normal file
341
docs/mockups/login.html
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
<!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 — AI 심리상담 시뮬레이션 훈련 플랫폼 · 로그인 시안 (단일 파일)
|
||||
토큰: DESIGN_CONCEPT.md §3 그대로. 외부 의존 = Pretendard CDN 1개.
|
||||
철칙: border-left 0 · 이모지 0(아이콘 inline SVG) · 카드덤프 0 ·
|
||||
순흑/순백 금지 · 강조는 weight/tint/kicker/dot로 · 넉넉한 여백.
|
||||
레이아웃: 좌(브랜드+가치제안 1문장) / 우(OAuth 진입). 에디토리얼 미니멀.
|
||||
===================================================================== */
|
||||
:root{
|
||||
/* 중성 베이스 (따뜻한 종이 + 잉크 네이비-그린) */
|
||||
--paper:#FBFAF8; --paper-2:#F4F2EE; --surface:#FFFFFF;
|
||||
--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;
|
||||
/* 의미색 */
|
||||
--info-text:#2E5A7A; --info-solid:#3C7299; --info-tint:#EAF1F6;
|
||||
/* stage / 좌측 브랜드 패널 */
|
||||
--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-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
|
||||
--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);
|
||||
}
|
||||
*{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; flex:none; background:var(--surface);
|
||||
border-bottom:1px solid var(--hair);
|
||||
display:flex; align-items:center; gap:var(--sp-5);
|
||||
padding:0 var(--sp-7);
|
||||
}
|
||||
.wordmark{display:flex; align-items:baseline; gap:9px; text-decoration:none;}
|
||||
.wordmark .nm{font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-0.02em;}
|
||||
.wordmark .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); align-self:center;}
|
||||
.wordmark .sub{font-family:var(--font-num); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3);}
|
||||
.topbar .role{
|
||||
margin-left:auto; display:flex; align-items:center; gap:8px;
|
||||
font-size:12px; color:var(--ink-3); font-weight:500;
|
||||
}
|
||||
.topbar .role .pill{
|
||||
display:inline-flex; align-items:center; gap:7px;
|
||||
background:var(--accent-tint); color:var(--accent-deep);
|
||||
font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
|
||||
}
|
||||
.topbar .role .pill .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}
|
||||
.topbar .nav{display:flex; align-items:center; gap:var(--sp-5);}
|
||||
.topbar .nav a{font-size:13px; color:var(--ink-3); text-decoration:none; font-weight:500;}
|
||||
.topbar .nav a:hover{color:var(--ink-2);}
|
||||
.topbar .nav a.cur{color:var(--ink); font-weight:600;}
|
||||
|
||||
/* ============ 본문: 2분할 (좌 브랜드 / 우 진입) ============ */
|
||||
.shell{min-height:calc(100vh - 56px); display:grid; grid-template-columns:1.05fr 1fr;}
|
||||
|
||||
/* ---- LEFT: 브랜드 / 한 문장 가치제안 ---- */
|
||||
.brand{
|
||||
background:var(--bg-stage); color:#E8EEF2; position:relative; overflow:hidden;
|
||||
display:flex; flex-direction:column; justify-content:space-between;
|
||||
padding:var(--sp-9) var(--sp-8);
|
||||
}
|
||||
/* 은은한 광배 — 깊은 차콜그린 위 세이지/클레이 라디얼, 자극 없이 */
|
||||
.brand::before{
|
||||
content:""; position:absolute; width:520px; height:520px; border-radius:50%;
|
||||
top:-160px; right:-180px;
|
||||
background:radial-gradient(circle, rgba(95,150,139,.20) 0%, transparent 68%);
|
||||
animation:auraB 9s ease-in-out infinite;
|
||||
}
|
||||
.brand::after{
|
||||
content:""; position:absolute; width:380px; height:380px; border-radius:50%;
|
||||
bottom:-140px; left:-120px;
|
||||
background:radial-gradient(circle, rgba(176,115,92,.13) 0%, transparent 70%);
|
||||
}
|
||||
@keyframes auraB{0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.04)}}
|
||||
|
||||
.brand .top{position:relative; z-index:1;}
|
||||
.brand .kicker{
|
||||
font-family:var(--font-num); font-size:12px; font-weight:600;
|
||||
letter-spacing:0.12em; text-transform:uppercase; color:rgba(232,238,242,.62);
|
||||
display:flex; align-items:center; gap:9px;
|
||||
}
|
||||
.brand .kicker .d{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
||||
|
||||
.brand .lede{position:relative; z-index:1; max-width:480px;}
|
||||
.brand .lede h1{
|
||||
font-size:38px; line-height:1.32; font-weight:700; letter-spacing:-0.02em;
|
||||
color:#F2F6F6;
|
||||
}
|
||||
.brand .lede h1 .em{color:var(--accent-bright); font-weight:700;}
|
||||
.brand .lede p{
|
||||
margin-top:var(--sp-5); font-size:16px; line-height:1.7;
|
||||
color:rgba(232,238,242,.7); max-width:420px;
|
||||
}
|
||||
|
||||
/* 좌측 하단 메타 — 3역할 한 줄, 조용히 */
|
||||
.brand .foot{position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--sp-4);}
|
||||
.brand .roles{display:flex; align-items:center; gap:var(--sp-5);}
|
||||
.brand .roles .r{display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(232,238,242,.66);}
|
||||
.brand .roles .r .d{width:7px; height:7px; border-radius:50%;}
|
||||
.brand .roles .r .d.learner{background:var(--accent-bright);}
|
||||
.brand .roles .r .d.instructor{background:#5478C4;}
|
||||
.brand .roles .r .d.admin{background:#9DA1AE;}
|
||||
.brand .roles .sep{width:1px; height:13px; background:rgba(232,238,242,.18);}
|
||||
.brand .ethic{
|
||||
font-size:13px; line-height:1.6; color:rgba(232,238,242,.5);
|
||||
border-top:1px solid rgba(232,238,242,.12); padding-top:var(--sp-4); max-width:440px;
|
||||
}
|
||||
|
||||
/* ---- RIGHT: OAuth 진입 ---- */
|
||||
.enter{
|
||||
background:var(--paper);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
padding:var(--sp-8) var(--sp-7);
|
||||
}
|
||||
.panel{width:100%; max-width:392px;}
|
||||
|
||||
.panel .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:var(--sp-4);
|
||||
}
|
||||
.panel .kicker .d{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
||||
.panel h2{font-size:24px; font-weight:700; letter-spacing:-0.015em; color:var(--ink);}
|
||||
.panel .lead{margin-top:10px; font-size:15px; line-height:1.65; color:var(--ink-2); max-width:340px;}
|
||||
|
||||
/* OAuth 버튼 묶음 */
|
||||
.oauth{margin-top:var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-3);}
|
||||
.oauth .obtn{
|
||||
width:100%; display:flex; align-items:center; gap:14px;
|
||||
padding:14px 18px; border-radius:var(--radius);
|
||||
font-family:var(--font-sans); font-size:15px; font-weight:600; cursor:pointer;
|
||||
transition:border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .16s var(--ease-out);
|
||||
text-align:left;
|
||||
}
|
||||
/* 한신대 계정 = 주 경로 (accent, primary) */
|
||||
.oauth .obtn.primary{
|
||||
background:var(--accent); border:1px solid var(--accent); color:var(--text-on-accent);
|
||||
}
|
||||
.oauth .obtn.primary:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
|
||||
.oauth .obtn.primary:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus-ring);}
|
||||
.oauth .obtn.primary .ic{background:rgba(251,250,248,.16);}
|
||||
.oauth .obtn.primary .ic svg{stroke:var(--text-on-accent);}
|
||||
.oauth .obtn.primary .sub{color:rgba(251,250,248,.72);}
|
||||
/* Google = 보조 경로 (surface, secondary) */
|
||||
.oauth .obtn.secondary{
|
||||
background:var(--surface); border:1px solid var(--neutral-150); color:var(--ink);
|
||||
}
|
||||
.oauth .obtn.secondary:hover{border-color:var(--neutral-200); background:#FCFCFB;}
|
||||
.oauth .obtn.secondary:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus-ring); border-color:var(--accent);}
|
||||
|
||||
.oauth .obtn .ic{
|
||||
width:34px; height:34px; border-radius:8px; flex:none;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
background:var(--paper-2);
|
||||
}
|
||||
.oauth .obtn .ic svg{width:19px; height:19px;}
|
||||
.oauth .obtn .txt{display:flex; flex-direction:column; gap:1px; line-height:1.4;}
|
||||
.oauth .obtn .sub{font-size:12px; font-weight:500; color:var(--ink-3);}
|
||||
.oauth .obtn .arrow{margin-left:auto; display:flex; align-items:center;}
|
||||
.oauth .obtn .arrow svg{width:18px; height:18px;}
|
||||
.oauth .obtn.primary .arrow svg{stroke:rgba(251,250,248,.8);}
|
||||
.oauth .obtn.secondary .arrow svg{stroke:var(--ink-3);}
|
||||
|
||||
/* 구분선 (텍스트 라벨, 좌측바 없음) */
|
||||
.divider{display:flex; align-items:center; gap:var(--sp-4); margin:var(--sp-5) 0;}
|
||||
.divider .ln{flex:1; height:1px; background:var(--hair);}
|
||||
.divider .lb{font-size:12px; color:var(--ink-3); font-weight:500; letter-spacing:0.02em;}
|
||||
|
||||
/* 비치료 도구 고지 (info tint, dot+kicker — 좌측바 금지) */
|
||||
.notice{
|
||||
background:var(--info-tint); border-radius:var(--radius);
|
||||
padding:14px 16px; display:flex; gap:11px; align-items:flex-start;
|
||||
}
|
||||
.notice .ic{flex:none; margin-top:1px;}
|
||||
.notice .ic svg{width:16px; height:16px; stroke:var(--info-solid); display:block;}
|
||||
.notice .tx{font-size:12.5px; line-height:1.6; color:var(--info-text);}
|
||||
.notice .tx b{font-weight:600;}
|
||||
|
||||
/* 하단 보조 링크 */
|
||||
.panel .help{
|
||||
margin-top:var(--sp-6); font-size:13px; color:var(--ink-3); line-height:1.7;
|
||||
}
|
||||
.panel .help a{color:var(--accent-deep); text-decoration:none; font-weight:600;}
|
||||
.panel .help a:hover{text-decoration:underline;}
|
||||
|
||||
/* ============ 반응형 ============ */
|
||||
@media (max-width:920px){
|
||||
.shell{grid-template-columns:1fr;}
|
||||
.brand{padding:var(--sp-8) var(--sp-7) var(--sp-7); min-height:auto; gap:var(--sp-7);}
|
||||
.brand .lede h1{font-size:30px;}
|
||||
.enter{padding:var(--sp-8) var(--sp-5);}
|
||||
.topbar{padding:0 var(--sp-5);}
|
||||
.topbar .nav{display:none;}
|
||||
}
|
||||
@media (max-width:520px){
|
||||
.brand .lede h1{font-size:26px;}
|
||||
.brand .roles{flex-wrap:wrap; gap:var(--sp-3) var(--sp-4);}
|
||||
.brand .roles .sep{display:none;}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ 공통 헤더 ============ -->
|
||||
<header class="topbar">
|
||||
<a class="wordmark" href="#">
|
||||
<span class="nm">Vignette</span>
|
||||
<span class="dot"></span>
|
||||
<span class="sub">상담 시뮬레이션</span>
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="#" class="cur">로그인</a>
|
||||
<a href="#">소개</a>
|
||||
<a href="#">도움말</a>
|
||||
</nav>
|
||||
<div class="role">
|
||||
<span class="pill"><span class="d"></span>로그인 전</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============ 본문 ============ -->
|
||||
<div class="shell">
|
||||
|
||||
<!-- LEFT: 브랜드 + 한 문장 가치제안 -->
|
||||
<section class="brand">
|
||||
<div class="top">
|
||||
<div class="kicker"><span class="d"></span>한신대학교 산학협력</div>
|
||||
</div>
|
||||
|
||||
<div class="lede">
|
||||
<h1>불안한 사람을 마주하는 연습을,<br><span class="em">안전한 자리</span>에서.</h1>
|
||||
<p>가상 내담자와 음성으로 상담을 나누고, 회기가 끝나면 조용히 관찰하던 평가 AI가 당신의 다음 한 마디를 함께 돌아봅니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="roles">
|
||||
<div class="r"><span class="d learner"></span>학습자</div>
|
||||
<span class="sep"></span>
|
||||
<div class="r"><span class="d instructor"></span>교수자</div>
|
||||
<span class="sep"></span>
|
||||
<div class="r"><span class="d admin"></span>관리자</div>
|
||||
</div>
|
||||
<div class="ethic">교육·훈련을 위한 시뮬레이션 도구입니다. 실제 심리치료나 임상 진단을 대체하지 않습니다.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RIGHT: OAuth 진입 -->
|
||||
<section class="enter">
|
||||
<div class="panel">
|
||||
<div class="kicker"><span class="d"></span>계정으로 시작</div>
|
||||
<h2>다시 오셨네요.</h2>
|
||||
<p class="lead">학교 계정으로 들어오면 역할에 맞는 화면으로 바로 안내합니다.</p>
|
||||
|
||||
<div class="oauth">
|
||||
<!-- 한신대 계정 = 주 경로 -->
|
||||
<button class="obtn primary">
|
||||
<span class="ic">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9.5 12 4l9 5.5"/><path d="M5 11v7h14v-7"/><path d="M9 18v-4h6v4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="txt">
|
||||
한신대학교 계정으로 계속
|
||||
<span class="sub">@hs.ac.kr 통합 로그인</span>
|
||||
</span>
|
||||
<span class="arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Google = 보조 경로 -->
|
||||
<button class="obtn secondary">
|
||||
<span class="ic">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09Z"/>
|
||||
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.24 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"/>
|
||||
<path fill="#FBBC05" d="M5.84 14.11a6.6 6.6 0 0 1 0-4.22V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84Z"/>
|
||||
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.29 9.14 5.38 12 5.38Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="txt">
|
||||
Google 계정으로 계속
|
||||
<span class="sub">개인 Google 워크스페이스</span>
|
||||
</span>
|
||||
<span class="arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="divider">
|
||||
<span class="ln"></span><span class="lb">안내</span><span class="ln"></span>
|
||||
</div>
|
||||
|
||||
<!-- 교육용 비치료 도구 고지 -->
|
||||
<div class="notice">
|
||||
<span class="ic">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12" y2="8"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="tx"><b>교육용 비치료 도구</b>입니다. 본 플랫폼의 가상 내담자·피드백은 상담 역량 훈련을 위한 것으로, 실제 치료·진단·위기 개입을 제공하지 않습니다.</span>
|
||||
</div>
|
||||
|
||||
<div class="help">
|
||||
계정 연결에 문제가 있나요? <a href="#">관리자에게 문의</a><br>
|
||||
처음이라면 담당 교수자에게 초대 코드를 받으세요.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue