1분 오피스 팁

1갤러리 열기0:16

디자인 시스템 갤러리는 유명 브랜드의 디자인 규칙을 무료로 내려받는 곳입니다. 열면 토스·넷플릭스·현대카드 같은 브랜드가 카드로 나와요.

오빠두 자료실의 「바로 쓰는 도구」에 [디자인 시스템 갤러리] 카드가 있습니다. 카드의 [둘러보기 →]를 누르면 열려요. 바로 가는 주소는 oppadu.com/tools/design-systems-site/입니다.

2브랜드 찾기— 검색 · 지역 · 테마0:25

왼쪽 위 검색창에 브랜드 이름을 넣으면 그 브랜드 카드만 남습니다. 영상에서 「삼성」을 넣자 242개이던 목록이 삼성페이·삼성 원 UI 2개로 줄었어요.

[지역]에서 한국·아시아·서양을, [테마 보기]에서 라이트·다크를 골라 거를 수도 있습니다. 영상은 [한국]을 고른 뒤 [다크]를 눌러 다크 모드 디자인만 남겼어요.

3시스템 가이드 받기0:34

상세 페이지의 [시스템 가이드 다운로드]를 누르면 색·글꼴·간격 같은 디자인 규칙을 정리한 .md 파일을 받습니다. 상세 페이지는 브랜드 카드를 누르면 열려요. 영상에서는 카카오뱅크를 골라 「kakao-bank-dark.md」를 받았습니다.

상세 페이지 아래쪽 「디자인 시스템 적용 예시」에서 그 브랜드 디자인이 어떤 모양인지 먼저 볼 수 있습니다.

4AI 대화창에 첨부0:41

ChatGPT·클로드 등 평소 쓰던 AI의 대화창에 받은 가이드 파일을 첨부합니다. AI에게 그 브랜드의 디자인 규칙을 알려 주는 단계예요.

영상에서는 브라우저 다운로드 목록의 파일을 클로드 입력창으로 끌어다 놓았습니다.

5프롬프트 고치기— 브랜드 · 지시사항0:44

프롬프트는 쇼츠 글 본문에 있습니다. 대화창에 붙여 넣고 맨 위 「■입력 변수■」에서 브랜드와 지시사항만 고칩니다. 브랜드에는 회사 이름을, 지시사항에는 더 전할 말을 적어요.

작업모드는 하나만 남깁니다. 기존 슬라이드를 함께 첨부해 디자인만 바꿀 땐 「리디자인」, 새로 만들 땐 「신규」예요. 영상에서는 브랜드를 「카카오금융」으로 바꾸고, 지시사항에 「임원 보고용 슬라이드입니다. 숫자를 강조해서 장점이 부각되도록 생성하세요.」를 넣었습니다.

6실행하고 결과 보기0:49

프롬프트를 보내면 첨부한 가이드의 디자인대로 슬라이드가 만들어집니다. 영상에서는 같은 보고서가 카카오뱅크 디자인으로 바뀌었어요.

이 프롬프트는 결과를 HTML 파일 하나로 요청합니다. ← → 키로 넘겨 보고, PDF로 저장하면 슬라이드 한 장이 한 쪽이 됩니다. 신규로 만들면 AI는 지어내야 하는 숫자·이름을 「[매출액]」처럼 대괄호로 비워 둡니다.

가이드 없이 만들면 어떻게 나오나요?

같은 보고서를 가이드 없이 만든 표지입니다. 분홍·보라 그라데이션이 들어간, 흔히 보는 AI 풍이에요.

7웹페이지에도 쓰기0:54

시스템 가이드로 웹페이지도 그 브랜드 스타일로 만들 수 있습니다. 영상에서는 갤러리에서 「나이키」를 검색하고, 그 가이드로 클로드에서 「나이키 러너 쇼케이스」 웹페이지를 만들었어요.