Layar masuk
Layar pertama yang dilihat orang — pakai saat apa yang dijual dan tempat mengisi harus langsung terbaca.
Pratinjau langsung
Sumber
<script>document.body.className="dc-bleed"</script>
<div class="dc-lgs">
<aside class="dc-lgs__brand">
<p class="dc-lgs__logo"><span class="dc-lgs__mark" aria-hidden="true">단</span> 단비근로</p>
<p class="dc-lgs__pitch">근로계약서와 급여명세서를<br>여섯 개 언어로 한 번에</p>
<p class="dc-lgs__pitch-sub">전국 1,240개 사업장이 단비근로로 서류를 보냅니다.</p>
<ul class="dc-lgs__points">
<li class="dc-lgs__point">표준 근로계약서 자동 작성 · 전자서명</li>
<li class="dc-lgs__point">급여명세서 6개 언어 동시 발급</li>
<li class="dc-lgs__point">4대보험 신고 자료 내보내기</li>
</ul>
<blockquote class="dc-lgs__quote">“계약서 번역을 외주로 맡기던 일이 없어졌어요. 입사 첫날에 바로 서명을 받습니다.”
<span class="dc-lgs__quote-who">김현수 · 미소식품 인사팀장</span>
</blockquote>
</aside>
<main class="dc-lgs__main">
<header class="dc-lgs__top">
<p class="dc-lgs__top-logo">단비근로</p>
<label class="dc-lgs__lang">
<span class="dc-sr">화면 언어</span>
<select class="dc-lgs__lang-sel" name="lang">
<option selected>한국어</option>
<option>English</option>
<option>Tiếng Việt</option>
<option>नेपाली</option>
<option>ភាសាខ្មែរ</option>
<option>Bahasa Indonesia</option>
</select>
</label>
</header>
<form class="dc-lgs__form" action="#" method="post" novalidate>
<h1 class="dc-lgs__title">로그인</h1>
<p class="dc-lgs__sub">가입할 때 쓴 회사 이메일로 들어오세요.</p>
<div class="dc-lgs__field">
<label class="dc-lgs__label" for="dc-lgs-id">이메일</label>
<input class="dc-lgs__input" id="dc-lgs-id" name="email" type="email" inputmode="email" autocomplete="username" placeholder="[email protected]" value="[email protected]">
</div>
<div class="dc-lgs__field">
<label class="dc-lgs__label" for="dc-lgs-pw">비밀번호</label>
<input class="dc-lgs__input" id="dc-lgs-pw" name="password" type="password" autocomplete="current-password" value="misofood!2026">
</div>
<div class="dc-lgs__row">
<label class="dc-lgs__check">
<input class="dc-lgs__checkbox" type="checkbox" name="remember" checked>
<span>이 기기에서 로그인 유지</span>
</label>
<a class="dc-lgs__link" href="#">비밀번호를 잊었어요</a>
</div>
<button class="dc-lgs__submit" type="submit">로그인</button>
<p class="dc-lgs__divider">또는</p>
<div class="dc-lgs__social">
<button class="dc-lgs__social-btn" type="button">카카오 계정으로 계속하기</button>
<button class="dc-lgs__social-btn" type="button">회사 SSO 로 계속하기</button>
</div>
<p class="dc-lgs__sub">아직 계정이 없으세요? <a class="dc-lgs__link" href="#">사업장 등록하기</a></p>
</form>
<footer class="dc-lgs__foot">
© 2026 단비근로 · <a class="dc-lgs__link" href="#">이용약관</a> · <a class="dc-lgs__link" href="#">개인정보 처리방침</a>
</footer>
</main>
</div>.dc-lgs { display:grid; grid-template-columns:1.02fr .98fr; min-height:700px; background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); }
.dc-lgs__brand { display:flex; flex-direction:column; gap:var(--dc-5); padding:var(--dc-8) var(--dc-7); background:var(--dc-brand-soft); color:var(--dc-brand-text); border-right:1px solid var(--dc-line); }
.dc-lgs__logo { display:flex; align-items:center; gap:var(--dc-2); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.dc-lgs__mark { display:grid; place-items:center; width:28px; height:28px; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; }
.dc-lgs__pitch { margin-top:auto; font-size:30px; line-height:1.3; font-weight:800; letter-spacing:-.02em; }
.dc-lgs__pitch-sub { font-size:14px; color:var(--dc-brand-text); opacity:.85; }
.dc-lgs__points { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-lgs__point { position:relative; padding-left:var(--dc-6); font-size:14px; line-height:1.5; }
.dc-lgs__point::before { content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--dc-brand); }
.dc-lgs__quote { margin-top:auto; padding:var(--dc-4); border-radius:var(--dc-r-md); background:var(--dc-surface); border:1px solid var(--dc-line); color:var(--dc-text-sub); font-size:13px; line-height:1.6; }
.dc-lgs__quote-who { display:block; margin-top:var(--dc-2); color:var(--dc-text-mute); font-size:12px; }
.dc-lgs__main { display:flex; flex-direction:column; padding:var(--dc-5) var(--dc-7) var(--dc-5); background:var(--dc-surface); }
.dc-lgs__top { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); min-height:48px; }
.dc-lgs__top-logo { font-size:14px; font-weight:700; color:var(--dc-text); }
.dc-lgs__lang { display:inline-flex; align-items:center; }
.dc-lgs__lang-sel { min-height:40px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:13px; }
.dc-lgs__form { display:flex; flex-direction:column; gap:var(--dc-4); width:100%; max-width:380px; margin:auto; padding:var(--dc-6) 0; }
.dc-lgs__title { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.dc-lgs__sub { font-size:13px; color:var(--dc-text-sub); }
.dc-lgs__alert { padding:var(--dc-3); border:1px solid var(--dc-danger); border-radius:var(--dc-r-sm); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:13px; line-height:1.5; }
.dc-lgs__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-lgs__label { font-size:13px; font-weight:600; }
.dc-lgs__input { width:100%; min-height:46px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:15px; transition:border-color var(--dc-fast), box-shadow var(--dc-fast); }
.dc-lgs__input::placeholder { color:var(--dc-text-mute); }
.dc-lgs__input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); outline:none; }
.dc-lgs__input--bad { border-color:var(--dc-danger); }
.dc-lgs__err { font-size:12px; color:var(--dc-danger); }
.dc-lgs__row { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); flex-wrap:wrap; }
.dc-lgs__check { display:inline-flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:13px; color:var(--dc-text-sub); cursor:pointer; }
.dc-lgs__checkbox { width:18px; height:18px; accent-color:var(--dc-brand); }
.dc-lgs__link { color:var(--dc-brand); font-size:13px; }
.dc-lgs__submit { min-height:48px; border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; transition:background var(--dc-fast); }
.dc-lgs__submit:hover { background:var(--dc-brand-hi); }
.dc-lgs__divider { display:flex; align-items:center; gap:var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-lgs__divider::before, .dc-lgs__divider::after { content:""; flex:1; height:1px; background:var(--dc-line); }
.dc-lgs__social { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-lgs__social-btn { min-height:46px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; font-weight:600; transition:background var(--dc-fast); }
.dc-lgs__social-btn:hover { background:var(--dc-sunken); }
.dc-lgs__foot { font-size:12px; color:var(--dc-text-mute); text-align:center; }
@media (max-width:760px) {
.dc-lgs { grid-template-columns:1fr; min-height:0; }
.dc-lgs__brand { display:none; }
.dc-lgs__main { padding:var(--dc-4); }
}Cara memakainya
- Cukup dua kolom: email dan sandi; sisanya urusan layar pendaftaran
- Taruh cara masuk yang paling sering dipakai pengguna lama di atas; tombol media sosial di bawah kolom email kalau bukan jalur utama
- Sembunyikan kolom perkenalan di layar sempit agar formulir tidak terdorong ke bawah
Hal yang perlu diwaspadai
- Jangan beri tahu mana yang salah, email atau sandi, pada pesan kegagalan
- Isi autocomplete dengan username dan current-password agar pengelola sandi bisa mengisi
- Tanpa role="alert" pada pesan galat, pembaca layar tidak tahu bahwa masuk gagal