Entry
원본: projects/skill-lens/design/components/Entry/README.md
상태: In Progress, 접근성 ✓, 다크 보류, 코드 ✗
입구 폰(8판 login~0 폰): 렌즈 120 가운데, 큰 워드마크 56, 카드 안은 왼쪽
첫 화면(로그인, 비밀번호 만들기)입니다. 원본은 8판 login~0과 setpw. 빛 이미지 바탕, 오른쪽 큰 렌즈, 큰 워드마크와 한 줄, 유리 카드 하나.
쓰는 곳
로그인, 비밀번호 만들기, 비밀번호 찾기. PC 꼴은 EntryPC 견본, 마침은 같은 틀의 sl-entry--done(Completion).
구성(화면이 넘겨줄 것)
로그인 처리, 바뀌는 한 줄 문구, 링크 줄, 렌즈 자리에 MARK('ent').
규칙
- 틀:
sl-entry>sl-entry__lens,sl-entry__top,sl-entry__work>sl-entry__col>sl-entry__head+sl-entry__panel. - 제목은 큰 워드마크만(
sl-wordmark--xl, PC 72, 폰 56, 한 색). 그 아래 한 줄(sl-rotline, "스킬을 보는 눈"). 위 왼쪽 작은 워드마크는 로그인에서 숨깁니다. - PC: 본문 왼쪽 72, 위 고정선 168(화면마다 같음), 묶음 폭 560 사이 28, 유리 카드 440(흰 62% + 블러 18, 둥글기 24, 안쪽 32). 렌즈 500은 오른쪽 9%, 커서를 따라 12도까지 기울어집니다.
- 폰: 렌즈 120 가운데 위 80, 본문 위 168. 렌즈와 제목과 부제만 가운데, 카드(흰 92%, 안쪽 16, 둥글기 14) 안은 왼쪽.
- 입력 묶음은
sl-form(라벨과 칸 6, 묶음 20, 마지막 칸과 주 버튼 20). - 로그인 아래 링크 한 줄(
sl-linkrow): 왼쪽 비밀번호 찾기(14 먹색), 오른쪽 이용약관과 개인정보 처리방침(13 회색). 주 버튼과 12 떨어짐. - 동의 줄(
sl-agrees>sl-agree): 체크 24 + 10 + 글 14, 문서 이름 낱말에 밑줄, "보기" 없음. - SSO는 제품에 없으므로 그리지 않습니다.
- 상태: 조직 고르기(시트), 잠금(5회 실패, 확인 창), 세션 만료(확인 창). 밤색 입구는
sl-entry--night(NightPanel).
접근성
- 움직임 줄이기에서 렌즈는 정지 꼴(
MARK(false)), 기울기 없음. - 링크와 동의 낱말의 누름 영역은 24 이상.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=844 width=390 subtitle="입구 폰(8판 login~0 폰): 렌즈 120 가운데, 큰 워드마크 56, 카드 안은 왼쪽" -->
<style>body{margin:0}.sl-entry{min-height:844px}</style>
<div class="sl sl-entry">
<div class="sl-entry__lens" aria-hidden="true"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mk2-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mk2-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mk2-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mk2-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mk2-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mk2-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mk2-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mk2-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath><clipPath id="mk2-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath><clipPath id="mk2-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mk2-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mk2-gbe)"><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><g clip-path="url(#mk2-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk2-gb)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk2-gbs)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk2-gbg)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk2-gf)"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk2-go)" clip-path="url(#mk2-cb)" opacity="0.93"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><g clip-path="url(#mk2-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk2-ge)"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk2-gf)"><animate attributeName="cx" from="75" to="29" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="29;30;29" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk2-go)" clip-path="url(#mk2-cb)" opacity="0.93"><animate attributeName="cx" from="75" to="29" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="29;30;29" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g></svg></div>
<div class="sl-entry__top"><span class="sl-wordmark"><i class="sl-topbar__mark" aria-hidden="true"></i><span class="sl-wordmark__text">Sk<span class="r1">i</span><span class="r2">l</span><span class="r3">l</span>Lens</span></span></div>
<div class="sl-entry__work"><div class="sl-entry__col">
<div class="sl-entry__head"><h1 class="sl-entry__title"><span class="sl-wordmark sl-wordmark--xl"><span class="sl-wordmark__text">Sk<span class="r1">i</span><span class="r2">l</span><span class="r3">l</span>Lens</span></span></h1><p class="sl-rotline">스킬을 보는 눈</p></div>
<div class="sl-entry__panel"><form class="sl-form" onsubmit="return false">
<label class="sl-field"><span class="sl-field__label">회사 이메일</span><span class="sl-field__box"><input class="sl-field__input" value="hojun@gaon.co.kr" autocomplete="username"></span></label>
<label class="sl-field"><span class="sl-field__label">비밀번호</span><span class="sl-field__box"><input class="sl-field__input" type="password" value="password" autocomplete="current-password"></span></label>
<button class="sl-btn sl-btn--primary">로그인</button>
<div class="sl-linkrow"><a class="sl-linkrow__main" href="#">비밀번호 찾기</a><span class="sl-linkrow__legal"><a href="#">이용약관</a><a href="#">개인정보 처리방침</a></span></div>
</form></div>
</div></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.