디자인 시스템 · Pintern Builder

색

브랜드 파랑 하나로 포인트를 주고, 나머지는 회색 9단계로 만들어요. 다크 모드에선 회색 단계만 뒤집고 파랑 · 빨강은 그대로예요.

브랜드 · 신호

이름	값	쓰는 곳
`--blue`	#0080FF	Primary 버튼, 링 · 배지처럼 "여기를 보세요"에만
`--red`	#FF3700	마감 임박 신호 전용. 버튼에는 쓰지 않아요
`--blue-weak`	파랑 20%	상태를 나타내는 배지 · 칩 바탕. 버튼에는 쓰지 않아요
`--red-weak`	빨강 20%	마감 임박 배지 바탕

회색

이름	라이트 · 다크	쓰는 곳
`--g09`	#1B1D1F · #E3E5E8	본문 · 제목
`--g08`	#343639 · #D3D5D8	버튼 글자 · 강한 보조 글자
`--g07`	#484A4D · #C4C7CA	보조 글자 · 채운 아이콘
`--g06`	#6B6F72 · #B4B7BA	날짜 · 출처 같은 보조 정보, Ghost 버튼
`--g05`	#7A7D80 · #919497	날짜 · 캡션
`--g04`	#B4B7BA · #6B6F72	점선 테두리
`--g03`	#E3E5E8 · #343639	구분선 · 로고 테두리
`--g02`	#F0F1F2 · #303236	입력창 · Tertiary 버튼 바탕
`--g01`	#F7F8FA · #242729	카드 · 행 바탕
`--bg`	#FFFFFF · #1B1D1F	화면 바탕

글자

기본 글꼴은 Interop(Inter + Noto Sans KR)이에요. 한글과 영문이 깔끔하게 어울려 다국어로 넓힐 때 유리해서 골랐어요. 굵기는 400 · 500 · 600 · 700 네 개만 쓰고, 굵게 강조하는 대신 크기 단계로 위계를 만들어요.

크기 단계

페이지 제목18 · Bold 섹션 헤더17 · Bold 공고 제목16 · SemiBold 버튼15 · SemiBold 본문 · 기업명15 · Medium 보조 헤더14 · SemiBold 메타 · 날짜12 · Regular · Gray 06

규칙

이름	값	쓰는 곳
자간	-0.03em · 최대 -0.02em	Interop은 -3%로 고정하고, -2%보다 넓게 펴지 않아요. 한글 글자는 글자 상자(em)보다 작게 그려져 상자 안 여백이 표준보다 넓어서, 자간을 그대로 두면 글자 사이가 벌어져 보여요.
입력칸	16px 이상	더 작으면 입력할 때 iOS가 화면을 확대해요
줄바꿈	keep-all	한국어 낱말이 줄 끝에서 쪼개지지 않게

간격 · 레이아웃

도형과 글자의 기준선을 따로 둬요. 글자만 있는 요소는 도형보다 4px 안쪽에 있어야 눈으로 같은 선에 맞아 보여요.

이름	값	쓰는 곳
`--frame`	730px	앱 화면의 콘텐츠 최대 폭 (소개 · 개발 페이지는 1040)
`--pad-obj`	18px	도형(카드 · 버튼 · 구분선)과 화면 끝 사이 여백
`--pad-text`	22px	글자(제목 · 글자 버튼)와 화면 끝 사이 여백
누르는 영역	44px 이상	아이콘이 작아도 누르는 영역은 44px

모서리 · 그림자 · 선

이름	값	쓰는 곳
카드	24px	카드 · 큰 상자
버튼	14~16px	높이 44 버튼. 작은 버튼(높이 38)은 12px
칩	16px	칩(높이 32)
체크박스	6px	22px 체크박스
원	1000px	로고 · 링 · 배지

규칙

겹친 모서리는 동심원으로: 안쪽 모서리 + 간격 = 바깥 모서리.
그림자 또는 선, 하나만: 그림자가 있는 요소엔 1px 테두리를 같이 주지 않아요.
구분선은 사이에만: 묶음의 첫 줄 위 · 마지막 줄 아래엔 선을 넣지 않아요.

움직임

빠르게 시작해 부드럽게 멈추는 곡선 하나를 기본으로 써요. 기기에서 동작 줄이기를 켜면 움직임은 빼고 결과만 보여 줘요.

이름	값	쓰는 곳
ease-out	`cubic-bezier(.2,.8,.2,1)`	거의 모든 전환
호버	0.15s	누를 수 있는 요소가 옅어짐(마우스일 때만)
상태 변화	0.2~0.4s	색 · 투명도 · 테두리
크기 변화	0.38s	버튼 폭이 바뀌거나 카드를 펼칠 때. 갑자기 바뀌지 않게

규칙

강조 움직임은 한 순간에 하나: 빛 스침 · 반짝임을 한 화면에 동시에 두 개 두지 않아요.
아이콘 토글은 동작까지: 상태만 바꾸지 않고 회전처럼 눈에 띄는 움직임을 함께 줘요.

접근성과 포용

누구나 같은 정보를 같은 수고로 얻게 해요. 보는 힘, 손, 쓰는 기기가 사람마다 다르다는 걸 기본으로 두고 만들어요.

보기 설정

머리줄의 보기 설정에서 직접 고를 수 있고, 기기에 같은 설정이 켜져 있으면 처음부터 따라가요.

이름	값	쓰는 곳
글자 크기	기본 · 108% · 116%	화면 전체를 함께 키워요. 더 키우면 화면이 넘쳐서 116%까지
움직임 줄이기	켬 · 끔	빛 스침 · 굴림 · 등장 효과를 빼고 결과만 보여 줘요. 기기의 동작 줄이기를 따라요
명암 높이기	켬 · 끔	회색 글자 · 선을 한두 단계 진하게. 기기의 대비 증가를 따라요
링크 밑줄	켬 · 끔	누를 수 있는 글자에 밑줄을 그어 색만으로 구분하지 않게 해요
다크 모드	기기 설정 · 직접	기기 설정을 따르거나 직접 골라요
키보드 초점	늘 켬	탭으로 움직일 때 지금 위치를 파란 테두리로 보여 줘요

규칙

색만으로 알리지 않아요: 새 공고 · 마감 임박은 링 색과 함께 숫자 배지와 글자("6일 뒤 마감")로도 알려요.
작은 글자는 충분히 진하게: Gray 06보다 밝게 쓰지 않아요.
화면 낭독기에서도 같은 내용으로: 그림엔 대체 글을 달고, 꾸밈 그림은 숨기고, 켜고 끄는 버튼은 눌린 상태를 함께 알려요.
입력은 짐작하지 않아요: 터치 화면 노트북, 펜, 큰 폰처럼 "PC = 마우스, 폰 = 손가락"이 깨지는 기기가 많아요. 화면 폭이 아니라 지금 실제로 쓴 입력으로 판단하고, 호버는 마우스일 때만 보여 줘요.
가로로 넘기는 줄은 마우스로 끌어도 넘어가게: 스크롤바를 숨겼다면 끌어서 넘기기를 꼭 넣어요.
가입 없이: 계정 · 개인정보 없이 주소만으로 열 수 있게 해요. 고른 설정은 주소와 이 기기에만 담아요.
쉬운 말로: 낯선 용어 대신 익숙한 말을 써요. 자세한 기준은 아래 글쓰기.

글쓰기

익숙한 말, 존칭 최소화, 긍정문, 사용자 행동 중심으로 써요. 가이드를 억지로 적용하면 오히려 낯설어지는 경우(예: '게시'를 '올라옴'으로)는 예외로 둬요.

이름	규칙	예
마침표	버튼 · 제목엔 찍지 않아요	저장 / 관심 설정
가운뎃점	앞뒤 한 칸씩. 정말 좁은 칩만 예외	네이버 · 카카오 · 토스
(약)	추정 숫자는 단위 뒤에 작고 연하게. 정한 값엔 붙이지 않아요	500명(약) / 31곳
따옴표	곧은 따옴표만	'게시' "저장"
버튼 이름	사용자가 하는 동작으로	핀턴 더 알아보기 / 바로 시작하기

액션 버튼

누르면 무언가 일어나는 버튼이에요. 강조 정도에 따라 네 등급으로 나누고, 한 화면에 어떤 등급을 함께 둘지 규칙으로 정해요.

등급

등급	모양	쓰는 곳
1 Primary	파랑 채움	화면에서 사용자가 가장 했으면 하는 일 하나. 한 화면에 하나
1.5 Secondary	검정 채움	Primary 옆에서만. 아래 Secondary 조건을 모두 갖췄을 때
2 Tertiary	옅은 회색 바탕	보조 버튼 기본값. Primary와 다른 기능을 나란히 둘 때
3 Ghost	바탕 없는 글자	가장 낮은 강조. 같은 기능의 두 번째 버튼, 갈 곳이면 끝에 ›

레이블레이블레이블레이블왼쪽부터 Primary · Secondary · Tertiary · Ghost

함께 두기

경우	조합	예
같은 기능 두 버튼	1 + 3	첫 화면 "바로 시작하기"(Primary) + 머리줄 "바로 시작하기 ›"(Ghost)
다른 기능 두 버튼	1 + 2	404 "핀턴 홈으로"(Primary) + "핀턴 소개"(Tertiary). 기본 조합
다른 기능 · 탈출구	1 + 1.5	Secondary 조건을 만족할 때만
Primary가 없는 화면	2 + 3	첫 화면 안내 창: 닫기(Tertiary) + "핀턴 더 알아보기 ›"(Ghost)

Secondary 조건

검정 채움은 Primary만큼 쉽게 찾아야 하는 버튼에만 줘요. 아래를 모두 갖춰야 해요.

같은 화면에 Primary가 있어요. Secondary는 Primary에 기대는 단계라, Primary가 없으면 의미가 없어져 Tertiary로 내려요.
못 찾으면 갇히거나 손해를 봐요. 닫기 · 나가기 · 취소처럼 빠져나가는 버튼이에요.
한 화면에 하나만.

찾기 쉽게 하고 싶을 때

등급을 올리지 말고 움직임으로 도와요. 예를 들어 버튼 테두리에 빛이 한 바퀴 돌고 잠시 쉬는 걸 되풀이해요.

Do · Don't

레이블레이블

Do같은 기능은 Primary 하나만 강조하고 나머지는 Ghost로 낮춰요.

레이블레이블

Don't같은 일을 두 번 강조하면 어디를 눌러야 할지 오히려 흐려져요.

레이블레이블

DoPrimary가 없는 화면은 Tertiary와 Ghost만 써요.

레이블레이블

Don'tPrimary가 없는 화면엔 Secondary를 쓰지 않아요.

레이블레이블

Do다른 기능 두 개는 Primary와 Tertiary로 둬요.

레이블레이블

Don't빨강 weak는 삭제 · 경고로, 파랑 weak는 상태 배지로 읽혀요. 버튼엔 쓰지 않아요.

규격

등급	바탕	글자	크기
Primary	`--blue`	`#FFFFFF`	높이 44 · 모서리 14~16 · 15px SemiBold · 좌우 22~28
Secondary	`--g09`	`--bg`
Tertiary	`--g02`	`--g09`
Ghost	없음	`--g06`~`--g07`	13~15px Medium · 누르는 영역 44
누름 · 호버	마우스일 때만 투명도 0.6~0.85로 옅어져요. 손가락으로 누른 뒤엔 남지 않아요
못 누름	바탕 `--g02` · 글자 `--g05` (저장 버튼: 바꾼 게 없을 때)

기업 링

찜한 기업을 맨 위 한 줄에 로고로 보여 줘요. 링 색은 지금 볼 게 있는지를, 숫자 배지는 몇 개인지를 알려요.

2네이버

1토스

카카오

당근 추가 새 공고 · 마감 임박 · 이미 본 기업 · 소식 없음 · 추가

상태	모양	쓰는 곳
새 공고	파랑 링 + 배지	새로 올라온 공고 수. 누르면 그 공고 카드로
마감 임박	빨강 링 + 배지	새 공고와 겹치면 빨강이 먼저예요
이미 본 기업	회색 링	한 번 눌러 본 기업. 새 소식이 생기면 다시 색 링으로
소식 없음	링 없음	누를 수 없어요. 링이 있으면 누를 수 있는 것처럼 보여서 뺐어요

이름	값	쓰는 곳
로고	56px · 원	링 없는 로고는 62px로 키워 이름 줄을 맞춰요
링	2px 틈 + 2px 선	틈은 바탕색이라 로고와 링이 붙어 보이지 않아요
배지	18px · 11px Bold	바탕색 2px 테두리로 링 위에 얹어요
칸	64px · 간격 6	가로로 넘기는 줄

공고 카드

기업 하나에 카드 하나. 머리에 기업, 아래에 공고 줄을 쌓아요. 카드 바탕만으로 묶음을 나누고 그림자는 쓰지 않아요.

네이버2시간 전

2027 상반기 전 직군 체험형 인턴 (개발 · 디자인 · 기획 · 마케팅)네이버클라우드 · 체험형 인턴 · 3일 뒤 마감

주니어 백엔드 개발자정규직 · 채용 시 마감

공고 2개 더 보기

이름	값	쓰는 곳
카드	모서리 24 · `--g01`	안쪽 여백 16 · 아래 6. 폰은 화면 폭에서 양옆 18만 남겨요
머리	로고 24 · 15 Medium	오른쪽 위 등록 시점은 11px `--g04`
공고 제목	16 · SemiBold	한 줄. 넘치면 말줄임
공고 정보	12 · `--g06`	법인명(표제어와 다를 때) · 고용 형태 · 마감
구분선	1px `--g03`	공고 줄 사이에만

칩

보고 싶은 직무를 고르는 토글이에요. 여러 개를 함께 켤 수 있어요.

레이블레이블레이블레이블

꺼짐 · 켜짐

상태	바탕	글자	크기
꺼짐	`--g02`	`--g07` · Medium	높이 32 · 모서리 16 · 좌우 12 · 14px
켜짐	`--blue`	`#FFFFFF` · SemiBold	높이 32 · 모서리 16 · 좌우 12 · 14px

체크박스

찜할 기업 · 계열사를 고를 때 써요. 상자가 작아도 줄 전체를 눌러 켜고 끌 수 있어요.

네이버클라우드네이버제트켜짐 · 꺼짐

상태	상자	글자
꺼짐	22px · 모서리 6 · 2px `--g04` 테두리	14px `--g06`
켜짐	`--blue` 채움 + 흰 체크	14px `--g09`
누르는 영역	줄 높이 44 이상

토스트

방금 일어난 일이나 알아 두면 좋은 점을 화면 아래에 잠깐 알려요. 다음 행동을 막지 않아요.

방금 일어난 일이나 다음에 할 일을 한두 문장으로 알려요

이름	값	쓰는 곳
바탕	반전 색	라이트 `#1B1D1F` · 다크 `#343639`
모양	모서리 16 · 안쪽 여백 12 / 16	화면 아래에서 18px 위, 폭은 화면 폭 − 36
글자	14 · Medium	결과나 다음에 할 일을 한두 문장으로
등장	0.2s	8px 아래에서 올라오며 나타나요

안내 창

처음 들어왔을 때 화면 아래에서 올라오는 창이에요. 가로로 넘기는 그림 몇 장과 닫기 버튼으로 이뤄져요.

작은 제목큰 제목은
두 줄까지레이블 ›

보조 글자레이블

이름	값	쓰는 곳
창	위 모서리 24 · 최대 폭 430	아래에서 0.3s ease-out으로 올라와요. 뒤는 검정 45%로 어둡게
그림	1 : 1	가로로 넘겨요. 오른쪽 아래에 몇 번째 장인지
버튼	Tertiary + Ghost	Primary가 없는 화면이라 닫기는 Tertiary, 더 알아보기는 Ghost
강조	3초 뒤 · 1.6s 돌고 1.6s 쉼	닫기 테두리에 빛이 돌아요

여기에 담지 못한 세세한 정보는 내부 문서로 관리해요. 구성은 당근 SEED Design System, 버튼 등급 이름은 IBM Carbon을 참고했어요.