채용 관리 SaaS · 기업 채용 담당자
흰 바탕에 1px 헤어라인으로 구획을 나누고, 유채색은 브랜드 파랑과 상태색뿐이며, 구조 요소는 전부 무채색 알파 오버레이다.
InterviewColor — 면접 진행 상태가 SystemColor 와 동급의 시맨틱 그룹으로 선언돼 있다.
두들린은 회사, 그리팅은 제품이다. 마크는 전부 래스터이고 공개 SVG·프레스킷이 없다.
소문자·둥근·오른쪽으로 살짝 기운 회사 워드마크다. 두들린 / Doodlin 은 회사, 그리팅 / Greeting 은 제품이며 두 마크를 한 락업으로 합치지 않는다. 이 카탈로그가 싣는 자산은 그리팅 락업과 심볼뿐이라 여기서는 자리만 표시한다.
마케팅 사이트는 그라디언트와 사진을 쓰지만 제품 UI는 그것을 한 조각도 들여오지 않는다. 그 분리 자체가 이 시스템의 성격이라, 이 프리뷰도 이미지·그라디언트·일러스트를 쓰지 않는다.
holds down to 16px
심볼은 둥글게 손으로 그린 인사하는 손 두들이고, 아이덴티티에서 유일한 일러스트 요소다. 워드마크는 커스텀 레터링이라 Pretendard 가 아니며, UI 타입은 전부 Pretendard 다. 래스터만 공개돼 있으니 인쇄·대형 출력 전에는 SVG 를 요청하고, mono / reverse 쌍 밖으로 다시 그리거나 색을 바꾸지 않는다.
락업이 들어가지 않는 자리 — 파비콘, 아바타, 접힌 사이드바 — 에는 심볼만 쓴다. 컬러 플레이트 위에서는 반전본을 쓰고 여백을 넉넉히 둔다. 두들의 열린 공간이 붙으면 형태가 뭉개진다. 앱 아이콘 플레이트는 radius20 자리다.
○ 그리팅, 두들린 — 한글 표기가 기본 · ○ 그리팅 ATS, 그리팅 TRM · ✕ Greeting HR, 그리팅HR · ✕ 두들린 그리팅 (한 락업에 두 이름)
greetinghr.com 은 도메인일 뿐 제품명이 아닙니다. 기능명도 한글이 기본입니다 — 채용 홈페이지 · 인재풀 · 다이렉트 소싱 · 공고 관리 · 지원자 관리 · 면접 일정 조율 · 채용 데이터 분석.
Palette(원시) → Semantic(의미 별칭) 2층 + 라이트/다크 거울. gray 는 값이 뒤집히고 neutral 은 알파라, 시맨틱 이름이 양 테마에서 그대로 작동한다.
램프 이름 체계는 Ant Design v4 계열이지만 값은 대부분 다르다 — 12램프 × 10단계 축자 대조에서 29개(24%)만 일치하고 lime · green · cyan · purple · magenta 다섯 램프는 한 값도 겹치지 않는다. 채도 높은 이 램프들은 시맨틱 상태 전용이다.
50 oklch(0.974 0.016 227.0) · 500 oklch(0.651 0.191 252.8) · 900 oklch(0.317 0.095 259.4). 각 램프는 50/100/200/300/400/500/600/700/800/900 열 단계를 라이트·다크 양쪽으로 갖고, 24개 램프가 같은 형태를 공유한다.
danger 만 500 이 아니라 400 단계를 참조한다. 브랜드 파랑은 1차 액션과 활성 상태 전용이고, 그 외 용도가 관찰되지 않는다.
두 패널의 CSS 는 같다 — 바뀌는 것은 neutral 이 검정 알파냐 흰색 알파냐뿐이다. 다크 테마는 별도 팔레트가 아니라 같은 이름의 값 반전이다.
라이트에서 gray0 은 oklch(1.000 0.000 0) 흰색, gray900 은 oklch(0.000 0.000 0) 검정이다. 다크에서는 이 자리가 통째로 뒤집힌다. gray300 oklch(0.640 0.000 0) 만 양 테마에서 같은 값이고, 그래서 반전축의 중심이다.
SystemColor 와 동급의 시맨틱 그룹으로 선언돼 있다. 부록이 아니라 1급 개념이라는 점이 이 시스템의 정체성이고, 범용 UI 프레임워크에는 존재할 이유가 없는 축이다.
bgColor = 램프 100 · color = 램프 800. murkyBlue 는 공개된 두 단계 oklch(0.919 0.029 244.9) / oklch(0.449 0.074 248.6) 를 그대로 쓰고, 500 앵커만 공개된 나머지 램프는 앵커를 베이스·잉크와 섞어 같은 자리를 만든다.
murky 12색은 일반 12색의 저채도 쌍둥이이고 태그·라벨 팔레트를 전담한다. 일반 램프와 합쳐 24개 램프 × 10단계 구조다.
라이트는 oklch(0.000 0.000 0 / α) 검정 알파다. 다크는 같은 α 를 흰색으로 뒤집는다. 알파 값이 양 테마에서 동일하다는 것이 미러 구조의 핵심이고, 그래서 회색을 하드코딩하지 않는다가 이 시스템의 제1 규칙이다.
규칙선은 border2(11%), 입력·outlined 버튼 가장자리는 border3(18%)다. 깊이는 이 4단계 무채색 틴트에서만 오며, 사이드바가 background1(2%) 위에 앉는 그 2% 차이가 시각적 분리의 전부다.
컴포넌트 그룹 60개 / 스토리 123개. prop 표(addon-docs)가 공개돼 있지 않으므로 아래는 prop 시그니처가 아니라 실측된 시각 명세다.
전공학과
산업디자인학과
학력
학사 · 재학기간 2019. 03 ~ 2023. 02
특이사항
보관된 응답 — ArchivedAnswer
ATS/ 하위에 Question · Answer 와 함께 1급 카테고리로 서 있다. “지원자 답변을 어떻게 보여줄 것인가”를 컴포넌트 층에서 규정한 결과물이고, 여기서만 볼 수 있는 컴포넌트다.
부드럽게 채운 블록이라 보더가 없다 — background2 채움 + radius4 로 끝낸다.
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. 컬럼을 고정하고 좁은 폭은 가로 스크롤로 흡수한다.
Tabs 아이템 28px · radius6 · padding 0 8px · 리스트 gap 4px. 레일 아래 규칙선은 보더가 아니라 한쪽 inset 그림자다. TabsRail 은 Tabs 와 별개인 두 번째 탭 계열이고, Tooltip 래퍼 padding 은 16px 이다.
스토리가 7개로 가장 많은 조합을 갖는 컴포넌트다 — 첨부 + 글자수 + 액션 버튼을 한 박스에 담는 커뮤니케이션 입력이 이 제품의 핵심 화면임을 시사한다. 루트 radius4, 입력 영역 padding 8px 12px 0px, 툴 영역 8px, 파일 행 보더만 border2 로 한 단계 옅다.
height 56px · radius6 · 1px border3 · 입력 텍스트 item4(18/27) · 라벨 박스 padding 0 16px · 내부 gap 8px. disabled 는 background3 채움 + disabled(25%) 텍스트이고 박스 크기는 유지된다.
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 은 파괴적 액션 확인 전용이고 카피 패턴이 특징적이다 — “잠깐!” 한 단어 제목 뒤에 존댓말 완성 문장이 온다.
면접 일정
1월 11일 (수) 오후 2:00 ~ 오후 3:00
가장자리에 붙는 패널이라 모서리를 굴리지 않는다(radius0). 헤더는 셸과 같은 56px 이고, 큰 상태 변화라 0.3s 듀레이션 자리다.
공고 내 모든 멤버에게 알립니다.
Toast 는 반전 서피스다 — 라이트 기준 gray600 채움 + 밝은 텍스트, 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 은 밀도 비교용 재현이지 두들린 공개 규격이 아니다.
공개 Storybook 은 아이콘 이름만 렌더하고 SVG path 를 노출하지 않으며 소스 저장소는 비공개다. 원본 카드는 Lucide 를 대체 글리프로 얹지만, 이 프리뷰는 대체본조차 그리지 않고 중립 슬롯과 합성형 이름만 옮긴다 — 316종의 이름 체계 <meaning><variant><direction> 와 도메인 목록이 인용 대상이지 형태가 아니다.
link 는 blue600 이다. Divider 는 border2(11%) 헤어라인 한 줄이고, 아이콘이 아닌 유일한 글리프는 필수 표시 * 다.
3겹 오버레이 그림자로 떠 있는 면을 만든다. 배치는 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 Tabs rail(lg) / 10px Badge / 100% Radio · Spinner. ToggleSwitch 트랙만 명명 스케일 밖의 pill 이다. 단계별 용도를 규정한 공개 문서는 없다 — 위는 전부 실측이다.
radius 만은 명명 토큰으로 존재한다(dist/constants/radius). 실무 범위는 4/6/8/10 이고 14 · 20 은 컴포넌트 스케일에서 사실상 미사용이다 — 앱 아이콘 플레이트 같은 브랜드 표면 밖에서는 쓰지 않는다.
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 그리드” 같은 규정을 이 시스템의 것으로 서술하지 않고, 소스 값을 격자에 맞춰 반올림하지 않는다.
핵심 설계는 “픽셀이 아니라 역할을 고른다”이다 — 같은 픽셀 값이 세 계열에 있고 행간만 다르다.
25 / 22 / 20 / 18 / 16 / 14 / 12 px · 행간 1.6em(40 / 35.2 / 32 / 28.8 / 25.6 / 22.4 / 19.2px). 읽기 문장은 이 계열이다.
서체는 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종이 그 위에 얹힌다.