디자인 시스템

원본: projects/skill-lens/design/README.md

SkillLens 디자인 시스템입니다. 조직이 스킬을 기준으로 사람과 일을 운영하도록 돕는 B2B 제품의 화면을 같은 규칙으로 만들기 위한 기준입니다. 값의 유일한 출처는 tokens.json이고, 화면 코드는 토큰 이름만 씁니다.

보기용은 문서 사이트 https://skilllens.ideber.com/design/ 입니다(이 저장소에서 자동으로 만들어짐, 공개, 검색 제외). 디자인 시스템 아티팩트는 더 이상 쓰지 않습니다(PM 2026-11-09).

화면 규칙의 원본은 8판 시안입니다. components/bundle.css는 8판 CSS를 부품 단위로 옮긴 것이고, 부품 구역 머리에 8판의 어느 클래스에서 왔는지 적었습니다. 이 문서에는 지금 지킬 규칙만 둡니다. 왜 그렇게 정했는지와 바뀐 이력은 archived/(결정 기록, 변경 이력, 조사 기록)에 있습니다.

1. 원칙

모든 기초 규칙과 부품은 아래 일곱 중 하나에서 나옵니다. 출처는 핵심 가치 V-0(ideber projects/skill-lens/product/01-v0-core-value.md).

1. P1 선명하게. 화면마다 초점 하나: 메시지 하나, 주 버튼 하나, 강조 구절 하나, 보라는 10%.
   출처: 제품 약속 "스킬을 보는 눈".
2. P2 두 시선. 같은 데이터, 두 관점. 조직 SRS와 내 스킬준비도는 같은 부품을 쓰고 이름과 행동만 다릅니다. 로고 렌즈 두 장이 이 뜻입니다.
   출처: V-0 원칙 2.
3. P3 본인 판단이 먼저. 렌지 추천은 누를 때만, 범위로 보입니다. 관리자 화면에는 실무자가 고른 레벨을 바꾸는 입력이 없습니다.
   출처: V-0 원칙 6, 7.
4. P4 모르면 모른다고. 0, 진단 안 함, 확인할 수 없음을 모양으로 구분합니다. 색만으로 뜻을 전하지 않습니다.
   출처: V-0 원칙 3.
5. P5 숫자 옆에 행동. 막다른 화면이 없습니다. 없는 기능은 그리지 않습니다.
   출처: V-0 원칙 1.
6. P6 스킬이 먼저, 사람은 다음. 순위와 상위 n%가 없고, 5명 미만은 숨기고, 히트맵은 스킬이 행입니다.
   출처: V-0 원칙 5와 고민 ③.
7. P7 1,000명에서도 같게. 숫자 칸 필터, 일괄 처리, PC 밀도. PC가 기본이고 폰은 처음과 확인에 씁니다.
   출처: V-0 원칙 4.

창의를 쓸 자리(화면 설계 단계에서 다룸, 디자인 시스템 규칙 아님): 결과 첫 화면(P1), 렌지에게 묻기(P3), 검토 화면(P3), 공백스킬에서 채용으로(P5). 후보 견본은 archived/screen-candidates/.

2. 브랜드

• 한 줄: 스킬을 선명하게 보면, 조직이 움직입니다.
• 렌즈 두 장은 두 시선입니다. 보라 렌즈는 조직의 시선, 라임 쪽 렌즈는 실무자의 시선이고, 겹치는 곳이 초점입니다.
• 서명은 보라, 라임, 유리 렌즈의 묶음입니다. 라임은 렌즈 그라데이션과 진행 막대 같은 작은 장식 자리에만 쓰고, 체크 표시에는 쓰지 않습니다.
• 분위기는 밝고 맑은 유리, 빛, 정밀함입니다.

3. 색

• 주 버튼은 action(검정)입니다. 보라는 선택, 위치, 링크, 브랜드 자리에만 씁니다.
• 보라 skill-blue(#6557F6)는 흰 바탕 4.94:1입니다. 연보라 바탕(skill-blue-tint) 위 작은 글자는 skill-blue-strong(#4F41D8, 6.82:1)을 씁니다.
• 라임, 시안, 산호는 글자, 아이콘, 테두리로 쓰지 않고 채움 면으로만 씁니다. 그 위 글자는 on-accent입니다. 산호를 글자로 써야 하면 change-coral-strong을 change-coral-tint 위에 씁니다.
• 상태색(success, warning, danger)은 단어나 아이콘과 함께 씁니다. 글자는 *-tint 위에, 막대 채움은 *-fill.
• 카드의 윤곽은 border 색의 1px 그림자 링 + shadow-card입니다. 목록 행과 표의 줄 사이, 진행 점과 막대의 빈 곳은 divider. 뜻을 전하는 경계(체크박스, 점선)는 border-strong(3:1 이상).
• 유리(glass)는 틀에만 씁니다: 위 바, 아래 띠. 입구와 마침의 카드는 glass-card(흰 62%) + glass-card-edge. 유리 위 보조 글자는 on-glass-muted.
• 빛 바탕(8판 입구 이미지, assets/Ambient)은 입구와 마침에만 씁니다(sl-entry, sl-ambient). 이미지 아래 색은 ambient-base. 글자 대비는 canvas 기준으로 계산합니다.
• 테마 기준은 Light입니다. Dark 토큰은 유지하지만 검수 전이라 제품 화면은 Light로 고정합니다.
• 왜: 보라 #6557F6은 로고 뒤 렌즈의 색이고 브랜드 보드가 "Lens Violet"이라 이름 붙였습니다. 역할은 조직의 시선과 고른 것(P2). 경쟁 제품 사이에서 구별되는지는 미검증.
• 왜: 주 버튼이 검정인 것은 고른 표시가 보라라서, 누를 것까지 보라면 초점이 묻히기 때문입니다(P1).
• 왜: 라임은 앞 렌즈의 테두리, 실무자의 시선입니다. 흰 바탕 1.13:1이라 신호로 못 쓰고 장식만 됩니다. 체크 표시 금지도 같은 이유입니다.
• 왜: 산호는 부족을 오류 빨강과 다르게 보이려고 씁니다. 진단은 평가가 아닙니다(P6).
• 왜: 유리는 렌즈의 재질이지만 글 읽기를 해치므로 틀에만 씁니다(P1).

4. 글자

• 글꼴은 Pretendard Variable 하나(--font-sans).
• 크기는 정해진 단계만 씁니다: 12, 13, 14, 16, 20, 28, 36, 40, 56, 그리고 입구 PC 72. 12보다 작은 글자는 쓰지 않습니다.
• 위계: 입구 PC 72(워드마크), 입구 폰과 마침 36~56, 작업 화면 제목 PC 28, 온보딩 제목 PC 40과 폰 28, 섹션 20, 카드 제목 16, 본문 16(작업 화면 13), 라벨 14, 캡션 12.
• 제목은 800과 음수 자간, 본문은 400. 자간은 크기에 따라 정해진 곡선을 따릅니다(56과 40은 -4%, 14 이하는 0).
• 제목 안에서 핵심 구절 하나만 sl-accent로 칠합니다.
• 줄은 문장 단위로, 안 되면 뜻 단위로 바꿉니다. 낱말 안에서 끊지 않습니다(content.md "줄바꿈").
• 숫자는 tabular-nums.
• 긴 이름(조직명, 스킬명 등)은 두 줄까지 줄바꿈하고, 넘으면 끝을 줄이고(sl-clamp2) 전체 이름은 마우스를 올리거나 포커스하면 보입니다(title, sl-tip). 한 줄 말줄임은 쓰지 않습니다(DEC-251).
• 왜: 글자 크기 단계와 굵기는 8판 값입니다. 가치에서 나온 이유는 없습니다(바꿀 근거가 생길 때까지 유지). 강조 구절 하나는 P1.

5. 간격, 모양, 그림자

• 간격은 토큰만 씁니다: 4px 단위(space-1 4 ~ space-18 72)와 8판이 쓰는 2, 10, 14(space-0-5, space-2-5, space-3-5).
• 묶음 안 8, 묶음 사이 16, 섹션 사이 24. 입력 묶음은 라벨과 칸 6(space-label), 묶음 사이와 마지막 칸과 주 버튼 사이 20(space-group). 나란한 링크 둘 사이 16(space-link-pair).
• 둥글기(8판): 체크 radius-xs 6, 아이콘 타일 radius-sm 8, 버튼과 입력과 숫자 칸 묶음 radius-md 12, 선택 카드와 렌지 상자 radius-tile 14, 확인 창과 요약 radius-dialog 16, 폰 시트 radius-sheet-phone 18, 카드 radius-lg 20, 틀 카드와 입구 카드 radius-xl 24, 알약 radius-pill.
• 그림자는 토큰만 씁니다: shadow-card, shadow-hover, shadow-sheet, 그리고 8판의 shadow-sheet-side(PC 오른쪽 시트), shadow-dialog, shadow-glass-card, shadow-lens, shadow-thumb.
• 카드 안에 카드를 넣지 않습니다. 묶음은 간격과 소제목으로.
• 왜: 둥글기 12와 간격 값은 8판 값입니다. 가치에서 나온 이유는 없습니다(바꿀 근거가 생길 때까지 유지). 카드 안 카드 금지는 P1.

6. 화면 틀과 반응형

• 틀은 둘입니다. 온보딩과 진단은 Shell(가운데 카드), 매일 쓰는 작업 화면은 AdminShell.
• 구간에 따라 바뀌는 것: 길잡이, 밀도, 겹침(팝오버, 시트), 표(표, 카드), 쪽 넘김. 바뀌지 않는 것: 색, 글자 단계, 둥글기, 간격, 움직임, 말.
• 폰의 주 버튼은 화면 아래 고정이고 본문만 스크롤합니다. 마지막 내용과 포커스를 가리지 않게 본문 아래 여백을 둡니다.

7. 움직임

• 움직임의 주인공은 렌즈 하나이고, 하는 일은 "정렬돼서 포개지기" 하나입니다(Motion).
• 등장: 아래에서 12px 떠오르며 밝아지고, 흐림은 쓰지 않습니다. 520ms, ease-scene. 목록은 60ms 시차, 8행까지.
• 단계 이동: 옆으로 24px 밀며 들어오고(다음은 오른쪽에서, 이전은 왼쪽에서), 흐림은 쓰지 않습니다. 360ms(폰 300). 진행 점 렌즈도 같은 시간.
• 흐림(blur)은 쓰지 않습니다.
• 호버: 큰 카드(누를 수 있는 요약 카드 sl-summary--link, 숫자 카드)만 1px 떠오르고, 행, 표, 히트맵 칸, 레벨 버튼, 검토 항목, 파일 칸은 배경이나 테두리만 바뀌고, 주 버튼은 화살표만 3px 움직입니다. 히트맵 칸은 행과 열 이름이 함께 켜지고 근거와 다음 행동이 뜹니다. 마우스 효과는 (hover:hover) and (pointer:fine)에서만.
• 시간은 크기에 비례합니다: 누르기 100, 떼기와 호버 160~200, 시트 260, 단계 이동 360, 등장 520, 입구 1200.
• 하지 않는 것: 폭죽, 뜻 없는 무한 반복, 스크롤 패럴랙스, 흐르는 글자 그라데이션.
• 움직임 줄이기 설정에서는 모두 최종 상태로 멈춥니다.
• 왜: 렌즈가 포개지는 것은 초점을 맞추는 일입니다(P1). 단계 이동이 가로인 것은 앞과 뒤라는 방향의 뜻이 있어서입니다. 흐림은 뜻이 없어 뺐습니다.

8. 아이콘과 로고

• 아이콘은 Lucide 선 아이콘, 크기 16, 20, 24, 선 1.5(assets/Icons). 이모지와 문자 기호로 대신하지 않습니다.
• 로고는 8판 렌즈 마크 하나입니다(assets/Logo/skilllens-mark.svg, 움직임은 scripts/sl-mark.js). 새로 그리거나 CSS로 다시 그리지 않습니다.
• 워드마크는 한 색이고 i, l, l의 크기 계단(1, 1.07, 1.15배)을 둡니다(sl-wordmark).
• 왜: 렌즈 두 장은 두 시선입니다(P2). 로고를 다시 그리지 않는 것은 출처를 하나로 두기 위해서입니다. 아이콘을 Lucide로 정한 것은 선 굵기가 보드와 같아서이고, 가치에서 나온 이유는 없습니다.

9. 말

• 제품 화면은 해요체입니다. 사람은 "이름 + 님", 진단을 받는 본인은 실무자, 고객사 담당자는 관리자, AI는 렌지입니다.
• 버튼은 명사형 2~4자입니다(저장, 추가, 직무확인). "~하기"는 쓰지 않습니다.
• 숫자는 단위와 천 단위 쉼표를 붙입니다(1,248명).
• 상황별 말투와 줄바꿈, 문장 부호는 content.md를 따릅니다.

10. 접근성

• 모든 포인터 대상은 24×24 이상(target-min).
• 포커스 링은 3px focus-ring, offset 2px. 지우지 않습니다.
• 글자 대비 4.5:1 이상(24px 이상 굵은 글자와 아이콘, 경계는 3:1).
• 아래 고정 버튼이 포커스를 가리지 않게 합니다. 앞 단계에서 받은 값은 다시 묻지 않습니다.
• 선택 상태는 색과 함께 테두리 두께나 모양을 바꿉니다.

11. 부품과 패턴

• 부품: 각 카드의 README를 따릅니다. 첫 줄 상태가 Stable인 부품만 제품에 씁니다.
• 패턴: patterns.md(파일 올리기, 확인 필요 처리, 되돌릴 수 없는 행동, AI 제안 수락, 세션 만료).
• 데이터 표시: dataviz.md. 차트 색은 chart-* 토큰과 ChartColors만.
• 코드로 받는 방법: ui-handoff.md.
• 8판 부품이 들어 있는 곳: 바탕 위 흰 알약(.seg)은 Tabs(sl-tabs--seg), 꼬리표(.tag, .mk)는 StatusBadge, 안내 상자(.note, .ai)는 Banner, 회사 조회 차례 목록(.wowlk)은 Completion(sl-done-list). 전체 대응은 archived/v8-mapping.md.
• 상태가 Experimental인 부품은 검토 뒤 Stable로 올립니다. 초안: StatusBadge, Banner, Menu, Delta, ScoreBreakdown, Heatmap, Legend, SkillChip, SkillDetail, PasswordField, Disclosure, Composer.
• 시험: AskRenji(말 꼴: 범위 + 레벨마다 조건 + 직접 선택, P3), SaveStatus(저장 상태).
• 디자인 시스템은 공용 부품, 디자인 규칙, 여백까지입니다. 화면 설계는 하지 않습니다(PM 2026-11-09). 0.17.0에서 만든 화면 단위 견본은 archived/screen-candidates/에 화면 설계 단계 후보로 둡니다.

12. 겹침 순서

아래에서 위로: 본문 → 고정 위 바와 아래 바(10~20) → 서랍(30) → 메뉴와 말풍선(30) → 시트와 확인 창의 뒤 가림(40) → 시트와 확인 창(50) → 토스트(60).

부품

Foundations

Layout

Navigation

Actions

Input

Forms

Selection

Display

Data

Feedback

Overlay

기타

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.