채용 관리 SaaS · 기업 채용 담당자
흰 바탕에 1px 헤어라인으로 구획을 나누고, 유채색은 브랜드 파랑과 상태색뿐이며, 구조 요소는 전부 무채색 알파 오버레이다.다크는 별도 팔레트가 아니다. gray 램프가 자리를 바꾸고 neutral 이 검정 알파에서 흰색 알파로 뒤집힐 뿐, 시맨틱 이름과 컴포넌트 CSS 는 그대로다.
InterviewColor — 면접 진행 상태가 SystemColor 와 동급의 시맨틱 그룹으로 선언돼 있다.InterviewColor — complete 는 다크에서 gray200 자리가 어두워지고, request 는 gray300 이라 양 테마에서 같은 값이다.
두들린은 회사, 그리팅은 제품이다. 이 프리뷰가 싣는 브랜드 자산은 그리팅 심볼 벡터 하나다.
마케팅 사이트는 그라디언트와 사진을 쓰지만 제품 UI는 그것을 한 조각도 들여오지 않는다. 그 분리 자체가 이 시스템의 성격이라, 이 프리뷰도 이미지·그라디언트·일러스트를 쓰지 않는다.
공식 제품 가이드는 모듈을 채용 ATS · 채용 홈페이지 Homepage · 설문 Form · 인재영입 TRM · 분석 Analytics 다섯으로 번호 매겨 연다.
Palette(원시) → Semantic(의미 별칭) 2층 + 라이트/다크 거울. gray 는 값이 뒤집히고 neutral 은 알파라, 시맨틱 이름이 양 테마에서 그대로 작동한다.Palette(원시) → Semantic(의미 별칭) 2층 + 라이트/다크 거울. 아래 값은 다크 테마 기준이며, 유채색 램프 열 단계만은 카탈로그가 라이트 정의값으로 옮겨 두었다.
danger 만 500 이 아니라 400 단계를 참조한다. 브랜드 파랑은 1차 액션과 활성 상태 전용이고, 그 외 용도가 관찰되지 않는다.
여섯 값 모두 다크 정의값이다. 이름과 참조 램프 단계는 라이트와 같고 값만 바뀐다 — danger 만 500 이 아니라 400 단계를 참조하는 것도 그대로다.
SystemColor 와 동급의 시맨틱 그룹으로 선언돼 있다. 부록이 아니라 1급 개념이라는 점이 이 시스템의 정체성이고, 범용 UI 프레임워크에는 존재할 이유가 없는 축이다.
SystemColor 와 동급의 시맨틱 그룹이다. request 만 양 테마에서 같은 값인데, gray300 이 반전축의 중심이기 때문이다. complete 는 라이트에서 gray200 이 밝은 회색이었지만 다크에서는 어두워진다.
bgColor = 램프 100 · color = 램프 800. murkyBlue 는 공개된 두 단계 oklch(0.919 0.029 244.9) / oklch(0.449 0.074 248.6) 를 그대로 쓰고, 500 앵커만 공개된 나머지 램프는 앵커를 베이스·잉크와 섞어 같은 자리를 만든다.
bgColor = 램프 100 · color = 램프 800 은 이름 그대로 유지되지만, 램프가 반전되므로 다크에서는 그 두 자리의 값이 서로 바뀐다 — 채움은 어두워지고 글자는 밝아진다. murkyBlue 는 공개된 두 단계 oklch(0.449 0.074 248.6) 채움 / oklch(0.919 0.029 244.9) 글자를 쓰고, 500 앵커만 공개된 나머지 램프는 앵커를 베이스(검정)·잉크(흰색)와 섞어 같은 자리를 만든다.
규칙선은 border2(11%), 입력·outlined 버튼 가장자리는 border3(18%)다. 깊이는 이 4단계 무채색 틴트에서만 오며, 사이드바가 background1(2%) 위에 앉는 그 2% 차이가 시각적 분리의 전부다.규칙선은 border2(11%), 입력·outlined 버튼 가장자리는 border3(18%)다. 다크에서는 같은 알파가 흰색으로 올라앉아 검정 바탕을 밝힌다 — 사이드바가 background1(2%) 위에 앉는 그 2% 차이가 시각적 분리의 전부라는 점은 그대로다.
컴포넌트 그룹 60개 / 스토리 123개. prop 표(addon-docs)가 공개돼 있지 않으므로 아래는 prop 시그니처가 아니라 실측된 시각 명세다.컴포넌트 CSS 는 라이트와 한 글자도 다르지 않다 — 전부 시맨틱 이름만 참조하기 때문이다.
전공학과
산업디자인학과
학력
학사 · 재학기간 2019. 03 ~ 2023. 02
특이사항
보관된 응답
ATS/ 하위에 Question · Answer 와 함께 1급 카테고리로 서 있다. “지원자 답변을 어떻게 보여줄 것인가”를 컴포넌트 층에서 규정한 결과물이고, 여기서만 볼 수 있는 컴포넌트다.
이 블록의 표면 값은 공개 실측이 아니라 이 프리뷰의 재현이다 — 부드럽게 채운 블록은 보더를 쓰지 않는다는 규칙만 따랐다.
Tag 26px · Badge 20px(radius10 · danger 채움) · Avatar 는 원형이 아니라 radius4 사각형(보더 대신 inset 0 0 0 1px) · StatusDot 6px 원. 사람 얼굴조차 데이터 셀처럼 다룬다.
| No. | 지원자 | 면접 일정 | 전공학과 | 채용팀 | 상태 |
|---|---|---|---|---|---|
| 01 | 김서김서연 | 1월 12일 (목) 오전 9:00 ~ 오전 10:00 | 산업디자인학과 | 경영지원팀 | 면접 준비됨 |
| 02 | 박지박지훈 | 1월 12일 (목) 오전 11:00 ~ 오후 12:00 | 컴퓨터공학과 | 경영지원팀 | 요청됨 |
| 03 | 정하정하늘 | 1월 10일 (화) 오전 9:00 ~ 오전 10:00 | 산업공학과 | 경영지원팀 | 완료 |
헤더 행 40px · 데이터 행 48px · 규칙선은 헤어라인뿐이고 세로선이 없다. With Fixed 스토리처럼 No. 컬럼을 고정하고 좁은 폭은 가로 스크롤로 흡수한다.
헤더 행 40px · 데이터 행 48px · 규칙선은 헤어라인뿐이고 세로선이 없다. With Fixed 스토리처럼 No. 컬럼을 고정하고 좁은 폭은 가로 스크롤로 흡수한다. 이 프리뷰의 선택 행은 라이트의 blue50 자리를 brand 틴트로 대신한다.
Tabs 아이템 28px · radius6 · padding 0 8px · 리스트 gap 4px. 레일 아래 규칙선은 보더가 아니라 한쪽 inset 그림자다. TabsRail 은 Tabs 와 별개인 두 번째 탭 계열이고, Tooltip 래퍼 padding 은 16px 이다.
Tabs 아이템 28px · radius6 · padding 0 8px · 리스트 gap 4px. 레일 아래 규칙선은 보더가 아니라 한쪽 inset 그림자다. Tooltip 은 Toast 와 같은 반전 서피스라 다크에서 밝은 면이 된다.
스토리가 7개로 Button(8개) 다음이고 입력 계열에서는 최다다 — 첨부 + 글자수 + 액션 버튼을 한 박스에 담는 커뮤니케이션 입력이 이 제품의 핵심 화면임을 시사한다. 루트 radius4, 입력 영역 padding 8px 12px 0px, 툴 영역 8px, 파일 행 보더만 border2 로 한 단계 옅다.
height 56px · radius6 · 1px border3 · 입력 텍스트 item4(18/27) · 라벨 박스 padding 0 16px · 내부 gap 8px. disabled 는 background3 채움 + disabled(25%) 텍스트이고 박스 크기는 유지된다.
height 56px · radius6 · 1px border3 · 입력 텍스트 item4(18/27) · 라벨 박스 padding 0 16px · 내부 gap 8px. focus 는 헤어라인이 brand 로 교체될 뿐 외곽 링·글로우가 없다.
CheckBox·Radio 는 16px(radius4 / 100%)이고 라벨 gap 은 8px 이다. ToggleSwitch 만 명명 radius 스케일 밖의 값을 쓴다 — 트랙 28px / 노브 24px pill 에 lifted 2겹 그림자, 노브 0.15s / 트랙 0.3s.
공고 내 모든 멤버에게 알립니다.
background2(4%) 채움 · radius4 · padding 16px 20px · gap 12px · 보더 없음. 제목 title7 / 본문 body6. 채움은 한 가지뿐이고 톤은 선두 슬롯의 시맨틱 색으로만 갈린다. 떠 있는 버전과 인라인 버전을 쌍으로 두는 것이 이 시스템의 원칙이다.
공고 내 모든 멤버에게 알립니다. 알림 제목을 입력해주세요.
혹시 마지막 채용 담당자인 공고가 있지는 않은지 확인해 보셨나요?
스크림은 평면 45% 검정이며 블러가 없다. ModalConfirm 은 파괴적 액션 확인 전용이고 카피 패턴이 특징적이다 — “잠깐!” 한 단어 제목 뒤에 존댓말 완성 문장이 온다.
스크림은 평면 45% 검정이며 블러가 없다 — 다크에서는 이미 어두운 바탕을 한 번 더 눌러 대화상자를 띄운다. 이 프리뷰는 떠 있는 면을 base 위에 gray25 로 한 단계 올린다.
면접 일정
1월 11일 (수) 오후 2:00 ~ 오후 3:00
이 패널은 셸 규격에 맞춘 재현이다 — 헤더가 앱 셸과 같은 56px 다.
공고 내 모든 멤버에게 알립니다.
Toast 는 반전 서피스다 — 라이트 기준 gray600 채움 + 밝은 텍스트, radius4, padding 12px 48px 12px 12px(오른쪽 48px 은 닫기 버튼 자리), 3겹 오버레이 그림자, 진입 0.2s. 램프가 반전되므로 다크에서는 같은 이름이 밝은 면이 된다.
Toast 는 반전 서피스다 — 토큰은 라이트와 똑같이 gray600 채움 + gray0 텍스트지만, 램프가 뒤집히므로 다크에서는 밝은 면에 어두운 글자가 된다. radius4, padding 12px 48px 12px 12px(오른쪽 48px 은 닫기 버튼 자리), 3겹 오버레이 그림자, 진입 0.2s.
현재 업무에 만족하십니까? 단일 선택
매우 만족
개선이 필요한 점 짧은 글
보관된 응답입니다 — ArchivedAnswer
설문(Form) 모듈과 대응하는 화면 루트이고, 하위에 Banner · Respondent · QuestionAndAnswer · ArchivedAnswer 가 있다. Forms/FormResponse/ 가 컴포넌트 트리에서 1급 카테고리로 서 있다.
large 는 height 56px · radius6 · padding 0 20px · 라벨 item4 / 600 · 아이콘 24px · 트랜지션 0.1s 로 실측된다. outlined 는 padding 0 19px 로 보더 1px 를 상쇄해 같은 박스를 만든다 — 오타가 아니라 의도다. 공개 소스에서 실측된 사이즈는 large 하나뿐이라, 위의 40px·32px 은 밀도 비교용 재현이지 두들린 공개 규격이 아니다.
large 는 height 56px · radius6 · padding 0 20px · 라벨 item4 / 600 · 아이콘 24px · 트랜지션 0.1s 로 실측된다. outlined 는 padding 0 19px 로 보더 1px 를 상쇄해 같은 박스를 만든다 — 오타가 아니라 의도다. 공개 소스에서 실측된 사이즈는 large 하나뿐이라, 위의 40px·32px 은 밀도 비교용 재현이지 두들린 공개 규격이 아니다. 채움 위 잉크는 하드코딩한 흰색이 아니라 gray 램프의 밝은 끝을 가리키는 전경 토큰이다.
공개 Storybook 은 아이콘 이름만 렌더하고 SVG path 를 노출하지 않으며 소스 저장소는 비공개다. 원본 카드는 Lucide 를 대체 글리프로 얹지만, 이 프리뷰는 대체본조차 그리지 않고 중립 슬롯과 합성형 이름만 옮긴다 — 316종의 이름 체계 <meaning><variant><direction> 와 도메인 목록이 인용 대상이지 형태가 아니다.
link 는 blue600 이다. Divider 는 border2(11%) 헤어라인 한 줄이고, 아이콘이 아닌 유일한 글리프는 필수 표시 * 다.
link 는 blue600 이고, 다크에서는 brand 보다 밝은 자리가 된다. Divider 는 border2(11%) 헤어라인 한 줄이고, 아이콘이 아닌 유일한 글리프는 필수 표시 * 다.
3겹 오버레이 그림자로 떠 있는 면을 만든다. 배치는 Floating UI 가 담당하고, DropdownItem / DropdownItemSelect 두 행 계열을 갖는다.3겹 오버레이 그림자로 떠 있는 면을 만든다. 다크에서는 검정 그림자가 거의 보이지 않으므로, 이 프리뷰는 떠 있는 면을 gray25 로 한 단계 올려 층을 만든다. 배치는 Floating UI 가 담당하고, DropdownItem / DropdownItemSelect 두 행 계열을 갖는다.
height 32px · 라벨 body6 · 텍스트 gap 2px. 이 32px 이 이 시스템의 밀도 기준선이다. hover 는 투명 서피스가 background2 를 얻는 것이고 opacity 는 쓰지 않는다.
Template = 232px 고정 사이드바 + 56px sticky 헤더 + 스크롤 메인(위는 축소 재현). FloatingBox 는 Usage 스토리를 3개 가진 오버레이 프리미티브이고, Skeleton 은 radius4 다 — 사람 자리에는 Avatar, 로딩 자리에는 Skeleton 뿐이며 그 사이에 이미지가 들어가지 않는다.
토큰과 컴포넌트가 실제 업무 화면에서 어떻게 만나는지 — 셸 · 테이블 · 상태 · 대량 액션.
| No. | 지원자 | 면접 일정 | 학력 | 전공학과 | 채용팀 | 상태 |
|---|---|---|---|---|---|---|
| 01 | 김서김서연 | 1월 12일 (목) 오전 9:00 ~ 오전 10:00 | 학사 | 산업디자인학과 | 경영지원팀 | 면접 준비됨 |
| 02 | 박지박지훈 | 1월 12일 (목) 오전 11:00 ~ 오후 12:00 | 석사 | 컴퓨터공학과 | 경영지원팀 | 요청됨 |
| 03 | 이수이수민 | 1월 11일 (수) 오후 2:00 ~ 오후 3:00 | 학사 | 경영학과 | 경영지원팀 | 변경 요청 |
| 04 | 정하정하늘 | 1월 10일 (화) 오전 9:00 ~ 오전 10:00 | 학사 | 산업공학과 | 경영지원팀 | 완료 |
| 05 | 최민최민준 | 2023. 08. 31 | 석사 | 경영정보학과 | 경영지원팀 | 완료 |
| 06 | 한지한지우 | 2023. 08. 31 | 학사 | 시각디자인학과 | 경영지원팀 | 요청됨 |
원본 카드는 클릭 가능한 재현이지만, 이 프리뷰는 스크립트 없이 지원자 목록 화면 한 장을 정적으로 옮겼다. 232px 고정 사이드바(background1 2% 위) + 56px sticky 헤더 + 스크롤 메인이고 중앙 정렬 max-width 컬럼이 없다. 대량 액션 바는 스크롤 컨테이너 하단에 고정된다.
깊이의 1차 언어는 그림자가 아니라 1px 헤어라인이다. 그림자는 떠 있음을, 보더는 묶여 있음을 뜻한다.
이징이 전 시스템에 하나뿐이다 — cubic-bezier(0.31, 0.27, 0.15, 0.99). Toast 는 transform / opacity 0.2s 를 더 쓴다. 바운스·스케일·스프링은 없고, 공식 모션 명세 문서도 공개돼 있지 않다(위는 전부 실측).
4px Tag · Toast · Callout · CheckBox · Skeleton · Avatar · TextArea / 6px Button · TextField · Tabs 아이템 / 8px 카드 / 10px Badge / 100% Radio · Spinner. ToggleSwitch 트랙만 명명 스케일 밖의 pill 이다. 단계별 용도를 규정한 공개 문서는 없다 — 위는 전부 실측이다.
radius 만은 명명 토큰으로 존재한다(dist/constants/radius). 실무 범위는 4/6/8/10 이고 14 · 20 은 컴포넌트 스케일에서 사실상 미사용이다.
Constants/shadow 스토리가 라벨 없이 스와치만 렌더해 이름↔값 대응이 공개돼 있지 않다 — 위 값은 렌더된 DOM 의 계산 스타일에서 직접 읽은 것이다. 컬러 그림자·글로우는 없고, 카드는 그림자로 띄우지 않는다.
그림자 값은 양 테마가 같은 검정 알파이고, 다크에서는 사실상 보이지 않는다 — 떠 있음은 이 프리뷰에서 gray25 로 한 단계 밝아지는 면이 대신 말한다. Constants/shadow 스토리가 라벨 없이 스와치만 렌더해 이름↔값 대응이 공개돼 있지 않으므로, 위 값은 렌더된 DOM 의 계산 스타일에서 직접 읽은 것이다.
“문서에 없다”가 아니라 “시스템에 없다”로 확인된 항목이다.
npm 패키지의 dist/constants/ 하위는 color · date-picker · keyframes · radius · shadow · theme · transition · typography 여덟 개뿐이고 spacing 디렉터리가 없다. 레이아웃 프리미티브 Flex 는 gap?: number 로 raw 픽셀을 받는다.
리듬으로 요약하면 칩 안 4px → 컨트롤과 라벨 사이 6~8px → Callout 안 12px → 섹션 패딩 16~20px 이다. Button(filled) 0 20px / Button(outlined) 0 19px / Tag 0 6px / Tabs 아이템 0 8px / Callout 16px 20px / Toast 12px 48px 12px 12px. 값 자체는 그대로 옮겨 쓰되 “8px 그리드” 같은 규정을 이 시스템의 것으로 서술하지 않고, 소스 값을 격자에 맞춰 반올림하지 않는다.
핵심 설계는 “픽셀이 아니라 역할을 고른다”이다 — 같은 픽셀 값이 세 계열에 있고 행간만 다르다.
서체는 Pretendard 단일이고 별도의 디스플레이/브랜드 서체가 없다 — 로고 워드마크는 로고 이미지 안에만 있는 커스텀 레터링이라 UI 에서 다시 조판하지 않는다. weight 는 3종뿐이고 medium 이 600 이다(일반 관례 500 과 다르다). letter-spacing 토큰은 존재하지 않고 이탤릭도 쓰지 않는다.
body5 와 item5 는 둘 다 16px 이지만 배율이 1.6em 과 1.5em 이다. 제목은 title(1.4em), 읽기 문장은 body(1.6em), 컨트롤 라벨은 item(1.5em) — 역할을 고르면 숫자는 따라온다. 원시 스케일은 fontSize50(11) ~ fontSize1300(60) 15종이고 semantic 22종이 그 위에 얹힌다.