papatto 디자인 가이드

papatto는 작은 일을 빠르게 끝내기 위한 도구 모음입니다. 이 페이지는 papatto의 화면과 문장을 맞추기 위한 규칙을, 사이트에서 실제로 쓰는 값 그대로 정리한 것입니다. 로고가 필요하면 ‘로고’에서 내려받을 수 있습니다.

기본 규칙

papatto의 모든 화면은 이 약속 위에 만듭니다. 약속을 지킬 수 없는 방식으로는 만들지 않습니다.

광고 없음
배너도 동영상 광고도 두지 않습니다. 작업에 방해되는 것을 화면에 내보내지 않습니다.
업로드 없음
이미지와 파일, 입력한 글자는 사용하는 사람의 기기 안에서만 처리합니다. 글꼴과 라이브러리도 함께 담아, 사용하는 동안 외부 서버에서 불러오지 않습니다.
가입 불필요
계정도 설치도 필요 없습니다. 열면 바로 쓸 수 있습니다.
금방 끝나기
도구 하나는 일 하나에 집중합니다. 모두가 쓰는 기능은 넣고, 거의 쓰지 않는 기능은 넣지 않습니다.

브랜드 구성

papatto는 만든 이 Hoshimado의 작품 중 하나입니다. 이름과 색은 papatto의 것이며, Hoshimado의 색으로 바꾸지 않습니다.

푸터 맨 아래 줄의 오른쪽 끝에 ‘by Hoshimado’ 서명을 넣습니다. 색은 은은한 글자색(muted)입니다.
SNS 공유 이미지에는 왼쪽 아래 모서리에 같은 서명을 은은한 색으로 넣습니다.
서명은 헤더에 두지 않고, 한 화면에 하나만 둡니다. papatto 로고보다 크게 하지 않습니다.
다른 사이트에 삽입한 화면에는 서명을 넣지 않고, 출처는 ‘papatto에서 열기’ 띠만으로 표시합니다.

서명의 높이는 16px입니다. 옆의 저작권 표시 글자가 12px이라서, Hoshimado 가이드의 ‘서명 글자의 높이를 옆의 저작권 표시 글자에 맞춘다(대략 높이 16~20px)’에 따라 작은 쪽으로 했습니다(by Hoshimado 규칙).

Hoshimado 가이드와의 관계

papatto는 Hoshimado 가이드의 ‘말투’와 ‘접근성’ 장을 따릅니다. 색·이름·로고는 papatto 자신의 것을 씁니다.

Hoshimado 자체의 규칙은 Hoshimado 디자인 가이드에 있습니다.

말투

누가 읽어도 헷갈리지 않는 평범한 말로 씁니다.

존댓말로, 짧은 문장으로 씁니다. 한 문장에는 한 가지만 씁니다.
전문 용어나 낯선 외래어는 피하고, 일상적인 말로 바꿔 씁니다.
버튼에는 누르면 하는 동작을 씁니다(‘파일 선택’, ‘PDF 다운로드’). 탭이나 전환의 선택지는 명사 그대로 둡니다(‘PNG’, ‘세로’).
설명에는 화면에 보이는 말을 그대로 씁니다. 버튼 이름과 설명의 말을 한 글자도 다르지 않게 맞춥니다.
오류 문장에는 무슨 일이 있었는지와 어떻게 하면 되는지를 씁니다(‘그 날짜는 없습니다. 연·월·일을 확인해 주세요.’).
화면 문구에는 느낌표와 이모지를 쓰지 않습니다.
할 수 없는 일도 숨기지 않습니다. 근거 없는 최상급(‘가장 빠른’, ‘최고의’)이나 안심시키는 말보다 ‘어디에도 보내지 않습니다’ 같은 사실을 씁니다.
문구는 10개 언어로 쓰고, 일본어를 원문으로 합니다. 번역은 직역이 아니라 그 언어에 자연스러운 말로 씁니다.

이렇게	이렇게 쓰지 않기
파일 선택	업로드하기
PNG로 변환	PNG 포맷으로 컨버트
저장했어요	처리가 정상적으로 완료되었습니다!
파일을 열 수 없었어요. 다른 파일을 선택해 주세요.	오류가 발생했습니다
입력한 숫자는 어디에도 보내지 않습니다	최첨단 보안으로 안심

로고

로고는 왼쪽의 마크(주황색 원과 선 세 개)와 글자로 이루어져 있습니다. 일본어 페이지는 ‘ぱぱっと’, 다른 언어는 ‘papatto’를 씁니다.

밝은 배경

어두운 배경

색은 바꾸지 않고 씁니다. 밝은 배경에는 글자가 검정에 가까운 판, 어두운 배경에는 글자가 흰색에 가까운 판을 씁니다.
사이트 안에서는 로고를 그리는 부품(Logo)을 씁니다. 색은 토큰에서 가져오므로 라이트와 다크에서 자동으로 바뀝니다.

하지 말아야 할 것

색을 바꾸거나 그라데이션을 넣기
모양을 찌그러뜨리거나 돌리거나 그림자 넣기
마크와 글자의 간격이나 배치를 바꾸기
사진이나 무늬 위 등 읽기 어려운 곳에 두기

다운로드

색

차분하고 따뜻한 색 위에 강조색 주황 한 가지만 씁니다. 모든 색은 라이트와 다크 두 값을 가지며, 화면 색 설정에 따라 바뀝니다.

--bg페이지 배경라이트#fffcf6다크#17140f
--surface카드·입력란·단계 상자라이트#ffffff다크#201c16
--surface-hover마우스를 올렸을 때·은은한 면라이트#fff6e6다크#2a241b
--fg본문과 제목라이트#26211b다크#f3eee6
--muted보충 설명·주석라이트#6b6157다크#aaa093
--line구분선·카드 테두리라이트#ece4d6다크#342e25
--control입력란·전환·선 버튼·색 동그라미의 윤곽라이트#998c7e다크#776d5f
--slider슬라이더의 손잡이와 홈라이트#c97a00다크#f7b13c
--accent주요 버튼·선택 표시·완료 표시라이트#f5a524다크#f7b13c
--accent-strong포커스 테두리·링크·켜진 표시의 글자라이트#9c5e00다크#f7b13c
--accent-fg주황색 위의 글자라이트#2b1a00다크#2b1a00
--gain수지의 플러스라이트#2e7d32다크#74d27a
--loss수지의 마이너스·오류 문장(text-danger)라이트#c0392b다크#f4806f

대비

색과 배경의 비율입니다. 글자색은 4.5:1 이상, 조작 부품의 윤곽(control)은 3:1 이상을 기준으로 하며, 두 테마 모두 충족합니다.

	기준	라이트	다크
`fg / bg`	4.5:1	15.6:1	15.9:1
`muted / bg`	4.5:1	5.9:1	7.1:1
`muted / surface`	4.5:1	6.0:1	6.6:1
`accent-strong / bg`	4.5:1	5.1:1	9.9:1
`accent-fg / accent`	4.5:1	8.2:1	9.0:1
`gain / surface`	4.5:1	5.1:1	9.1:1
`loss / surface`	4.5:1	5.4:1	6.6:1
`control / bg`	3:1	3.2:1	3.6:1
`control / surface`	3:1	3.3:1	3.3:1

주황(accent)으로 칠하는 것은 주요 버튼·켜진 스위치·단계 번호·선택한 것의 표시입니다. 장식으로 칠하지 않습니다.
진한 주황(accent-strong)은 포커스 테두리, 푸터의 ‘모두 보기’ 같은 링크, 켜진 표시의 글자에 씁니다. 오류에는 쓰지 않습니다.
오류 문장은 빨간색(text-danger. 수지의 마이너스와 같은 색)으로 합니다.
입력란·전환·선 버튼·색 동그라미의 윤곽은 control, 카드와 구분선은 line으로 그립니다.
슬라이더만 slider 색으로 칠합니다(accent-strong으로 하면 아직 움직이지 않은 쪽의 홈이 배경과 3:1에 미치지 못하기 때문).
주황으로 칠한 주요 버튼은 한 단계에 하나만 둡니다.
색은 CSS 토큰으로 씁니다. 토큰으로 쓰면 라이트와 다크 모두에 적용됩니다.

글자

제목은 둥근 글꼴, 본문은 읽기 쉬운 고딕체입니다. 글꼴은 사이트 안에서 내려보내며, 외부 서버에서 불러오지 않습니다.

M PLUS Rounded 1c제목(일본어와 라틴·키릴 문자 언어)
Noto Sans JP본문(일본어와 라틴·키릴 문자 언어)
Noto Sans KR・SC・Arabic한국어·중국어·아랍어의 제목과 본문

크기

작은 일을, 빠르게.30px · text-3xl 페이지 제목(PC)
작은 일을, 빠르게.24px · text-2xl 페이지 제목(휴대폰)·큰 묶음의 제목
작은 일을, 빠르게.18px · text-lg 단계 상자의 제목
작은 일을, 빠르게.16px · text-base 본문·휴대폰의 입력란
작은 일을, 빠르게.14px · text-sm 보충 설명·PC의 입력란
작은 일을, 빠르게.12px · text-xs 주석·푸터

숫자와 영문은 반각으로 씁니다. 숫자를 나열하는 표나 카운터는 자릿수가 맞는 숫자(tabular-nums)를 씁니다.
휴대폰 입력란의 글자는 16px로 합니다(iPhone에서 입력할 때마다 화면이 확대되지 않도록).

레이아웃·여백·모서리

휴대폰부터 먼저 만들고, PC에서는 좌우로 넓힙니다. 여백은 4px 단위이며, 쓰는 단계를 줄여 두었습니다.

여백 단계

4・8px · gap-1・gap-2부품 안(아이콘과 글자, 제목과 그 아래 설명)
8px · gap-2가로로 나란한 것(작은 버튼, 태그)
16px · gap-4가까운 요소끼리(세로로 쌓은 버튼, 카드 목록)
32px · gap-8묶음끼리(단계 상자끼리, PC의 좌우 열)
48px+ · gap-12・gap-16・gap-24페이지의 단끼리(약속 단과 도구 목록)
16 / 24・32px · p-4・sm:p-6・sm:p-8상자 안쪽(휴대폰 16px, PC 24·32px)

모서리 둥글기

rounded-full버튼·전환·태그
rounded-xl입력란·작은 면
rounded-2xl카드·단계 상자
rounded-3xl큰 안내 상자

4·8·16·24·32·48px 단계는 요소 사이의 간격과 상자 안쪽 여백에 씁니다. 망설여지면 ‘가까우면 16, 묶음은 32’.
부품 안의 작은 여백(표시의 위아래, 버튼의 좌우 등)은 예외로, 2·6·10·12px 같은 단계 밖의 값도 씁니다.
페이지 폭은 최대 1152px, 읽을거리는 672px에서 줄바꿈합니다. 좌우 여백은 휴대폰에서 16px입니다.
360px(가능하면 320px) 폭에서도 옆으로 넘치지 않게 합니다.

움직임

움직임은 무슨 일이 일어났는지 알리는 데만 씁니다. 짧게, 튀지 않게.

페이지를 옮길 때는 내용이 옆에서 살짝 미끄러지며 나타납니다(0.2~0.3초). 돌아갈 때는 반대쪽에서 나타납니다.
화면 색을 바꿀 때는 이전과 다음 화면을 0.3초 동안 겹쳐서 바꿉니다.
저장했을 때의 알림은 아래에서 나타나 아래로 사라집니다.
사용법 동영상은 화면에 보이는 동안만 재생하고, 벗어나면 멈춥니다.
기기에서 ‘동작 줄이기’를 켜면 움직임을 멈추고 결과를 바로 보여 줍니다.

부품

버튼·전환·입력란은 공통 부품을 쓰고, 도구 안에서 모양을 따로 쓰지 않습니다. 같은 역할은 어느 도구에서나 같은 모양입니다.

PrimaryButton단계의 중요한 버튼. 주황색은 한 단계에 하나만
SecondaryButton주요 버튼 아래에 두는 선 버튼
SmallButton곁에 두는 작은 조작(복사·되돌리기)
IconButton아이콘만 있는 둥근 버튼. 읽어 줄 이름을 꼭 붙이기
SegmentedControl2~4개 중 하나를 고르는 전환
형식
Switch바로 적용되는 켜기·끄기
원래 크기로 저장
ToggleButton좁은 띠에 늘어놓는 켜기·끄기. 켜지면 주황 테두리와 표시
TextField한 줄 입력란. 제목은 입력란 위에
이름
ColorSwatches자주 쓰는 색 동그라미와, 다른 색을 고르는 무지개색 동그라미
색
다른 색#e53935
CardButton・CardLink전체를 누를 수 있는 작은 카드
Badge상태를 짧게 알리는, 누를 수 없는 표시
유효만료

상태

잘못 입력된 입력란은 테두리를 빨갛게 하고(aria-invalid), 입력란 아래에 고치는 방법을 빨간 글자로 씁니다. 포커스가 있는 동안 입력란의 테두리는 진한 주황이 됩니다.
눌러서 전환하는 버튼(ToggleButton, aria-pressed를 붙인 IconButton)은 켜져 있는 동안 주황 테두리와 옅은 주황 바탕이 됩니다. 문구와 읽어 주는 이름은 바꾸지 않습니다.
색 동그라미는 지름 32px이고 8px 띄워 늘어놓습니다. 모든 동그라미에 1px 윤곽(control)을 붙이고, 고른 동그라미에는 2px 고리를 2px 떨어뜨려 그립니다.
색 동그라미는 라디오 버튼 묶음이며 화살표 키로 고를 수 있습니다. 화면 낭독기에는 ‘빨간색 (#E53935)’처럼 색 이름을 전합니다.

크기 단계

버튼과 누를 수 있는 부품은 높이 단계로 정합니다. 단계 이름은 Hoshimado 가이드의 ‘버튼’ 장에 맞췄습니다.

단계	높이	부품	쓰임
`xl`	56px	`PrimaryButton xl・SecondaryButton xl / stage`	작은 도구 무대의 가장 중요한 조작(돌리기·시작)
`lg`	48px	`PrimaryButton lg`	단계의 마지막 주요 버튼(다운로드·저장)
`md`	44px	`PrimaryButton md・SecondaryButton・ChangeFileButton・TextField・Select`	표준. 입력란·선택란과 같은 높이. 주요 버튼 아래의 선 버튼과 파일을 다시 고르는 버튼도
`sm`	36px	`PrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField sm`	곁에 두는 작은 조작(복사·되돌리기)과 켜기·끄기. 휴대폰 편집 화면 위의 ‘저장’도
`icon`	44px	`IconButton lg`	아이콘만. 손가락으로 자주 누르는 곳(행 지우기·전체 화면 닫기)
`icon-sm`	36px	`IconButton`	아이콘만. 결과 옆의 복사 등
`icon-xs`	32px	`ColorField (×)・Thumbnails / ImageStrip (×)`	입력란 안의 ×·미리보기 이미지의 ×
`swatch`	32px	`ColorSwatches`	색을 고르는 동그라미

배치

한 묶음의 조작 안은 8px 띄웁니다.
들어가지 않으면 다음 줄로 넘깁니다. 전환(SegmentedControl)은 들어가지 않으면 세로로 쌓습니다.
주요 버튼은 단계의 마지막에 둡니다.

아이콘·사용법 동영상

아이콘은 선 그림, 사용법은 실제 화면을 찍은 동영상으로 보여 줍니다.

도구 아이콘은 모서리가 둥근 사각형 안의 선 그림입니다. 색은 글자와 같고 주황색은 쓰지 않습니다(나열했을 때 산만하지 않도록).
변환 도구는 아이콘 안에 결과 형식(PNG 등)을 작게 덧붙입니다.
사용법은 단계마다 실제 화면을 찍은 짧은 동영상으로 보여 줍니다. PC는 브라우저 틀, 휴대폰은 휴대폰 틀에 넣습니다.
동영상에서는 누르는 곳을 주황색 테두리로 둘러쌉니다.
단계 설명에는 화면의 말을 그대로 쓰고, 어디를 누르면 무엇이 일어나는지 씁니다.

공개 전 확인

새 화면을 내기 전에 다음을 확인합니다.

광고·업로드·외부 서버로의 통신이 들어 있지 않다
PC와 휴대폰, 라이트와 다크, 일본어·영어·아랍어로 보고 360px에서 옆으로 넘치지 않는다
주황색 주요 버튼이 한 단계에 하나뿐이다
요소 사이와 상자 안쪽의 여백이 정해진 단계이고, 부품은 공통의 것을 쓴다
버튼에 동작이 쓰여 있고 느낌표와 이모지가 없다. 오류 문장은 빨간색이고 어떻게 하면 되는지 쓰여 있다
10개 언어 문구가 갖춰져 있고, 버튼 이름과 설명의 말이 일치한다
사용법 단계 설명을 처음 쓰는 사람의 입장에서 읽어도 헷갈리지 않는다