로그인·가입

계정이 있는 사람은 세 번 눌러 들어가고, 없는 사람은 어디로 가야 하는지 바로 보이는 화면.

실제 미리보기

출처

HTML CSS

<script>document.body.className="dc-bleed"</script>
<div class="dc-au">
  <header class="dc-au__top">
    <p class="dc-au__brand"><span class="dc-au__mark" aria-hidden="true">단</span> 단비근로</p>
    <button class="dc-au__lang" type="button" aria-haspopup="listbox" aria-expanded="false">한국어 <span aria-hidden="true">▾</span></button>
  </header>

  <main class="dc-au__main">
    <h1 class="dc-au__title">다시 만나서 반가워요</h1>
    <p class="dc-au__lead">8월 급여명세서가 도착해 있어요. 로그인하면 바로 볼 수 있습니다.</p>

    <form class="dc-au__form" action="#" method="post">
      <div class="dc-au__field">
        <label class="dc-au__label" for="dc-au-phone">휴대폰 번호</label>
        <input class="dc-au__input" id="dc-au-phone" name="phone" type="tel" inputmode="numeric" autocomplete="username" value="010-4821-5530">
      </div>
      <div class="dc-au__field">
        <label class="dc-au__label" for="dc-au-pw">비밀번호</label>
        <span class="dc-au__wrap">
          <input class="dc-au__input dc-au__input--pw" id="dc-au-pw" name="password" type="password" autocomplete="current-password" value="bishal2026">
          <button class="dc-au__peek" type="button">표시<span class="dc-sr"> 비밀번호 보기</span></button>
        </span>
      </div>
      <label class="dc-au__keep"><input class="dc-au__check" type="checkbox" name="keep" checked> 로그인 상태 유지</label>
      <button class="dc-au__cta" type="submit">로그인</button>
    </form>

    <p class="dc-au__help"><a class="dc-au__link" href="#">비밀번호를 잊었어요</a></p>

    <p class="dc-au__or"><span class="dc-au__or-text">또는</span></p>

    <button class="dc-au__social" type="button"><span class="dc-au__social-ico" aria-hidden="true">K</span> 카카오로 계속하기</button>
    <button class="dc-au__social dc-au__social--naver" type="button"><span class="dc-au__social-ico dc-au__social-ico--naver" aria-hidden="true">N</span> 네이버로 계속하기</button>
  </main>

  <footer class="dc-au__foot">처음이세요? <a class="dc-au__link" href="#">가입하기</a></footer>
</div>

.dc-au { display:flex; flex-direction:column; min-height:100vh; background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); }
.dc-au__top { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-2); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2) var(--dc-4); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-au__brand { display:flex; align-items:center; gap:var(--dc-2); margin-right:auto; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-au__mark { display:grid; place-items:center; width:26px; height:26px; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:800; }
.dc-au__lang { display:inline-flex; align-items:center; gap:var(--dc-1); min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text-sub); font-size:13px; font-weight:700; }
.dc-au__lang:active { background:var(--dc-sunken); }
.dc-au__back { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text); font-size:20px; line-height:1; }
.dc-au__back:active { background:var(--dc-sunken); }
.dc-au__step { margin-right:44px; flex:1 1 auto; text-align:center; font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-au__main { flex:1 1 auto; display:flex; flex-direction:column; gap:var(--dc-3); padding:var(--dc-6) var(--dc-5) var(--dc-5); }
.dc-au__title { font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--dc-text); }
.dc-au__lead { margin-bottom:var(--dc-2); font-size:14px; line-height:1.55; color:var(--dc-text-sub); }
.dc-au__form { display:flex; flex-direction:column; gap:var(--dc-4); }
.dc-au__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-au__label { font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-au__input { width:100%; min-height:50px; 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:16px; }
.dc-au__input--pw { padding-right:68px; letter-spacing:.12em; }
.dc-au__wrap { position:relative; display:block; }
.dc-au__peek { position:absolute; top:3px; right:3px; display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:44px; border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-brand-text); font-size:13px; font-weight:700; }
.dc-au__peek:active { background:var(--dc-sunken); }
.dc-au__inline { display:flex; gap:var(--dc-2); }
.dc-au__mini { flex:0 0 auto; min-width:88px; min-height:50px; padding:0 var(--dc-3); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-family:inherit; font-size:14px; font-weight:700; }
.dc-au__mini:active { background:color-mix(in srgb, var(--dc-brand) 18%, var(--dc-surface)); }
.dc-au__hint { font-size:12px; color:var(--dc-text-mute); }
.dc-au__keep { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:14px; color:var(--dc-text-sub); }
.dc-au__check { width:22px; height:22px; flex:0 0 auto; accent-color:var(--dc-brand); }
.dc-au__terms { display:flex; flex-direction:column; gap:var(--dc-1); padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); }
.dc-au__must { padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:11px; font-weight:800; }
.dc-au__opt { padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-surface); border:1px solid var(--dc-line); color:var(--dc-text-mute); font-size:11px; font-weight:800; }
.dc-au__cta { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:800; }
.dc-au__cta:active { background:var(--dc-brand-hi); }
.dc-au__help { text-align:center; }
.dc-au__link { display:inline-block; padding:var(--dc-1) var(--dc-1); color:var(--dc-brand-text); font-size:14px; font-weight:700; }
.dc-au__or { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-2) 0; color:var(--dc-text-mute); }
.dc-au__or::before, .dc-au__or::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-au__or-text { font-size:12px; font-weight:700; }
.dc-au__social { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); width:100%; min-height:50px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:15px; font-weight:700; }
.dc-au__social:active { background:var(--dc-sunken); }
.dc-au__social--naver { margin-top:var(--dc-2); }
.dc-au__social-ico { display:grid; place-items:center; width:24px; height:24px; border-radius:var(--dc-r-xs); background:var(--dc-warn-soft); color:var(--dc-warn); font-size:13px; font-weight:800; }
.dc-au__social-ico--naver { background:var(--dc-ok-soft); color:var(--dc-ok); }
.dc-au__foot { flex:0 0 auto; padding:var(--dc-4) var(--dc-5) calc(var(--dc-safe-bottom) + var(--dc-4)); border-top:1px solid var(--dc-line); background:var(--dc-surface); text-align:center; font-size:14px; color:var(--dc-text-sub); }

이렇게 씁니다

기존 사용자가 가장 많이 쓰는 방법을 맨 위에 두고, 소셜 버튼은 그 아래에 둔다
가입에는 꼭 필요한 칸만 둔다 — 나머지는 들어온 뒤에 물어도 된다
인증번호 칸에는 남은 시간과 다시 받기를 같이 둔다. 둘이 없으면 사용자는 기다릴지 되돌아갈지 모른다
여러 언어를 쓰는 서비스라면 언어 선택을 로그인 전에 보여 준다

주의할 점

autocomplete 를 username · current-password · new-password 로 정확히 적어 비밀번호 관리자가 채우게 한다
실패 메시지에서 번호가 틀렸는지 비밀번호가 틀렸는지 밝히지 않는다
비밀번호 표시 버튼도 44×44 를 지키고 이름을 dc-sr 로 읽어 준다. placeholder 는 이름표가 아니다

다음에 볼 것

앱 홈 (카드 피드) 화면 예시 앱

상품 상세 (하단 구매 바) 화면 예시 앱

장바구니 화면 예시 앱

마이페이지 화면 예시 앱