페이플 디자인시스템은 클로드 앱에서 만들었습니다. 홈페이지, 개발자센터, 결제창 주소를 넘기고 "디자인시스템으로 정리해 줘"라고 한 것이 시작입니다.
디자인시스템은 색, 타이포그래피, 버튼, 문구처럼 화면을 만들 때 지키는 약속을 한곳에 모은 것입니다. 지금 페이플 디자인시스템에는 색 토큰, Pretendard 타이포그래피, 컴포넌트, 아이콘 41개, 로고와 카피 원칙이 담겨 있고, 제품 화면에는 하나씩 적용하고 있습니다.
홈페이지·개발자센터·결제창을 넘기며 시작했습니다
새로 그리지 않았습니다. 파트너와 고객이 이미 보고 있는 세 화면의 주소를 클로드 앱에 넘기고 "디자인시스템으로 정리해 줘"라고 했습니다.
콘텐츠가 많아 화면을 하나씩 캡처하지 않고 주소만 줬습니다. 클로드가 주소 속 화면을 읽고 필요한 값을 꺼냈습니다.
홈페이지(그림자, 버튼 문구), 개발자센터(어두운 배경, 코드 블록), 결제창(무채색, 퍼플 버튼, 큰 금액)을 클로드 앱에 넘기면 값을 모으고, 토큰을 만들고, 규칙을 쓰고, 컴포넌트를 그려 색 57개, 타이포그래피 12개, 컴포넌트 19가지, 아이콘 41개, 규칙 문서 13개 주제의 디자인시스템이 나오는 그림
클로드가 초안을 만든 순서
1.
값을 모읍니다. 세 화면에 흩어져 있던 색, 타이포그래피, 그림자, 모서리 값을 한곳에 모았습니다.
2.
토큰을 만듭니다. 화면마다 조금씩 다르던 퍼플은 brand 하나로 맞추고, 색마다 ink(글자), surface(면) 같은 토큰 이름을 붙였습니다.
3.
규칙을 씁니다. "퍼플은 마지막 버튼에만"처럼 화면에서 지켜 온 방식을 문장으로 적었습니다. 지금은 카피 원칙, 색, 타이포그래피, 숫자 표기, 경고·알림, 로고와 아이콘 등 13개 주제로 나뉩니다.
4.
컴포넌트를 그립니다. 버튼, 입력칸, 표, 배너, 확인창 같은 컴포넌트를 규칙대로 그려 앱 안 미리보기로 바로 보여 줬습니다.
초안을 받은 뒤에는 미리보기를 보며 말로 다듬었습니다.
클로드 앱 대화 예시 화면: "퍼플은 마지막 버튼 하나에만 쓰고, 선택은 검정으로 해 주세요"라고 요청하면 클로드가 규칙에 넣고, 오른쪽 미리보기에 검정으로 채운 결제수단 세그먼트와 퍼플 1,004원 결제하기 버튼을 보여 줌
말로 고칩니다. "버튼 모서리를 더 둥글게"처럼 말하면 다시 그립니다. 디자인 용어를 몰라도 됩니다.
말로 정한 규칙이 그대로 디자인 규칙이 됩니다
대화에서 정한 내용은 흩어지지 않고 문서에 규칙으로 남습니다.
디자인시스템 문서 예시 화면: 왼쪽에 색·타이포그래피·숫자 표기·카피 원칙·로고와 아이콘 메뉴, 오른쪽에 brand #7852E8(마지막 버튼에만), ink #121212(글자·선택 상태), surface-subtle #F5F5F5(요약·교차 영역) 색 견본
•
퍼플은 마지막 버튼 하나에만. 선택 상태는 퍼플이 아니라 검정(ink)으로 표시합니다.
•
타이포그래피는 Pretendard 한 가지. 금액은 크고 굵게 한 번만 씁니다.
•
문구는 합니다체. 버튼에는 "결제하기"처럼 결과를 씁니다.
실제 디자인시스템을 그대로 보여 드립니다
아래 6장은 예시 화면이 아니라 실제 디자인시스템의 토큰과 컴포넌트입니다. 원본의 색, 글자 크기, 모서리, 그림자 값을 그대로 썼고, 그림 속 금액과 문구만 예시입니다.
페이플 디자인시스템 실제 색 토큰: ink #121212, ink-body #45454D, ink-muted #6B6B73, border #DDDDDD, surface-subtle #F5F5F5, brand #7852E8, brand-tint #EFEBFF, success #24B47E, warning-bg #FCEDB9, error #DC143C, info-bg #D6ECFF, surface #FFFFFF 색 견본
색은 토큰으로만 칠합니다. 색값을 직접 쓰지 않고 ink, surface, brand 같은 토큰을 써서 화면마다 색이 달라지지 않습니다.
실제 버튼과 배지(금액과 문구는 예시): 퍼플 Primary 1,004원 결제하기 버튼, PG 가입 문의하기·로그인·월렛 시작하기·요금 보기·개발 문서 보기·비활성 결제하기 버튼, 결제완료·정산대기·결제실패·부분취소·미사용·월렛 배지
버튼은 모두 알약 모양입니다. 퍼플 Primary 버튼은 화면당 하나만 두고, 나머지 행동에는 검정 dark, 회색 fill, ghost, 문장 속 link 버튼을 씁니다. 그림은 버튼 종류를 한데 모은 견본이라 퍼플 버튼이 두 개 보입니다. 거래 상태는 배지 색으로 구분합니다.
실제 체크박스·라디오·토글·세그먼트·입력칸(문구는 예시): 선택된 상태는 검정으로 표시하고, 틀린 사업자등록번호는 빨간 테두리와 필드 아래 오류로 알림
선택된 상태는 모두 검정(ink)입니다. 체크박스, 라디오, 토글, 세그먼트가 같은 규칙을 따르고, 선택 컨트롤에서 퍼플은 포커스 링에만 씁니다. 틀린 입력값은 필드 아래 오류로 알립니다.
실제 배너·콜아웃·토스트(문구는 예시): 서류 확인 주의 배너, 테스트 결제 일반 배너, 저장 안내 콜아웃, 결제 링크 복사·환불 요청·저장 실패 토스트
경고·알림은 상황에 맞는 하나만 씁니다. 해결해야 할 문제는 화면 맨 위 배너, 한 카드·섹션에만 해당하는 안내는 콜아웃, 방금 누른 버튼의 결과는 토스트로 알립니다.
실제 확인창과 바텀시트(금액과 문구는 예시): 128,000원을 환불할까요? 확인창에 결제일시·결제수단·주문번호·환불 금액 요약과 취소·환불하기 버튼, 좁은 화면에서는 결제 링크 취소를 묻는 바텀시트
되돌릴 수 없는 행동은 확인창으로 한 번 더 묻습니다. 제목은 질문형으로, 실행 버튼에는 "확인" 대신 "환불하기"처럼 동사를 쓰고, 되돌릴 수 없거나 돈이 나가는 실행은 빨간 danger 버튼으로 둡니다. 좁은 화면에서는 바텀시트로 바뀝니다.
페이플 디자인시스템 실제 아이콘 41개: 카드, 은행, 이체, 휴대폰, 해외, 월렛, 링크, QR, 영수증 등 24px 격자에 선 1.75px로 그린 아이콘 세트
아이콘은 24px 격자에 선 1.75px로 그린 41개만 씁니다. 다른 아이콘 세트를 섞지 않아 어느 화면에서나 한 세트로 보입니다.
고칠 때도 앱 안에서 끝납니다
최근 더한 "페이플 블로그" 로고도 시안부터 규칙 추가까지 클로드 앱에서 했습니다.
실제로 받은 블로그 로고 시안 세 가지: A 구분선 뒤 회색 블로그, B 퍼플 알약 안의 흰색 블로그(고른 시안), C 퍼플 글자 블로그
•
시안 세 가지 중 하나를 골랐습니다. 퍼플 알약 안에 흰색 "블로그"를 넣은 시안입니다.
•
배경별로 맞췄습니다. 밝은 배경, 어두운 배경, 퍼플 배경용을 같이 만들었습니다.
•
규칙에 한 줄 더했습니다. 어떤 배경에 어떤 로고를 쓰는지 적었습니다.
고른 시안을 배경에 맞춘 로고 세 가지: 밝은 배경용, 어두운 배경용 반전 로고, 퍼플 배경용 흰색 단색 로고
블로그 표지와 그림도 같은 규칙을 따릅니다
제품 화면에는 차례로 적용하고 있고, 블로그에는 이미 쓰고 있습니다.
디자인시스템(색·타이포그래피·카피·로고) 하나에서 블로그 표지(바탕색 하나), 본문 그림(옅은 회색 면), 로고(배경에 맞게)로 이어지는 그림
•
표지. 색 토큰 중 바탕색 하나를 골라 굵은 제목 두 줄을 올립니다.
•
본문 그림. 옅은 회색 면에 흰 카드를 놓고, 퍼플 버튼은 하나만 둡니다.
•
로고. 배경에 맞는 로고를 씁니다.
실제로 발행된 페이플 블로그 표지 네 장: surface-subtle 바탕의 MCP 정기결제 실습 글, surface-inverse 바탕의 페이플 MCP 출시 글, brand-tint 바탕의 페이플 월렛 글, brand 퍼플 바탕의 해외카드 결제 글 표지
위 네 장은 실제로 발행된 글의 표지입니다. 바탕색만 다르고, 글자 크기와 자리, 아래 Payple 표기는 모두 같습니다.
글마다 디자인을 새로 정하지 않아도 페이플 콘텐츠는 같은 모습으로 나옵니다.
자주 묻는 질문
Q. 디자인을 잘 몰라도 디자인시스템을 만들 수 있나요?
A. 네. 지금 쓰는 화면의 주소를 넘기는 것으로 시작하면 됩니다. 페이플도 그 뒤로는 미리보기를 보며 말로 하나씩 고쳤습니다.
Q. 클로드가 만든 디자인을 그대로 쓰나요?
A. 아닙니다. 클로드는 시안과 미리보기를 만들고, 어느 것을 쓸지는 사람이 고릅니다.
Q. 페이플 제품에는 모두 적용됐나요?
A. 아직 아닙니다. 제품 화면은 하나씩 바꾸고 있고, 블로그 표지와 그림은 이미 이 디자인시스템을 따릅니다.